/* media/kit/web.css: Web Admin components. Colours, type and spacing come from tokens.css only.
   Geometry (widths, heights, offsets) is the component spec, read from the Figma frames named per block.
   Prefix: .kw- */

.k-ic{display:inline-block;flex:none;width:20px;height:20px}
[data-kit]{box-sizing:border-box}
[data-kit] *{box-sizing:border-box}

/* ---------- app shell — REF/table-list-page 15377-134741, Shifts week view 16058:14318 ---------- */
.kw-app{position:relative;width:1440px;height:895px;overflow:hidden;background:var(--bg-color);color:var(--body-text-color);font-family:var(--font-web);-webkit-font-smoothing:antialiased}
.kw-top{position:absolute;left:0;top:0;right:0;height:var(--nav-topbar-height);background:var(--nav-topbar-bg);border-bottom:var(--border) solid var(--nav-topbar-border);display:flex;align-items:center;padding:0 var(--nav-topbar-hpad) 0 var(--size-200)}
.kw-top .kw-logo{width:var(--nav-topbar-logo);height:var(--nav-topbar-logo);color:var(--logo-brand-color)}
.kw-clocknow{margin-left:var(--size-200);height:var(--nav-widget-height);border-radius:var(--radius-full);border:var(--border) solid var(--nav-widget-border);background:var(--nav-widget-bg);display:flex;align-items:center;padding:0 var(--size-300);font:var(--t-body-large);color:var(--title-text-color);position:relative;overflow:hidden}
.kw-clocknow.is-on{border-color:var(--success-600);color:var(--success-700);gap:var(--size-100)}
.kw-clocknow .kw-dot{width:var(--size-100);height:var(--size-100);border-radius:var(--radius-full);background:var(--success-600)}
.kw-tracker{position:absolute;left:410px;width:620px;height:var(--nav-widget-height);border-radius:var(--radius-full);border:var(--border) solid var(--nav-widget-border);background:var(--nav-widget-bg);display:flex;align-items:center;padding:0 var(--size-100) 0 var(--size-200);gap:var(--size-150);font:var(--t-body-large);color:var(--nav-widget-text)}
.kw-tracker .k-ic{width:var(--size-250);height:var(--size-250);color:var(--gray-500)}
.kw-tracker .kw-trk-ph{flex:1}
.kw-tracker .kw-today{display:flex;align-items:center;gap:var(--size-75)}
.kw-tracker .kw-today .k-ic{width:var(--size-200);height:var(--size-200)}
.kw-tracker .kw-timer{margin-left:var(--size-300)}
.kw-tracker .kw-play{width:var(--size-400);height:var(--size-400);border-radius:var(--radius-full);background:var(--primary-a16);display:grid;place-items:center;color:var(--primary-500)}
.kw-tracker .kw-play .k-ic{width:var(--size-200);height:var(--size-200);color:var(--primary-500)}
.kw-top-r{margin-left:auto;display:flex;align-items:center;gap:var(--size-200);color:var(--nav-topbar-icon)}
.kw-top-r .k-ic{width:var(--size-250);height:var(--size-250)}
.kw-me{display:flex;align-items:center;gap:var(--size-25)}
.kw-me img{width:var(--size-400);height:var(--size-400);border-radius:var(--radius-full);display:block}
.kw-me .k-ic{width:var(--size-200);height:var(--size-200)}

/* sidebar: full 240 and minimised 64 (navigation/sidebar tokens) */
.kw-side{position:absolute;left:0;top:var(--nav-topbar-height);bottom:0;width:240px;background:var(--nav-sidebar-bg);border-right:var(--border) solid var(--nav-sidebar-border);padding:var(--size-200) var(--size-200)}
.kw-side.is-mini{width:var(--nav-sidebar-mini-width);padding:var(--size-150) var(--size-200)}
.kw-nav{height:var(--nav-item-size);display:flex;align-items:center;gap:var(--size-100);padding:0 var(--size-75);border-radius:var(--nav-item-radius);font:var(--t-body-large);color:var(--title-text-color);margin-bottom:0;position:relative}
.kw-nav .k-ic{width:var(--nav-item-icon);height:var(--nav-item-icon);color:var(--gray-600)}
.kw-nav.is-on{background:var(--nav-item-active-bg);color:var(--nav-item-active-icon)}
.kw-nav.is-on .k-ic{color:var(--nav-item-active-icon)}
.kw-nav .kw-more{margin-left:auto;width:var(--size-250);height:var(--size-250)}
.kw-side.is-mini .kw-nav{width:var(--nav-item-size);padding:0;justify-content:center}
.kw-navh{font:var(--t-body-normal);color:var(--label-text-color);height:var(--size-400);display:flex;align-items:center;padding:0 var(--size-75);margin-top:var(--size-150)}
.kw-side.is-mini .kw-navh{height:var(--size-200);margin:var(--size-100) 0;justify-content:center}
.kw-side.is-mini .kw-navh:after{content:"";width:var(--size-300);height:var(--border);background:var(--border-color)}
.kw-main{position:absolute;left:240px;top:var(--nav-topbar-height);right:0;bottom:0;overflow:hidden;background:var(--bg-color)}
.kw-app.is-mini .kw-main{left:var(--nav-sidebar-mini-width)}

/* ---------- buttons, dropdowns, badges ---------- */
.kw-btn{height:var(--btn-md-height);padding:0 var(--btn-md-hpad);border-radius:var(--btn-radius);display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);font:var(--t-action-bold);letter-spacing:var(--ls-action-bold);position:relative;overflow:hidden;white-space:nowrap}
.kw-btn.is-lg{height:var(--btn-lg-height);padding:0 var(--btn-lg-hpad)}
.kw-btn.is-primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}
.kw-btn.is-primary.is-down{background:var(--btn-primary-down-bg)}
.kw-btn.is-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:var(--border) solid var(--btn-secondary-border)}
.kw-btn.is-disabled{background:var(--gray-0-a0);color:var(--gray-200);border:var(--border) solid var(--gray-150)}
.kw-btn.is-tertiary{color:var(--btn-tertiary-text);background:none;padding:0 var(--size-75)}
.kw-btn .k-ic{width:var(--size-225);height:var(--size-225)}
.kw-dd{height:var(--btn-md-height);border-radius:var(--btn-radius);background:var(--chip-bg);display:inline-flex;align-items:center;gap:var(--size-50);padding:0 var(--size-150);font:var(--t-body-large);color:var(--title-text-color)}
.kw-dd.is-muted{color:var(--gray-400)}
.kw-dd.is-active{background:var(--primary-a12);color:var(--primary-500)}
.kw-dd .k-ic{width:var(--size-200);height:var(--size-200)}
.kw-select{height:var(--input-height);border:var(--border) solid var(--input-border);border-radius:var(--input-radius);background:var(--bg-color);display:flex;align-items:center;justify-content:space-between;padding:0 var(--input-hpad);font:var(--t-body-large);color:var(--input-text)}
.kw-select .k-ic{width:var(--size-200);height:var(--size-200);color:var(--icon-color)}
.kw-icb{width:var(--size-400);height:var(--size-400);border-radius:var(--size-50);display:grid;place-items:center;color:var(--icon-color);position:relative}
.kw-icb .k-ic{width:var(--size-250);height:var(--size-250)}
.kw-icb.is-hover{background:var(--gray-1000-a8)}
.kw-counter{position:absolute;right:1px;top:3px;min-width:var(--size-200);height:var(--size-200);border-radius:var(--radius-full);background:var(--badge-counter-negative-bg);color:var(--on-dark-text-color);font:var(--t-caption-normal-bold);display:grid;place-items:center;padding:0 var(--size-50);border:var(--size-25) solid var(--bg-color)}
.kw-badge{height:var(--badge-status-height);padding:0 var(--badge-status-hpad);border-radius:var(--badge-radius);display:inline-flex;align-items:center;gap:var(--size-50);font:var(--t-label-caps);letter-spacing:var(--ls-label-caps);text-transform:uppercase;white-space:nowrap}
.kw-badge.is-new{background:var(--badge-new-bg);color:var(--badge-new-text)}
.kw-badge.is-warning{background:var(--badge-warning-bg);color:var(--badge-warning-text)}
.kw-badge.is-positive{background:var(--badge-positive-bg);color:var(--badge-positive-text)}
.kw-badge.is-negative{background:var(--badge-negative-bg);color:var(--badge-negative-text)}
.kw-badge.is-neutral{background:var(--badge-neutral-bg);color:var(--badge-neutral-text)}
.kw-badge.is-count{text-transform:none;font:var(--t-label-large-bold);height:var(--size-300);padding:0 var(--size-100)}
.kw-badge .k-ic{width:var(--size-200);height:var(--size-200)}

/* ---------- Shifts toolbar — 16058:14318 ---------- */
.kw-sbar{position:absolute;left:var(--size-300);right:var(--size-300);top:var(--size-250);height:var(--size-450);display:flex;align-items:center;gap:var(--size-100)}
.kw-sbar .kw-select{width:260px}
.kw-range{display:flex;align-items:center;gap:var(--size-150);margin:0 var(--size-150) 0 var(--size-200);font:var(--t-body-normal);color:var(--title-text-color)}
.kw-range .k-ic{width:var(--size-250);height:var(--size-250);color:var(--icon-color)}
.kw-sbar-r{margin-left:auto;display:flex;align-items:center;gap:var(--size-50)}
.kw-sbar-r .kw-btn{margin-left:var(--size-150)}

/* ---------- week grid — 16058:14318 (shift-card tokens) ---------- */
.kw-week{position:absolute;left:var(--size-300);top:84px;right:0;bottom:0}
.kw-wh{display:flex;height:var(--size-600);background:var(--gray-50);border-bottom:var(--border) solid var(--border-color)}
.kw-wh>div{flex:none;display:flex;align-items:center;padding:0 var(--size-150);font:var(--t-body-normal);color:var(--caption-text-color)}
.kw-wh .is-today{color:var(--primary-500);box-shadow:inset 0 calc(-1 * var(--size-25)) 0 var(--primary-500)}
.kw-wh .kw-wtot{justify-content:center;font:var(--t-body-normal-bold);color:var(--label-text-color)}
.kw-wh .is-locked{background:var(--gray-100);justify-content:space-between}
.kw-wh .kw-lk{width:var(--size-200);height:var(--size-200);color:var(--gray-500)}
.kw-stick{position:absolute;right:0;top:0;bottom:0;background:var(--bg-color);border-left:var(--border) solid var(--border-color);box-shadow:-4px 0 8px -6px var(--gray-1000-a12)}
.kw-wh .kw-stick{background:var(--gray-50)}
.kw-wh{position:relative}
.kw-search{height:var(--input-height);width:100%;border:var(--border) solid var(--border-color);border-radius:var(--input-radius);background:var(--bg-color);display:flex;align-items:center;gap:var(--size-100);padding:0 var(--size-100);color:var(--input-placeholder);font:var(--t-body-normal)}
.kw-search .k-ic{width:var(--size-200);height:var(--size-200)}
.kw-wr{display:flex;border-bottom:var(--border) solid var(--border-color);position:relative}
.kw-wr>.kw-cell{flex:none;border-right:var(--border) solid var(--border-color);padding:var(--size-25);display:flex;flex-direction:column;gap:var(--size-25);position:relative}
.kw-wr>.kw-cell.is-locked{background:var(--gray-50)}
.kw-wr>.kw-cell.is-hl{background:var(--primary-50)}
.kw-mem{flex:none;display:flex;align-items:center;gap:var(--size-150);padding:0 var(--size-150);font:var(--t-body-large-bold);color:var(--title-text-color);border-right:var(--border) solid var(--border-color)}
.kw-mem img{width:var(--size-400);height:var(--size-400);border-radius:var(--radius-full)}
.kw-mem .kw-ini{width:var(--size-400);height:var(--size-400);border-radius:var(--radius-full);flex:none}
.kw-mem .kw-hrs{margin-left:auto;font:var(--t-body-normal);color:var(--caption-text-color)}
.kw-mem .kw-hrs.is-ok{color:var(--success-700)}
.kw-mem .kw-hrs.is-over{color:var(--danger-600)}
.kw-mem .kw-alert{color:var(--danger-600);width:var(--size-200);height:var(--size-200)}
.kw-mem.is-open{font:var(--t-body-large-bold)}
.kw-mem.is-open .kw-add{margin-left:auto;display:flex;align-items:center;gap:var(--size-50);color:var(--primary-500);font:var(--t-body-large)}
.kw-mem.is-open .kw-add .k-ic{width:var(--size-200);height:var(--size-200)}
.kw-tot{flex:none;display:grid;place-items:center;font:var(--t-body-normal-bold);color:var(--label-text-color)}
.kw-shift{border-radius:var(--size-50);padding:var(--size-75) var(--size-75) var(--size-75) var(--size-75);height:52px;display:flex;flex-direction:column;justify-content:space-between;font:var(--t-body-normal);position:relative}
.kw-shift .kw-l1{display:flex;justify-content:space-between;font:var(--t-body-normal-bold)}
.kw-shift .kw-l2{display:flex;justify-content:space-between;align-items:center}
.kw-shift .kw-l2 .k-ic{width:var(--size-200);height:var(--size-200)}
.kw-shift .kw-l2 .kw-icons{display:flex;gap:var(--size-50)}
.kw-shift.is-blue{background:var(--shift-blue-bg);color:var(--shift-blue-text)}
.kw-shift.is-green{background:var(--shift-green-bg);color:var(--shift-green-text)}
.kw-shift.is-yellow{background:var(--shift-yellow-bg);color:var(--shift-yellow-text)}
.kw-shift.is-navy{background:var(--shift-navy-bg);color:var(--shift-navy-text)}
.kw-shift.is-purple{background:var(--shift-purple-bg);color:var(--shift-purple-text)}
.kw-shift.is-orange{background:var(--shift-orange-bg);color:var(--shift-orange-text)}
.kw-shift.is-grey{background:var(--shift-grey-bg);color:var(--shift-grey-text)}
.kw-shift.is-absence{background:repeating-linear-gradient(135deg,var(--gray-100) 0 var(--size-50),var(--gray-50) var(--size-50) var(--size-100));color:var(--label-text-color)}
.kw-shift .kw-warn{color:var(--warning-500)}
.kw-shift .kw-err{color:var(--danger-500)}
.kw-shift.is-draft{outline:var(--border) dashed currentColor;outline-offset:calc(-1 * var(--border));opacity:.7}
.kw-plus{position:absolute;left:50%;top:50%;width:var(--size-250);height:var(--size-250);margin:calc(-1 * var(--size-125,10px)) 0 0 calc(-1 * var(--size-125,10px));color:var(--primary-500)}
.kw-more-link{font:var(--t-caption-normal);color:var(--primary-500);text-align:center;padding:var(--size-25) 0}
.kw-published .kw-mem img{box-shadow:0 0 0 0 transparent}
.kw-okmark{position:absolute;left:var(--size-100);top:var(--size-75);width:var(--size-200);height:var(--size-200);border-radius:var(--radius-full);background:var(--success-700);color:var(--on-dark-text-color);border:var(--size-25) solid var(--bg-color);display:grid;place-items:center}
.kw-okmark .k-ic{width:var(--size-150);height:var(--size-150)}

/* ---------- side panel: Alerts — 3210:31785 ---------- */
.kw-panel{position:absolute;top:0;right:0;bottom:0;width:390px;background:var(--bg-color);border-left:var(--border) solid var(--border-color);box-shadow:var(--shadow-side-panel)}
.kw-panel-h{height:var(--size-800);display:flex;align-items:center;justify-content:space-between;padding:0 var(--size-300);border-bottom:var(--border) solid var(--border-color);font:var(--t-headline-normal);letter-spacing:var(--ls-headline-normal);color:var(--title-text-color)}
.kw-panel-h .k-ic{color:var(--icon-color)}
.kw-alert-row{height:50px;display:flex;align-items:center;gap:var(--size-150);padding:0 var(--size-300);font:var(--t-body-large);color:var(--title-text-color)}
.kw-alert-row .k-ic{width:var(--size-300);height:var(--size-300)}
.kw-alert-row .is-block{color:var(--danger-600)}
.kw-alert-row .is-warn{color:var(--warning-500)}
.kw-alert-row .kw-chev{margin-left:auto;color:var(--icon-color);width:var(--size-250);height:var(--size-250)}
.kw-alert-row.is-hover{background:var(--gray-50)}

/* ---------- modal — Blocking alerts 6408:24364 (modal tokens) ---------- */
.kw-scrim{position:absolute;inset:0;background:var(--modal-overlay)}
.kw-modal{position:absolute;width:479px;background:var(--bg-color);border-radius:var(--modal-radius);box-shadow:var(--shadow-modal);overflow:hidden}
.kw-modal-h{height:var(--modal-header-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--modal-pad);font:var(--t-headline-normal);letter-spacing:var(--ls-headline-normal);color:var(--title-text-color);border-bottom:var(--border) solid var(--border-color)}
.kw-modal-h .k-ic{color:var(--icon-color)}
.kw-modal-b{padding:var(--modal-pad);display:flex;flex-direction:column;gap:var(--size-200);font:var(--t-body-normal);letter-spacing:var(--ls-body-normal);color:var(--body-text-color)}
.kw-callout{display:flex;align-items:center;gap:var(--size-100);padding:var(--size-150);border-radius:var(--size-50);font:var(--t-body-normal);color:var(--gray-800)}
.kw-callout .k-ic{width:var(--size-225);height:var(--size-225)}
.kw-callout.is-error{background:var(--danger-50)}.kw-callout.is-error .k-ic{color:var(--danger-600)}
.kw-callout.is-warning{background:var(--warning-100)}.kw-callout.is-warning .k-ic{color:var(--warning-500)}
.kw-callout.is-info{background:var(--primary-50)}.kw-callout.is-info .k-ic{color:var(--primary-500)}
.kw-modal-f{padding:var(--size-200) var(--modal-pad) var(--size-150);border-top:var(--border) solid var(--border-color);display:flex;justify-content:flex-end;gap:var(--size-150)}

/* ---------- menu — templates menu 1241:14921 ---------- */
.kw-menu{position:absolute;min-width:160px;background:var(--bg-color);border:var(--border) solid var(--border-color);border-radius:var(--size-50);box-shadow:var(--shadow-modal);padding:var(--size-50)}
.kw-menu-i{height:var(--size-400);display:flex;align-items:center;padding:0 var(--size-100);border-radius:var(--size-50);font:var(--t-body-normal);color:var(--title-text-color);white-space:nowrap}
.kw-menu-i.is-hover{background:var(--hovered-bg-color)}
.kw-menu-sep{height:var(--border);background:var(--border-color);margin:var(--size-50) 0}

/* ---------- toast — alert/toast tokens, published toast 1517:26671 ---------- */
.kw-toast{position:absolute;width:376px;min-height:var(--size-600);display:flex;align-items:center;gap:var(--size-100);padding:0 var(--size-150) 0 var(--size-150);border-left:var(--toast-border-left) solid;font:var(--t-body-normal);color:var(--gray-700);box-shadow:var(--shadow-modal)}
.kw-toast.is-success{background:var(--toast-success-bg);border-color:var(--toast-success-border)}
.kw-toast.is-success>.k-ic{color:var(--toast-success-icon)}
.kw-toast .kw-x{margin-left:auto;color:var(--icon-color);width:var(--size-225);height:var(--size-225)}

/* ---------- tooltip — tooltip tokens ---------- */
.kw-tip{position:absolute;background:var(--tooltip-bg);color:var(--tooltip-text);border-radius:var(--tooltip-radius);padding:var(--tooltip-vpad) var(--tooltip-hpad);font:var(--t-caption-normal);white-space:nowrap}

/* ---------- page header + tabs — Attendance punch log 15406-148630 ---------- */
.kw-ph{position:absolute;left:var(--size-300);right:var(--size-300);top:var(--size-200)}
.kw-ph h1{margin:0;font:var(--t-headline-large);letter-spacing:var(--ls-headline-large);color:var(--title-text-color)}
.kw-ph .kw-ph-r{position:absolute;right:0;top:var(--size-400);display:flex;gap:var(--size-100)}
.kw-tabs{display:flex;gap:var(--size-300);margin-top:var(--size-150);border-bottom:var(--border) solid var(--border-color)}
.kw-tab{height:var(--size-450);display:flex;align-items:center;font:var(--t-body-normal);color:var(--caption-text-color)}
.kw-tab.is-on{color:var(--title-text-color);box-shadow:inset 0 calc(-1 * var(--size-25)) 0 var(--title-text-color)}
.kw-filters{display:flex;align-items:center;gap:var(--size-100);margin-top:var(--size-200)}
.kw-filters .kw-search{width:200px}

/* ---------- table — punch log 15406-148630 (table tokens) ---------- */
.kw-table{position:absolute;left:var(--size-300);right:var(--size-300);border:var(--border) solid var(--table-border);border-radius:var(--size-50);overflow:hidden;background:var(--bg-color)}
.kw-tr{display:flex;height:var(--table-cell-height);border-bottom:var(--border) solid var(--table-border);align-items:center}
.kw-tr:last-child{border-bottom:0}
.kw-tr.is-head{height:var(--table-head-height);font:var(--t-body-normal);color:var(--table-head-text)}
.kw-tr.is-hl{background:var(--table-cell-active-bg)}
.kw-td{flex:none;padding:0 var(--table-cell-hpad);font:var(--t-body-normal);color:var(--title-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center;border-right:var(--border) solid var(--table-border)}
.kw-td:last-child{border-right:0}
.kw-tr.is-head .kw-td{color:var(--table-head-text)}
.kw-td.is-bold{font:var(--t-body-normal-bold)}
.kw-td .kw-user{display:flex;align-items:center;gap:var(--size-100)}
.kw-td .kw-user img,.kw-td .kw-ini{width:var(--size-400);height:var(--size-400);border-radius:var(--radius-full);flex:none}
.kw-ini{background:var(--primary-50);color:var(--primary-500);display:grid;place-items:center;font:var(--t-caption-normal)}
.kw-td .kw-user b{display:block;font:var(--t-body-normal-bold)}
.kw-td .kw-user small{display:block;font:var(--t-caption-normal);color:var(--caption-text-color)}
.kw-check{width:var(--checkbox-size);height:var(--checkbox-size);border-radius:var(--checkbox-radius);border:var(--border) solid var(--checkbox-off-border);background:var(--bg-color)}
.kw-td .kw-acts{display:flex;gap:var(--size-50)}

/* ---------- Clock now widget — Figma Punches kusANh7VvUoIJmkgB3pWRZ 2001:51111 / 2001:51293 ---------- */
.kw-widget{position:absolute;width:350px;height:540px;background:var(--bg-color);border-radius:var(--radius-md);box-shadow:0 0 0 var(--size-25) var(--gray-100),var(--shadow-modal);overflow:hidden;text-align:center;color:var(--gray-700)}
.kw-widget-tabs{height:58px;background:var(--gray-50);border-bottom:var(--border) solid var(--border-color);display:flex;gap:var(--size-250);padding:0 var(--size-200);align-items:stretch}
.kw-widget-tabs span{display:flex;align-items:center;font:var(--t-label-caps);letter-spacing:var(--ls-label-caps);text-transform:uppercase;color:var(--gray-400)}
.kw-widget-tabs span.is-on{color:var(--primary-500);box-shadow:inset 0 calc(-1 * var(--size-25)) 0 var(--primary-500)}
.kw-widget .kw-hi{margin-top:48px;font:var(--t-headline-normal);color:var(--gray-700)}
.kw-widget .kw-hi b{font-weight:var(--w-medium)}
.kw-widget .kw-big{margin-top:var(--size-300);font:var(--w-medium) 80px/76px var(--font-web);letter-spacing:-.03em;color:#434E6C} /* Punches 2001:51123: Circular Std Medium 80 / 76, -3% (kit 1.0.11) */
.kw-widget .kw-date{margin-top:var(--size-300);font:var(--t-title-normal);color:var(--gray-700)}
.kw-widget .kw-loc{margin:var(--size-300) auto 0;display:inline-flex;align-items:center;gap:var(--size-100);height:37px;padding:0 var(--size-150);border:var(--border) solid var(--border-color);border-radius:var(--radius-full);font:var(--t-title-normal);color:var(--gray-700);box-shadow:0 18px 30px -10px var(--gray-1000-a8)}
.kw-widget .kw-loc .k-ic{width:var(--size-200);height:var(--size-200)}
.kw-widget .kw-go{position:absolute;left:25px;right:25px;bottom:58px;height:var(--size-500);border-radius:var(--radius-full);background:var(--btn-positive-bg);color:var(--on-dark-text-color);font:var(--t-label-caps);font-size:15px;letter-spacing:1.2px;text-transform:uppercase;display:grid;place-items:center;overflow:hidden}
.kw-widget .kw-go.is-blue{background:var(--btn-primary-bg)}
.kw-widget .kw-spin{width:var(--size-250);height:var(--size-250);border-radius:var(--radius-full);border:var(--size-25) solid var(--on-dark-text-color);border-right-color:transparent}
.kw-widget .kw-okc{width:104px;height:104px;border-radius:var(--radius-full);background:var(--btn-positive-bg);color:var(--on-dark-text-color);margin:34px auto 0;display:grid;place-items:center}
.kw-widget .kw-okc .k-ic{width:56px;height:56px}
.kw-widget .kw-rock{margin-top:52px;font:var(--w-book) 30px/36px var(--font-web);letter-spacing:-.6px;padding-bottom:var(--size-300);border-bottom:var(--border) solid var(--gray-50)}
.kw-widget .kw-type{margin:var(--size-300) auto 0;display:inline-flex;align-items:center;gap:var(--size-100);height:30px;padding:0 var(--size-300);border:var(--size-25) solid var(--border-color);border-radius:var(--radius-full);font:var(--t-label-large-bold);letter-spacing:.4px;text-transform:uppercase;color:var(--gray-700)}
.kw-widget .kw-type .k-ic{width:var(--size-200);height:var(--size-200)}
.kw-widget .kw-when{margin-top:var(--size-250);font:var(--t-body-large-bold);color:var(--gray-700)}
.kw-widget .kw-addr{margin:var(--size-150) var(--size-250) 0;font:var(--t-body-normal);color:var(--gray-500)}

/* ---------- empty-cell hover add (Shifts week) ---------- */
.kw-addcell{position:absolute;inset:0;display:grid;place-items:center;color:var(--primary-500)}
.kw-addcell .k-ic{width:var(--size-250);height:var(--size-250)}

/* ===== kit 1.0.3 (2026-10-01, Timesheets): demo admin captures in kit-ref/web-*.jpg ===== */
.kw-page{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 var(--size-300)}
.kw-page .kw-table{position:relative;left:auto;right:auto;top:auto;flex:none}
.kw-h2{position:relative;flex:none;padding-top:22px}
.kw-h2.has-tabs{margin:0 calc(-1 * var(--size-300));padding:22px var(--size-300) 0;border-bottom:var(--border) solid var(--border-color)}
.kw-h2.has-tabs .kw-tabs{border-bottom:0;margin-top:var(--size-150)}
.kw-h2-t{display:flex;align-items:center;gap:var(--size-150)}
.kw-h2 h1{margin:0;font:var(--t-headline-large);letter-spacing:var(--ls-headline-large);color:var(--title-text-color)}
.kw-cnt{font-style:normal;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--gray-100);font:var(--t-label-normal);color:var(--gray-800);display:grid;place-items:center}
.kw-h2-r{position:absolute;right:0;top:14px;display:flex;gap:var(--size-100)}
.kw-h2.has-tabs .kw-h2-r{right:var(--size-300);top:auto;bottom:6px}
.kw-crumb{display:flex;align-items:center;gap:2px;font:var(--t-label-normal);color:var(--gray-600);margin:-2px 0 6px}
.kw-crumb .k-ic{width:16px;height:16px}
.kw-h2 .kw-crumb + .kw-h2-t + .kw-h2-r{top:auto;bottom:0}
.kw-btn.is-secondary .k-ic{color:var(--gray-600)}
.kw-banner{flex:none;display:flex;align-items:center;gap:var(--size-150);min-height:44px;padding:0 var(--size-200);border-radius:var(--size-50);font:var(--t-body-normal);color:var(--gray-800)}
.kw-banner .k-ic{width:var(--size-250);height:var(--size-250);flex:none}
.kw-banner.is-warning{background:var(--warning-100)} .kw-banner.is-warning .k-ic{color:var(--warning-600)}
.kw-banner.is-success{background:var(--success-50)} .kw-banner.is-success>.k-ic{color:var(--success-700)}
.kw-banner b{font-weight:500;color:var(--primary-500)}
.kw-banner .kw-x{margin-left:auto;color:var(--gray-600)!important}
.kw-sp{display:flex;flex-direction:column;gap:22px}
.kw-sp-bar{display:flex;align-items:center;gap:var(--size-100);height:var(--input-height)}
.kw-sp-bar .kw-btn.is-secondary{height:var(--input-height);gap:var(--size-50);padding:0 var(--size-200) 0 var(--size-150);font:var(--t-body-normal);color:var(--title-text-color)}
.kw-picker{height:var(--input-height);width:242px;border:var(--border) solid var(--input-border);border-radius:var(--input-radius);display:flex;align-items:center;gap:var(--size-100);padding:0 var(--size-100) 0 var(--size-150);font:var(--t-body-normal);color:var(--title-text-color)}
.kw-picker>span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kw-picker .k-ic{width:var(--size-200);height:var(--size-200);color:var(--primary-500)} .kw-picker .kw-pa{color:var(--gray-600)}
.kw-icb.is-box{width:var(--input-height);height:var(--input-height);border:var(--border) solid var(--input-border);border-radius:var(--input-radius);display:grid;place-items:center;color:var(--gray-600)}
.kw-icb.is-box .k-ic{width:18px;height:18px}
.kw-sp-bar .kw-range{margin:0 0 0 var(--size-200)}
.kw-seg{display:flex;border:var(--border) solid var(--input-border);border-radius:var(--input-radius);overflow:hidden}
.kw-seg i{width:34px;height:34px;display:grid;place-items:center;color:var(--gray-600)} .kw-seg i.is-on{background:var(--gray-100)} .kw-seg .k-ic{width:20px;height:20px}
.kw-table.is-sp{border-radius:0;border-left:0;border-right:0;border-top:var(--border) solid var(--table-border)}
.kw-table.is-sp .kw-tr{height:51px} .kw-table.is-sp .kw-tr.is-head{height:37px}
.kw-table.is-sp .kw-tr.is-head .kw-td{font:var(--t-label-normal);color:var(--gray-500)}
.kw-table.is-sp .kw-td{border-right:var(--border) solid var(--table-border)}
.kw-table.is-sp .kw-td:nth-child(1),.kw-table.is-sp .kw-td:nth-child(2){border-right:0}
.kw-table.is-sp .is-lock .k-ic{width:18px;height:18px;color:var(--gray-500)}
.kw-table.is-sp .is-date{font:var(--t-label-normal);color:var(--gray-700)}
.kw-table.is-sp .is-off .is-date,.kw-table.is-sp .is-off .is-sched{color:var(--gray-500)}
.kw-table.is-sp .is-sched{justify-content:center;font:450 14px/18px var(--font-web);color:var(--gray-700)}
.kw-table.is-sp .is-p{position:relative;font:400 14px/18px var(--font-web);color:var(--gray-800);gap:6px}
.kw-table.is-sp .is-p.is-rec{background:var(--success-a16)}
.kw-table.is-sp .is-p.is-miss{background:var(--danger-a12)}
.kw-table.is-sp .kw-mchev{position:absolute;right:10px;width:16px;height:16px;color:var(--gray-600);opacity:0}
.kw-table.is-sp .is-p.is-hover .kw-mchev{opacity:1} .kw-table.is-sp .is-p.is-miss.is-hover{background:#f53f3e2e}
.kw-pdot{width:8px;height:8px;border-radius:50%;flex:none} .kw-pdot.is-pending{background:var(--warning-500)} .kw-pdot.is-invalid{background:var(--danger-500)}
.kw-table.is-sp .is-hrs{font:500 14px/18px var(--font-web);color:var(--gray-700)}
.kw-table.is-plain{border:0;border-radius:0}
.kw-table.is-plain .kw-td{border-right:0}
.kw-table.is-plain .kw-tr.is-head{border-bottom:var(--border) solid var(--table-border)}
.kw-table.is-caps .kw-tr.is-head .kw-td{font:var(--t-label-caps);letter-spacing:var(--ls-label-caps);text-transform:uppercase;color:var(--gray-400)}
.kw-table .kw-td .kw-ini{display:inline-grid;place-items:center;background:var(--primary-50);color:var(--primary-600);font:var(--t-label-normal)}
.kw-prog{display:flex;align-items:center;gap:var(--size-200);width:100%}
.kw-prog>span{white-space:nowrap} .kw-prog small{font:inherit;color:var(--gray-500)}
.kw-bar{flex:1;max-width:72px;height:4px;border-radius:2px;background:var(--gray-100);position:relative;overflow:hidden} .kw-bar b{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--success-600)}
.kw-prog em{font-style:normal;font:var(--t-body-normal-bold);color:var(--gray-700);min-width:36px}
.kw-est{display:flex;align-items:center;gap:4px;color:var(--gray-600)} .kw-est .k-ic{width:16px;height:16px}
.kw-lkname{display:flex;align-items:center;gap:var(--size-100)} .kw-lkname .k-ic{width:15px;height:15px;color:var(--gray-400)}
.kw-tick{width:18px;height:18px;color:var(--gray-800)}
.kw-td.is-c{justify-content:center}
.kw-sp .kw-table.is-sp{align-self:flex-start}

/* ===== kit 1.0.4 (2026-10-01, Leave management): kit-ref/web-absence-*.jpg ===== */
.kw-lbar{flex:none;display:flex;align-items:center;gap:var(--size-200);height:var(--input-height)}
.kw-lbar .kw-range{margin:0 var(--size-100)}
.kw-lbar-ic{width:32px;height:32px;display:grid;place-items:center;color:var(--gray-600)} .kw-lbar-ic .k-ic{width:20px;height:20px}
.kw-ddbox{height:32px;padding:0 var(--size-150);border-radius:var(--size-50);background:var(--gray-100);display:flex;align-items:center;gap:var(--size-75);font:var(--t-body-normal);color:var(--gray-800)} .kw-ddbox .k-ic{width:16px;height:16px}
.kw-rp{position:absolute;right:0;top:0;bottom:0;width:404px;background:var(--bg-color);border-left:var(--border) solid var(--border-color);box-shadow:-12px 0 32px rgba(33,36,46,.08);display:flex;flex-direction:column;z-index:4}
.kw-rp-h{height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 var(--size-300);border-bottom:var(--border) solid var(--border-color);font:var(--t-headline-normal);color:var(--title-text-color)} .kw-rp-h .k-ic{width:20px;height:20px;color:var(--gray-600)}
.kw-rp-s{padding:var(--size-300);border-bottom:var(--border) solid var(--border-color);display:flex;flex-direction:column;gap:var(--size-200)}
.kw-rp-p{display:flex;align-items:center;gap:var(--size-150)}
.kw-rp-av{width:var(--size-400);height:var(--size-400);border-radius:var(--radius-full);flex:none} .kw-rp-av.kw-ini{display:inline-grid;place-items:center;background:var(--primary-50);color:var(--primary-600);font:var(--t-label-normal)}
.kw-rp-p b{display:block;font:var(--t-body-normal-bold);color:var(--title-text-color)} .kw-rp-p small{display:block;font:var(--t-caption-normal);color:var(--caption-text-color)}
.kw-rp-badge{margin-left:auto;display:grid}
.kw-rp-badge>*{grid-area:1/1;justify-self:end}
.kw-rp-f{display:grid;grid-template-columns:105px 1fr;row-gap:var(--size-150);font:var(--t-body-normal)} .kw-rp-f span{color:var(--gray-600)} .kw-rp-f b{font-weight:400;color:var(--title-text-color)}
.kw-rp-paid{align-self:flex-start;height:24px;padding:0 var(--size-100);border-radius:var(--radius-full);border:var(--border) solid var(--success-600);color:var(--success-700);display:inline-flex;align-items:center;gap:4px;font:var(--t-label-caps);letter-spacing:var(--ls-label-caps);text-transform:uppercase} .kw-rp-paid .k-ic{width:14px;height:14px}
.kw-rp-ft{font:var(--t-title-normal);color:var(--title-text-color)}
.kw-rp-fl{display:flex;align-items:center;gap:var(--size-150)} .kw-rp-fl b{font:var(--t-body-normal-bold);color:var(--title-text-color)} .kw-rp-fl small{font:var(--t-caption-normal);color:var(--caption-text-color)}
.kw-rp-stw{margin-left:auto;display:grid} .kw-rp-stw>*{grid-area:1/1}
.kw-rp-st{width:18px;height:18px;border-radius:50%;border:2px solid var(--warning-500);display:grid;place-items:center} .kw-rp-st.is-done{border:0;background:var(--success-600);color:#fff} .kw-rp-st .k-ic{width:13px;height:13px}
.kw-rp-c{padding:var(--size-300);font:var(--t-caption-normal);color:var(--caption-text-color)} .kw-rp-c b{font-weight:700;color:var(--gray-600)}
.kw-rp-b{margin-top:auto;padding:var(--size-300);border-top:var(--border) solid var(--border-color);display:grid;grid-template-columns:1fr 1fr;gap:var(--size-200)}
.kw-rp-dec{background:var(--danger-500);color:#fff} .kw-rp-app{background:#5dc56f;color:#fff}
.kw-rp-can{grid-column:1/-1;justify-self:center;font:var(--t-body-normal);color:var(--gray-700)}

/* ===== kit 1.0.5 (2026-10-01, Electronic signature) ===== */
.kw-sig{display:inline-flex;align-items:center;height:19px;padding:0 10px;border:1px solid currentColor;border-radius:9.5px;font:400 10px/1 var(--font-web);text-transform:uppercase;white-space:nowrap;background:transparent}
.kw-sig.is-pending{color:#fbc533} .kw-sig.is-signed{color:#00ca73} .kw-sig.is-neutral,.kw-sig.is-canceled{color:#525f7f}
.kw-td .kw-racts{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;opacity:0}
.kw-tr.is-hover .kw-racts{opacity:1}
.kw-btn.is-sm{height:30px;padding:0 8px;font:var(--t-body-normal);color:var(--title-text-color)}
.kw-racts .kw-icb.is-box{width:36px;height:30px;border:var(--border) solid var(--gray-150);border-radius:var(--btn-radius);background:var(--bg-color);display:grid;place-items:center;color:var(--gray-700)}
.kw-racts .kw-icb .k-ic{width:18px;height:18px}
.kw-tr.is-hover{background:var(--gray-25,#f9fafc)}
.kw-ghead{flex:none;display:flex;flex-direction:column;gap:4px} .kw-ghead b{font:400 18px/22px var(--font-web);color:#434e6c;text-transform:uppercase}
.kw-ghead small{font:400 13px/16px var(--font-web);color:var(--gray-400)}
.kw-table.is-caps .kw-tr .kw-td.is-sig{position:relative;justify-content:center}
.kw-fmodal{position:absolute;width:414px;padding:36px 34px 34px;background:var(--bg-color);border-radius:8px;box-shadow:0 20px 50px rgba(20,30,60,.22);z-index:6}
.kw-fmodal h2{margin:0 0 26px;text-align:center;font:400 26px/32px var(--font-web);color:var(--title-text-color)}
.kw-fmodal label{display:block;margin:0 0 6px;font:500 14px/18px var(--font-web);color:var(--title-text-color)}
.kw-fsel{height:36px;margin-bottom:16px;padding:0 12px 0 16px;border:1px solid var(--gray-300);border-radius:4px;display:flex;align-items:center;gap:8px;font:400 15px/1 var(--font-web);color:var(--title-text-color)}
.kw-fsel span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kw-fsel .k-ic{width:18px;height:18px;color:var(--gray-700)}
.kw-fmodal-b{display:flex;gap:34px;margin-top:36px} .kw-fmodal-b .kw-btn{flex:1}
.kw-fm-c{background:var(--bg-color);color:var(--primary-500);border:1px solid var(--primary-500)}
.kw-scrim{position:absolute;inset:0;background:rgba(255,255,255,.72);z-index:5}

/* ===== kit 1.0.7 (2026-10-01, Analytics) ===== */
.kw-dash{position:absolute;left:0;right:0;top:0;bottom:0;background:#EEF0F3}
.kw-dfil{position:absolute;left:6px;right:6px;top:6px;height:36px;background:#fff;border:1px solid #E3E5EA;border-radius:3px;display:flex;align-items:center;gap:10px;padding:0 12px;font:400 12px/1 var(--font-web);color:#21242E}
.kw-dfil-l{letter-spacing:.8px;color:#757E9C;font-size:11.5px} .kw-dfil-p{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#8A90A6;font-size:20px;line-height:1}
.kw-dchip{height:24px;border-radius:12px;background:#E3F0FD;color:#1E6FC8;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;padding:0 6px 0 11px} .kw-dchip .k-ic{width:12px;height:12px}
.kw-dtile{position:absolute;background:#fff;border:1px solid #E3E5EA;border-radius:3px;overflow:hidden;font-family:var(--font-web)}
.kw-dt-t{position:absolute;left:14px;top:13px;right:60px;font-size:13.5px;line-height:1.15;color:#21242E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kw-dt-i{position:absolute;right:12px;top:10px;display:flex;gap:14px;color:#5A6178} .kw-dt-i .k-ic{width:17px;height:17px}
.kw-dt-b{position:absolute;left:0;right:0;top:40px;bottom:0}
.kw-kpi{position:absolute;left:0;right:0;top:12px;text-align:center} .kw-kpi b{display:block;font:400 25px/30px var(--font-web);color:#21242E;letter-spacing:-.3px}
.kw-kpi small{display:block;margin-top:3px;font-size:11px} .kw-kpi small.is-bad{color:#E0433A} .kw-kpi small.is-good{color:#2FA36B}
.kw-step text,.kw-donut text{font-family:var(--font-web)}
.kw-brows{position:absolute;left:0;right:0;top:4px} .kw-brow{height:33px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;font-size:13px;color:#21242E}
.kw-brow span{padding-left:12px;border-right:1px solid #EEF0F3;height:100%;display:flex;align-items:center} .kw-brow i{height:22px;margin-left:4px;background:#4A90E2;border-radius:1px} .kw-brow em{font-style:normal;margin-left:8px;font-size:12px;color:#5A6178}
.kw-dtab{position:absolute;left:0;right:0;top:4px;font-size:13px;color:#21242E}
.kw-dtr{height:32px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center} .kw-dtr.is-h{height:34px;border-bottom-color:#E3E5EA}
.kw-dtr>span:first-child{width:55%;padding-left:12px;border-right:1px solid #EEF0F3;height:100%;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.kw-dtr>span:last-child{position:relative;flex:1;height:100%;display:flex;align-items:center;padding-left:10px} .kw-dtr i{position:absolute;left:2px;top:4px;bottom:4px;background:#D6E6FA} .kw-dtr b{position:relative;font-weight:400}
.kw-rbar{flex:none;display:flex;align-items:center;gap:var(--size-100);height:var(--input-height)} .kw-rbar .kw-rx{margin-left:auto;width:16px;height:16px} .kw-rbar .kw-range{margin:0 var(--size-100)}
.kw-lbar-ic.is-box{border:var(--border) solid var(--input-border);border-radius:var(--input-radius)}
.kw-dtip{position:absolute;background:#21242E;color:#fff;border-radius:6px;padding:8px 11px;font:400 12px/1.45 var(--font-web);white-space:nowrap;z-index:5}
.kw-dtip small{display:block;color:#A7ADC0;font-size:12px}

.kw-dleg{display:flex;flex-direction:column;gap:10px;font-family:var(--font-web);font-size:12.5px;color:#21242E}.kw-dleg-r{display:flex;align-items:center;gap:8px;white-space:nowrap}.kw-dleg-r i{width:10px;height:10px;border-radius:2px;flex:none}.kw-dleg-r b{font-weight:400;color:#5A6178;margin-left:6px}

/* ===== kit 1.0.10 (2026-10-02, Enterprise) ===== */
.kw-check.is-on{background:var(--checkbox-on-bg);border-color:var(--checkbox-on-bg);position:relative;display:inline-block}
.kw-check.is-on::after{content:"";position:absolute;left:50%;top:45%;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
.kw-pf{position:absolute;inset:0;padding:22px var(--size-300) 0;display:flex;flex-direction:column}
.kw-pf-h{display:flex;align-items:center;gap:18px;margin-top:10px}
.kw-pf-av{width:64px;height:64px;border-radius:50%;flex:none;font-size:20px} .kw-pf-h b{display:block;font:var(--t-headline-normal);color:var(--title-text-color)} .kw-pf-h small{display:block;margin-top:6px;font:var(--t-body-normal);color:var(--gray-700)}
.kw-pf-tabs{margin:18px calc(-1 * var(--size-300)) 0;padding:0 var(--size-300)}
.kw-pf-b{display:flex;gap:44px;padding-top:24px}
.kw-pf-m{width:170px;flex:none;display:flex;flex-direction:column;gap:4px}
.kw-pf-m span{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;border-radius:4px;font:var(--t-body-normal);color:var(--gray-700)}
.kw-pf-m span.is-on{background:var(--gray-50)} .kw-pf-m .k-ic{width:14px;height:14px}
.kw-pf-c{flex:1;min-width:0}
.kw-pr-t{font:var(--t-title-normal);color:var(--title-text-color);font-size:17px;margin-bottom:38px}
.kw-pr-box{width:324px;border:var(--border) solid var(--gray-300);border-radius:4px;padding:14px 12px 12px}
.kw-pr-f{height:32px;border-radius:3px;background:var(--gray-50);border:var(--border) solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 10px;font:var(--t-body-normal);color:var(--gray-700)}
.kw-pr-f .k-ic{width:14px;height:14px;color:var(--gray-600)}
.kw-pr-l{margin-top:14px;font:var(--t-caption-normal);font-size:12px;color:var(--gray-700)}
.kw-pr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.kw-pr-chips span{height:20px;padding:0 8px;border:var(--border) solid var(--gray-200);border-radius:99px;display:inline-flex;align-items:center;font-size:11px;color:var(--gray-700)}
.kw-pr-add{margin-top:20px;display:flex;align-items:center;gap:6px;color:var(--primary-500);font:var(--t-body-normal)} .kw-pr-add .k-ic{width:15px;height:15px}
/* pay policy rates (kit 1.0.12; kit-ref web-pay-policy-overtime.jpg) */
.kw-pr{font:var(--t-body-large);color:var(--title-text-color)}
.kw-pr .kw-pr-l{font:var(--t-body-normal);color:var(--title-text-color)}
.kw-pr .kw-pr-radios{display:flex;gap:24px;margin-top:10px}
.kw-pr .kw-pr-radio{display:flex;align-items:center;gap:8px;font:var(--t-body-normal)}
.kw-pr .kw-pr-radio i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--gray-300);background:#fff}
.kw-pr .kw-pr-radio.is-on i{border:5px solid var(--primary-500)}
.kw-pr .kw-pr-h{display:flex;margin-top:22px;padding-bottom:20px;border-bottom:1px solid var(--border-color);font:var(--t-label-normal);font-weight:400;color:var(--caption-text-color)}
.kw-pr .kw-pr-row{display:flex;align-items:center;gap:8px;height:74px;border-bottom:1px solid var(--border-color)}
.kw-pr .kw-pr-dd{width:212px;height:32px;border:1px solid var(--gray-200);border-radius:4px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:var(--t-body-normal)}
.kw-pr .kw-pr-dd .k-ic{width:16px;height:16px;color:var(--gray-600)}
.kw-pr .kw-pr-dn{width:32px;height:32px;border:1px solid var(--gray-200);border-radius:4px;display:grid;place-items:center;color:var(--gray-600)} .kw-pr .kw-pr-dn .k-ic{width:20px;height:20px}
.kw-pr .kw-pr-rate{width:113px;height:32px;margin-left:6px;border:1px solid var(--gray-200);border-radius:4px;display:flex;align-items:center;gap:10px;overflow:hidden;font:var(--t-body-normal)}
.kw-pr .kw-pr-rate b{width:28px;height:100%;display:grid;place-items:center;background:var(--primary-a12);color:var(--primary-500);font-weight:400}
.kw-pr .kw-pr-name{width:266px;height:32px;border:1px solid var(--gray-200);border-radius:4px;display:flex;align-items:center;padding:0 10px;font:var(--t-body-normal);white-space:nowrap;overflow:hidden}
.kw-pr .kw-pr-add{height:32px;padding:0 14px;border:1px solid var(--gray-200);border-radius:4px;display:flex;align-items:center;gap:8px;color:var(--primary-500);font:var(--t-body-normal)}
.kw-pr .kw-pr-add .k-ic{width:16px;height:16px}
.kw-pr .kw-pr-new{display:flex;align-items:center;gap:8px;margin-top:22px;padding-left:12px;color:var(--primary-500);font:var(--t-body-normal)} .kw-pr .kw-pr-new .k-ic{width:16px;height:16px}
.kw-pr .kw-pr-row > *{flex:none;box-sizing:border-box;margin-top:0;margin-bottom:0;align-self:center}
.kw-pr .kw-pr-add{display:inline-flex;line-height:1}
/* web/vacation-policy: Vacations Policies -> policy -> Balance & Rules (demo admin, read at 1440) */
.kw-vp{display:flex;flex-direction:column;align-items:flex-start;font:var(--t-body-normal);color:var(--title-text-color)}
.kw-vp label{display:flex;align-items:center;gap:6px;margin:0 0 8px;font:500 14px/18px var(--font-web);color:var(--title-text-color)} .kw-vp label.is-mt{margin-top:20px}
.kw-vp .kw-vp-i{width:15px;height:15px;color:var(--gray-600)}
.kw-vp h3{margin:50px 0 18px;font:500 17px/22px var(--font-web);color:var(--title-text-color)}
.kw-vp-in{height:36px;box-sizing:border-box;border:1px solid var(--gray-300,#c7cbd6);border-radius:4px;background:var(--bg-color);display:inline-flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;font:400 14px/18px var(--font-web);color:var(--title-text-color);white-space:nowrap}
.kw-vp-in .k-ic{width:16px;height:16px;color:var(--gray-700);flex:none}
.kw-vp-in.is-off{background:var(--gray-100,#f0f1f4);border-color:var(--gray-200,#dfe2e8)}
.kw-vp-name{width:364px}
.kw-vp-row{display:flex;gap:12px}
.kw-vp-num{width:130px} .kw-vp-num span{color:var(--gray-600)}  .kw-vp-num b{font-weight:400}
.kw-vp-date{width:auto;min-width:110px;border-color:var(--gray-700,#575f79)}
.kw-vp-sel{width:364px}
.kw-vp-hint{margin:10px 0 30px;font:400 13px/16px var(--font-web);color:var(--gray-500,#8a91a8)}
.kw-vp-tg{display:flex;align-items:center;gap:14px;margin:0 0 20px;font:400 14px/18px var(--font-web);color:var(--title-text-color)} .kw-vp-tg .kw-vp-i{margin-left:-6px}
.kw-vp-sw{position:relative;flex:none;width:32px;height:18px;border-radius:99px;background:var(--gray-300,#c7cbd6)} .kw-vp-sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.kw-vp-sw.is-on{background:var(--primary-500)} .kw-vp-sw.is-on::after{left:16px}
/* web/request-settings: Requests Settings modal, a category's approval flow (806 x 660) */
.kw-rs{position:absolute;width:806px;height:660px;display:flex;flex-direction:column;background:var(--bg-color);border-radius:8px;box-shadow:0 20px 50px rgba(20,30,60,.22);overflow:hidden;z-index:6}
.kw-rs-h{height:66px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 25px;border-bottom:1px solid var(--border-color);font:400 20px/26px var(--font-web);color:var(--title-text-color)} .kw-rs-h .k-ic{width:22px;height:22px;color:var(--gray-700)}
.kw-rs-b{flex:1;display:flex;min-height:0}
.kw-rs-cats{width:284px;flex:none;box-sizing:border-box;padding:24px 16px 0 17px;border-right:1px solid var(--border-color)}
.kw-rs-cat{height:32px;display:flex;align-items:center;gap:12px;padding:0 8px;border-radius:4px;font:400 14px/18px var(--font-web);color:var(--title-text-color)} .kw-rs-cat span{flex:1}
.kw-rs-cat.is-on{background:var(--gray-100,#f0f1f4)} .kw-rs-cat .k-ic{width:18px;height:18px;color:var(--gray-700)}
.kw-rs-new{margin:18px 0 0 8px;font:400 13px/16px var(--font-web);color:var(--primary-500)}
.kw-rs-pane{flex:1;padding:22px 25px 0}
.kw-rs-pane h3{margin:0 0 26px;font:400 20px/26px var(--font-web);color:var(--title-text-color)}
.kw-rs-lv{margin:0 0 20px 0} .kw-rs-ll{margin:0 0 6px 57px;font:500 13px/16px var(--font-web);color:var(--gray-700,#575f79)}
.kw-rs-lr{display:flex;align-items:center;gap:20px}
.kw-rs-av{position:relative;width:36px;height:36px;flex:none;border-radius:50%;background:var(--gray-100,#f0f1f4);display:grid;place-items:center;color:var(--title-text-color)} .kw-rs-av .k-ic{width:20px;height:20px}
.kw-rs-av i{position:absolute;right:-5px;bottom:2px;width:14px;height:14px;border-radius:50%;background:var(--primary-500);color:#fff;font:500 10px/14px var(--font-web);font-style:normal;text-align:center}
.kw-rs-sel{width:287px;height:36px;box-sizing:border-box;border:1px solid var(--gray-300,#c7cbd6);border-radius:4px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:400 14px/18px var(--font-web);color:var(--title-text-color)} .kw-rs-sel .k-ic{width:16px;height:16px;color:var(--gray-700)}
.kw-rs-auto{display:flex;align-items:center;gap:10px;margin:10px 0 0 57px;font:400 14px/18px var(--font-web);color:var(--title-text-color)}
.kw-rs-cb{width:16px;height:16px;box-sizing:border-box;border:1px solid var(--gray-300,#c7cbd6);border-radius:3px;display:grid;place-items:center;background:#fff} .kw-rs-cb.is-on{background:var(--primary-500);border-color:var(--primary-500);color:#fff} .kw-rs-cb .k-ic{width:14px;height:14px}
.kw-rs-lv.is-muted .kw-rs-av{opacity:.5} .kw-rs-lv.is-muted .kw-rs-av i{background:var(--primary-200,#a8cdf5)} .kw-rs-lv.is-muted .kw-rs-auto{color:var(--gray-600)} .kw-rs-lv.is-muted .kw-rs-cb{border-color:var(--gray-200)}
.kw-rs-f{height:62px;flex:none;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:0 25px;border-top:1px solid var(--border-color)}
.kw-rs-pane h4{margin:0 0 18px;font:400 17px/22px var(--font-web);color:var(--title-text-color)}
/* web/night-shift: Pay Policies -> policy -> Hours Distribution -> Night Shift (demo admin, read at 1440) */
.kw-ns{width:max-content;font:400 14px/18px var(--font-web);color:var(--title-text-color)}
.kw-ns h3{margin:0 0 16px;font:500 15px/20px var(--font-web);color:var(--title-text-color)}
.kw-ns-cb{display:flex;align-items:center;gap:8px} .kw-ns-cb.is-two{align-items:flex-start;width:360px;margin-top:16px} .kw-ns-cb.is-two .kw-rs-cb{margin-top:2px}
.kw-ns-row{display:flex;gap:8px;margin-top:14px}
.kw-ns-f label{display:flex;align-items:center;gap:6px;margin:0 0 6px;font:500 13px/16px var(--font-web);color:var(--title-text-color)} .kw-ns-f .kw-ns-i{width:14px;height:14px;color:var(--gray-600)}
.kw-ns-f .kw-vp-in{width:106px;height:32px}
/* web/pay-policies-v2 + web/calc-cards: Figma Pay policy & Templates (Ready for Prod), type read per layer:
   Circular Book 14/20 -0.08 #3e4357 cells, Medium 13/16 #757e9c heads, Medium 14/20 names; chips rgba(33,36,46,.04) r4 */
.kw-pt{border-top:1px solid #e1e3eb;width:max-content}
.kw-pt-tr{display:flex;height:48px;border-bottom:1px solid #e1e3eb} .kw-pt-tr.is-h{height:36px}
.kw-pt-td{flex:none;box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:0 12px;border-right:1px solid #e1e3eb;overflow:hidden;white-space:nowrap;font:400 14px/20px var(--font-web);letter-spacing:-.08px;color:#3e4357}
.kw-pt-td:last-child{border-right:0} .kw-pt-td.is-r{justify-content:flex-end}
.kw-pt-tr.is-h .kw-pt-td{font:500 13px/16px var(--font-web);letter-spacing:0;color:#757e9c}
.kw-pt-nm{font-weight:500} .kw-pt-lk{width:14px;height:14px;color:#3e4357;flex:none}
.kw-pt-tag{height:20px;padding:0 8px;border:1px solid #cdd0db;border-radius:9999px;display:inline-flex;align-items:center;font:400 12px/14px var(--font-web);color:#3e4357}
.kw-pt-tx{overflow:hidden;text-overflow:ellipsis}
.kw-pt-chip{height:28px;padding:0 6px;border-radius:4px;background:rgba(33,36,46,.04);display:inline-flex;align-items:center;flex:none}
.kw-pt-more{flex:none;padding-left:2px}
.kw-cc{width:720px;font:400 14px/20px var(--font-web);color:#3e4357}
.kw-cc-s{height:32px;box-sizing:border-box;border:1px solid #a7adc0;border-radius:4px;display:flex;align-items:center;gap:10px;padding:0 10px;color:#757e9c;letter-spacing:-.08px} .kw-cc-s .k-ic{width:18px;height:18px;color:#3e4357}
.kw-cc-ty{display:flex;gap:4px;margin:8px 0 16px} .kw-cc-ty span{height:28px;box-sizing:border-box;padding:0 7px;border:1px solid #cdd0db;border-radius:4px;background:#fff;display:inline-flex;align-items:center;font:500 14px/18px var(--font-web);letter-spacing:-.12px}
.kw-cc-ty span.is-on{background:rgba(33,36,46,.08);border-color:#9ba1b7}
.kw-cc-c{border:1px solid #e1e3eb;border-radius:4px;padding:24px;margin-bottom:8px}
.kw-cc-t{display:flex;align-items:center;gap:8px} .kw-cc-t b{font:400 16px/20px var(--font-web);color:#3e4357}
.kw-cc-t i{height:20px;padding:0 8px;border-radius:4px;display:inline-flex;align-items:center;font:400 12px/14px var(--font-web);font-style:normal;color:#3e4357}
.kw-cc-t i.is-rate{background:rgba(30,151,247,.24)} .kw-cc-t i.is-scheduling{background:#f6eaff} .kw-cc-t i.is-wage{background:rgba(0,202,115,.16)}
.kw-cc-t .k-ic{margin-left:auto;width:18px;height:18px;color:#757e9c}
.kw-cc-d{margin-top:4px;color:#575f79;letter-spacing:-.08px}
/* web/payroll-details + web/complete-payroll: Figma Web Admin [Desktop] page Demo (payroll-details, Complete payroll), type read per layer */
.kw-pd{position:absolute;left:24px;right:24px;top:22px;bottom:0;font-family:var(--font-web);color:#3e4357}
.kw-pd-crumb{display:flex;align-items:center;gap:4px;font:400 14px/18px var(--font-web);color:#575f79} .kw-pd-crumb .k-ic{width:16px;height:16px}
.kw-pd-hd{display:flex;align-items:center;justify-content:space-between;margin-top:12px} .kw-pd-hd h1{margin:0;font:400 24px/32px var(--font-web);letter-spacing:-.24px;color:#3e4357}
.kw-pd-acts{display:flex;gap:8px} .kw-pd-acts .kw-btn{height:32px}
.kw-pd-bn{display:flex;align-items:center;gap:10px;margin-top:20px;height:40px;padding:0 14px;border-radius:4px;background:rgba(0,202,115,.12);font:400 14px/18px var(--font-web);color:#3e4357}
.kw-pd-bn > .k-ic{width:18px;height:18px;color:#00a15c} .kw-pd-bn span{flex:1} .kw-pd-bn a{color:var(--primary-500)} .kw-pd-bn > .k-ic:last-child{color:#575f79;width:16px}
.kw-pd-bar{margin-top:20px} .kw-pd-t{margin-top:24px;border-top:1px solid #e1e3eb}
.kw-pd-tr{display:flex;height:49px;border-bottom:1px solid #e1e3eb} .kw-pd-tr.is-h{height:36px}
.kw-pd-td{flex:none;box-sizing:border-box;display:flex;align-items:center;padding:0 12px;border-right:1px solid #e1e3eb;font:400 14px/20px var(--font-web);letter-spacing:-.08px}
.kw-pd-tr.is-h .kw-pd-td{font:500 13px/16px var(--font-web);letter-spacing:0;color:#757e9c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kw-pd-tr.is-h .kw-pd-td:not(.is-chk){display:block;line-height:36px}
.kw-pd-td.is-chk{width:44px;border-right:0} .kw-pd-td.is-chk i{width:16px;height:16px;box-sizing:border-box;border:1px solid #c7cbd6;border-radius:3px;background:#fff}
.kw-pd-td.is-m{flex:1;gap:10px} .kw-pd-td.is-m b{display:block;font:500 14px/18px var(--font-web)} .kw-pd-td.is-m small{display:block;font:400 12px/16px var(--font-web);color:#757e9c}
.kw-pd-av{width:32px;height:32px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--primary-50,#e8f3fe)} .kw-pd-av img{width:100%;height:100%;display:block}
.kw-pd-ini{font:500 13px/1 var(--font-web);color:var(--primary-500)}
.kw-pd-td.is-n{width:110px;justify-content:center} .kw-pd-td.is-n.is-hot{background:#fffcf4} .kw-pd-td.is-n b{font:500 14px/20px var(--font-web)} .kw-pd-ok{width:16px;height:16px;color:#575f79}
.kw-pd-tr.is-h .kw-pd-td.is-n{justify-content:flex-start}
.kw-pd-td.is-h2{width:110px;justify-content:flex-end} .kw-pd-tr.is-h .kw-pd-td.is-h2{justify-content:flex-start}
.kw-pd-td.is-st{width:124px;border-right:0}
.kw-cp{position:absolute;width:640px;background:#fff;border-radius:8px;box-shadow:0 24px 60px rgba(20,30,60,.30);overflow:hidden;font-family:var(--font-web);color:#3e4357;z-index:7}
.kw-cp-h{height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #e1e3eb;font:400 20px/24px var(--font-web);letter-spacing:-.2px} .kw-cp-h .k-ic{width:24px;height:24px;color:#3e4357}
.kw-cp-b{padding:24px 24px 32px} .kw-cp-g{display:flex;align-items:center;gap:8px;font:400 14px/18px var(--font-web)} .kw-cp-grp{width:18px;height:18px;color:var(--primary-500)}
.kw-cp-p{margin-top:8px;font:400 20px/24px var(--font-web);letter-spacing:-.2px}
.kw-cp-l{margin-top:24px;border:1px solid #e1e3eb;border-radius:4px;overflow:hidden}
.kw-cp-r{height:56px;box-sizing:border-box;display:flex;align-items:center;gap:16px;padding:0 20px;border-top:1px solid #e1e3eb} .kw-cp-r:first-child{border-top:0}
.kw-cp-tx{flex:1;font:500 14px/18px var(--font-web);letter-spacing:-.08px}
.kw-cp-n{width:24px;height:24px;flex:none;border-radius:9999px;background:rgba(235,177,1,.12);color:#a37b01;display:grid;place-items:center;font:500 13px/16px var(--font-web);font-style:normal}
.kw-cp-r .kw-btn{height:32px;padding:0 12px;flex:none}
.kw-cp-ok{width:24px;height:24px;flex:none}
.kw-cp-note{display:flex;align-items:center;gap:10px;margin-top:24px;min-height:44px;box-sizing:border-box;padding:12px 12px 12px 14px;letter-spacing:-.08px;border-radius:4px;background:#e9f5ff;font:400 14px/20px var(--font-web);color:#373c4d} .kw-cp-note .k-ic{width:18px;height:18px;flex:none;color:var(--primary-500)}
.kw-cp-f{height:68px;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;gap:28px;padding:0 24px;border-top:1px solid #e1e3eb}
.kw-cp-link{font:500 14px/18px var(--font-web);color:var(--primary-500)} .kw-cp-f .kw-btn{height:36px;padding:0 16px}