/* ==========================================================================
   FUTURE SKIN - the modern look for every page, loaded after theme.css, hr.css
   (and hr-legacy.css). Appearance only: colours, glass, glow, motion, shape.
   It never changes what a page shows, its layout grid or control sizes.
   Remove the <link> in templates/components/_assets.html to switch it off.
   ========================================================================== */
:root {
  --hr-primary: #4f46e5;
  --hr-primary-hover: #4338ca;
  --hr-primary-soft: #eef0ff;
  --hr-accent: #06b6d4;
  --hr-accent-soft: rgba(6, 182, 212, .14);
  --hr-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 45%, #06b6d4 100%);
  --hr-gradient-soft: linear-gradient(135deg, rgba(79, 70, 229, .10), rgba(6, 182, 212, .10));

  --hr-bg: #f4f6fd;
  --hr-bg-pattern: radial-gradient(900px 480px at 100% -8%, rgba(6, 182, 212, .14), transparent 60%),
                   radial-gradient(800px 420px at -6% 4%, rgba(124, 58, 237, .12), transparent 58%),
                   radial-gradient(700px 500px at 50% 110%, rgba(79, 70, 229, .08), transparent 60%);
  --hr-surface: #ffffff;
  --hr-surface-2: #f5f7fe;
  --hr-glass: rgba(255, 255, 255, .72);
  --hr-border: #e3e7f4;
  --hr-border-strong: #cfd6ea;
  --hr-text: #0d1330;
  --hr-text-2: #48506e;
  --hr-muted: #6b7393;

  --hr-success: #059669;  --hr-success-soft: #e3f8ef;
  --hr-warning: #c2410c;  --hr-warning-soft: #fff1e6;
  --hr-danger:  #e11d48;  --hr-danger-soft:  #ffe8ee;
  --hr-info:    #0284c7;  --hr-info-soft:    #e3f3fd;

  --hr-sidebar-bg: radial-gradient(420px 260px at 0% 0%, rgba(124, 58, 237, .32), transparent 70%),
                   radial-gradient(380px 300px at 100% 100%, rgba(6, 182, 212, .22), transparent 70%),
                   linear-gradient(180deg, #070b1d 0%, #0b1130 55%, #070b1d 100%);
  --hr-sidebar-hover: rgba(129, 140, 248, .12);
  --hr-sidebar-active: linear-gradient(90deg, rgba(99, 102, 241, .34), rgba(6, 182, 212, .14));
  --hr-sidebar-active-bar: #22d3ee;

  --hr-radius: 16px;
  --hr-radius-sm: 10px;
  --hr-shadow: 0 1px 2px rgba(13, 19, 48, .04), 0 8px 24px rgba(13, 19, 48, .06);
  --hr-shadow-lg: 0 24px 60px rgba(13, 19, 48, .18);
  --hr-glow: 0 0 0 4px rgba(99, 102, 241, .18);
  --hr-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ── Canvas ───────────────────────────────────────────────────────────── */
body.hr-app, .hr-app { background: var(--hr-bg-pattern), var(--hr-bg); background-attachment: fixed; }
.hr-app ::selection { background: rgba(99, 102, 241, .22); }
.hr-app :focus-visible { outline: 2px solid transparent; box-shadow: var(--hr-glow); border-radius: 8px; }
.hr-app * { scrollbar-width: thin; scrollbar-color: rgba(99, 102, 241, .35) transparent; }
.hr-app ::-webkit-scrollbar { width: 10px; height: 10px; }
.hr-app ::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, .28); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }

/* ── Top bar: frosted glass ───────────────────────────────────────────── */
.hr-topbar {
  background: var(--hr-glass);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(207, 214, 234, .6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 20px rgba(13, 19, 48, .04);
}
.hr-topbar__title { font-weight: 700; letter-spacing: -.01em; }
.hr-avatar { background: var(--hr-gradient); color: #fff; box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(79, 70, 229, .35); }
.hr-icon-btn { border-radius: 12px; transition: background .2s var(--hr-ease), transform .2s var(--hr-ease), color .2s; }
.hr-icon-btn:hover { background: var(--hr-gradient-soft); color: var(--hr-primary); border-color: transparent; transform: translateY(-1px); }

/* ── Sidebar: neon ────────────────────────────────────────────────────── */
.hr-sidebar { box-shadow: 1px 0 0 rgba(255, 255, 255, .04), 12px 0 40px rgba(7, 11, 29, .18); }
.hr-sidebar__brand .hr-brand-mark { background: var(--hr-gradient); box-shadow: 0 0 18px rgba(99, 102, 241, .6); }
.hr-sidebar__search input { border-radius: 12px; transition: box-shadow .2s, border-color .2s; }
.hr-sidebar__search input:focus { box-shadow: 0 0 0 3px rgba(34, 211, 238, .25); border-color: rgba(34, 211, 238, .6); }
.hr-nav-group > summary, .hr-nav-items a { border-radius: 10px; transition: background .18s var(--hr-ease), color .18s, transform .18s var(--hr-ease); }
.hr-nav-items a:hover { transform: translateX(3px); }
.hr-nav-items a.is-active {
  background: var(--hr-sidebar-active); color: #fff; position: relative;
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .35), 0 6px 18px rgba(79, 70, 229, .25);
}
.hr-nav-items a.is-active::before {
  content: ""; position: absolute; left: -2px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px;
  background: var(--hr-sidebar-active-bar); box-shadow: 0 0 10px var(--hr-sidebar-active-bar);
}
.hr-nav-items a.is-active i { color: #67e8f9; }
.hr-nav-section__title { letter-spacing: .14em; }

/* ── Page header ──────────────────────────────────────────────────────── */
.hr-page-title {
  font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--hr-text) 20%, #4338ca 70%, #0891b2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* entrance: cards and tiles only (never fixed panels / drawers), nothing left applied afterwards */
.hr-content > :is(.hr-page-header, .hr-card, .hr-stats, .hr-filters, .hr-grid-2, .hr-dashboard__charts) { animation: hrf-rise .45s var(--hr-ease) backwards; }
.hr-content > :nth-child(2) { animation-delay: .04s; } .hr-content > :nth-child(3) { animation-delay: .08s; }
@keyframes hrf-rise { from { opacity: 0; transform: translateY(8px); } }

/* ── Cards: glass with a light edge ───────────────────────────────────── */
.hr-card, .hr-filters, .hr-chart-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .84));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(207, 214, 234, .75);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, var(--hr-shadow);
  transition: box-shadow .25s var(--hr-ease), border-color .25s;
}
.hr-card:hover, .hr-chart-card:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 36px rgba(13, 19, 48, .09); border-color: rgba(165, 180, 252, .7); }
.hr-card__header { border-bottom-color: rgba(207, 214, 234, .6); }
.hr-card__title { font-weight: 700; letter-spacing: -.01em; }
.hr-card__title > i:first-child { color: var(--hr-primary); }
.hr-card__footer { background: var(--hr-gradient-soft); }

/* ── KPI tiles ────────────────────────────────────────────────────────── */
.hr-stat {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #fff, #f7f8ff);
  border: 1px solid rgba(207, 214, 234, .8); box-shadow: var(--hr-shadow);
  transition: transform .25s var(--hr-ease), box-shadow .25s var(--hr-ease);
}
.hr-stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--hr-gradient); opacity: .9; }
.hr-stat::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, .12), transparent 70%); }
.hr-stat:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(79, 70, 229, .14); }
.hr-stat__value {
  font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--hr-text), #4338ca); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hr-stat--bad::before { background: linear-gradient(90deg, #e11d48, #f97316); }
.hr-stat--warn::before { background: linear-gradient(90deg, #f59e0b, #f97316); }
.hr-stat--good::before { background: linear-gradient(90deg, #10b981, #22d3ee); }
.hr-stat--bad .hr-stat__value { background: linear-gradient(120deg, #9f1239, #e11d48); -webkit-background-clip: text; background-clip: text; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.hr-btn, .hr-app .btn {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--hr-radius-sm); font-weight: 600; letter-spacing: .005em;
  border-color: var(--hr-border-strong);
  background: linear-gradient(180deg, #fff, #f6f7fd);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(13, 19, 48, .06);
  transition: transform .18s var(--hr-ease), box-shadow .18s var(--hr-ease), background .18s, border-color .18s, color .18s;
}
.hr-btn:hover, .hr-app .btn:hover {
  background: linear-gradient(180deg, #fff, #eef0ff); border-color: #a5b4fc; color: var(--hr-primary);
  transform: translateY(-1px); box-shadow: 0 8px 20px rgba(79, 70, 229, .14);
}
.hr-btn:active, .hr-app .btn:active { transform: translateY(0) scale(.98); box-shadow: 0 2px 6px rgba(79, 70, 229, .14); }
/* light sweep on hover */
.hr-btn::after, .hr-app .btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s var(--hr-ease);
}
.hr-btn:hover::after, .hr-app .btn:hover::after { transform: translateX(120%); }

.hr-btn--primary, .hr-app .btn-primary {
  background: var(--hr-gradient); background-size: 160% 100%; border-color: transparent; color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 22px rgba(79, 70, 229, .35);
}
.hr-btn--primary:hover, .hr-app .btn-primary:hover {
  background: var(--hr-gradient); background-size: 160% 100%; background-position: 100% 0; border-color: transparent; color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 30px rgba(79, 70, 229, .45), 0 0 0 4px rgba(99, 102, 241, .14);
}
.hr-btn--success, .hr-app .btn-success { background: linear-gradient(135deg, #059669, #10b981 60%, #22d3ee); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(5, 150, 105, .3); }
.hr-btn--success:hover, .hr-app .btn-success:hover { background: linear-gradient(135deg, #047857, #059669 60%, #06b6d4); color: #fff; filter: none; border-color: transparent; box-shadow: 0 12px 28px rgba(5, 150, 105, .4); }
.hr-btn--danger, .hr-app .btn-danger { background: linear-gradient(135deg, #e11d48, #f43f5e 60%, #fb923c); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(225, 29, 72, .28); }
.hr-btn--danger:hover, .hr-app .btn-danger:hover { background: linear-gradient(135deg, #be123c, #e11d48 60%, #f97316); color: #fff; filter: none; border-color: transparent; box-shadow: 0 12px 28px rgba(225, 29, 72, .38); }
.hr-app .btn-warning { background: linear-gradient(135deg, #f59e0b, #f97316); border-color: transparent; color: #fff; }
.hr-app .btn-info { background: linear-gradient(135deg, #0284c7, #06b6d4); border-color: transparent; color: #fff; }
.hr-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.hr-btn--ghost:hover { background: var(--hr-gradient-soft); box-shadow: none; }
.hr-btn--primary::after, .hr-btn--success::after, .hr-btn--danger::after,
.hr-app .btn-primary::after, .hr-app .btn-success::after, .hr-app .btn-danger::after {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
}
.hr-btn:disabled, .hr-btn.is-disabled, .hr-app .btn:disabled { transform: none; box-shadow: none; filter: grayscale(.35); }

/* ── Forms ────────────────────────────────────────────────────────────── */
.hr-input, .hr-select, .hr-textarea, .hr-app .form-control, .hr-app .form-select,
.hr-field input:not([type=checkbox]):not([type=radio]):not([type=file]), .hr-field select, .hr-field textarea {
  background-color: rgba(255, 255, 255, .9); border-color: var(--hr-border-strong);
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.hr-input:hover, .hr-select:hover, .hr-textarea:hover, .hr-app .form-control:hover, .hr-app .form-select:hover { border-color: #a5b4fc; }
.hr-input:focus, .hr-select:focus, .hr-textarea:focus, .hr-app .form-control:focus, .hr-app .form-select:focus,
.hr-field input:focus, .hr-field select:focus, .hr-field textarea:focus {
  border-color: #6366f1; background-color: #fff;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .15), 0 6px 16px rgba(79, 70, 229, .08);
}
.hr-check input, .hr-app input[type=checkbox], .hr-app input[type=radio] { accent-color: #4f46e5; }

/* ── Tables ───────────────────────────────────────────────────────────── */
.hr-table th { background: linear-gradient(180deg, #f8f9ff, #f1f3fd); color: #4b5378; letter-spacing: .06em; }
.hr-table tbody tr { transition: background .15s; }
.hr-table tbody tr:hover td { background: linear-gradient(90deg, rgba(99, 102, 241, .06), rgba(6, 182, 212, .03)); }
.hr-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #6366f1; }

/* ── Badges ───────────────────────────────────────────────────────────── */
.hr-badge { font-weight: 600; letter-spacing: .01em; box-shadow: inset 0 0 0 1px rgba(13, 19, 48, .05); }

/* ── Alerts, save bar, empty states ───────────────────────────────────── */
.hr-alert { border-radius: 14px; backdrop-filter: blur(6px); }
.hr-savebar { background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(165, 180, 252, .5); box-shadow: 0 -10px 30px rgba(13, 19, 48, .08); }
.hr-empty i { background: var(--hr-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .8; }

/* ── Dialogs & menus ──────────────────────────────────────────────────── */
.hr-app dialog { border-radius: 20px; box-shadow: var(--hr-shadow-lg); }
.hr-app dialog::backdrop { background: rgba(7, 11, 29, .45); backdrop-filter: blur(4px); }

/* ── Accessibility: no motion when the user asked for less ────────────── */
@media (prefers-reduced-motion: reduce) {
  .hr-app *, .hr-app *::before, .hr-app *::after { animation: none !important; transition: none !important; }
  .hr-btn::after, .hr-app .btn::after { display: none; }
}
@media print {
  .hr-btn::after, .hr-app .btn::after, .hr-stat::after { display: none; }
  .hr-card, .hr-stat, .hr-chart-card { backdrop-filter: none; box-shadow: none; background: #fff; }
  .hr-page-title, .hr-stat__value { color: #000; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
}