/* ---- MUI-style Material theme (mirrors mbi_passhub admin-portal) ---- */
:root {
  --primary:#1976d2; --primary-dark:#1565c0; --secondary:#dc004e;
  --success:#2e7d32; --warning:#ed6c02; --error:#d32f2f;
  --bg:#f5f5f5; --paper:#ffffff;
  --text:rgba(0,0,0,0.87); --text-2:rgba(0,0,0,0.6); --text-3:rgba(0,0,0,0.38);
  --divider:rgba(0,0,0,0.12); --hover:rgba(0,0,0,0.04);
  --selected:rgba(25,118,210,0.08);
  --elev1:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
  --elev2:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
  --elev4:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
  --drawer:240px; --appbar:64px;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font-family:Roboto,Helvetica,Arial,sans-serif; font-size:14px; line-height:1.5; }
/* Inline SVG icons (self-contained — no icon-font CDN, works offline/LAN) */
.icon { width:22px; height:22px; fill:currentColor; flex-shrink:0; vertical-align:middle; }

/* ---- AppBar ---- */
.appbar { position:fixed; top:0; left:0; right:0; height:var(--appbar); z-index:1100;
          background:var(--primary); color:#fff; box-shadow:var(--elev4);
          display:flex; align-items:center; gap:12px; padding:0 16px; }
.appbar .menu-btn { display:none; background:none; border:0; color:#fff; cursor:pointer;
                    padding:8px; border-radius:50%; }
.appbar .menu-btn:hover { background:rgba(255,255,255,.12); }
.appbar .brand { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.appbar .brand .brand-logo { width:28px; height:28px; display:block; }
.appbar .title { font-size:1.25rem; font-weight:500; white-space:nowrap; overflow:hidden;
                 text-overflow:ellipsis; }
.ws-chip { display:inline-flex; align-items:center; gap:6px; font-size:.8125rem;
           padding:4px 10px; border-radius:16px; background:rgba(255,255,255,.16); }
.dot { width:9px; height:9px; border-radius:50%; background:#bdbdbd; display:inline-block; }
.dot.on { background:#66bb6a; } .dot.off { background:#ef5350; }
.abtn { background:rgba(255,255,255,.0); border:1px solid rgba(255,255,255,.6); color:#fff;
        font:500 .875rem/1 Roboto,sans-serif; text-transform:uppercase; letter-spacing:.02em;
        padding:7px 14px; border-radius:4px; cursor:pointer; display:inline-flex;
        align-items:center; gap:6px; }
.abtn:hover { background:rgba(255,255,255,.12); }
.abtn:disabled { opacity:.6; cursor:default; }

/* ---- Layout: sidebar + content ---- */
.layout { display:flex; margin-top:var(--appbar); }
.sidebar { width:var(--drawer); flex-shrink:0; background:var(--paper);
           border-right:1px solid var(--divider); position:sticky; top:var(--appbar);
           height:calc(100vh - var(--appbar)); overflow-y:auto; }
.navlist { list-style:none; margin:0; padding:8px 0; }
.navitem { display:flex; align-items:center; gap:16px; min-height:48px; padding:0 16px;
           color:var(--text); cursor:pointer; user-select:none; }
.navitem .icon { color:var(--text-2); }
.navitem:hover { background:var(--hover); }
.navitem.active { background:var(--selected); color:var(--primary); }
.navitem.active .icon { color:var(--primary); }
.navitem span:last-child { font-size:.9375rem; }
.nav-divider { border:0; border-top:1px solid var(--divider); margin:8px 0; }
.backdrop { display:none; position:fixed; inset:var(--appbar) 0 0 0; background:rgba(0,0,0,.4);
            z-index:1090; }

.content { flex:1; min-width:0; padding:24px; min-height:calc(100vh - var(--appbar)); }
.page-title { font-size:1.5rem; font-weight:400; margin:0 0 20px; }
.view { display:none; } .view.active { display:block; }

/* ---- Paper surfaces ---- */
.paper { background:var(--paper); border-radius:4px; box-shadow:var(--elev1); padding:16px; }
.paper + .paper { margin-top:20px; }
.section-title { font-size:1.125rem; font-weight:500; margin:0 0 4px; }
.hint { color:var(--text-2); font-size:.8125rem; margin:0 0 14px; }

/* ---- Stat cards ---- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; margin-bottom:20px; }
.card { background:var(--paper); border-radius:4px; box-shadow:var(--elev1); padding:14px 16px;
        display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card-main { min-width:0; }
.card .n { font-size:1.625rem; font-weight:500; line-height:1.2; white-space:nowrap; }
.card .l { color:var(--text-2); font-size:.8125rem; margin-top:4px; text-transform:uppercase;
           letter-spacing:.04em; }
.spark { width:168px; height:40px; flex-shrink:0; }
.card.total .n, .card.uniq .n, .card.c-att .n { color:var(--primary); }
.card.in .n, .card.c-office .n { color:var(--success); }
.card.out .n, .card.c-exceeded .n { color:var(--warning); }
.card.c-away .n { color:var(--error); }
.card.c-lunch .n { color:#0288d1; }

/* ---- Toolbar (filter rows) ---- */
.bar { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:16px; }
.bar label { display:flex; flex-direction:column; gap:4px; font-size:.75rem; color:var(--text-2); }
/* Buttons sitting next to date/text inputs match their 37px height so the row
   lines up (the inputs are taller because of their stacked field label). */
.bar .btn { height:37px; }
input, select, button { font-family:inherit; }
input, select { background:var(--paper); border:1px solid rgba(0,0,0,.23); color:var(--text);
                border-radius:4px; padding:8px 10px; font-size:.875rem; outline:none; height:37px; }
input:focus, select:focus { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
/* flat outlined select that matches the text inputs, with a custom arrow */
select { appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
         padding-right:30px; min-width:108px;
         background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23616161' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
         background-repeat:no-repeat; background-position:right 7px center; background-size:18px; }

/* ---- Buttons (MUI) ---- */
.btn { background:var(--primary); border:0; color:#fff; padding:7px 16px; border-radius:4px;
       cursor:pointer; font:500 .875rem/1.4 Roboto,sans-serif; text-transform:uppercase;
       letter-spacing:.02em; box-shadow:var(--elev2); }
.btn:hover { background:var(--primary-dark); }
.btn:disabled { background:rgba(0,0,0,.12); color:var(--text-3); box-shadow:none; cursor:default; }
.btn.ghost { background:transparent; color:var(--primary); border:1px solid rgba(25,118,210,.5);
             box-shadow:none; }
.btn.ghost:hover { background:rgba(25,118,210,.04); border-color:var(--primary); }
.btn.ghost:disabled { color:var(--text-3); border-color:var(--divider); background:transparent; }

/* ---- Tables (MUI) ---- */
.tbl-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--divider);
         font-size:.875rem; white-space:nowrap; }
th { color:var(--text-2); font-weight:500; position:sticky; top:0; background:var(--paper); z-index:1; }
tbody tr:hover { background:var(--hover); }
.total-row td { font-weight:600; border-top:2px solid var(--divider); }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:var(--text); }
th.sortable::after { content:''; font-size:.7em; color:var(--primary); margin-left:3px; }
th.sortable.sort-asc::after { content:'▲'; }
th.sortable.sort-desc::after { content:'▼'; }

/* ---- Chips (direction) ---- */
.tag { display:inline-block; padding:2px 10px; border-radius:16px; font-size:.75rem;
       font-weight:500; height:24px; line-height:20px; }
.tag.in { background:rgba(46,125,50,.12); color:var(--success); }
.tag.out { background:rgba(237,108,2,.12); color:var(--warning); }
.tag.ignore,.tag.unknown { background:rgba(0,0,0,.08); color:var(--text-2); }
.muted { color:var(--text-2); }

.pager { display:flex; gap:12px; align-items:center; margin-top:14px; }
#liveList .row { display:flex; gap:14px; align-items:center; padding:12px 16px;
                 border-bottom:1px solid var(--divider); animation:flash .9s ease; }
@keyframes flash { from { background:var(--selected); } to { background:transparent; } }
.feedmeta { color:var(--text-2); font-size:.8125rem; margin:0 0 14px; }

/* "New data — refresh" hint for the snapshot pages (Dashboard / Records). */
.refresh-hint { display:flex; align-items:center; gap:10px; margin:0 0 16px;
                padding:8px 12px; border-radius:4px; font-size:.8125rem;
                color:var(--primary-dark); background:var(--selected);
                border:1px solid rgba(25,118,210,.3); animation:flash .9s ease; }
.refresh-hint[hidden] { display:none; }
.refresh-hint .icon { color:var(--primary); }
.refresh-hint span { flex:1; }
.refresh-hint .btn { padding:5px 12px; }
.rh-x { background:none; border:0; color:var(--text-2); font-size:1.25rem;
        line-height:1; cursor:pointer; padding:0 4px; }
.rh-x:hover { color:var(--text); }

#manage td { padding:6px 8px; }
#manage td input, #manage td select { width:100%; min-width:64px; }
#manage td:nth-child(1) input, #manage td:nth-child(2) input { min-width:54px; }
#manage .e-del, #manage .r-del { padding:6px 10px; }

/* ---- Footer ---- */
.footer { border-top:1px solid var(--divider); background:var(--paper); padding:14px 16px;
          display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
          color:var(--text-2); font-size:.75rem; }

/* ---- Responsive: collapsible drawer ---- */
@media (max-width:900px) {
  .appbar .menu-btn { display:inline-flex; }
  .sidebar { position:fixed; top:var(--appbar); bottom:0; left:0; z-index:1095;
             transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--elev4); }
  .sidebar.open { transform:translateX(0); }
  .sidebar.open + .backdrop { display:block; }
  .content { padding:16px; }
}

/* ---- Login page (standalone /login) ---- */
.login-body { min-height:100vh; margin:0; display:flex; align-items:center;
              justify-content:center; padding:24px;
              background:linear-gradient(135deg,#e3f2fd 0%,#f5f5f5 60%); }
.login-card { background:var(--paper); width:100%; max-width:360px; border-radius:8px;
              box-shadow:var(--elev4); padding:32px 28px;
              display:flex; flex-direction:column; gap:4px; }
/* logo.svg is a white mark on a transparent ground (designed for the blue
   appbar), so on the white login card it needs a blue badge to be visible.
   Small padding so the (wide, short) mark fills the badge rather than floating. */
.login-logo { width:64px; height:64px; align-self:center; padding:5px;
              background:var(--primary); border-radius:14px; box-shadow:var(--elev1); }
.login-title { font-size:1.375rem; font-weight:500; text-align:center; margin:12px 0 2px; }
.login-sub { color:var(--text-2); text-align:center; margin:0 0 18px; font-size:.875rem; }
.login-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.login-field span { font-size:.8125rem; color:var(--text-2); }
.login-field input { padding:10px 12px; border:1px solid var(--divider); border-radius:4px;
                     font:inherit; font-size:.9375rem; }
.login-field input:focus { outline:none; border-color:var(--primary);
                           box-shadow:0 0 0 2px var(--selected); }
.login-error { color:var(--error); font-size:.8125rem; margin:0 0 10px; }
.login-btn { width:100%; justify-content:center; padding:10px; margin-top:4px; font-size:.9375rem; }

/* Logout control in the appbar */
.appbar .logout-btn { background:none; border:0; color:#fff; cursor:pointer; padding:8px;
                      border-radius:50%; display:inline-flex; }
.appbar .logout-btn:hover { background:rgba(255,255,255,.12); }

/* ---- Clickable person name (Dashboard summary) ---- */
.link-name { background:none; border:0; padding:0; font:inherit; color:var(--primary);
             cursor:pointer; text-align:left; }
.link-name:hover { text-decoration:underline; }

/* ---- Person detail modal (per-employee sheet) ---- */
.modal { position:fixed; inset:0; z-index:1200; display:flex; align-items:center;
         justify-content:center; padding:24px; }
.modal[hidden] { display:none; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.modal-card { position:relative; background:var(--paper); border-radius:8px; box-shadow:var(--elev4);
              width:min(1600px,96vw); max-height:90vh; display:flex; flex-direction:column; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
              padding:18px 24px; border-bottom:1px solid var(--divider); }
.modal-title { font-size:1.25rem; font-weight:500; margin:0; }
.modal-sub { color:var(--text-2); font-size:.8125rem; margin:4px 0 0; }
.icon-btn { background:none; border:0; color:var(--text-2); cursor:pointer; padding:6px;
            border-radius:50%; display:inline-flex; flex-shrink:0; }
.icon-btn:hover { background:var(--hover); color:var(--text); }
.modal-body { padding:20px 24px; overflow:auto; }

/* KPI chips */
.pm-kpis { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.pm-kpi { flex:1 1 90px; min-width:90px; background:var(--bg); border-radius:6px; padding:10px 12px; }
.pm-kpi-n { font-size:1.25rem; font-weight:500; line-height:1.2; }
.pm-kpi-l { color:var(--text-2); font-size:.6875rem; text-transform:uppercase;
            letter-spacing:.04em; margin-top:3px; }
.pm-kpi.office .pm-kpi-n { color:var(--success); }
.pm-kpi.away .pm-kpi-n { color:var(--error); }
.pm-kpi.att .pm-kpi-n { color:var(--primary); }
.pm-kpi.lunch .pm-kpi-n { color:#0288d1; }
.pm-kpi.exc .pm-kpi-n { color:var(--warning); }

.pm-h3 { font-size:1rem; font-weight:500; margin:18px 0 8px; }

/* Legend */
.pm-legend { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
             color:var(--text-2); font-size:.75rem; margin:0 0 10px; }
.pm-leg { display:inline-block; width:13px; height:13px; border-radius:3px;
          margin-right:2px; vertical-align:-2px; border:1px solid rgba(0,0,0,.1); }

/* Daily timeline grid (web view): horizontal flex of day columns against a
   sticky time axis. Each day is one continuous vertical bar; office/away/lunch
   are absolutely-positioned blocks placed at their real minute offsets, so the
   picture is minute-accurate rather than snapped to 15-minute cells. */
.pm-grid2 { display:flex; overflow:auto; border:1px solid var(--divider);
            border-radius:6px; font-size:.75rem; --bar-h:380px; --bar-pad:7px; }
.pm-axiscol { position:sticky; left:0; z-index:3; flex:0 0 56px; background:var(--paper);
              border-right:1px solid #c8c8c8; }
/* Day columns flex-grow to fill the width when there are few days; when there
   are many they keep a sensible min width and the grid scrolls horizontally. */
.pm-cols { display:flex; flex:1; min-width:0; }
.pm-daycol { flex:1 0 40px; min-width:0; border-right:1px solid #e0e0e0; }
.pm-daycol:last-child { border-right:0; }
/* A non-working day (weekend) gets a grey fill down the WHOLE column — header,
   bar and footer — so the off-days read as shaded vertical strips. The column
   sets the grey; its header / bar-inner / footer go transparent to let it show
   through (they otherwise paint their own white/paper background). */
.pm-daycol.off { background:#f2f2f2; }
.pm-daycol.off .pm-dayhdr,
.pm-daycol.off .pm-bar-inner,
.pm-daycol.off .pm-colfoot { background:transparent; }

/* Day header (number + weekday), sticky at the top while the bars scroll.
   Flex-centered so the two lines sit centered with even space above/below. */
.pm-dayhdr { display:flex; flex-direction:column; justify-content:center; align-items:center;
             text-align:center; min-height:40px; padding:5px 0; position:sticky; top:0;
             z-index:2; background:var(--paper); border-bottom:1px solid var(--divider); }
.pm-dayhdr.spacer { background:var(--paper); }
/* Weekend header: grey text; its fill comes from .pm-daycol.off (the whole
   column is shaded), so no background is set here. */
.pm-dayhdr.off { color:var(--text-3); }
.pm-dayhdr.present .pm-dnum { color:var(--primary); }
.pm-dnum { font-weight:600; line-height:1.2; }
.pm-dow { font-size:.625rem; line-height:1.2; color:var(--text-2); }

/* The time axis and the day bars share the SAME geometry: an outer box that
   reserves var(--bar-pad) above and below, and an inner positioning area of
   height var(--bar-h). The %-positioned tick labels and bar blocks live in the
   inner area, so the 0%/100% marks (09:00 / 18:00) sit inside the padding and
   don't spill into the header / footer — and ticks line up with blocks. */
.pm-axis, .pm-bar { position:relative; padding:var(--bar-pad) 0; }
.pm-axis-inner, .pm-bar-inner { position:relative; height:var(--bar-h); }
.pm-tick { position:absolute; right:8px; transform:translateY(-50%);
           font-size:.625rem; color:var(--text-2); white-space:nowrap; }
/* The bar's background lives on the INNER area only, so the var(--bar-pad)
   above/below stays clean paper — that gap separates the bars from the day
   header and the footer. A working day's inner is a clean white canvas;
   office/away/lunch blocks paint on it. Weekends are shaded by the whole-column
   `.pm-daycol.off` fill above (this inner goes transparent there). No hour
   gridlines — the axis labels carry the scale. */
.pm-bar-inner { background:#fff; }
/* The day column is drawn as a CLIPPED CAPSULE (two-pass). `.pm-caplayer` is the
   capsule silhouette: it spans the base region (first→last swipe), is centered
   at 40% of the column width (left/right 30%), and is pilled at BOTH ends by a
   huge border-radius. When the span is short its height ≈ its width, so the pill
   becomes a perfect circle; when long, a rounded-end column. `overflow:hidden`
   makes it a clip mask: every colour block inside is a plain flat-ended
   rectangle, and any block reaching a rounded end is clipped to the circle — a
   colour can never square off the cap. min-height keeps a 1-swipe day visible. */
.pm-caplayer { position:absolute; left:30%; right:30%; min-height:8px;
               border-radius:999px; overflow:hidden; }
/* Blocks fill the capsule's full width and are positioned in % of the capsule's
   own height (see person.js `inCap`). Flat-ended by design — the caplayer's
   rounded clip supplies the caps. A very short block reads as a thin line. */
.pm-block { position:absolute; left:0; right:0; border-radius:0; min-height:2px; }
/* The base fill IS the whole capsule (green); office repaints green over it,
   away/lunch/miss overlay their out-in blocks, and `miss` whitens forgotten
   punches. All clipped to the capsule's rounded silhouette. */
.pm-capfill { position:absolute; inset:0; }
.pm-block.s-base, .pm-capfill.s-base { background:#66bb6a; }
.pm-block.s-office { background:#66bb6a; }
.pm-block.s-away   { background:#ef5350; }
.pm-block.s-lunch  { background:#4fc3f7; }
.pm-block.s-miss   { background:#fff; }
.pm-leg.s-office { background:#66bb6a; } .pm-leg.s-away { background:#ef5350; }
.pm-leg.s-lunch { background:#4fc3f7; } .pm-leg.s-off { background:#eeeeee; }

/* Per-day footer totals, stacked under each bar; labels in the axis column.
   The five rows are vertically centered within the footer's fixed height (both
   the axis label column and the day columns share .pm-colfoot, so they stay on
   the same baselines). */
.pm-colfoot { display:flex; flex-direction:column; justify-content:center;
              min-height:108px; border-top:1px solid var(--divider);
              background:var(--paper); }
.pm-colfoot.lbls { align-items:flex-end; }
.pm-foot, .pm-foot-lbl { font-size:.6875rem; line-height:1.5; padding:1px 4px;
              white-space:nowrap; text-align:center; }
.pm-foot-lbl { text-align:right; font-weight:500; color:var(--text-2); }
.pm-foot.office { color:var(--success); } .pm-foot.away { color:var(--error); }
.pm-foot.att { color:var(--primary); } .pm-foot.lunch { color:#0288d1; }
.pm-foot.exc { color:var(--warning); }

/* Daily IN/OUT detail cards */
.pm-days { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.pm-day { border:1px solid var(--divider); border-radius:6px; padding:10px 12px; }
.pm-day-head { display:flex; justify-content:space-between; align-items:baseline;
               margin-bottom:6px; }
.pm-day-date { font-weight:500; font-size:.8125rem; }
.pm-day-dow { color:var(--text-2); font-size:.6875rem; }
.pm-pair-row { display:flex; align-items:center; gap:6px; font-size:.8125rem;
               font-variant-numeric:tabular-nums; padding:1px 0; }
.pm-arrow { color:var(--text-3); }
.pm-pair.miss, .pm-pair-empty { color:var(--text-3); font-style:italic; }
/* Daily-detail rows: arrival (In) / away (OUT→IN) / leaving (Out). */
.pm-seg { display:flex; align-items:center; gap:6px; font-size:.8125rem;
          font-variant-numeric:tabular-nums; padding:2px 0; }
.pm-seg-tag { flex:0 0 38px; font-size:.625rem; font-weight:600; letter-spacing:.04em;
              text-transform:uppercase; padding:1px 5px; border-radius:3px; text-align:center; }
.pm-seg.in  .pm-seg-tag { color:var(--success); background:rgba(46,125,50,.1); }
.pm-seg.out .pm-seg-tag { color:var(--error);   background:rgba(211,47,47,.1); }
.pm-seg.away .pm-seg-tag { color:var(--warning); background:rgba(237,108,2,.1); }
.pm-seg.lunch .pm-seg-tag { color:#0288d1; background:rgba(2,136,209,.1); }
.pm-day-tot { color:var(--text-2); font-size:.6875rem; margin-top:6px;
              border-top:1px solid var(--divider); padding-top:5px; }

/* Floating Daily-detail popover shown at the cursor while hovering a timeline
   day column (position set per-mousemove in wireTimelineHover). Fixed so it
   escapes the scrolling grid; pointer-events off so it never flickers when the
   cursor slides under it. */
.pm-hovercard { position:fixed; z-index:1000; width:200px; background:#fff;
                box-shadow:0 4px 16px rgba(0,0,0,.18); pointer-events:none; }
.pm-hovercard[hidden] { display:none; }
.pm-daycol[data-date] .pm-bar { cursor:pointer; }

@media (max-width:900px) {
  .modal { padding:0; }
  .modal-card { max-height:100vh; height:100%; width:100%; border-radius:0; }
}

/* ---- Dashboard summary: highlight rules (conditional cell colouring) ---- */
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.btn-sm { padding:4px 10px; font-size:.75rem; height:auto; box-shadow:none; }
.hl-count { display:inline-flex; min-width:18px; height:18px; padding:0 5px; margin-left:6px;
            align-items:center; justify-content:center; border-radius:9px;
            background:var(--primary); color:#fff; font-size:.6875rem; font-weight:600; }
.hl-panel { border:1px solid var(--divider); border-radius:6px; padding:12px 14px;
            margin:4px 0 14px; background:var(--bg); }
.hl-panel .hint { margin-bottom:10px; }
.hl-rule { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.hl-rule select, .hl-rule input[type=text] { height:34px; }
.hl-rule .hl-val { width:120px; }
.hl-rule .hl-color { width:42px; height:34px; padding:2px; cursor:pointer; }
.hl-del { background:none; border:0; color:var(--text-3); cursor:pointer; font-size:1rem;
          line-height:1; padding:6px 9px; border-radius:4px; }
.hl-del:hover { color:var(--error); background:var(--hover); }
.hl-actions { display:flex; align-items:center; gap:10px; margin-top:4px; }