or a to scope base-level defaults. */ .warm-page { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .warm-page h1, .warm-page h2, .warm-page h3, .warm-page h4, .warm-page h5, .warm-page h6 { margin: 0; font-weight: var(--fw-semi); line-height: var(--leading-tight); color: var(--color-text); } .warm-page h1 { font-size: var(--text-2xl); letter-spacing: -0.01em; } .warm-page h2 { font-size: var(--text-xl); letter-spacing: -0.01em; } .warm-page h3 { font-size: var(--text-lg); } .warm-page h4 { font-size: var(--text-md); } .warm-page h5 { font-size: var(--text-base); } .warm-page h6 { font-size: var(--text-sm); } .warm-page p { margin: 0 0 var(--space-3); } .warm-page p:last-child { margin-bottom: 0; } .warm-page a { color: var(--color-primary); text-decoration: none; transition: color var(--t-fast); } .warm-page a:hover { color: var(--color-primary-hover); text-decoration: underline; } .warm-page *:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Hairline divider utility */ .warm-page .hairline, .hairline { height: 1px; background: var(--color-hairline); margin: var(--space-4) 0; border: 0; } /* === LAYOUT SHELL ========================================================= */ .shell { display: flex; flex-direction: row; min-height: 100vh; background: var(--color-bg); } .sidebar { width: 240px; flex-shrink: 0; background: #2f3a32; color: #d8dfd9; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); } .sidebar__logo { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-6); font-weight: var(--fw-semi); font-size: var(--text-md); color: #f3e9d7; } .sidebar__logo .dot { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--color-accent); display: grid; place-items: center; color: white; font-size: 14px; } .sidebar__nav { display: flex; flex-direction: column; gap: 2px; } .sidebar__nav-item { color: #cfd4cf; padding: 8px 12px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); text-decoration: none; transition: var(--t-fast); cursor: pointer; } .sidebar__nav-item:hover { background: rgba(255, 255, 255, 0.05); color: white; text-decoration: none; } .sidebar__nav-item--active { background: rgba(200, 155, 90, 0.15); color: #f3e9d7; } .sidebar__section-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; color: #8e9a8f; margin: var(--space-4) 12px 4px; } .sidebar__footer { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); } .main { flex: 1; min-width: 0; background: var(--color-bg); padding: var(--space-6) var(--space-8); overflow-x: auto; } /* ========================================================================== TASK 2 — DISPLAY PRIMITIVES ========================================================================== */ /* === AVATARS ============================================================== */ .av { position: relative; width: var(--av-size, 40px); height: var(--av-size, 40px); border-radius: 50%; color: white; font-weight: var(--fw-semi); font-size: calc(var(--av-size, 40px) * 0.33); display: grid; place-items: center; flex-shrink: 0; letter-spacing: 0.02em; user-select: none; } .av--sm { --av-size: 32px; font-size: 12px; } .av--md { --av-size: 40px; font-size: 13px; } .av--lg { --av-size: 56px; font-size: 16px; } .av--xl { --av-size: 88px; font-size: 26px; } .av--xxl { --av-size: 128px; font-size: 38px; } /* 8-color deterministic palette */ .av[data-c="1"] { background: var(--avatar-1); } .av[data-c="2"] { background: var(--avatar-2); } .av[data-c="3"] { background: var(--avatar-3); } .av[data-c="4"] { background: var(--avatar-4); } .av[data-c="5"] { background: var(--avatar-5); } .av[data-c="6"] { background: var(--avatar-6); } .av[data-c="7"] { background: var(--avatar-7); } .av[data-c="8"] { background: var(--avatar-8); } /* Status halo wrapper */ .av-wrap { position: relative; display: inline-block; } .av-wrap::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; pointer-events: none; } .av-halo--concern::before { border-color: var(--color-danger); } .av-halo--on-leave::before { border-color: var(--color-warning); } .av-halo--probation::before { border-color: var(--color-info); border-style: dashed; } .av-halo--new::before { border-color: var(--color-primary); } /* XL halos get thicker border */ .av-wrap.av--xl::before, .av-wrap.av--xxl::before { inset: -4px; border-width: 3px; } /* Small status badge at bottom-right */ .av-wrap .dot-badge { position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-surface); } .av-wrap .dot-badge--leave { background: var(--color-warning); } .av-wrap .dot-badge--concern { background: var(--color-danger); } .av-wrap .dot-badge--ok { background: var(--color-success); } /* Avatar stack */ .av-stack { display: inline-flex; } .av-stack > .av, .av-stack > .av-wrap { margin-left: -10px; border: 2px solid var(--color-surface); } .av-stack > :first-child { margin-left: 0; } /* === CHIPS ================================================================ */ .chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--fw-medium); background: var(--color-bg-alt); color: var(--color-text-muted); line-height: 1.4; white-space: nowrap; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .chip .bi { font-size: 12px; line-height: 1; } .chip--sage { background: var(--color-primary-soft); color: var(--color-primary-ink); } .chip--terra { background: var(--color-accent-soft); color: var(--color-accent-ink); } .chip--warn { background: var(--color-warning-soft); color: #7a5a16; } .chip--danger { background: var(--color-danger-soft); color: var(--color-danger); } .chip--info { background: var(--color-info-soft); color: var(--color-info); } .chip--success { background: var(--color-success-soft); color: var(--color-success); } .chip--neutral { background: var(--color-bg-alt); color: var(--color-text-muted); } .chip--ghost { background: transparent; border: 1px dashed var(--color-border-strong); color: var(--color-text-soft); } /* === BUTTONS ============================================================== */ .warm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text); cursor: pointer; text-decoration: none; line-height: 1.2; transition: var(--t-fast); white-space: nowrap; } .warm-btn:hover { background: var(--color-bg-alt); border-color: var(--color-border-strong); text-decoration: none; color: var(--color-text); } .warm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-soft); border-color: var(--color-primary); } .warm-btn:disabled, .warm-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .warm-btn .bi { font-size: 14px; line-height: 1; } /* Variants */ .warm-btn--primary { background: var(--color-primary); color: white; border-color: var(--color-primary); } .warm-btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: white; } .warm-btn--ghost { background: transparent; border-color: transparent; color: var(--color-primary); } .warm-btn--ghost:hover { background: var(--color-primary-soft); border-color: transparent; color: var(--color-primary-ink); } .warm-btn--danger { background: var(--color-danger); color: white; border-color: var(--color-danger); } .warm-btn--danger:hover { background: #a1443d; border-color: #a1443d; color: white; } .warm-btn--subtle { background: var(--color-bg-alt); border-color: transparent; color: var(--color-text); } .warm-btn--subtle:hover { background: var(--color-border); border-color: transparent; } /* Sizes */ .warm-btn--sm { padding: 5px 10px; font-size: var(--text-xs); } .warm-btn--md { padding: 8px 14px; font-size: var(--text-sm); } .warm-btn--lg { padding: 11px 18px; font-size: var(--text-md); } /* Icon-only square */ .warm-btn--icon { padding: 0; width: 32px; height: 32px; } .warm-btn--icon.warm-btn--sm { width: 26px; height: 26px; } .warm-btn--icon.warm-btn--lg { width: 40px; height: 40px; } /* === SECTION CARD ========================================================= */ .section-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); overflow: hidden; } .section-card__header { padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--color-hairline); } .section-card__title { font-size: var(--text-md); font-weight: var(--fw-semi); color: var(--color-text); margin: 0; line-height: var(--leading-tight); } .section-card__subtitle { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; } .section-card__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; } .section-card__body { padding: var(--space-5); } .section-card__footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-hairline); background: var(--color-surface-sunken); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); } /* === PERSON CARD ========================================================== */ .person-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); transition: var(--t-base); cursor: pointer; text-decoration: none; color: inherit; } .person-card:hover { box-shadow: var(--shadow-2); border-color: var(--color-border-strong); transform: translateY(-1px); text-decoration: none; } .person-card__top { display: flex; gap: 10px; align-items: flex-start; } .person-card__info { min-width: 0; flex: 1; } .person-card__name { font-weight: var(--fw-semi); font-size: var(--text-sm); color: var(--color-text); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person-card__role { font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person-card__chips { display: flex; gap: 4px; flex-wrap: wrap; } .person-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid var(--color-hairline); font-size: 11px; } .person-card__meta-cell { display: flex; flex-direction: column; gap: 1px; } .person-card__meta-label { color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.04em; font-size: 9.5px; } .person-card__meta-value { color: var(--color-text); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; } .person-card__meta-value--muted { color: var(--color-text-muted); font-weight: var(--fw-regular); } .person-card__meta-value--danger { color: var(--color-danger); } /* === DEPARTMENT BAND ====================================================== */ .dept-band { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-5); overflow: hidden; } .dept-band__header { padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--color-hairline); background: var(--color-surface-sunken); cursor: pointer; user-select: none; } .dept-band__title { font-size: var(--text-md); font-weight: var(--fw-semi); letter-spacing: -0.01em; margin: 0; } .dept-band__lead { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; } .dept-band__chips { display: flex; gap: 4px; flex-wrap: wrap; } .dept-band__count { background: var(--color-bg-alt); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 11px; color: var(--color-text-muted); margin-left: auto; } .dept-band__chevron { transition: transform var(--t-fast); color: var(--color-text-soft); } .dept-band[data-collapsed="true"] .dept-band__chevron { transform: rotate(-90deg); } .dept-band[data-collapsed="true"] .dept-band__body { display: none; } .dept-band__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); padding: var(--space-4); } /* === STATS ================================================================ */ .mini-stat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); padding: 2px 4px; border-radius: var(--radius-sm); transition: var(--t-fast); } .mini-stat__value { font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; } .mini-stat__label { color: var(--color-text-muted); } .mini-stat--danger .mini-stat__value { color: var(--color-danger); } .mini-stat--warn .mini-stat__value { color: var(--color-warning); } .mini-stat--info .mini-stat__value { color: var(--color-info); } .mini-stat--success .mini-stat__value { color: var(--color-success); } .mini-stats-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); align-items: center; } .mini-stats-bar__sep { width: 1px; height: 18px; background: var(--color-hairline); } .mini-stats-bar__tail { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-soft); display: flex; gap: 8px; align-items: center; } /* Larger tile */ .stat-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: 4px; transition: var(--t-base); } .stat-tile:hover { border-color: var(--color-border-strong); transform: translateY(-1px); } .stat-tile__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--fw-medium); } .stat-tile__value { font-size: var(--text-2xl); font-weight: var(--fw-semi); color: var(--color-text); line-height: 1; font-variant-numeric: tabular-nums; } .stat-tile__trend { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-xs); font-weight: var(--fw-medium); } .stat-tile__trend--up { color: var(--color-success); } .stat-tile__trend--down { color: var(--color-danger); } .stat-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } /* === TIMELINE ============================================================= */ .tl { position: relative; padding-left: 18px; } .tl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--color-hairline); } .tl-item { position: relative; padding: 10px 0; } .tl-dot, .tl-item::before { content: ''; position: absolute; left: -18px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border-strong); } .tl-dot--sage { border-color: var(--color-primary); background: var(--color-primary-soft); } .tl-dot--terra { border-color: var(--color-accent); background: var(--color-accent-soft); } .tl-dot--warn { border-color: var(--color-warning); background: var(--color-warning-soft); } .tl-dot--info { border-color: var(--color-info); background: var(--color-info-soft); } .tl-dot--danger{ border-color: var(--color-danger); background: var(--color-danger-soft); } /* Convenience: apply color to tl-item directly */ .tl-item--sage::before { border-color: var(--color-primary); background: var(--color-primary-soft); } .tl-item--terra::before { border-color: var(--color-accent); background: var(--color-accent-soft); } .tl-item--warn::before { border-color: var(--color-warning); background: var(--color-warning-soft); } .tl-item--info::before { border-color: var(--color-info); background: var(--color-info-soft); } .tl-item--danger::before { border-color: var(--color-danger); background: var(--color-danger-soft); } .tl-item__header { display: flex; align-items: baseline; gap: 8px; font-size: var(--text-sm); } .tl-item__time { color: var(--color-text-soft); font-size: var(--text-xs); font-variant-numeric: tabular-nums; } .tl-item__title { font-weight: var(--fw-semi); color: var(--color-text); } .tl-item__meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; } .tl-item__meta .by { color: var(--color-text-soft); font-size: 11.5px; } /* === CONCERN RIBBON ======================================================= */ .concern-ribbon { background: linear-gradient(135deg, #f9ebe7 0%, #f3dcd9 100%); border: 1px solid #eccab9; border-radius: var(--radius-md); padding: 10px 14px; display: flex; align-items: center; gap: 12px; font-size: var(--text-sm); } .concern-ribbon__icon { font-size: 16px; color: var(--color-danger); flex-shrink: 0; } .concern-ribbon__message { color: var(--color-accent-ink); flex: 1; } .concern-ribbon__message strong { color: var(--color-danger); } .concern-ribbon__action { flex-shrink: 0; } .concern-ribbon__close { flex-shrink: 0; background: transparent; border: 0; color: var(--color-accent-ink); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); display: grid; place-items: center; transition: var(--t-fast); } .concern-ribbon__close:hover { background: rgba(201, 123, 90, 0.15); } /* === WEEK STRIP =========================================================== */ .week-scroll { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); } .week-day { border-radius: var(--radius-md); padding: 12px; min-height: 180px; background: var(--color-bg); border: 1px solid transparent; display: flex; flex-direction: column; gap: 8px; transition: var(--t-base); cursor: pointer; } .week-day:hover { border-color: var(--color-border); background: var(--color-surface-sunken); } .week-day--today { background: var(--color-primary-soft); border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .week-day--weekend { opacity: 0.55; } .week-day__header { display: flex; flex-direction: column; gap: 2px; } .week-day__label { font-size: 11px; color: var(--color-text-muted); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.06em; } .week-day--today .week-day__label { color: var(--color-primary-ink); } .week-day__date { font-size: var(--text-xl); font-weight: var(--fw-semi); line-height: 1; color: var(--color-text); } .week-day--today .week-day__date { color: var(--color-primary-ink); } .week-day__body { display: flex; flex-direction: column; gap: 6px; } .week-day__empty { font-size: 11px; color: var(--color-text-soft); margin-top: 10px; text-align: center; } .week-event { background: var(--color-surface); border-radius: var(--radius-sm); padding: 5px 7px; font-size: 11px; display: flex; align-items: center; gap: 6px; border-left: 3px solid var(--color-info); line-height: 1.2; } .week-event--leave { border-left-color: var(--color-warning); } .week-event--birthday { border-left-color: var(--color-accent); } .week-event--oneonone { border-left-color: var(--color-info); } .week-event--review { border-left-color: var(--color-danger); } .week-event--anniversary { border-left-color: var(--color-success); } /* === LEAVE RING =========================================================== */ .leave-ring { position: relative; width: 110px; height: 110px; display: inline-block; } .leave-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; } .leave-ring__track { fill: none; stroke: var(--color-bg-alt); stroke-width: 10; } .leave-ring__fill { fill: none; stroke: var(--color-primary); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset var(--t-base); } .leave-ring__center { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--text-xl); font-weight: var(--fw-semi); line-height: 1; color: var(--color-text); text-align: center; } .leave-ring__value { font-size: var(--text-xl); font-weight: var(--fw-semi); } .leave-ring__denominator { font-size: 11px; color: var(--color-text-muted); font-weight: var(--fw-regular); } .leave-ring__label { font-size: 10px; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--fw-medium); margin-top: 3px; } /* === LIST ROWS ============================================================ */ .row-doc, .row-payroll, .row-signal { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border-bottom: 1px solid var(--color-hairline); font-size: var(--text-sm); transition: var(--t-fast); } .row-doc:last-child, .row-payroll:last-child, .row-signal:last-child { border-bottom: 0; } .row-doc:hover, .row-payroll:hover, .row-signal:hover { background: var(--color-bg); } .row-doc__status, .row-payroll__status, .row-signal__status { width: 10px; height: 10px; border-radius: 50%; background: var(--color-text-soft); flex-shrink: 0; } .row-doc__status--ok, .row-payroll__status--ok, .row-signal__status--ok { background: var(--color-success); } .row-doc__status--warn, .row-payroll__status--warn, .row-signal__status--warn { background: var(--color-warning); } .row-doc__status--danger, .row-payroll__status--danger, .row-signal__status--danger { background: var(--color-danger); } .row-doc__content, .row-payroll__content, .row-signal__content { flex: 1; min-width: 0; } .row-doc__title, .row-payroll__title, .row-signal__title { font-weight: var(--fw-medium); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-doc__meta, .row-payroll__meta, .row-signal__meta { font-size: 11.5px; color: var(--color-text-soft); margin-top: 1px; } .row-doc__date, .row-payroll__amount, .row-signal__score { color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-size: var(--text-xs); white-space: nowrap; flex-shrink: 0; } .row-payroll__amount { font-weight: var(--fw-medium); color: var(--color-text); } .row-doc__action, .row-payroll__action, .row-signal__action { flex-shrink: 0; color: var(--color-text-soft); } /* Missing doc variant */ .row-doc--missing { background: var(--color-danger-soft); border-left: 3px solid var(--color-danger); border-radius: var(--radius-sm); } .row-doc--missing .row-doc__title { color: var(--color-danger); } .row-doc--missing .row-doc__status { background: var(--color-danger); } .row-doc--missing:hover { background: var(--color-danger-soft); filter: brightness(0.97); } /* Signal row variants (positive/negative score) */ .row-signal__score--pos { color: var(--color-success); font-weight: var(--fw-semi); } .row-signal__score--neg { color: var(--color-danger); font-weight: var(--fw-semi); } /* Payroll diff */ .row-payroll__diff { font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .row-payroll__diff--pos { color: var(--color-success); } .row-payroll__diff--neg { color: var(--color-danger); } /* === SEGMENTED CONTROL ==================================================== */ .seg { display: inline-flex; background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 3px; gap: 2px; } .seg__btn { border: 0; background: transparent; padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; font-family: inherit; transition: var(--t-fast); } .seg__btn:hover { color: var(--color-text); } .seg__btn--active, .seg__btn[aria-selected="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); } /* ========================================================================== TASK 3 — FORM PRIMITIVES ========================================================================== */ /* === FIELD WRAPPER ======================================================== */ .warm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); } .warm-field__label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text); line-height: 1.3; } .warm-field__help { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); } .warm-field__error { font-size: var(--text-xs); color: var(--color-danger); display: flex; align-items: center; gap: 5px; line-height: 1.3; } .warm-field__error::before { content: '\F33A'; /* bi-exclamation-circle */ font-family: 'bootstrap-icons'; font-size: 12px; } .warm-field--required .warm-field__label::after { content: ' *'; color: var(--color-danger); } .warm-field--horizontal { flex-direction: row; align-items: center; gap: var(--space-4); } .warm-field--horizontal .warm-field__label { min-width: 140px; text-align: right; flex-shrink: 0; } /* === TEXT INPUT =========================================================== */ .warm-input, .warm-select, .warm-textarea, .warm-date { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--text-sm); color: var(--color-text); line-height: 1.3; transition: var(--t-fast); box-sizing: border-box; } .warm-input::placeholder, .warm-textarea::placeholder { color: var(--color-text-soft); } .warm-input:hover, .warm-select:hover, .warm-textarea:hover, .warm-date:hover { border-color: var(--color-border-strong); } .warm-input:focus, .warm-select:focus, .warm-textarea:focus, .warm-date:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } .warm-input:disabled, .warm-select:disabled, .warm-textarea:disabled, .warm-date:disabled { background: var(--color-bg-alt); color: var(--color-text-muted); cursor: not-allowed; border-color: var(--color-border); } /* Sizes */ .warm-input--sm { padding: 5px 10px; font-size: var(--text-xs); height: 32px; } .warm-input--md { padding: 10px 12px; font-size: var(--text-sm); height: 40px; } /* Error state */ .warm-input--error, .warm-select--error, .warm-textarea--error { border-color: var(--color-danger); } .warm-input--error:focus, .warm-select--error:focus, .warm-textarea--error:focus { box-shadow: 0 0 0 3px var(--color-danger-soft); } /* === SELECT =============================================================== */ .warm-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%237a7468'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; cursor: pointer; } /* === TEXTAREA ============================================================= */ .warm-textarea { min-height: 96px; resize: vertical; line-height: var(--leading-body); } /* === CHECKBOX + RADIO ===================================================== */ .warm-check, .warm-radio { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid var(--color-border-strong); background: var(--color-surface); cursor: pointer; flex-shrink: 0; display: inline-grid; place-items: center; transition: var(--t-fast); margin: 0; } .warm-check { border-radius: 4px; } .warm-radio { border-radius: 50%; } .warm-check:hover, .warm-radio:hover { border-color: var(--color-primary); } .warm-check:focus-visible, .warm-radio:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-soft); } .warm-check:checked { background: var(--color-primary); border-color: var(--color-primary); } .warm-check:checked::after { content: ''; width: 10px; height: 10px; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .warm-radio:checked { border-color: var(--color-primary); background: var(--color-surface); } .warm-radio:checked::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); } .warm-check:disabled, .warm-radio:disabled { opacity: 0.5; cursor: not-allowed; background: var(--color-bg-alt); } .warm-check-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text); cursor: pointer; line-height: 1.3; user-select: none; } /* === SWITCH =============================================================== */ .warm-switch { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--color-border-strong); border: 1px solid var(--color-border-strong); cursor: pointer; transition: var(--t-fast); flex-shrink: 0; margin: 0; } .warm-switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: var(--shadow-sm); transition: transform var(--t-fast); } .warm-switch:checked { background: var(--color-primary); border-color: var(--color-primary); } .warm-switch:checked::after { transform: translateX(18px); } .warm-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-soft); } .warm-switch:disabled { opacity: 0.5; cursor: not-allowed; } /* === DATE INPUT =========================================================== */ .warm-date { font-family: inherit; } .warm-date::-webkit-calendar-picker-indicator { filter: invert(40%) sepia(15%) saturate(700%) hue-rotate(75deg); cursor: pointer; opacity: 0.7; } .warm-date::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* === FILE INPUT =========================================================== */ .warm-file { font-family: inherit; font-size: var(--text-sm); color: var(--color-text-muted); } .warm-file::-webkit-file-upload-button, .warm-file::file-selector-button { background: var(--color-bg-alt); border: 0; padding: 8px 14px; margin-right: 12px; border-radius: var(--radius-sm); font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text); cursor: pointer; transition: var(--t-fast); } .warm-file::-webkit-file-upload-button:hover, .warm-file::file-selector-button:hover { background: var(--color-border); } /* === FORM ACTIONS ========================================================= */ .warm-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-hairline); } .warm-form-actions--split { justify-content: space-between; } .warm-form-actions--split > .warm-form-actions__left { display: flex; gap: 8px; } .warm-form-actions--split > .warm-form-actions__right { display: flex; gap: 12px; margin-left: auto; } /* ========================================================================== TASK 4 — INTERACTIVE PRIMITIVES ========================================================================== */ /* === MODAL ================================================================ */ dialog.warm-modal { padding: 0; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--color-surface); color: var(--color-text); font-family: var(--font-sans); max-width: 600px; width: 90vw; max-height: 90vh; overflow: hidden; } dialog.warm-modal::backdrop { background: rgba(250, 247, 242, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .warm-modal--sm { max-width: 400px; } .warm-modal--md { max-width: 600px; } .warm-modal--lg { max-width: 800px; } .warm-modal--xl { max-width: 1000px; } .warm-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-hairline); } .warm-modal__title { font-size: var(--text-md); font-weight: var(--fw-semi); color: var(--color-text); margin: 0; line-height: var(--leading-tight); } .warm-modal__body { padding: var(--space-5); overflow: auto; max-height: calc(90vh - 140px); } .warm-modal__footer { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-hairline); background: var(--color-surface-sunken); } .warm-modal__close { background: transparent; border: 0; padding: 6px; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; display: grid; place-items: center; transition: var(--t-fast); width: 32px; height: 32px; } .warm-modal__close:hover { background: var(--color-bg-alt); color: var(--color-text); } /* === TABLE ================================================================ */ .warm-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; font-size: var(--text-sm); } .warm-table thead th { background: var(--color-primary-soft); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: var(--fw-semi); padding: 10px 16px; border-bottom: 1px solid var(--color-border); } .warm-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--color-hairline); color: var(--color-text); vertical-align: middle; } .warm-table tbody tr:last-child td { border-bottom: 0; } .warm-table--hover tbody tr { transition: background var(--t-fast); cursor: pointer; } .warm-table--hover tbody tr:hover td { background: var(--color-bg-alt); } .warm-table--compact thead th { padding: 6px 12px; } .warm-table--compact tbody td { padding: 8px 12px; } .warm-table--sticky thead th { position: sticky; top: 0; z-index: 2; } /* === ALERT / FLASH ======================================================== */ .warm-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); border-left: 4px solid var(--color-text-muted); background: var(--color-bg-alt); font-size: var(--text-sm); color: var(--color-text); line-height: var(--leading-snug); } .warm-alert__icon { font-size: 16px; line-height: 1; flex-shrink: 0; margin-top: 1px; } .warm-alert__message { flex: 1; min-width: 0; } .warm-alert__message strong { font-weight: var(--fw-semi); } .warm-alert__dismiss { background: transparent; border: 0; padding: 4px; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; display: grid; place-items: center; margin-left: auto; flex-shrink: 0; transition: var(--t-fast); } .warm-alert__dismiss:hover { background: rgba(0, 0, 0, 0.05); color: var(--color-text); } .warm-alert--success { background: var(--color-success-soft); border-left-color: var(--color-success); } .warm-alert--success .warm-alert__icon { color: var(--color-success); } .warm-alert--warning { background: var(--color-warning-soft); border-left-color: var(--color-warning); } .warm-alert--warning .warm-alert__icon { color: var(--color-warning); } .warm-alert--danger { background: var(--color-danger-soft); border-left-color: var(--color-danger); } .warm-alert--danger .warm-alert__icon { color: var(--color-danger); } .warm-alert--info { background: var(--color-info-soft); border-left-color: var(--color-info); } .warm-alert--info .warm-alert__icon { color: var(--color-info); } /* === DROPDOWN ============================================================= */ details.warm-dropdown { position: relative; display: inline-block; } details.warm-dropdown > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text); transition: var(--t-fast); user-select: none; } details.warm-dropdown > summary::-webkit-details-marker { display: none; } details.warm-dropdown > summary::after { content: '\F282'; /* bi-chevron-down */ font-family: 'bootstrap-icons'; font-size: 11px; color: var(--color-text-muted); margin-left: 4px; transition: transform var(--t-fast); } details.warm-dropdown[open] > summary::after { transform: rotate(180deg); } details.warm-dropdown > summary:hover { background: var(--color-bg-alt); border-color: var(--color-border-strong); } details.warm-dropdown[open] > summary { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-ink); } .warm-dropdown__menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: 4px; z-index: 100; display: flex; flex-direction: column; gap: 1px; } .warm-dropdown__menu--right { left: auto; right: 0; } .warm-dropdown__item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text); text-decoration: none; cursor: pointer; background: transparent; border: 0; font-family: inherit; text-align: left; width: 100%; transition: background var(--t-fast); } .warm-dropdown__item:hover { background: var(--color-primary-soft); color: var(--color-primary-ink); text-decoration: none; } .warm-dropdown__item--danger { color: var(--color-danger); } .warm-dropdown__item--danger:hover { background: var(--color-danger-soft); color: var(--color-danger); } .warm-dropdown__item .bi { font-size: 14px; color: var(--color-text-muted); } .warm-dropdown__item:hover .bi { color: inherit; } .warm-dropdown__divider { height: 1px; background: var(--color-hairline); margin: 4px 0; border: 0; } /* === TABS ================================================================= */ .warm-tabs { display: flex; flex-direction: column; } .warm-tabs__list { display: flex; flex-direction: row; gap: 0; border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: thin; } .warm-tabs__tab { background: transparent; border: 0; padding: 10px 16px; font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--t-fast); white-space: nowrap; } .warm-tabs__tab:hover { background: var(--color-bg-alt); color: var(--color-text); } .warm-tabs__tab[aria-selected="true"], .warm-tabs__tab--active { color: var(--color-primary-ink); border-bottom-color: var(--color-primary); background: var(--color-primary-soft); } .warm-tabs__tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-soft); } .warm-tab-panel { padding: var(--space-4) 0; } .warm-tab-panel[hidden] { display: none; } /* === PAGINATION =========================================================== */ .warm-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; padding: var(--space-3) 0; list-style: none; margin: 0; } .warm-pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; font-weight: var(--fw-medium); transition: var(--t-fast); cursor: pointer; background: transparent; border: 0; font-family: inherit; } .warm-pagination__link:hover { background: var(--color-bg-alt); color: var(--color-text); text-decoration: none; } .warm-pagination__link--active { background: var(--color-primary-soft); color: var(--color-primary-ink); font-weight: var(--fw-semi); } .warm-pagination__link--disabled { color: var(--color-text-soft); cursor: not-allowed; pointer-events: none; opacity: 0.5; } /* === BREADCRUMB =========================================================== */ .warm-breadcrumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--text-xs); color: var(--color-text-muted); list-style: none; padding: 0; margin: 0; } .warm-breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); text-decoration: none; transition: color var(--t-fast); } .warm-breadcrumb__item:hover { color: var(--color-primary); text-decoration: none; } .warm-breadcrumb__item--current { color: var(--color-text); font-weight: var(--fw-semi); cursor: default; } .warm-breadcrumb__item--current:hover { color: var(--color-text); } .warm-breadcrumb__item:not(:last-child)::after { content: '\F285'; /* bi-chevron-right */ font-family: 'bootstrap-icons'; font-size: 10px; color: var(--color-text-soft); margin-left: 6px; } /* === EMPTY STATE ========================================================== */ .warm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-3); padding: var(--space-12) var(--space-5); background: var(--color-surface-sunken); border-radius: var(--radius-md); border: 1px dashed var(--color-border); } .warm-empty__icon { font-size: 56px; color: var(--color-text-soft); line-height: 1; margin-bottom: var(--space-2); } .warm-empty__title { font-size: var(--text-lg); font-weight: var(--fw-semi); color: var(--color-text); margin: 0; line-height: var(--leading-tight); } .warm-empty__body { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 400px; line-height: var(--leading-snug); margin: 0; } .warm-empty__action { margin-top: var(--space-4); } /* =========================================================== Auth pages (login / forgot / reset) — Phase 2 migration #1 Scoped to .warm-auth-*. Does not affect other warm pages. =========================================================== */ .warm-auth-viewport { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } @media (max-width: 767px) { .warm-auth-viewport { min-height: auto; align-items: flex-start; padding-top: var(--space-6); } } .warm-auth-card { width: 100%; max-width: 26rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .warm-auth-card__header { background: var(--color-primary); color: #fff; padding: var(--space-5) var(--space-6); text-align: center; } .warm-auth-card__header h1 { margin: 0; font-size: var(--text-xl); font-weight: var(--fw-semi); color: #fff; letter-spacing: -0.2px; } .warm-auth-card__header p { margin: 2px 0 0; font-size: var(--text-sm); opacity: 0.85; } .warm-auth-card__body { padding: var(--space-6); } .warm-auth-title { margin: 0 0 var(--space-5); font-size: var(--text-lg); font-weight: var(--fw-semi); color: var(--color-text); text-align: center; } .warm-auth-helper { margin: 0 0 var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; } .warm-auth-note { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); background: var(--color-primary-soft); color: var(--color-primary-ink); border-radius: var(--radius-sm); font-size: var(--text-sm); } .warm-auth-note strong { font-weight: var(--fw-semi); } .warm-auth-divider { margin: var(--space-5) 0; border: 0; border-top: 1px solid var(--color-hairline); } .warm-auth-link { margin: 0; text-align: center; font-size: var(--text-sm); } .warm-auth-link a { color: var(--color-primary); text-decoration: none; } .warm-auth-link a:hover { text-decoration: underline; } .warm-auth-submit { width: 100%; justify-content: center; } /* Password input + inline eye toggle */ .warm-password { position: relative; display: block; } .warm-password .warm-input { padding-right: 44px; } .warm-password__toggle { position: absolute; top: 4px; right: 4px; bottom: 4px; width: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .warm-password__toggle:hover { background: var(--color-bg-alt); color: var(--color-text); } .warm-password__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } /* =========================================================== Dashboard support — Phase 2 migration #2 Tiny list primitive used by dashboard zones. Other pages are free to reuse it. =========================================================== */ .warm-list { display: flex; flex-direction: column; } .warm-list__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-hairline); color: var(--color-text); text-decoration: none; transition: background var(--t-fast); } .warm-list__row:first-child { border-top: 0; } .warm-list__row:hover { background: var(--color-bg-alt); text-decoration: none; } .warm-list__row--static { cursor: default; } .warm-list__row--static:hover { background: transparent; } .warm-list__row--danger { background: var(--color-danger-soft); } .warm-list__row--danger:hover { filter: brightness(0.98); } .warm-list__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } .warm-list__title { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--color-text); } .warm-list__meta { font-size: var(--text-xs); color: var(--color-text-muted); } .warm-list__aside { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .warm-list__empty { padding: var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); } .warm-password__toggle .bi { font-size: 15px; line-height: 1; } /* =========================================================== Employees list support — Phase 2 migration #3 Small primitives used by app/templates/employees/list.html. Other list-style pages (candidates, users, etc.) are free to reuse these. =========================================================== */ /* --- Segmented radio control (used for status filter) --- Markup pattern:

Active ...

Hides the radio, styles the label, and highlights the checked one via adjacent-sibling selector. No JS required. */ .seg__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .seg__input + .seg__btn { user-select: none; } .seg__input:checked + .seg__btn { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); } .seg__input:focus-visible + .seg__btn { outline: 2px solid var(--color-primary-soft); outline-offset: 1px; } /* --- Toolbar row: flat horizontal bar for filters/search --- Lighter than section-card; no heading chrome. Use when the control group is a single horizontal row above the main section-card. */ .warm-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); } .warm-toolbar__grow { flex: 1 1 240px; max-width: 360px; } .warm-toolbar__meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: auto; } /* --- Search input with inline leading icon --- */ .warm-search { position: relative; display: block; width: 100%; } .warm-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-soft); pointer-events: none; font-size: 14px; line-height: 1; } .warm-search__input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); color: var(--color-text); } .warm-search__input:focus-visible { outline: 2px solid var(--color-primary-soft); border-color: var(--color-primary); } .warm-search__input::placeholder { color: var(--color-text-soft); } /* --- Sortable table headers inside .warm-table --- The employees list uses with a