/* =========================================================
   HR OPTIMIZER — GLOBAL UI POLISH
   Clean icon system inspired by the supplied reference.
   Visual layer only; no business logic changes.
   ========================================================= */

:root{
  --ui-accent:#9b7cff;
  --ui-accent-2:#6786ff;
  --ui-line:rgba(126,132,184,.22);
  --ui-line-strong:rgba(153,130,255,.46);
  --ui-panel:rgba(18,20,34,.84);
  --ui-icon-bg:rgba(108,92,206,.10);
  --ui-icon-size:34px;
}

/* ---------- Shared icon primitive ---------- */
.hr-ui-icon{
  width:var(--ui-icon-size);
  height:var(--ui-icon-size);
  display:inline-grid;
  place-items:center;
  flex:0 0 var(--ui-icon-size);
  border:1px solid rgba(143,124,255,.38);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(105,86,205,.12),rgba(71,83,155,.06));
  color:#b3a4ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028),0 8px 22px rgba(0,0,0,.12);
}
.hr-ui-icon svg{width:17px;height:17px;display:block}

/* ---------- Main landing page ---------- */
.topbar nav a{transition:color .18s ease,transform .18s ease}
.topbar nav a:hover{transform:translateY(-1px);color:#fff}

.hero-buttons .button,
.cta .button,
.plan-btn,
.pay-options button,
button.button,
.admin-actions .button,
.side-bottom a{
  position:relative;
  overflow:hidden;
}

.hero-buttons .button::after,
.cta .button::after,
.plan-btn::after,
.pay-options button::after,
button.button::after,
.admin-actions .button::after,
.side-bottom a::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.07) 50%,transparent 58%);
  transform:translateX(-120%);
  transition:transform .45s ease;
  pointer-events:none;
}
.hero-buttons .button:hover::after,
.cta .button:hover::after,
.plan-btn:hover::after,
.pay-options button:hover::after,
button.button:hover::after,
.admin-actions .button:hover::after,
.side-bottom a:hover::after{transform:translateX(120%)}

/* Drop zone / file card icons */
.drop-icon,
.filemark{
  border:1px solid rgba(143,124,255,.36)!important;
  background:linear-gradient(145deg,rgba(101,86,206,.14),rgba(67,78,146,.08))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.12);
  position:relative;
}
.drop-icon::before,
.filemark::before{
  content:"";
  width:17px;
  height:17px;
  border:1.8px solid currentColor;
  border-radius:5px;
  position:absolute;
  opacity:.9;
}
.drop-icon::after{
  content:"↑";
  position:absolute;
  font:600 16px 'Space Grotesk',sans-serif;
  transform:translateY(-1px);
}
.filemark::after{
  content:"▤";
  position:absolute;
  font-size:12px;
}
.drop-icon > *, .filemark > *{position:relative;z-index:2}

.notice span{
  width:24px!important;
  height:24px!important;
  border-radius:8px!important;
  display:grid!important;
  place-items:center!important;
  background:var(--ui-icon-bg)!important;
  border:1px solid rgba(143,124,255,.32)!important;
  color:#b5a7ff!important;
  font-size:11px!important;
  flex:0 0 24px!important;
  font-family:'Space Grotesk',sans-serif!important;
}

/* Pricing cards: compact, icon-led rows */
.plan-grid article{
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.plan-grid article:hover{
  transform:translateY(-3px);
  border-color:var(--ui-line-strong);
  box-shadow:0 22px 48px rgba(0,0,0,.16);
}
.plan-grid li{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:7px 0!important;
}
.plan-grid li::before{
  content:""!important;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border:1px solid rgba(143,124,255,.28);
  border-radius:8px;
  background-color:rgba(105,86,205,.08);
  background-repeat:no-repeat;
  background-position:center;
  background-size:15px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.024);
}
.plan-grid li:nth-child(1)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4a8ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h8l4 4v14H7z'/%3E%3Cpath d='M15 3v5h5'/%3E%3C/svg%3E");
}
.plan-grid li:nth-child(2)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4a8ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 9h10M7 13h6'/%3E%3C/svg%3E");
}
.plan-grid li:nth-child(3)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4a8ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.plan-grid li:nth-child(4)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4a8ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
}
.plan-grid li{color:#d5d7e3!important}
.plan-grid li::after{display:none}

/* ---------- Pricing feature icons: use the real SVG once ---------- */
.plan-grid li::before{display:none!important}
.plan-grid .feature-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(143,124,255,.30);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(105,86,205,.12),rgba(71,83,155,.06));
  color:#b4a8ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.plan-grid .feature-icon svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.plan-grid .feature-label{
  flex:1 1 auto;
  min-width:0;
  color:#aeb2c3!important;
  font-size:10px;
}
.plan-grid li>b{
  flex:0 0 auto;
  color:#f2f4fb!important;
  font-size:11px;
  font-weight:700;
}

/* ---------- Dashboard sidebar ---------- */
.side-nav a{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding-inline:12px!important;
}
.side-nav a span{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
.side-nav a span::before{
  content:"";
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:10px;
  border:1px solid rgba(143,124,255,.30);
  background-color:rgba(108,92,206,.07);
  background-repeat:no-repeat;
  background-position:center;
  background-size:17px 17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.side-nav a:nth-child(1) span::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}
.side-nav a:nth-child(2) span::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v12H4z'/%3E%3Cpath d='M8 19h8'/%3E%3C/svg%3E");
}
.side-nav a:nth-child(3) span::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v13H3z'/%3E%3Cpath d='M7 3h10v4H7z'/%3E%3Cpath d='M7 12h6'/%3E%3C/svg%3E");
}
.side-nav a:nth-child(4) span::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.8-4 5-6 8-6s6.2 2 8 6'/%3E%3C/svg%3E");
}
.side-nav a:hover span::before,
.side-nav a.active span::before{
  border-color:rgba(163,139,255,.6);
  background-color:rgba(112,94,225,.14);
  box-shadow:0 0 18px rgba(137,111,255,.12),inset 0 1px 0 rgba(255,255,255,.025);
}
.side-nav a > :not(span){display:none}

/* Dashboard stat icons */
.stats article{position:relative;overflow:hidden}
.stats article::before{
  content:"";
  position:absolute;
  inset-inline-end:16px;
  top:16px;
  width:34px;
  height:34px;
  border:1px solid rgba(143,124,255,.25);
  border-radius:10px;
  background-color:rgba(108,92,206,.07);
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
}
.stats article:nth-child(1)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12v16H6z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
}
.stats article:nth-child(2)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v5l3 2'/%3E%3C/svg%3E");
}
.stats article:nth-child(3)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
}
.stats article:nth-child(4)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M7 10h10'/%3E%3C/svg%3E");
}

/* Dashboard account/subscription mini-cards */
.account-item{position:relative;padding-inline-start:16px!important}
.account-item span{display:flex!important;align-items:center;gap:8px}
.account-item span::before{
  content:"";
  width:26px;
  height:26px;
  flex:0 0 26px;
  border-radius:8px;
  border:1px solid rgba(143,124,255,.24);
  background:rgba(108,92,206,.07) center/14px 14px no-repeat;
}
.account-item:nth-child(1) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7'%3E%3Cpath d='M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z'/%3E%3Cpath d='M4 20c1.8-3.5 4.5-5 8-5s6.2 1.5 8 5'/%3E%3C/svg%3E")}
.account-item:nth-child(2) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E")}
.account-item:nth-child(3) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E")}
.account-item:nth-child(4) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='m8.5 12 2.2 2.2 4.8-5'/%3E%3C/svg%3E")}

/* ---------- Subscription page ---------- */
.subscription-item{position:relative}
.subscription-item span{display:flex!important;align-items:center;gap:8px}
.subscription-item span::before{
  content:"";
  width:28px;height:28px;flex:0 0 28px;
  border-radius:8px;
  border:1px solid rgba(143,124,255,.24);
  background:rgba(108,92,206,.07) center/15px 15px no-repeat;
}
.subscription-item:nth-child(1) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M7 10h10'/%3E%3C/svg%3E")}
.subscription-item:nth-child(2) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.subscription-item:nth-child(3) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7'%3E%3Cpath d='M4 7h16v11H4z'/%3E%3Cpath d='M7 4h10v3H7z'/%3E%3C/svg%3E")}
.subscription-item:nth-child(4) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7'%3E%3Cpath d='M12 3 19 7v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V7z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}

/* ---------- Admin page ---------- */
.top-stat article{padding-inline-start:18px!important}
.top-stat article span{display:flex!important;align-items:center;gap:8px}
.top-stat article span::before{
  content:"";
  width:30px;height:30px;flex:0 0 30px;
  border-radius:9px;
  border:1px solid rgba(143,124,255,.24);
  background:rgba(108,92,206,.07) center/15px 15px no-repeat;
}
.top-stat article:nth-child(1) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa9cff' stroke-width='1.7'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E")}
.top-stat article:nth-child(2) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd28f' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v5l3 2'/%3E%3C/svg%3E")}
.top-stat article:nth-child(3) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377e3be' stroke-width='1.7'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E")}
.top-stat article:nth-child(4) span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9da7' stroke-width='1.7'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E")}

.action-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:7px}
.action-btn.approve::before{content:"✓";font:700 12px 'Space Grotesk',sans-serif}
.action-btn.reject::before{content:"×";font:700 13px 'Space Grotesk',sans-serif}

/* ---------- Shared button icon accents ---------- */
.admin-actions .button:first-child::before,
.side-bottom a::before{content:"↩";font-size:13px;margin-inline-end:7px}
.admin-actions #refreshBtn::before{content:"↻";font-size:14px;margin-inline-end:7px}

/* Keep mobile compact */
@media(max-width:700px){
  :root{--ui-icon-size:32px}
  .plan-grid li{min-height:40px}
  .stats article::before{top:12px;inset-inline-end:12px}
  .side-nav a span::before{width:30px;height:30px;flex-basis:30px}
}