:root {
    --ink-950: #0c2025;
    --ink-900: #132a2f;
    --ink-800: #1c373c;
    --ink-700: #315158;
    --ink-600: #526c71;
    --ink-500: #71868a;
    --ink-300: #b9c5c6;
    --ink-200: #d9e0df;
    --ink-100: #edf1ef;
    --paper: #fffdf8;
    --surface: #ffffff;
    --canvas: #f6f5ef;
    --mint: #9ee6cd;
    --mint-soft: #e2f7ef;
    --teal: #167d70;
    --teal-dark: #0d665c;
    --lime: #ccf06b;
    --coral: #ed795d;
    --coral-soft: #fdeae4;
    --sun: #f5c95a;
    --sun-soft: #fff5d8;
    --lilac: #a894d7;
    --lilac-soft: #f0ebfb;
    --blue: #5f86d8;
    --danger: #c84d4d;
    --danger-soft: #feebea;
    --success: #167d57;
    --success-soft: #e3f6ed;
    --warning: #9c6712;
    --warning-soft: #fff2d4;
    --info: #3f67aa;
    --info-soft: #eaf0fc;
    --sidebar-width: 270px;
    --topbar-height: 84px;
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;
    --shadow-sm: 0 1px 2px rgba(12, 32, 37, .05), 0 8px 22px rgba(12, 32, 37, .04);
    --shadow-md: 0 16px 45px rgba(12, 32, 37, .11);
    --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --transition: 180ms cubic-bezier(.2, .8, .2, 1);
  }

  h1, h2, h3, p { margin-top: 0; }
  h1, h2, h3 { letter-spacing: -.025em; line-height: 1.16; }
  .is-hidden, [hidden] { display: none !important; }

  .brand-lockup { display: inline-flex; align-items: center; gap: 11px; color: var(--ink-950); font-size: 1.1rem; font-weight: 850; letter-spacing: -.02em; text-decoration: none; }
  .brand-lockup--light { color: #fff; }
  .brand-mark { display: inline-grid; place-items: center; width: 39px; height: 39px; flex: 0 0 auto; border-radius: 13px; background: var(--lime); color: var(--ink-950); font-size: 1.15rem; font-weight: 900; letter-spacing: -.08em; transform: rotate(-4deg); box-shadow: inset 0 -3px 0 rgba(12, 32, 37, .12); }
  .brand-mark > span { transform: rotate(4deg); }
  .brand-mark--large { width: 62px; height: 62px; border-radius: 20px; font-size: 1.7rem; }

  .initial-loader.is-leaving { opacity: 0; visibility: hidden; }
  @keyframes loaderBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-7px); opacity: 1; } }

  .auth-visual__content > .brand-lockup { position: absolute; bottom: calc(100% + clamp(80px, 9vh, 130px)); left: 0; }
  .auth-panel__inner > .muted { margin-bottom: 34px; }

  .field label, .compact-field label { color: var(--ink-800); font-size: .8rem; font-weight: 750; }
  .label-row > span { color: var(--ink-500); font-size: .72rem; }
  input, select, textarea { width: 100%; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); }
  input, select { min-height: 46px; padding: 0 13px; }
  input:hover, select:hover, textarea:hover { border-color: var(--ink-300); }
  input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
  .field-error { min-height: 0; color: var(--danger); font-size: .76rem; }
  .field-error:empty { display: none; }

  .button--icon { width: 44px; padding: 0; flex: 0 0 auto; }
  .icon-button:hover:not(:disabled) { background: var(--ink-100); color: var(--ink-950); }
  .icon-button--dark:hover:not(:disabled) { background: rgba(255,255,255,.09); color: #fff; }
  .text-button { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 0; background: transparent; color: var(--teal); font-size: .78rem; font-weight: 750; }
  .text-button svg { width: 15px; height: 15px; }

  .nav-label:first-child { margin-top: 3px; }
  .nav-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(204, 240, 107, .12); }
  .avatar--small { width: 32px; height: 32px; border-radius: 10px; font-size: .65rem; }
  .avatar--large { width: 68px; height: 68px; border-radius: 21px; font-size: 1.15rem; }
  .sidebar-backdrop { display: none; }

  .notification-button { position: relative; border: 1px solid var(--ink-200); background: var(--surface); }
  .notification-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 2px solid var(--surface); border-radius: 50%; background: var(--coral); }
  .profile-chip { display: flex; min-height: 42px; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--ink-200); border-radius: 13px; background: var(--surface); color: var(--ink-800); font-size: .78rem; font-weight: 700; }
  .profile-chip > svg { width: 15px; height: 15px; margin-left: 2px; transform: rotate(90deg); }

  .page { animation: pageIn 240ms ease both; }
  @keyframes pageIn { from { opacity: 0; transform: translateY(5px); } }
  .page-intro--dashboard { align-items: flex-end; }
  .filter-bar { display: flex; align-items: flex-end; gap: 9px; padding: 8px; border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: rgba(255,255,255,.68); box-shadow: var(--shadow-sm); }
  .compact-field { display: grid; gap: 3px; min-width: 105px; }
  .compact-field label { padding-left: 6px; color: var(--ink-500); font-size: .64rem; }
  .compact-field select { min-height: 37px; padding: 0 32px 0 9px; border: 0; background-color: transparent; font-size: .76rem; font-weight: 700; box-shadow: none; }
  #dashboardUserField { min-width: 170px; }

  /* --- Changelog (Ustawienia) --- */
  .changelog-card { margin-top: 16px; padding: 20px 22px 22px; }
  .changelog-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
  .changelog-card__head h3 { margin: 0; }
  .changelog__badge { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--teal); color: #fff; font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .changelog__current { padding: 2px 8px; border-radius: 999px; background: var(--mint-soft); color: var(--teal-dark); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
  .kpi-card--mint { color: var(--teal); }
  .kpi-card--mint .kpi-card__icon { background: var(--mint-soft); }
  .kpi-card--peach { color: var(--coral); }
  .kpi-card--peach .kpi-card__icon { background: var(--coral-soft); }
  .kpi-card--sun { color: var(--warning); }
  .kpi-card--sun .kpi-card__icon { background: var(--sun-soft); }
  .kpi-card--lilac { color: #705aaa; }
  .kpi-card--lilac .kpi-card__icon { background: var(--lilac-soft); }
  .dashboard-grid { display: grid; grid-template-columns: minmax(290px, .78fr) minmax(440px, 1.22fr); gap: 17px; }
  .chart-card { min-height: 345px; }
  .donut-layout { display: flex; align-items: center; justify-content: space-evenly; gap: 27px; padding: 23px 28px 30px; }
  .donut-chart { position: relative; width: min(190px, 48%); aspect-ratio: 1; }
  .donut-chart svg { width: 100%; height: 100%; overflow: visible; }
  .donut-track, .donut-segment { fill: none; stroke-width: 13; }
  .donut-track { stroke: var(--ink-100); }
  .donut-segment { transition: stroke-dasharray 500ms ease, stroke-dashoffset 500ms ease; }
  .donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
  .donut-center strong { font-size: 2rem; line-height: 1; }
  .donut-center span { margin-top: 4px; color: var(--ink-500); font-size: .66rem; }
  .chart-legend { display: grid; gap: 12px; min-width: 116px; margin: 0; padding: 0; list-style: none; }
  .chart-legend li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; color: var(--ink-600); font-size: .72rem; }
  .chart-legend i { width: 9px; height: 9px; border-radius: 3px; }
  .chart-legend strong { color: var(--ink-900); font-size: .77rem; }
  .status-pill, .metric-chip { display: inline-flex; min-height: 27px; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
  .status-pill--success { background: var(--success-soft); color: var(--success); }
  .status-pill--danger { background: var(--danger-soft); color: var(--danger); }
  .status-pill--warning { background: var(--warning-soft); color: var(--warning); }
  .status-pill--neutral { background: var(--ink-100); color: var(--ink-600); }
  .metric-chip { background: var(--mint-soft); color: var(--teal); }
  .line-chart { min-height: 270px; padding: 16px 20px 15px 13px; }
  .line-chart > svg { width: 100%; height: 250px; overflow: visible; }
  .chart-grid-line { stroke: var(--ink-100); stroke-width: 1; }
  .chart-axis-label { fill: var(--ink-500); stroke: none; font-family: var(--font); font-size: 8px; }
  .chart-area { fill: url(#hoursGradient); stroke: none; }
  .chart-line { fill: none; stroke: var(--teal); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .chart-point { fill: var(--surface); stroke: var(--teal); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .activity-card, .balance-card { min-height: 225px; }
  .activity-list { display: grid; gap: 2px; padding: 15px 24px 22px; }
  .activity-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--ink-100); }
  .activity-item:last-child { border-bottom: 0; }
  .activity-item__icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: var(--mint-soft); color: var(--teal); }
  .activity-item__icon svg { width: 16px; height: 16px; }
  .activity-item strong { display: block; font-size: .76rem; }
  .activity-item small, .activity-item time { color: var(--ink-500); font-size: .66rem; }
  .balance-meter { padding: 27px 25px 25px; }
  .balance-meter__numbers { display: flex; align-items: baseline; gap: 9px; }
  .balance-meter__numbers strong { font-size: 2.8rem; letter-spacing: -.06em; line-height: 1; }
  .balance-meter__numbers span { color: var(--ink-600); font-size: .75rem; }
  .progress-track { height: 8px; margin: 24px 0 11px; overflow: hidden; border-radius: 999px; background: var(--ink-100); }
  .progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--mint)); transition: width 500ms ease; }
  .balance-meter__labels { display: flex; justify-content: space-between; color: var(--ink-500); font-size: .67rem; }
  .balance-meter__labels b { color: var(--ink-800); }

  .clock-layout { display: grid; grid-template-columns: minmax(340px, .8fr) minmax(440px, 1.2fr); gap: 20px; }
  .clock-card { position: relative; display: grid; min-height: 570px; place-items: center; align-content: center; padding: 45px; overflow: hidden; border-radius: var(--radius-lg); background: var(--ink-950); color: #fff; text-align: center; box-shadow: var(--shadow-md); }
  .clock-card::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 30px 30px; mask-image: radial-gradient(circle at center, #000, transparent 72%); }
  .clock-card__glow { position: absolute; width: 300px; height: 300px; border: 1px solid rgba(158,230,205,.16); border-radius: 50%; box-shadow: 0 0 0 55px rgba(158,230,205,.035), 0 0 0 110px rgba(158,230,205,.02); }
  .clock-card__date, .clock-card__time, .clock-state, .clock-button, .clock-card__hint { position: relative; z-index: 1; }
  .clock-card__date { margin-bottom: 5px; color: rgba(255,255,255,.56); font-size: .8rem; text-transform: capitalize; }
  .clock-card__time { font-size: clamp(3.25rem, 7vw, 5rem); font-weight: 750; letter-spacing: -.07em; line-height: 1.05; }
  .clock-state { display: inline-flex; align-items: center; gap: 8px; margin: 15px 0 33px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); font-size: .72rem; }
  .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(158,230,205,.1); }
  .clock-button { display: grid; width: 148px; height: 148px; place-items: center; align-content: center; gap: 11px; padding: 20px; border: 8px solid rgba(255,255,255,.08); border-radius: 50%; background: var(--lime); background-clip: padding-box; color: var(--ink-950); font-size: .78rem; font-weight: 850; box-shadow: 0 15px 35px rgba(0,0,0,.24); transition: transform var(--transition), box-shadow var(--transition), background var(--transition); }
  .clock-button:hover:not(:disabled) { transform: scale(1.035); box-shadow: 0 19px 45px rgba(0,0,0,.3); }
  .clock-button.is-clocked-in { background: var(--coral); color: #fff; }
  .clock-button svg { width: 28px; height: 28px; }
  .clock-card__hint { max-width: 300px; margin-top: 31px; color: rgba(255,255,255,.47); font-size: .7rem; }
  .clock-side { display: grid; align-content: start; gap: 20px; }
  .consent-card { padding: 26px; }
  .consent-card__icon, .security-card__icon { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 16px; border-radius: 15px; background: var(--mint-soft); color: var(--teal); }
  .consent-card > div:nth-child(2) p { max-width: 580px; color: var(--ink-600); font-size: .79rem; }
  .switch-row > span:first-child { display: grid; gap: 3px; }
  .switch-row strong { font-size: .77rem; }
  .switch-row small { color: var(--ink-500); font-size: .66rem; }
  .switch-row--bordered { margin: 22px 0; padding: 18px 0; border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
  .location-status { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ink-100); color: var(--ink-500); font-size: .7rem; }
  .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-300); }
  .location-status.is-success { color: var(--success); }
  .location-status.is-success .status-dot { background: var(--success); }
  .location-status.is-error { color: var(--danger); }
  .location-status.is-error .status-dot { background: var(--danger); }
  .timeline-list { padding: 16px 25px 26px; }
  .timeline-item { position: relative; display: grid; grid-template-columns: 80px 18px 1fr; gap: 12px; min-height: 56px; color: var(--ink-600); font-size: .74rem; }
  .timeline-item::before { content: ""; position: absolute; left: 88px; top: 21px; bottom: -6px; width: 1px; background: var(--ink-200); }
  .timeline-item:last-child::before { display: none; }
  .timeline-item time { color: var(--ink-900); font-weight: 750; }
  .timeline-item i { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 5px; border: 3px solid var(--surface); border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 1px var(--teal); }

  .search-field { position: relative; width: min(100%, 330px); }
  .search-field svg { position: absolute; top: 50%; left: 12px; width: 17px; height: 17px; color: var(--ink-500); transform: translateY(-50%); pointer-events: none; }
  /* input[type="search"] w selektorze: fundament (ładowany po styles.css) ustawia padding pól
     z tą samą siłą selektora i nadpisywał miejsce na lupę — tekst wchodził pod ikonę. */
  .search-field input, .search-field input[type="search"] { min-height: 40px; padding-left: 38px; background: var(--canvas); font-size: .78rem; }
  .search-field--compact { width: 100%; }
  .toolbar-filters select, .table-toolbar > select { width: auto; min-width: 120px; min-height: 40px; font-size: .76rem; }
  /* Tabele stylowane wspólnym komponentem .table z fundamentu — <table class="table">.
     hr nie trzyma własnych reguł th/td/tbody, żeby listy były spójne z audytem. */
  .skeleton-row { pointer-events: none; }
  .skeleton-line { display: block; width: min(100%, 110px); height: 11px; overflow: hidden; border-radius: 999px; background: var(--ink-100); }
  .skeleton-line::after { content: ""; display: block; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); animation: skeletonMove 1.2s infinite ease-in-out; }
  @keyframes skeletonMove { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
  .align-right { text-align: right; }
  .employee-cell { display: flex; min-width: 190px; align-items: center; gap: 10px; }
  .employee-cell > span:last-child { display: grid; }
  .employee-cell strong { font-size: .78rem; }
  .employee-cell small { color: var(--ink-500); font-size: .65rem; }
  .table-link { border: 0; background: transparent; color: var(--teal); font-size: .72rem; font-weight: 750; }
  .table-link--danger { color: var(--danger); }
  .segment-control { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--ink-100); }
  .segment-control button { min-height: 33px; padding: 5px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-600); font-size: .7rem; font-weight: 700; }
  .segment-control button.is-active { background: var(--surface); color: var(--ink-950); box-shadow: 0 1px 4px rgba(12,32,37,.09); }
  .pagination { display: flex; min-height: 58px; align-items: center; justify-content: flex-end; gap: 5px; padding: 10px 18px; border-top: 1px solid var(--ink-100); }
  .pagination:empty { display: none; }
  .pagination button { display: grid; min-width: 32px; height: 32px; place-items: center; padding: 0 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink-600); font-size: .7rem; }
  .pagination button:hover:not(:disabled) { background: var(--ink-100); }
  .pagination button.is-active { border-color: var(--ink-200); background: var(--surface); color: var(--ink-950); font-weight: 800; }
  .pagination span { padding: 0 7px; color: var(--ink-500); font-size: .68rem; }
  .empty-state h3 { color: var(--ink-800); font-size: .94rem; }
  .empty-state .button { margin-top: 16px; }
  .summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--ink-200); box-shadow: var(--shadow-sm); }
  .summary-strip > div { display: grid; gap: 3px; min-height: 89px; align-content: center; padding: 17px 21px; background: var(--surface); }
  .summary-strip span { color: var(--ink-500); font-size: .68rem; font-weight: 700; }
  .summary-strip strong { font-size: 1.25rem; }
  .summary-strip--three { grid-template-columns: repeat(3, 1fr); }
  .mini-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
  /* Karta „Terminy do pilnowania” nad kafelkami — ten sam odstęp co pod kafelkami. */
  .deadlines-block { margin-bottom: 18px; }
  .mini-kpi { display: flex; min-height: 88px; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--surface); }
  .mini-kpi i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--mint-soft); color: var(--teal); font-style: normal; }
  .mini-kpi i svg { width: 18px; height: 18px; }
  .mini-kpi span { display: block; color: var(--ink-500); font-size: .66rem; }
  .mini-kpi strong { font-size: 1.25rem; }

  .calendar-card { min-height: 280px; overflow: hidden; }
  .calendar-year { display: flex; align-items: center; gap: 12px; }
  .calendar-year button:first-child svg { transform: rotate(180deg); }
  .calendar-year strong { min-width: 55px; text-align: center; }
  .holiday-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 8px 24px 26px; }
  .holiday-item { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--ink-100); }
  .holiday-date { display: grid; width: 50px; height: 50px; place-items: center; align-content: center; border-radius: 15px; background: var(--coral-soft); color: var(--coral); line-height: 1; }
  .holiday-date strong { font-size: 1.2rem; }
  .holiday-date span { margin-top: 4px; font-size: .58rem; font-weight: 800; text-transform: uppercase; }
  .holiday-item h3 { font-size: .8rem; }
  .holiday-item p { color: var(--ink-500); font-size: .65rem; }

  .messages-card { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: min(680px, calc(100vh - 230px)); min-height: 520px; overflow: hidden; }
  .conversation-list { min-width: 0; border-right: 1px solid var(--ink-100); }
  .conversation-list__head { padding: 16px; border-bottom: 1px solid var(--ink-100); }
  .conversation-list__body { height: calc(100% - 73px); overflow-y: auto; }
  .conversation-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; width: 100%; padding: 15px 16px; border: 0; border-bottom: 1px solid var(--ink-100); background: transparent; text-align: left; transition: background var(--transition); }
  .conversation-item:hover, .conversation-item.is-active { background: var(--mint-soft); }
  .conversation-item__copy { min-width: 0; }
  .conversation-item__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .conversation-item strong { overflow: hidden; color: var(--ink-900); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
  .conversation-item p { overflow: hidden; margin-top: 4px; color: var(--ink-500); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
  .conversation-item time { color: var(--ink-500); font-size: .58rem; }
  .unread-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--coral); }
  .message-thread { display: grid; grid-template-rows: 68px 1fr auto; min-width: 0; min-height: 0; }
  .message-thread__head { display: flex; align-items: center; gap: 11px; padding: 12px 20px; border-bottom: 1px solid var(--ink-100); }
  .message-thread__head h3 { font-size: .84rem; }
  .message-thread__head p { color: var(--ink-500); font-size: .65rem; }
  .message-thread__body { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 20px; overflow-y: auto; background: #fbfbf8; }
  .thread-empty { display: grid; height: 100%; place-content: center; justify-items: center; color: var(--ink-500); text-align: center; }
  .thread-empty svg { width: 35px; height: 35px; margin-bottom: 12px; color: var(--ink-300); }
  .thread-empty h3 { color: var(--ink-700); }
  .thread-empty p { max-width: 310px; font-size: .72rem; }
  .message-bubble { align-self: flex-start; max-width: min(76%, 580px); }
  .message-bubble__body { padding: 10px 13px; border: 1px solid var(--ink-100); border-radius: 5px 15px 15px 15px; background: var(--surface); color: var(--ink-700); font-size: .76rem; white-space: pre-wrap; }
  .message-bubble__meta { margin-top: 4px; color: var(--ink-500); font-size: .59rem; }
  .message-bubble.is-mine { align-self: flex-end; text-align: right; }
  .message-bubble.is-mine .message-bubble__body { border: 0; border-radius: 15px 5px 15px 15px; background: var(--teal); color: #fff; text-align: left; }
  .message-composer { display: flex; align-items: flex-end; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--ink-100); }
  .message-composer textarea { min-height: 44px; max-height: 130px; resize: none; }
  .message-system-note { margin: 0; padding: 14px 16px; border-top: 1px solid var(--ink-100); font-size: .74rem; }

  .settings-grid { display: grid; grid-template-columns: minmax(460px, 1.25fr) minmax(320px, .75fr); gap: 20px; }
  .profile-card, .security-card { padding: 27px; }
  .profile-card__top { display: flex; align-items: center; gap: 17px; padding-bottom: 23px; border-bottom: 1px solid var(--ink-100); }
  .profile-card__top h3 { font-size: 1.15rem; }
  /* Moje dane kadrowe na karcie profilu (Ustawienia): siatka etykieta–wartosc. */
  .profile-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 18px 0 0; font-size: .8rem; }
  .profile-facts dt { color: var(--ink-500); font-weight: 700; }
  .profile-facts dd { margin: 0; color: var(--ink-800); }
  .profile-card__top p { font-size: .75rem; }
  .settings-form { margin-top: 23px; }
  /* Pola w siatce wyrownane do gory: komorka z podpowiedzia (small) nie rozciaga sasiedniego inputu. */
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .form-grid > .field { align-content: start; }
  .security-card__icon { margin-bottom: 19px; }
  .security-card > .muted { margin: 6px 0 22px; font-size: .75rem; }
  /* Ustawienia jako zwijane sekcje (Card zwijana z @woohoo/ui): w treści karty bez górnych
     marginesów dawnych kart profilu i kodu — odstęp daje padding .card__body. */
  .settings-sections .profile-facts { margin: 0 0 20px; }
  .settings-sections .settings-form { margin-top: 0; }
  .settings-pin-rule { margin: 0 0 16px; font-size: .78rem; }
  .settings-sections .stack-form > .button { justify-self: start; }
  .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Powiadomienia e-mail (Ustawienia, administrator): podpowiedź, stan kolejki, dwa przyciski obok siebie. */
  /* Przełącznik jako pierwszy element formularza w karcie: bez górnego odstępu i kreski. */
  .settings-sections .settings-form > .switch-row--bordered:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .mail-hint { margin: 12px 0 0; }
  .changelog__kb { margin-left: 4px; font-size: .72rem; }
  .mail-status { margin: 12px 0 0; font-size: .78rem; }
  .mail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  /* Asystent AI (Ustawienia, administrator): tematy pytań, na które instrukcje nie odpowiadały. */
  .assistant-gaps { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--ink-100); border-radius: var(--radius-sm); font-size: .78rem; }
  .assistant-gaps__title { margin: 0 0 6px; }
  .assistant-gaps ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
  .settings-sections .settings-form > .dialog-note:first-child { margin: 0 0 14px; }
  /* Zgłoszenia (administrator): lista pytań do Woo bez odpowiedzi w instrukcji. */
  .feedback-gaps { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: .82rem; }
  .feedback-gitlab { margin: 12px 0 0; }
  /* Podpowiedzi pulpitu (kafelki i legenda bilansu): z czego składa się liczba. */
  .kpi-grid .kpi-card[tabindex], .chart-legend li[tabindex] { cursor: help; }
  .kpi-grid .kpi-card[tabindex]:focus-visible, .chart-legend li[tabindex]:focus-visible { outline: 2px solid var(--blue, #0049ff); outline-offset: 2px; }
  .dash-hint { position: fixed; z-index: 90; width: max-content; max-width: 320px; padding: 12px 14px; border: 1px solid var(--ink-100); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(9, 17, 51, .16); color: var(--ink-800); font-size: .74rem; line-height: 1.45; pointer-events: none; transform: translateX(-50%); }
  .dash-hint--above { transform: translate(-50%, -100%); }
  .dash-hint__title { display: block; margin-bottom: 6px; color: var(--ink-950, #091133); font-size: .78rem; }
  .dash-hint ul { margin: 0; padding-left: 15px; }
  .dash-hint__subtitle { margin: 8px 0 3px; color: var(--ink-500); font-size: .68rem; font-weight: 700; }
  .dash-hint__more, .dash-hint__empty { margin: 4px 0 0; color: var(--ink-500); }
  /* Historia pracownika (okno pracownika → „Historia”): oś czasu, kolor kropki wg kategorii. */
  .employee-tabs { margin-bottom: 16px; }
  .employee-history__filters { flex-wrap: wrap; margin-bottom: 14px; }
  .history-list { display: grid; gap: 0; margin: 0 0 12px; padding: 0; list-style: none; }
  .history-item { position: relative; padding: 0 0 14px 20px; border-left: 2px solid var(--ink-100); margin-left: 5px; }
  .history-item:last-child { padding-bottom: 2px; }
  .history-item::before { content: ''; position: absolute; top: 3px; left: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-300, #b8bfcc); }
  .history-item--record::before { background: var(--blue, #0049ff); }
  .history-item--employment::before { background: var(--ink-700, #3b4252); }
  .history-item--leave::before { background: var(--teal, #1a9f8f); }
  .history-item--account::before { background: var(--amber, #d99a1e); }
  .history-item__meta { color: var(--ink-500); font-size: .7rem; }
  .history-item__title { display: block; margin-top: 2px; font-size: .84rem; }
  .history-item__lines { margin: 4px 0 0; padding-left: 16px; color: var(--ink-700); font-size: .78rem; }
  /* Dostęp do modułów (Ustawienia, administrator): macierz moduł × rola. */
  .access-table td, .access-table th { vertical-align: middle; }
  .access-table .align-center { text-align: center; }
  .access-note { display: block; font-size: .7rem; }
  /* Karta z nagłówkiem z ikoną (dawne .system-settings-card) żyje w fundamencie jako
     .card__intro/.card__icon/.card__desc i w @woohoo/ui jako <Card icon opis>. */
  .settings-fieldset { margin: 22px 0 0; padding: 0; border: 0; }
  .settings-fieldset legend { margin-bottom: 10px; color: var(--ink-700); font-size: .74rem; font-weight: 700; }
  .weekday-options { display: flex; flex-wrap: wrap; gap: 8px; }
  .weekday-options label { display: flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--ink-100); border-radius: 999px; background: var(--surface); color: var(--ink-700); font-size: .7rem; cursor: pointer; }
  .weekday-options label:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-dark); }
  .settings-switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

  /* Dialog/modal (.app-dialog/.dialog-*) → przeniesione do fundamentu (system.css). */
  .payroll-disclaimer { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid #efd18d; border-radius: var(--radius-md); background: var(--warning-soft); color: #6f480d; }
  .payroll-disclaimer svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .payroll-disclaimer div { display: grid; gap: 3px; }
  .payroll-disclaimer strong { font-size: .86rem; }
  .payroll-disclaimer span { font-size: .75rem; line-height: 1.55; }
  .confirm-copy { color: var(--ink-600); font-size: .85rem; }
  .detail-list { display: grid; gap: 0; }
  .detail-row { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--ink-100); font-size: .77rem; }
  .detail-row:last-child { border-bottom: 0; }
  .detail-row span { color: var(--ink-500); }
  .detail-row strong { text-align: right; }
  .temporary-pin { display: grid; gap: 18px; color: var(--ink-600); font-size: .83rem; }
  .temporary-pin code { display: block; padding: 20px; border: 1px dashed var(--teal); border-radius: var(--radius-md); background: var(--mint-soft); color: var(--ink-950); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 2rem; font-weight: 850; letter-spacing: .18em; text-align: center; user-select: all; }

  .loading-overlay { position: fixed; z-index: 1000; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: rgba(246,245,239,.72); color: var(--ink-800); font-size: .78rem; font-weight: 700; backdrop-filter: blur(4px); }
  .button .spinner { width: 17px; height: 17px; border-width: 2px; border-color: rgba(255,255,255,.4); border-top-color: currentColor; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .toast-region { position: fixed; z-index: 1100; right: 22px; bottom: 22px; display: grid; width: min(390px, calc(100% - 32px)); gap: 9px; pointer-events: none; }
  .toast.is-leaving { animation: toastOut 180ms ease both; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
  @keyframes toastOut { to { opacity: 0; transform: translateX(12px); } }
  .toast__icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; }
  .toast__icon svg { width: 15px; height: 15px; }
  .toast--success .toast__icon { background: var(--success-soft); color: var(--success); }
  .toast--error .toast__icon { background: var(--danger-soft); color: var(--danger); }
  .toast--info .toast__icon { background: var(--info-soft); color: var(--info); }
  .toast strong { display: block; font-size: .75rem; }
  .toast p { margin-top: 2px; color: var(--ink-600); font-size: .68rem; }
  .toast .icon-button { width: 27px; height: 27px; }
  .toast .icon-button svg { width: 14px; height: 14px; }

  @media (max-width: 1180px) {
    :root { --sidebar-width: 244px; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr); }
    .auth-visual { padding: 60px; }
    .auth-visual__content h2 { font-size: clamp(2.4rem, 4.5vw, 3.7rem); }
    .messages-card { grid-template-columns: 285px minmax(0, 1fr); }
  }

  @media (max-width: 960px) {
    :root { --topbar-height: 74px; }
    .sidebar { transform: translateX(-102%); box-shadow: var(--shadow-md); transition: transform 250ms cubic-bezier(.2,.8,.2,1); }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-close, .menu-toggle { display: inline-grid; }
    .sidebar-backdrop { position: fixed; z-index: 105; inset: 0; display: block; background: rgba(7,23,27,.5); opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 220ms ease; }
    .sidebar-backdrop.is-open { opacity: 1; visibility: visible; }
    .workspace { margin-left: 0; }
    .main-content { padding-bottom: 100px; }
    .auth-view { grid-template-columns: minmax(330px, .8fr) minmax(400px, 1fr); }
    .auth-visual { padding: 40px; }
    .auth-visual__content > .brand-lockup { bottom: calc(100% + 65px); }
    .page-intro--dashboard { align-items: flex-start; flex-direction: column; }
    .filter-bar { width: 100%; }
    .compact-field { flex: 1; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .chart-card { min-height: 310px; }
    .clock-layout { grid-template-columns: 1fr; }
    .clock-card { min-height: 510px; }
    .settings-grid { grid-template-columns: 1fr; }
    .holiday-list { grid-template-columns: 1fr; }
    .mobile-nav { position: fixed; z-index: 75; right: 15px; bottom: max(12px, env(safe-area-inset-bottom)); left: 15px; display: grid; grid-template-columns: repeat(5, 1fr); height: 68px; align-items: center; padding: 6px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 21px; background: rgba(12,32,37,.96); color: rgba(255,255,255,.55); box-shadow: 0 14px 35px rgba(12,32,37,.28); backdrop-filter: blur(14px); }
    .mobile-nav a { display: grid; justify-items: center; gap: 3px; font-size: .57rem; text-decoration: none; }
    .mobile-nav a svg { width: 19px; height: 19px; }
    .mobile-nav a.is-active { color: var(--mint); }
    .mobile-clock { display: grid; width: 52px; height: 52px; place-items: center; justify-self: center; margin-top: -24px; border: 5px solid var(--canvas); border-radius: 17px; background: var(--lime); color: var(--ink-950); box-shadow: 0 7px 20px rgba(0,0,0,.2); }
  }

  @media (max-width: 740px) {
    /* Tabele na telefonie: wiersz jako karta z etykietami z data-label (fundament ukrywa kolumny od 4.,
       tu je pokazujemy). Specyficznosc [data-label]:nth-child wygrywa z regula fundamentu. */
    .table thead { display: none; }
    .table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding: 12px 14px; border-bottom: 1px solid var(--ink-100); }
    .table tbody td, .table tbody td[data-label]:nth-child(n+1) { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
    .table tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ink-500); font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .table tbody td[data-label="Pracownik"], .table tbody td[data-label="Akcje"], .table tbody td[data-admin-column] { grid-column: 1 / -1; }
    .table tbody td[data-label="Akcje"]::before { display: none; }
    .table tbody td[data-label="Akcje"] .table-actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px 14px; }
    .table tbody tr.skeleton-row { grid-template-columns: 1fr; }
    .table tfoot { display: none; }
    .employee-cell small { overflow-wrap: anywhere; }
    .auth-view { display: block; min-height: 100vh; }
    .auth-visual { display: none; }
    .auth-panel { min-height: 100vh; padding: 35px 22px; }
    .auth-mobile-brand { display: inline-flex; }
    .topbar { padding: 10px 17px; }
    .today-chip, .profile-chip > span:not(.avatar), .profile-chip > svg { display: none; }
    .profile-chip { min-height: auto; padding: 3px; border: 0; background: transparent; }
    .topbar__eyebrow { display: none; }
    .topbar h1 { font-size: 1.05rem; }
    .main-content { padding: 24px 16px 100px; }
    .page-intro { align-items: flex-start; flex-direction: column; margin-bottom: 22px; }
    .page-intro > .button { width: 100%; }
    .page-intro h2 { font-size: 1.65rem; }
    .page-intro .muted { font-size: .82rem; }
    .filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #dashboardUserField { grid-column: 1 / -1; }
    .kpi-grid { gap: 9px; }
    .kpi-card { min-height: 112px; gap: 10px; padding: 15px; }
    .kpi-card__icon { width: 36px; height: 36px; border-radius: 11px; }
    .kpi-card strong { font-size: 1.6rem; }
    .kpi-card small { display: none; }
    .dashboard-grid { gap: 12px; }
    .card__header { padding: 19px 18px 0; }
    .donut-layout { padding: 20px 16px 25px; }
    .donut-chart { width: min(170px, 52%); }
    .line-chart { padding: 13px 9px 10px; }
    .activity-list { padding: 13px 18px 19px; }
    .balance-meter { padding: 24px 19px 21px; }
    .clock-card { min-height: 490px; padding: 29px 18px; border-radius: var(--radius-md); }
    .clock-button { width: 135px; height: 135px; }
    .consent-card { padding: 20px; }
    .switch-row { align-items: flex-start; }
    .table-toolbar { align-items: stretch; flex-direction: column; }
    .search-field { width: 100%; }
    .toolbar-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .toolbar-filters select, .table-toolbar > select { width: 100%; min-width: 0; }
    .segment-control { width: 100%; overflow-x: auto; }
    .segment-control button { flex: 1 0 auto; }
    .summary-strip, .summary-strip--three { grid-template-columns: repeat(2, 1fr); }
    .summary-strip > div { min-height: 75px; padding: 13px 16px; }
    .mini-kpi-grid { grid-template-columns: 1fr; gap: 8px; }
    .messages-card { display: block; height: calc(100vh - 245px); min-height: 480px; }
    .conversation-list { height: 100%; border-right: 0; }
    .message-thread { display: none; height: 100%; grid-template-rows: 65px 1fr auto; }
    .messages-card.has-thread .conversation-list { display: none; }
    .messages-card.has-thread .message-thread { display: grid; }
    .thread-back { display: inline-grid !important; }
    .form-grid { grid-template-columns: 1fr; }
    .settings-switch-grid { grid-template-columns: 1fr; gap: 0; }
    .profile-card, .security-card { padding: 21px; }
    .toast-region { right: 16px; bottom: 91px; }
  }

  @media (max-width: 520px) {
    .kpi-card { display: block; }
    .kpi-card__icon { position: absolute; right: 13px; top: 13px; }
    .donut-layout { align-items: stretch; flex-direction: column; }
    .donut-chart { width: 165px; margin: 0 auto; }
    .chart-legend { grid-template-columns: repeat(2, 1fr); }
    .summary-strip, .summary-strip--three { grid-template-columns: 1fr 1fr; }
    .holiday-list { padding: 6px 17px 21px; }
    .holiday-item { grid-template-columns: 49px 1fr auto; gap: 10px; }
    .profile-card__top { align-items: flex-start; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }

  @media (forced-colors: active) {
    .brand-mark, .avatar, .clock-button, .mobile-clock { border: 2px solid currentColor; }
    .nav-item.is-active::before, .notification-dot, .nav-dot, .status-dot { forced-color-adjust: none; }
  }

  /* --- Logowanie kontem Google Workspace ------------------------------- */
  .auth-alt { margin-top: 18px; }

  .auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
    color: var(--ink-600);
    font-size: 0.82rem;
  }
  .auth-divider::before,
  .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line, rgba(148, 163, 184, 0.35));
  }

  .google-mark { width: 18px; height: 18px; flex: none; }

  .auth-domain-hint { margin: 10px 0 0; font-size: 0.8rem; text-align: center; }

  .page-intro-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

  /* --- Uzupełnienia po ujednoliceniu z fundamentem ---
     Właściwości specyficzne dla hr, których fundament NIE ustawia dla tych samych
     selektorów (np. table width:100%, .main-content min-height). Deduplikacja usunęła
     całe reguły hr, więc te unikalne właściwości trzeba dołożyć z powrotem. Fundament
     daje resztę; tu jest tylko to, co hr miał u siebie unikalnie. */
  html { scroll-behavior: smooth; }
  .sr-only { margin: -1px !important; }
  .skip-link { z-index: 10000; top: 10px; box-shadow: var(--shadow-md); transform: translateY(-160%); transition: transform var(--transition); }
  .skip-link:focus { transform: translateY(0); }
  .eyebrow { color: var(--ink-500); }
  .initial-loader { color: #fff; transition: opacity 250ms ease, visibility 250ms ease; }
  .auth-quote { align-items: center; backdrop-filter: blur(10px); }
  .auth-panel { min-height: 100vh; }
  .auth-help { text-align: center; }
  textarea { padding: 12px 13px; }
  .icon-button { padding: 0; }
  .nav-badge { display: grid; min-width: 20px; height: 20px; place-items: center; }
  .avatar { text-transform: uppercase; }
  .today-chip { border: 1px solid var(--ink-200); }
  .main-content { min-height: calc(100vh - var(--topbar-height)); }
  .changelog { display: block; }
  .changelog__version { color: var(--ink-800); }
  .switch-row { justify-content: space-between; margin-top: 25px; }
  .switch::after { box-shadow: 0 2px 5px rgba(0,0,0,.14); }
  .table-toolbar { min-height: 76px; }
  .empty-state p { max-width: 380px; margin: 0 auto; }
  .field-hint { display: block; margin-top: 5px; }
  .toast { grid-template-columns: 28px 1fr auto; border: 1px solid var(--ink-200); pointer-events: auto; }

  /* --- Kolizje urlopów i kalendarz zespołu (Urlopy, role kierownicze) --- */
  .leaves-view-toggle { margin-bottom: 14px; }

  .overlap-flag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px; border: 1px solid rgba(156, 103, 18, .25); border-radius: 999px; background: var(--warning-soft); color: var(--warning); font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
  .overlap-flag:hover { filter: brightness(.95); }

  /* Kaskada akceptujących: „Czeka na: …” pod statusem oczekującego wniosku (Urlopy). */
  .approval-hint { display: block; margin-top: 4px; color: var(--ink-500); font-size: .66rem; line-height: 1.35; }

  .detail-overlaps { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(156, 103, 18, .25); border-radius: var(--radius-sm); background: var(--warning-soft); }
  .detail-overlaps__title { margin: 0 0 8px; color: var(--warning); font-size: .82rem; font-weight: 700; }
  .detail-overlaps ul { margin: 0; padding-left: 18px; font-size: .85rem; }
  .detail-overlaps li + li { margin-top: 4px; }
  .detail-overlaps__dept { padding: 1px 7px; border-radius: 999px; background: var(--warning); color: #fff; font-size: .68rem; font-weight: 700; white-space: nowrap; }

  .team-cal-card { padding-bottom: 18px; }
  .team-cal-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--ink-600); font-size: .78rem; }
  .team-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .team-cal-dot { width: 12px; height: 12px; border-radius: 4px; }
  .team-cal-dot--approved { background: var(--success); }
  .team-cal-dot--pending { background: repeating-linear-gradient(135deg, var(--warning), var(--warning) 3px, var(--warning-soft) 3px, var(--warning-soft) 6px); }
  .team-cal-dot--off { background: var(--ink-100); }

  .team-cal-wrap { overflow-x: auto; }
  .team-cal-wrap.is-loading { opacity: .45; }
  .team-cal { width: 100%; border-collapse: collapse; font-size: .78rem; }
  .team-cal th, .team-cal td { border: 1px solid var(--ink-100); }
  .team-cal__name { position: sticky; left: 0; z-index: 1; min-width: 170px; padding: 7px 12px; background: var(--surface); text-align: left; }
  .team-cal__name small { display: block; color: var(--ink-500); font-weight: 400; }
  .team-cal__day { min-width: 26px; padding: 5px 0; color: var(--ink-600); font-weight: 600; text-align: center; }
  .team-cal__cell { height: 30px; min-width: 26px; }
  .team-cal__day.is-off, .team-cal__cell.is-off { background: var(--ink-100); }
  .team-cal__cell.is-approved { background: var(--success); }
  .team-cal__cell.is-pending { background: repeating-linear-gradient(135deg, var(--warning), var(--warning) 4px, var(--warning-soft) 4px, var(--warning-soft) 8px); }
  .team-cal__cell.is-approved.is-off, .team-cal__cell.is-pending.is-off { opacity: .75; }
  .team-cal__day.is-today, .team-cal__cell.is-today { box-shadow: inset 0 0 0 2px var(--info); }

  /* --- Edytor listy działów (Ustawienia organizacji) --- */
  .department-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .department-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 13px; border: 1px solid var(--ink-200); border-radius: 999px; background: var(--canvas); font-size: .82rem; font-weight: 600; }
  .department-pill button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ink-100); color: var(--ink-600); font-size: .8rem; line-height: 1; cursor: pointer; }
  .department-pill button:hover { background: var(--danger-soft); color: var(--danger); }
  .department-add { display: flex; gap: 10px; align-items: center; }
  .department-add input { flex: 1; max-width: 320px; }

  /* --- Import świąt z Google (Dni wolne) --- */
  .import-toolbar { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
  .import-toolbar .muted { margin: 0; font-size: .82rem; }
  .import-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
  .import-row { display: grid; grid-template-columns: auto 150px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--ink-100); border-radius: var(--radius-xs); cursor: pointer; }
  .import-row.is-existing { opacity: .55; cursor: default; }
  .import-date { color: var(--ink-600); font-size: .82rem; }
  .import-name { font-weight: 600; font-size: .88rem; }
  .import-badge { padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
  .import-badge--public { background: var(--success-soft); color: var(--success); }
  .import-badge--obs { background: var(--ink-100); color: var(--ink-600); }
  .import-badge--muted { background: var(--ink-100); color: var(--ink-500); }