hr_lite 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 9dc0713440cde019ffbf731932a0efef58980b58baff2ccb55991aecae807714
+  data.tar.gz: 3cbfdca3513b1d5ce604accb369f7c63e425d98ce5efe88ad2544b070900f284
+SHA512:
+  metadata.gz: 3e6a06f68ce96bb223860cd8ddb091986207958acccdd2ee4947c066a7885e119ae7d79e954e5ca9514eabb072b7ff3da46a95cc91463a702b553979de74e1da
+  data.tar.gz: 72e3acb4196071320611198ac549a9c5f6301182ddd882240cb12ccfb97f0257e5d21915812b48afe760b38c41addb7be15d159400bcb8d13c8bb04c2aa5d2d5

data/CHANGELOG.md

@@ -0,0 +1,33 @@
+# Changelog
+
+All notable changes to this project are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0] - 2026-07-19
+
+Initial release.
+
+### Added
+
+- Attendance: geolocated check-in/out with office-radius flagging (never
+  blocking), month grids, admin team day view and audited regularization.
+- Leave: policy-driven types, hybrid live-computed balances, half-days,
+  race-safe approvals, cancellations, holiday calendar with bulk paste,
+  weekend policy (sun-only / sat-sun / 2nd-4th Saturday), company calendar.
+- Payroll: versioned salary structures, date-keyed statutory rate card,
+  PF/ESI/PT/TDS calculators, LOP-prorated runs with review overrides,
+  publishable salary slips with PDFs and a payout register CSV. Money and
+  identity PII encrypted at rest.
+- Kudos wall with @mentions and badges.
+- Appraisals (draft -> shared, permanent once shared) and promotions with a
+  designation timeline and host sync hook.
+- Three-tier access (employee / admin / configurable leadership), an event
+  bus with per-event channel matrix (bell, email, leadership email/bell),
+  daily leadership digest and an append-only audit trail.
+
+[Unreleased]: https://github.com/kshtzkr/hr_lite/compare/v0.1.0...HEAD
+[0.1.0]: https://github.com/kshtzkr/hr_lite/releases/tag/v0.1.0

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright kshitiz sinha
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,166 @@
+# hr_lite
+
+[![CI](https://github.com/kshtzkr/hr_lite/actions/workflows/ci.yml/badge.svg)](https://github.com/kshtzkr/hr_lite/actions/workflows/ci.yml)
+[![Gem Version](https://badge.fury.io/rb/hr_lite.svg)](https://rubygems.org/gems/hr_lite)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](MIT-LICENSE)
+
+A lightweight, self-contained HRMS engine for Rails — attendance with
+geolocation, leave management, holiday calendar, full Indian payroll
+(PF/ESI/PT/TDS) with salary-slip PDFs, kudos with @mentions, appraisals and
+promotions. Think Keka-lite, mounted inside your existing app in a few lines.
+
+- **Mountable engine**, isolated namespace (`HrLite`), tables prefixed `hr_lite_`.
+- **Bring your own users**: any user model + auth (Devise or otherwise) via config hooks.
+- **Three access tiers**: employee (self-service), admin (day-to-day operations),
+  leadership (policy, money, payroll — a configurable email list).
+- **Powerful notifications**: one event bus routing every HR event to in-app
+  bells (your notifier), employee emails, and leadership emails — with an
+  append-only audit trail of every governing change.
+- **Self-contained UI**: mobile-first, dependency-free JS, all theming via
+  CSS custom properties (`--hrl-*`).
+- **Encrypted at rest**: PAN/UAN/bank numbers and every money amount use
+  ActiveRecord encryption.
+
+## Installation
+
+Everything lives in the gem — a host app adds the gem, a mount line and one
+initializer. Nothing else.
+
+```ruby
+# Gemfile
+gem "hr_lite"
+```
+
+```bash
+bin/rails g hr_lite:install          # annotated initializer + next steps
+bin/rails g hr_lite:install --route  # …and mount at /hr for you
+bin/rails db:migrate                 # engine migrations load straight from the gem
+bin/rails hr_lite:seed               # leave types + fixed national holidays (idempotent)
+```
+
+Migrations are served from the gem (upgrades included) — nothing is copied
+into your repo. If you prefer copies, run `bin/rails hr_lite:install:migrations`
+once and the engine steps aside.
+
+To serve it on a subdomain instead of a path:
+
+```ruby
+# config/routes.rb
+constraints subdomain: "hr" do
+  mount HrLite::Engine => "/", as: :hr_lite
+end
+```
+
+Your app must have ActiveRecord encryption keys configured
+(`bin/rails db:encryption:init` if you have not).
+
+## Configuration
+
+```ruby
+# config/initializers/hr_lite.rb
+HrLite.configure do |c|
+  c.parent_controller   = "ApplicationController"  # inherits your auth, set BEFORE boot
+  c.user_class          = "User"
+  c.current_user_method = :current_user
+  c.authenticate_method = :authenticate_user!
+  c.admin_check         = ->(user) { user.admin? }
+
+  # Leadership: the governing tier. Only these people can change leave
+  # policy, offices, holidays, employee profiles, salary structures,
+  # payroll, appraisals. Change the list, not the code.
+  c.leadership_emails = ENV.fetch("HR_LEADERSHIP_EMAILS", "").split(",").map(&:strip)
+
+  # In-app notifications -> your bell system.
+  c.notify = ->(user:, kind:, title:, body:, path:) {
+    StaffNotifier.notify(user, kind: kind, title: title, body: body, path: path)
+  }
+
+  c.mailer_from    = "hr@example.com"
+  c.mail_link_base = "https://hr.example.com"   # enables deep links in emails
+  c.company        = -> { { name: "Acme", address: "Head office address", logo_path: nil } }
+
+  # Salary-slip PDFs: plug your renderer, or add wicked_pdf to your bundle
+  # and the built-in renderer takes over. Without either, PDF is disabled.
+  c.render_pdf = ->(template:, assigns:, cache_key:) {
+    PdfRenderer.render(template: template, assigns: assigns, cache_key: cache_key)
+  }
+
+  # Mirror promotions into your own user model (optional).
+  c.on_designation_change = ->(user, designation) { user.update!(designation: designation) }
+end
+```
+
+Every event's channels are configurable via `c.notification_matrix` — see
+`HrLite::Notifications::DEFAULT_MATRIX` for the routing table (bell /
+employee email / leadership email / leadership bell per event).
+
+## Recurring jobs (host scheduler)
+
+| Job | Schedule | Purpose |
+|---|---|---|
+| `HrLite::DailyDigestJob` | mornings | leadership digest: out today, pending approvals, flagged punches |
+| `HrLite::LeaveYearRolloverJob` | Jan 1 | carry-forward balances (idempotent) |
+
+## Theming
+
+Override the CSS variables, nothing else:
+
+```css
+:root { --hrl-accent: #00a24f; --hrl-font: "Inter", sans-serif; }
+```
+
+All views are also overridable via standard engine view precedence.
+
+## Docs
+
+- [docs/CONFIGURATION.md](docs/CONFIGURATION.md) — every config key, the event
+  list and the notification matrix, how the three access tiers gate.
+- [docs/PAYROLL.md](docs/PAYROLL.md) — the exact payroll math, rounding rules,
+  run lifecycle, and what is deliberately not modelled.
+
+## Statutory disclaimer
+
+Payroll math (PF, ESI, PT, TDS) is projection-grade and configured in
+`HrLite::StatutoryRateCard` — a date-keyed rate table. **Verify the rates for
+each financial year with your accountant** before the first run; per-slip
+LOP/TDS overrides are the escape hatch. Surcharge, perquisites and
+HRA-exemption math are not modelled.
+
+## Requirements & versioning
+
+- Rails >= 8.0, Ruby >= 3.2, any ActiveRecord database (portable column
+  types; developed against PostgreSQL, CI runs SQLite).
+- The host app must have ActiveRecord encryption keys configured.
+- [SemVer](https://semver.org): 0.x minors may break with a CHANGELOG note;
+  from 1.0, breaking changes only in majors.
+
+## Documentation
+
+- [docs/CONFIGURATION.md](docs/CONFIGURATION.md) — every config hook, the
+  event/notification matrix, access-tier gating.
+- [docs/PAYROLL.md](docs/PAYROLL.md) — exact payroll math, rounding rules,
+  and what is deliberately not modelled.
+- [CHANGELOG.md](CHANGELOG.md) — release history.
+
+## Contributing
+
+Bug reports and pull requests are welcome — see
+[CONTRIBUTING.md](CONTRIBUTING.md) for setup and ground rules (100%
+coverage, BigDecimal money, config hooks over host couplings). Security
+issues: report privately per [SECURITY.md](SECURITY.md). Everyone
+interacting with this project is expected to follow the
+[code of conduct](CODE_OF_CONDUCT.md).
+
+## Development
+
+```bash
+bundle install
+bundle exec rspec          # dummy-app test suite (100% line coverage)
+COVERAGE=1 bundle exec rspec
+bundle exec rubocop
+```
+
+## License
+
+The gem is available as open source under the terms of the
+[MIT License](MIT-LICENSE).

data/Rakefile

@@ -0,0 +1,3 @@
+require "bundler/setup"
+
+require "bundler/gem_tasks"

data/app/assets/javascripts/hr_lite/geo_punch.js

@@ -0,0 +1,61 @@
+// Dependency-free geolocation capture for punch forms.
+// Markup contract:
+//   <form data-hrl-geo-punch>
+//     <input type="hidden" name="lat"><input type="hidden" name="lng">
+//     <input type="hidden" name="accuracy_m"><input type="hidden" name="geo_status">
+//     <button type="submit">…</button>
+//     <span data-hrl-geo-status hidden></span>
+//   </form>
+// The punch NEVER blocks on GPS: denied/timeout/unavailable submit anyway
+// with geo_status set; the server flags them.
+(function () {
+  "use strict";
+
+  function setup(form) {
+    var fields = {
+      lat: form.querySelector("[name=lat]"),
+      lng: form.querySelector("[name=lng]"),
+      accuracy: form.querySelector("[name=accuracy_m]"),
+      status: form.querySelector("[name=geo_status]")
+    };
+    var button = form.querySelector("[type=submit]");
+    var label = form.querySelector("[data-hrl-geo-status]");
+    var locating = false;
+
+    function send(status) {
+      fields.status.value = status;
+      locating = false;
+      form.submit();
+    }
+
+    form.addEventListener("submit", function (event) {
+      if (locating || fields.status.value) return; // second pass: let it through
+      event.preventDefault();
+      locating = true;
+      if (button) { button.disabled = true; button.setAttribute("aria-busy", "true"); }
+      if (label) { label.hidden = false; label.textContent = "Getting location…"; }
+
+      if (!navigator.geolocation) { send("unavailable"); return; }
+
+      navigator.geolocation.getCurrentPosition(
+        function (pos) {
+          fields.lat.value = pos.coords.latitude.toFixed(6);
+          fields.lng.value = pos.coords.longitude.toFixed(6);
+          fields.accuracy.value = Math.round(pos.coords.accuracy);
+          send("ok");
+        },
+        function (err) {
+          send(err && err.code === 1 ? "denied" : "timeout");
+        },
+        { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
+      );
+    });
+  }
+
+  function init() {
+    document.querySelectorAll("form[data-hrl-geo-punch]").forEach(setup);
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
+  else init();
+})();

data/app/assets/javascripts/hr_lite/mention.js

@@ -0,0 +1,100 @@
+// Dependency-free @mention autocomplete for textareas.
+// Markup contract:
+//   <div class="hrl-mention-wrap" data-hrl-mention data-search-url="...">
+//     <textarea ...></textarea>
+//   </div>
+// Picking a user inserts the visible marker "@[Name](id) " which the server
+// parses via HrLite::MentionParser.
+(function () {
+  "use strict";
+
+  var TRIGGER = /@([\w.\-]{1,30})$/;
+
+  function debounce(fn, ms) {
+    var t;
+    return function () {
+      var args = arguments, self = this;
+      clearTimeout(t);
+      t = setTimeout(function () { fn.apply(self, args); }, ms);
+    };
+  }
+
+  function setup(wrap) {
+    var textarea = wrap.querySelector("textarea");
+    var url = wrap.getAttribute("data-search-url");
+    if (!textarea || !url) return;
+
+    var menu = document.createElement("div");
+    menu.className = "hrl-mention-menu";
+    menu.hidden = true;
+    wrap.appendChild(menu);
+    var active = -1;
+
+    function close() { menu.hidden = true; menu.innerHTML = ""; active = -1; }
+
+    function pick(item) {
+      var caret = textarea.selectionStart;
+      var before = textarea.value.slice(0, caret);
+      var after = textarea.value.slice(caret);
+      var replaced = before.replace(TRIGGER, "@[" + item.text + "](" + item.value + ") ");
+      textarea.value = replaced + after;
+      var pos = replaced.length;
+      textarea.focus();
+      textarea.setSelectionRange(pos, pos);
+      close();
+    }
+
+    function renderResults(items) {
+      close();
+      if (!items.length) return;
+      items.slice(0, 8).forEach(function (item) {
+        var btn = document.createElement("button");
+        btn.type = "button";
+        btn.textContent = item.text;
+        btn.addEventListener("mousedown", function (e) { e.preventDefault(); pick(item); });
+        menu.appendChild(btn);
+      });
+      menu.hidden = false;
+    }
+
+    var lookup = debounce(function (query) {
+      fetch(url + "?q=" + encodeURIComponent(query), { headers: { Accept: "application/json" } })
+        .then(function (r) { return r.ok ? r.json() : []; })
+        .then(renderResults)
+        .catch(close);
+    }, 200);
+
+    textarea.addEventListener("input", function () {
+      var before = textarea.value.slice(0, textarea.selectionStart);
+      var match = TRIGGER.exec(before);
+      if (match && match[1].length >= 2) lookup(match[1]);
+      else close();
+    });
+
+    textarea.addEventListener("keydown", function (e) {
+      if (menu.hidden) return;
+      var buttons = menu.querySelectorAll("button");
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        active = e.key === "ArrowDown" ? Math.min(active + 1, buttons.length - 1) : Math.max(active - 1, 0);
+        buttons.forEach(function (b, i) { b.classList.toggle("hrl-active", i === active); });
+      } else if (e.key === "Enter" && active >= 0) {
+        e.preventDefault();
+        buttons[active].dispatchEvent(new MouseEvent("mousedown"));
+      } else if (e.key === "Escape") {
+        close();
+      }
+    });
+
+    document.addEventListener("click", function (e) {
+      if (!wrap.contains(e.target)) close();
+    });
+  }
+
+  function init() {
+    document.querySelectorAll("[data-hrl-mention]").forEach(setup);
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
+  else init();
+})();

data/app/assets/stylesheets/hr_lite/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/assets/stylesheets/hr_lite/hr_lite.css

@@ -0,0 +1,239 @@
+/* hr_lite — self-contained, mobile-first (360px) HR shell.
+   Every brand decision is a CSS custom property; hosts restyle by
+   overriding the variables below (see README), never by editing this file. */
+
+:root {
+  --hrl-font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --hrl-accent: #2563eb;
+  --hrl-accent-ink: #ffffff;
+  --hrl-ink: #111827;
+  --hrl-muted: #6b7280;
+  --hrl-bg: #f4f5f7;
+  --hrl-card: #ffffff;
+  --hrl-line: #e5e7eb;
+  --hrl-ok: #047857;
+  --hrl-ok-bg: #d1fae5;
+  --hrl-warn: #b45309;
+  --hrl-warn-bg: #fef3c7;
+  --hrl-bad: #b91c1c;
+  --hrl-bad-bg: #fee2e2;
+  --hrl-info-bg: #dbeafe;
+  --hrl-radius: 14px;
+  --hrl-radius-sm: 9px;
+  --hrl-shadow: 0 1px 3px rgba(17, 24, 39, .07);
+}
+
+* { box-sizing: border-box; }
+.hrl-body {
+  margin: 0;
+  font-family: var(--hrl-font);
+  color: var(--hrl-ink);
+  background: var(--hrl-bg);
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+.hrl-body a { color: var(--hrl-accent); text-decoration: none; }
+.hrl-main {
+  padding: .85rem;
+  padding-bottom: calc(4.4rem + env(safe-area-inset-bottom));
+  max-width: 68rem;
+  margin: 0 auto;
+}
+.hrl-main > * { min-width: 0; }
+
+/* App bar */
+.hrl-appbar {
+  background: var(--hrl-card);
+  border-bottom: 1px solid var(--hrl-line);
+  padding-top: env(safe-area-inset-top);
+  position: sticky; top: 0; z-index: 20;
+}
+.hrl-appbar__inner {
+  display: flex; align-items: center; gap: .75rem;
+  padding: .6rem .85rem; max-width: 68rem; margin: 0 auto;
+}
+.hrl-appbar__brand { font-weight: 700; font-size: 1.02rem; color: var(--hrl-ink); }
+.hrl-appbar__user { margin-left: auto; color: var(--hrl-muted); font-size: .82rem; white-space: nowrap; }
+
+/* Nav: hidden inline on phones (tabbar covers it), row on >=768px */
+.hrl-nav--top { display: none; }
+.hrl-nav__sep { width: 1px; align-self: stretch; background: var(--hrl-line); margin: 0 .2rem; }
+.hrl-nav__link {
+  color: var(--hrl-muted); font-size: .88rem; padding: .5rem .6rem;
+  border-radius: var(--hrl-radius-sm); min-height: 44px;
+  display: inline-flex; align-items: center;
+}
+.hrl-nav__link--active { color: var(--hrl-accent); background: var(--hrl-info-bg); font-weight: 600; }
+.hrl-nav__link--back { margin-left: .25rem; border: 1px solid var(--hrl-line); }
+
+/* Bottom tab bar (phone) */
+.hrl-tabbar {
+  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
+  display: flex; justify-content: space-around;
+  background: var(--hrl-card); border-top: 1px solid var(--hrl-line);
+  padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
+}
+.hrl-tabbar .hrl-nav__link { flex: 1; justify-content: center; font-size: .78rem; }
+
+@media (min-width: 768px) {
+  .hrl-nav--top { display: flex; flex-wrap: wrap; gap: .1rem; align-items: center; }
+  .hrl-tabbar { display: none; }
+  .hrl-main { padding: 1.25rem; padding-bottom: 2rem; }
+}
+
+/* Flash */
+.hrl-flash { padding: .7rem .9rem; border-radius: var(--hrl-radius-sm); margin-bottom: .85rem; font-size: .9rem; }
+.hrl-flash--ok { background: var(--hrl-ok-bg); color: var(--hrl-ok); }
+.hrl-flash--warn { background: var(--hrl-warn-bg); color: var(--hrl-warn); }
+
+/* Page scaffold */
+.hrl-page__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .25rem 0 .9rem; }
+.hrl-page__title { font-size: 1.25rem; font-weight: 700; margin: 0; }
+.hrl-page__sub { color: var(--hrl-muted); font-size: .86rem; margin: .15rem 0 0; width: 100%; }
+.hrl-page__actions { margin-left: auto; display: flex; gap: .5rem; }
+
+/* Cards */
+.hrl-card {
+  background: var(--hrl-card); border: 1px solid var(--hrl-line);
+  border-radius: var(--hrl-radius); box-shadow: var(--hrl-shadow);
+  padding: .95rem; margin-bottom: .85rem;
+}
+.hrl-card__title { font-weight: 650; font-size: .95rem; margin: 0 0 .6rem; }
+.hrl-card--empty { text-align: center; color: var(--hrl-muted); padding: 1.8rem 1rem; }
+.hrl-grid { display: grid; gap: .85rem; grid-template-columns: 1fr; }
+@media (min-width: 700px) { .hrl-grid--2 { grid-template-columns: 1fr 1fr; } }
+
+/* KPI tiles */
+.hrl-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: .85rem; }
+@media (min-width: 700px) { .hrl-kpis { grid-template-columns: repeat(4, 1fr); } }
+.hrl-kpi { background: var(--hrl-card); border: 1px solid var(--hrl-line); border-radius: var(--hrl-radius); padding: .7rem .8rem; }
+.hrl-kpi__value { font-size: 1.35rem; font-weight: 700; }
+.hrl-kpi__label { color: var(--hrl-muted); font-size: .78rem; }
+
+/* Buttons */
+.hrl-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
+  min-height: 44px; padding: .55rem 1rem; border-radius: var(--hrl-radius-sm);
+  border: 1px solid var(--hrl-line); background: var(--hrl-card); color: var(--hrl-ink);
+  font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none;
+}
+.hrl-btn--primary { background: var(--hrl-accent); border-color: var(--hrl-accent); color: var(--hrl-accent-ink); }
+.hrl-btn--danger { color: var(--hrl-bad); border-color: var(--hrl-bad-bg); }
+.hrl-btn--block { width: 100%; }
+.hrl-btn--big { min-height: 58px; font-size: 1.05rem; }
+.hrl-btn[disabled] { opacity: .55; cursor: default; }
+
+/* Badges & chips */
+.hrl-badge {
+  display: inline-flex; align-items: center; gap: .3rem;
+  font-size: .74rem; font-weight: 650; padding: .18rem .55rem;
+  border-radius: 999px; background: var(--hrl-info-bg); color: var(--hrl-accent);
+  white-space: nowrap;
+}
+.hrl-badge--ok { background: var(--hrl-ok-bg); color: var(--hrl-ok); }
+.hrl-badge--warn { background: var(--hrl-warn-bg); color: var(--hrl-warn); }
+.hrl-badge--bad { background: var(--hrl-bad-bg); color: var(--hrl-bad); }
+.hrl-badge--muted { background: var(--hrl-bg); color: var(--hrl-muted); }
+.hrl-mention { color: var(--hrl-accent); font-weight: 650; }
+
+/* Tables (stack to label/value rows on phones) */
+.hrl-table-wrap { overflow-x: auto; }
+.hrl-table { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--hrl-card); border-radius: var(--hrl-radius); }
+.hrl-table th, .hrl-table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--hrl-line); vertical-align: top; }
+.hrl-table th { color: var(--hrl-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }
+.hrl-table td.hrl-num, .hrl-table th.hrl-num { text-align: right; font-variant-numeric: tabular-nums; }
+@media (max-width: 640px) {
+  .hrl-table--stack thead { display: none; }
+  .hrl-table--stack tr { display: block; border-bottom: 6px solid var(--hrl-bg); }
+  .hrl-table--stack td { display: flex; justify-content: space-between; gap: .8rem; border-bottom: 1px dashed var(--hrl-line); }
+  .hrl-table--stack td::before { content: attr(data-label); color: var(--hrl-muted); font-size: .78rem; }
+  .hrl-table--stack td.hrl-num { text-align: left; }
+}
+
+/* Forms */
+.hrl-field { margin-bottom: .8rem; }
+.hrl-field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }
+.hrl-field .hrl-hint { color: var(--hrl-muted); font-size: .76rem; margin-top: .25rem; }
+.hrl-input, .hrl-field input[type], .hrl-field select, .hrl-field textarea {
+  width: 100%; min-height: 44px; padding: .55rem .7rem; font: inherit;
+  border: 1px solid var(--hrl-line); border-radius: var(--hrl-radius-sm);
+  background: var(--hrl-card); color: var(--hrl-ink);
+}
+.hrl-field textarea { min-height: 90px; resize: vertical; }
+.hrl-field--check { display: flex; align-items: center; gap: .5rem; }
+.hrl-field--check input { width: 1.15rem; height: 1.15rem; min-height: 0; }
+.hrl-errors { background: var(--hrl-bad-bg); color: var(--hrl-bad); border-radius: var(--hrl-radius-sm); padding: .7rem .9rem; margin-bottom: .85rem; font-size: .86rem; }
+.hrl-errors ul { margin: .3rem 0 0; padding-left: 1.1rem; }
+.hrl-form-actions { display: flex; gap: .6rem; margin-top: 1rem; }
+.hrl-form-actions .hrl-btn { flex: 1; }
+@media (min-width: 700px) { .hrl-form-actions .hrl-btn { flex: 0 0 auto; min-width: 9rem; } }
+
+/* Radio chip row (kudos badges) */
+.hrl-chiprow { display: flex; flex-wrap: wrap; gap: .45rem; }
+.hrl-chiprow label {
+  border: 1px solid var(--hrl-line); border-radius: 999px; padding: .4rem .8rem;
+  font-size: .8rem; font-weight: 600; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center;
+}
+.hrl-chiprow input { position: absolute; opacity: 0; pointer-events: none; }
+.hrl-chiprow input:checked + span, .hrl-chiprow label:has(input:checked) { background: var(--hrl-info-bg); border-color: var(--hrl-accent); color: var(--hrl-accent); }
+
+/* Feed items */
+.hrl-feed__item { display: flex; gap: .7rem; padding: .8rem 0; border-bottom: 1px solid var(--hrl-line); }
+.hrl-feed__item:last-child { border-bottom: 0; }
+.hrl-avatar {
+  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px;
+  background: var(--hrl-info-bg); color: var(--hrl-accent);
+  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
+}
+.hrl-feed__meta { color: var(--hrl-muted); font-size: .76rem; }
+.hrl-feed__body { min-width: 0; flex: 1; overflow-wrap: anywhere; }
+
+/* Mention autocomplete menu */
+.hrl-mention-wrap { position: relative; }
+.hrl-mention-menu {
+  position: absolute; left: 0; right: 0; z-index: 30;
+  background: var(--hrl-card); border: 1px solid var(--hrl-line);
+  border-radius: var(--hrl-radius-sm); box-shadow: var(--hrl-shadow);
+  max-height: 14rem; overflow-y: auto;
+}
+.hrl-mention-menu button {
+  display: block; width: 100%; text-align: left; padding: .6rem .8rem;
+  background: none; border: 0; font: inherit; cursor: pointer; min-height: 44px;
+}
+.hrl-mention-menu button:hover, .hrl-mention-menu button.hrl-active { background: var(--hrl-bg); }
+
+/* Pagination */
+.hrl-pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 1rem 0; font-size: .88rem; }
+.hrl-pager__info { color: var(--hrl-muted); }
+
+/* Definition list */
+.hrl-deflist { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .35rem .9rem; font-size: .9rem; }
+.hrl-deflist dt { color: var(--hrl-muted); }
+.hrl-deflist dd { margin: 0; overflow-wrap: anywhere; }
+
+/* Month grid (attendance) */
+.hrl-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
+.hrl-mgrid__head { text-align: center; color: var(--hrl-muted); font-size: .68rem; padding: .2rem 0; }
+.hrl-mgrid__day {
+  min-height: 44px; border-radius: 7px; background: var(--hrl-card);
+  border: 1px solid var(--hrl-line); padding: .2rem .3rem; font-size: .72rem;
+  display: flex; flex-direction: column; gap: .1rem; position: relative;
+}
+.hrl-mgrid__day--muted { opacity: .45; }
+.hrl-mgrid__num { font-weight: 650; }
+.hrl-mgrid__tag { font-size: .6rem; color: var(--hrl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hrl-mgrid__day--present { background: var(--hrl-ok-bg); border-color: transparent; }
+.hrl-mgrid__day--half { background: linear-gradient(135deg, var(--hrl-ok-bg) 50%, var(--hrl-card) 50%); }
+.hrl-mgrid__day--leave { background: var(--hrl-info-bg); border-color: transparent; }
+.hrl-mgrid__day--holiday { background: var(--hrl-warn-bg); border-color: transparent; }
+.hrl-mgrid__day--weekend { background: var(--hrl-bg); }
+.hrl-mgrid__day--absent { background: var(--hrl-bad-bg); border-color: transparent; }
+.hrl-mgrid__flag { position: absolute; top: 3px; right: 4px; width: 7px; height: 7px; border-radius: 999px; background: var(--hrl-bad); }
+.hrl-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
+
+/* Utility */
+.hrl-muted { color: var(--hrl-muted); }
+.hrl-small { font-size: .8rem; }
+.hrl-mt { margin-top: .85rem; }
+.hrl-right { margin-left: auto; }
+.hrl-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }