/* ============================================================
   V&K HR SPACE — shared theme (Crextio-inspired green)
   Included by every module so the whole portal looks like one app.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");

:root{
  --frame-a:#0F6E56; --frame-b:#011425;        /* outer teal → midnight frame */
  --canvas:#eaeef0;                             /* app background (light cool grey) */
  --card:#ffffff; --card-soft:#e2e9ec;          /* card fills */
  --ink:#011425; --muted:#5C7C89;               /* text: midnight / slate */
  --line:#d6dfe3;                               /* hairline borders */
  --accent:#0F6E56; --accent-d:#011425;         /* deep teal */
  --dark:#242424; --dark-soft:#34403f;          /* charcoal cards / active pill */
  --good:#3f9c54; --warn:#c98a2b; --bad:#cf5b4e;
  --radius:22px; --radius-sm:14px; --radius-xs:10px;
  --shadow:0 10px 30px rgba(10,30,45,.12); --shadow-sm:0 3px 12px rgba(10,30,45,.08);
  --font-head:"Plus Jakarta Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--ink);min-height:100vh;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:linear-gradient(135deg,var(--frame-a),var(--frame-b));}

/* The framed mint app panel (green border effect from the reference) */
.hr-app{background:var(--canvas);border-radius:28px;margin:14px;min-height:calc(100vh - 28px);
  padding:0 0 40px;box-shadow:0 18px 50px rgba(1,20,37,.28);overflow:hidden;
  animation:hr-enter .34s cubic-bezier(.22,.61,.36,1)}
@keyframes hr-enter{from{opacity:0;transform:translateY(10px) scale(.992)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hr-app{animation:none}}
/* When a module is embedded in the single-page shell iframe, the shell owns the
   chrome — drop the module's own frame, nav and body gradient. */
.hr-embedded body{background:var(--canvas)}
/* overflow:visible lets the sub-heading strip use position:sticky (the rounded
   corners that needed overflow:hidden are gone in embedded mode anyway). */
.hr-embedded .hr-app{margin:0;border-radius:0;min-height:auto;box-shadow:none;background:transparent;animation:none;overflow:visible}
.hr-embedded #hrnav{display:none}
.hr-wrap{max-width:1320px;margin:0 auto;padding:8px 26px 0}

/* ── TOP BAR ── */
.hr-topbar{display:flex;align-items:center;gap:12px;padding:16px 22px 6px;max-width:1320px;margin:0 auto;flex-wrap:nowrap}
.hr-brand{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:800;flex:none}
.hr-brand .logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:.9rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-d));box-shadow:0 4px 12px rgba(1,20,37,.4)}
.hr-brand .logo-img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 4px 12px rgba(1,20,37,.35);flex:none}
.hr-brand b{font-size:1rem;letter-spacing:-.2px}
.hr-brand small{display:block;font-size:.54rem;letter-spacing:1.5px;color:var(--muted);font-weight:700;text-transform:uppercase}
.hr-tabs{display:flex;align-items:center;gap:1px;background:var(--card);border:1px solid var(--line);border-radius:30px;
  padding:4px;box-shadow:var(--shadow-sm);flex-wrap:nowrap;justify-content:center;min-width:0;overflow-x:auto;scrollbar-width:none}
.hr-tabs::-webkit-scrollbar{display:none}
.hr-tab{font-family:var(--font-head);font-weight:600;font-size:.8rem;color:var(--muted);text-decoration:none;
  padding:7px 11px;border-radius:22px;white-space:nowrap;transition:.15s;cursor:pointer;border:none;background:none;flex:none}
.hr-tab:hover{color:var(--ink);background:var(--card-soft)}
.hr-tab.active{background:var(--dark);color:#fff}
.hr-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.hr-icon{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;
  display:grid;place-items:center;font-size:1rem;transition:.15s;position:relative;color:var(--ink)}
.hr-icon:hover{background:var(--card-soft)}
.hr-ava{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head);
  font-weight:800;font-size:.85rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-d));cursor:pointer}
.hr-menu{position:absolute;top:54px;right:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);padding:8px;min-width:190px;z-index:200;display:none}
.hr-menu.open{display:block}
.hr-menu .who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.hr-menu .who b{display:block;font-family:var(--font-head);font-size:.92rem}
.hr-menu .who span{font-size:.72rem;color:var(--muted)}
.hr-menu button{width:100%;text-align:left;background:none;border:none;font-family:var(--font-body);font-size:.86rem;
  color:var(--ink);padding:9px 10px;border-radius:8px;cursor:pointer}
.hr-menu button:hover{background:var(--card-soft)}

/* ── CARDS ── */
.hr-card{background:var(--card);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm);
  border:1px solid rgba(255,255,255,.6);position:relative}
.hr-card.soft{background:var(--card-soft)}
.hr-card.dark{background:var(--dark);color:#fff;border:none}
.hr-card .ttl{font-family:var(--font-head);font-weight:700;font-size:1.02rem;display:flex;align-items:center;
  justify-content:space-between;gap:8px}
.hr-card.dark .ttl{color:#fff}
.hr-link{cursor:pointer;transition:transform .16s,box-shadow .16s}
.hr-link:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.hr-open{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--card-soft);
  color:var(--accent-d);font-size:1rem;border:none;cursor:pointer;flex:none}
.hr-card.dark .hr-open{background:rgba(255,255,255,.14);color:#fff}

/* bits */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;font-size:.7rem;
  padding:4px 11px;border-radius:20px;letter-spacing:.2px}
.pill.green{background:var(--card-soft);color:var(--accent-d)} .pill.dark{background:var(--dark);color:#fff}
.pill.amber{background:#fbeccb;color:var(--warn)} .pill.red{background:#fbdcd7;color:var(--bad)}
.num{font-family:var(--font-head);font-weight:700;letter-spacing:-1px;line-height:1}
.muted{color:var(--muted)}
.bar{height:9px;border-radius:9px;background:var(--card-soft);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--accent),var(--accent-d))}

/* Safety net: form controls don't inherit text colour by default, so an unstyled
   <button>/<select>/<input> falls back to black — invisible on a dark card. Give
   them the theme ink; any control that sets its own colour still overrides this. */
button,select,input,textarea{color:var(--ink)}
/* Native <select> dropdowns: explicitly paint the option popup so it's readable in
   dark mode across all browsers/webviews (some don't honour color-scheme on popups). */
select{color-scheme:light dark}
:root[data-theme="dark"] select{color-scheme:dark}
option{background:var(--card);color:var(--ink)}
.btn{font-family:var(--font-head);font-weight:700;font-size:.9rem;border:none;cursor:pointer;border-radius:11px;
  padding:11px 16px;transition:.15s}
.btn.dark{background:var(--dark);color:#fff} .btn.dark:hover{background:var(--dark-soft)}
.btn.green{background:linear-gradient(120deg,var(--accent),var(--accent-d));color:#fff} .btn.green:hover{filter:brightness(1.05)}
.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--ink)} .btn.ghost:hover{background:var(--card-soft)}
.btn.red{background:#c0392b;color:#fff} .btn.red:hover{background:#a93226}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:.92rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.12s}
.icon-btn:hover{background:var(--card-soft);border-color:var(--accent)}
.icon-btn.del:hover{background:#fdecea;border-color:var(--bad);color:var(--bad)}
.hr-card input,.hr-card select,.hr-card textarea{font-family:var(--font-body);font-size:.86rem;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);width:100%}
.hr-card input:focus,.hr-card select:focus,.hr-card textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--sky-light)}

@media(max-width:720px){
  .hr-app{margin:6px;border-radius:18px}
  .hr-topbar{padding:14px 16px 4px} .hr-wrap{padding:8px 14px 0}
}

/* ============================================================
   DARK THEME — global polish. The palette itself is painted inline on <html>
   by setAccent(); these rules add the gradient, scrollbars, input styling,
   links, placeholders and transitions from the design spec.
   ============================================================ */
:root[data-theme="dark"]{ color-scheme:dark; }

/* 12 · subtle radial-gradient page background (beats module body fills) */
:root[data-theme="dark"] body{
  background:radial-gradient(ellipse at top left,#1A1F35 0%,#0F1117 60%) fixed;
  color:var(--ink);
}

/* 11 · thin, themed scrollbars */
:root[data-theme="dark"] *{ scrollbar-width:thin; scrollbar-color:var(--accent) var(--border); }
:root[data-theme="dark"] ::-webkit-scrollbar{ width:9px; height:9px; }
:root[data-theme="dark"] ::-webkit-scrollbar-track{ background:var(--border); border-radius:8px; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:8px; border:2px solid var(--border); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:var(--accent-hover); }

/* 4 · inputs: input-bg fill, input-border, accent focus ring */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{ background:var(--input-bg); border-color:var(--input-border); color:var(--ink); }
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-muted); outline:none; }
:root[data-theme="dark"] input[readonly],
:root[data-theme="dark"] input:disabled,
:root[data-theme="dark"] select:disabled{ background:var(--card-soft); color:var(--ink2); }
/* placeholders → text-muted (subdued but present) */
:root[data-theme="dark"] ::placeholder{ color:#5C6380; opacity:1; }

/* 6 · links */
:root[data-theme="dark"] a{ color:var(--accent-d); text-decoration:none; }
:root[data-theme="dark"] a:hover{ color:var(--accent-hover); text-decoration:underline; }

/* 10 · smooth transitions on interactive elements */
:root[data-theme="dark"] button,
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .hr-tab,
:root[data-theme="dark"] .tab,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] a{ transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease; }

/* active tab reads as an accent-tinted chip */
:root[data-theme="dark"] .hr-tab.active{ background:var(--accent-muted); color:var(--accent-d); }
:root[data-theme="dark"] .icon-btn.del:hover{ background:var(--accent-muted); border-color:var(--bad); color:var(--bad); }