/* Styles for static/ui/hr-enhance.js: filter toggle, icon row actions, tooltips, column chooser. */

/* ── Filters: expand / collapse ───────────────────────────────────────── */
.hr-fx-filterhead { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.hr-fx-filtertoggle { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px 0 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(165, 180, 252, .6); background: linear-gradient(180deg, #fff, #f3f4ff); color: var(--hr-text); font: 600 13px var(--hr-font);
  box-shadow: 0 4px 14px rgba(79, 70, 229, .10); transition: box-shadow .2s, transform .2s; }
.hr-fx-filtertoggle:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(79, 70, 229, .18); }
.hr-fx-filtericon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--hr-gradient); font-size: 11px; }
.hr-fx-filtercount { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #f43f5e, #f97316); }
.hr-fx-chev { font-size: 11px; color: var(--hr-muted); transition: transform .2s; }
.hr-fx-filterhead.is-collapsed .hr-fx-chev { transform: rotate(-90deg); }
.hr-fx-filterclear { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hr-border); background: #fff; color: var(--hr-danger); cursor: pointer; }
.hr-fx-filterclear:hover { background: var(--hr-danger-soft); }
.hr-fx-collapsed { display: none !important; }

/* ── Icon row actions ─────────────────────────────────────────────────── */
.hr-content .hr-ibtn { width: 28px !important; min-width: 28px; height: 28px !important; min-height: 28px !important; padding: 0 !important; gap: 0 !important;
  border-radius: 8px !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 1px; font-size: 12px !important;
  box-shadow: none !important; }
.hr-content .hr-ibtn .hr-ibtn__txt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hr-content .hr-ibtn i { margin: 0 !important; font-size: 12.5px; }
.hr-content .hr-ibtn.hr-ibtn { border: 0 !important; box-shadow: none !important; background-image: none !important; }
.hr-content .hr-ibtn--edit.hr-ibtn { background-color: #fff3e6 !important; color: #c2410c !important; }
.hr-content .hr-ibtn--danger.hr-ibtn { background-color: #ffeef1 !important; color: #e11d48 !important; }
.hr-content .hr-ibtn--view.hr-ibtn { background-color: #eef1ff !important; color: #4f46e5 !important; }
.hr-content .hr-ibtn--good.hr-ibtn { background-color: #e9faf2 !important; color: #059669 !important; }
.hr-content .hr-ibtn.hr-ibtn:hover { transform: none; filter: brightness(.94) saturate(1.3); box-shadow: none !important; }

/* ── Tooltip ──────────────────────────────────────────────────────────── */
.hr-tip { position: fixed; z-index: 2000; max-width: 260px; padding: 6px 10px; border-radius: 8px; font: 600 12px/1.35 var(--hr-font, Inter, sans-serif);
  color: #fff; background: rgba(13, 19, 48, .94); box-shadow: 0 10px 26px rgba(13, 19, 48, .3); pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.hr-tip.is-on { opacity: 1; transform: none; }
.hr-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: rgba(13, 19, 48, .94); }
.hr-tip.is-below::after { bottom: auto; top: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: rgba(13, 19, 48, .94); }

/* ── Table toolbar & column menu ──────────────────────────────────────── */
.hr-fx-tbar { display: flex; justify-content: flex-end; gap: 6px; margin: 0 0 6px; }
.hr-fx-tbtn { position: relative; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--hr-border); background: #fff; color: var(--hr-text-2);
  cursor: pointer; display: inline-grid; place-items: center; font-size: 12.5px; transition: transform .15s, border-color .15s, color .15s, box-shadow .15s; }
.hr-fx-tbtn:hover { color: var(--hr-primary); border-color: #a5b4fc; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(79, 70, 229, .14); }
.hr-fx-tbtn.is-on { color: #fff; background: var(--hr-gradient); border-color: transparent; }
.hr-fx-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 700;
  line-height: 16px; color: #fff; background: #f43f5e; }
.hr-fx-menu { position: fixed; z-index: 1500; width: 240px; max-height: 60vh; overflow: auto; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px); border: 1px solid var(--hr-border); box-shadow: 0 20px 50px rgba(13, 19, 48, .2); font: 13px var(--hr-font); }
.hr-fx-menu__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--hr-muted); border-bottom: 1px solid var(--hr-border); margin-bottom: 4px; }
.hr-fx-menu__head button { border: 0; background: none; color: var(--hr-primary); font: 600 12px var(--hr-font); cursor: pointer; text-transform: none; letter-spacing: 0; }
.hr-fx-menu label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.hr-fx-menu label:hover { background: var(--hr-surface-2); }
.hr-fx-menu input { accent-color: #4f46e5; width: 15px; height: 15px; }
.hr-content table.hr-fx-dense td, .hr-content table.hr-fx-dense th { padding-top: 5px !important; padding-bottom: 5px !important; font-size: 12.5px !important; }
@media print { .hr-fx-tbar, .hr-fx-filterhead, .hr-tip { display: none !important; } .hr-fx-collapsed { display: block !important; } }

/* ── Pop-ups as side drawers (hr-enhance.js section 5) ────────────────
   The page still decides whether a pop-up is shown (we never touch display); we only pin its panel to
   the right edge at full height. The slide uses the "translate" property so it never fights the
   panel's own transform. */
.hr-drawer-host { padding: 0 !important; overflow: hidden !important; background: rgba(7, 11, 29, .42) !important; }
.hr-drawer-fill { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important;
  max-height: none !important; margin: 0 !important; border-radius: 0 !important; transform: none !important; box-shadow: none !important; }
.hr-drawer-host > .modal-dialog { margin: 0 !important; max-width: none !important; transform: none !important; }
.hr-drawer-panel { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
  width: min(var(--hr-dw, 720px), 100vw) !important; max-width: 100vw !important; min-width: 0 !important;
  height: 100vh !important; max-height: 100vh !important; margin: 0 !important; transform: none !important;
  border-radius: 20px 0 0 20px !important; overflow-y: auto !important; overscroll-behavior: contain;
  box-shadow: -24px 0 60px rgba(7, 11, 29, .28) !important; background-color: var(--hr-surface, #fff); box-sizing: border-box; z-index: 1; }
.hr-drawer-in { animation: hr-drawer-slide .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hr-drawer-slide { from { translate: 48px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.hr-drawer-panel > :first-child { position: sticky; top: 0; z-index: 2; }
.hr-drawer-panel :is(.modal-footer, .modal-actions, [class*="modal-footer"]) { position: sticky; bottom: 0; z-index: 2;
  background-color: var(--hr-surface, #fff); box-shadow: 0 -8px 20px rgba(13, 19, 48, .06); }
.hr-drawer-panel [style*="max-height"][style*="overflow"] { max-height: none !important; }
.hr-drawer-panel :is(.modal-body, [class*="modal-body"], .modal-content > form) { max-height: none !important; overflow: visible !important; }
@media (max-width: 640px) { .hr-drawer-panel { width: 100vw !important; border-radius: 0 !important; } }
@media (prefers-reduced-motion: reduce) { .hr-drawer-in { animation: none; } }
.hr-fx-scroll { width: 0; min-width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.hr-content { min-width: 0; }
.hr-main { min-width: 0; }
/* clicks on an icon inside a button count as clicks on the button (pages that read e.target.dataset) */
.hr-content :is(button, .btn, a[class*="btn"], .hr-ibtn) > :is(i, svg, img, span.hr-ibtn__txt) { pointer-events: none; }
/* desktop-notification switch in the top bar (static/ui/hr-app.js) */
.hr-push-btn.is-on { color: #10b981; }
.hr-push-btn.hr-pulse { position: relative; }
.hr-push-btn.hr-pulse::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); animation: hrPushPulse 1.8s infinite; }
@keyframes hrPushPulse { 70% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } }
@media (prefers-reduced-motion: reduce) { .hr-push-btn.hr-pulse::after { animation: none; } }
/* a page that hides a button inline (shown later by its own script) keeps it hidden - the shared button system
   sets display with !important, which used to show such buttons before the page wanted them */
.hr-content :is(button, .btn, a.btn, [class*="btn"])[style*="display:none"],
.hr-content :is(button, .btn, a.btn, [class*="btn"])[style*="display: none"] { display: none !important; }
/* back / forward / refresh / undo / redo in the top bar (templates/components/_chrome.html) */
.hr-navbtns { display: inline-flex; align-items: center; gap: 2px; margin: 0 8px 0 2px; padding: 3px; border-radius: 12px; background: rgba(99, 102, 241, .06); border: 1px solid rgba(99, 102, 241, .12); }
.hr-navbtns .hr-icon-btn { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.hr-navbtns .hr-icon-btn:disabled { opacity: .35; cursor: default; }
.hr-navbtns .hr-icon-btn:not(:disabled):hover { background: #fff; color: #4f46e5; box-shadow: 0 0 0 1px #c7d2fe, 0 4px 12px rgba(79, 70, 229, .18); }
.hr-navbtns__sep { width: 1px; height: 18px; margin: 0 3px; background: rgba(99, 102, 241, .25); }
@media (max-width: 900px) { .hr-navbtns [data-hr-nav="undo"], .hr-navbtns [data-hr-nav="redo"], .hr-navbtns__sep { display: none; } }
@media (max-width: 560px) { .hr-navbtns [data-hr-nav="forward"] { display: none; } }
/* top bar: brand never shrinks under the section label (the nav buttons take room since 2026-10-19) */
.hr-topbar .hr-topbar__brand { flex: 0 0 auto; }
.hr-topbar .hr-topbar__brand-tag { flex: 0 0 auto; white-space: nowrap; }
.hr-topbar .hr-topbar__divider { flex: 0 0 1px; }
.hr-topbar .hr-topbar__context { flex: 0 1 auto; min-width: 0; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1280px) { .hr-topbar .hr-topbar__brand-tag { display: none; } }