/* =====================================================================
   Skyper HRMS — NEW design system  ·  base.css
   Ground-up rebuild. Loaded on templates that extend the new base.html.
   Owns: design tokens, reset, typography, and the application shell.
   (Bootstrap 3 CSS is still loaded underneath purely so the jQuery
    plugins — bootstrap-select/toggle/modals — keep functioning; this
    file + components.css fully override its visual identity.)
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Sora:wght@600;700;800&display=swap");

/* ---------- 1. Tokens ---------- */
:root{
	/* brand — Direction B: flat brand accent blue (#3B6EF5), navy identity.
	   --grad kept as a blue-only subtle 2-stop (NOT purple) for button depth. */
	--pri:#3b6ef5; --pri-600:#2e58d6; --pri-700:#2e58d6; --pri-500:#3b6ef5;
	--pri-soft:#e8eefe; --indigo:#3b6ef5;
	--grad:linear-gradient(135deg,#3b6ef5 0%,#2e58d6 100%);
	--grad-soft:linear-gradient(135deg,#eef3ff 0%,#e8eefe 100%);
	/* navy identity (login panel, high-emphasis) + secondary accent (chart contrast) */
	--navy-950:#0f1a3d; --navy-900:#1b2a5e; --navy-800:#263875; --navy-700:#33478c; --navy-600:#4a5fa3;
	--secondary:#f5a623; --secondary-soft:#fdf1dc;

	/* semantic */
	--ok:#16a34a; --ok-soft:#e7f6ec;
	--warn:#f59e0b; --warn-soft:#fef3e2; --warn-ink:#b45309;
	--bad:#ef4444; --bad-soft:#fdecec;
	--info:#06b6d4; --info-soft:#e6f9fd;
	--violet:#7c3aed; --violet-soft:#f0e9fe;

	/* surfaces — page canvas is neutral-100 (#F4F5F8); cards are pure white
	   so the canvas↔card value step is real and depth reads without heavy shadow */
	--bg:#f4f5f8; --surface:#ffffff; --surface-2:#f7f8fb; --surface-3:#eef1f6;
	--sidebar:linear-gradient(180deg,#0f172a 0%,#141d33 100%);
	--sidebar-solid:#0f172a;

	/* ink */
	--ink:#0f172a; --ink-2:#475569; --ink-3:#64748b; --muted:#94a3b8;
	--on-dark:#cbd5e1; --on-dark-2:#8896b0; --on-dark-mut:#64748b;

	/* lines + elevation — depth comes from the border + bg contrast first;
	   shadow is a whisper on resting surfaces, real only on things that float */
	--line:#e4e7ed; --line-2:#eef1f6; --ring:rgba(59,110,245,.18);
	--sh-xs:0 1px 1px rgba(16,24,40,.03);
	--sh-sm:0 1px 2px rgba(16,24,40,.04);
	--sh:0 1px 2px rgba(16,24,40,.04);
	--sh-md:0 10px 28px -10px rgba(16,24,40,.16);
	--sh-lg:0 22px 50px -16px rgba(16,24,40,.24);

	/* geometry — 8px system */
	--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
	--r-xs:8px; --r-sm:11px; --r:14px; --r-md:16px; --r-lg:20px; --r-xl:26px;
	--sidebar-w:266px; --sidebar-w-collapsed:0px; --topbar-h:66px;

	--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	--display:'Sora','Inter',system-ui,sans-serif;
	--ease:cubic-bezier(.4,0,.2,1);
}
html.dark{
	--pri-soft:#16233f;
	--bg:#080d18; --surface:#101a2e; --surface-2:#0d1626; --surface-3:#0b1322;
	--sidebar:linear-gradient(180deg,#080e1c 0%,#0b1322 100%); --sidebar-solid:#080e1c;
	--ink:#e8edf6; --ink-2:#aeb9ce; --ink-3:#8a97af; --muted:#66748e;
	--line:#1e293b; --line-2:#18233a; --ring:rgba(59,130,246,.30);
	--ok-soft:#123024; --warn-soft:#3a2c12; --bad-soft:#3a1a1a; --info-soft:#0f2a3a; --violet-soft:#241a44;
	--grad-soft:linear-gradient(135deg,#141d33 0%,#101a2e 100%);
	--sh-xs:0 1px 1px rgba(0,0,0,.3); --sh-sm:0 1px 3px rgba(0,0,0,.35);
	--sh:0 1px 3px rgba(0,0,0,.35); --sh-md:0 12px 30px -10px rgba(0,0,0,.55); --sh-lg:0 24px 54px -16px rgba(0,0,0,.66);
}

/* ---------- 2. Reset / base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0; background:var(--bg); color:var(--ink);
	font-family:var(--sans); font-size:14px; line-height:1.55;
	-webkit-font-smoothing:antialiased; letter-spacing:-.01em;
	transition:background .35s var(--ease), color .35s var(--ease);
	/* clip stray horizontal overflow (off-canvas drawers, wide tables) so the
	   page never scrolls sideways on mobile. clip (not hidden) keeps the sticky
	   topbar working. */
	overflow-x:clip;
}
h1,h2,h3,h4,h5{font-family:var(--display); margin:0; color:var(--ink); letter-spacing:-.02em; text-wrap:balance;}
a{color:var(--pri); text-decoration:none;}
img{max-width:100%;}
.tnum{font-variant-numeric:tabular-nums;}
.hx-scroll::-webkit-scrollbar,body ::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#c7d0de;border-radius:20px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:#aab6c9;background-clip:padding-box;}
html.dark ::-webkit-scrollbar-thumb{background:#28374f;background-clip:padding-box;}
:focus-visible{outline:2px solid var(--pri-500); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;}}

/* micro labels */
.hx-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}

/* ---------- 3. Shell ---------- */
.hx-shell{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; transition:grid-template-columns .28s var(--ease);}
.hx-shell.is-collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr;}

/* sidebar */
.hx-sidebar{
	position:sticky; top:0; height:100vh; background:var(--surface); color:var(--ink-2);
	display:flex; flex-direction:column; overflow:hidden; z-index:40;
	border-right:1px solid var(--line);
}
.hx-brand{display:flex; align-items:center; gap:12px; padding:0 22px; height:var(--topbar-h);
	border-bottom:1px solid var(--line); flex:none; text-decoration:none;}
.hx-brand .brand-full{height:30px;width:auto;display:block;}
.hx-brand .brand-full.dark-only{display:none;}
html.dark .hx-brand .brand-full.light-only{display:none;}
html.dark .hx-brand .brand-full.dark-only{display:block;}
.hx-brand .brand-mini{height:32px;width:auto;display:none;}

.hx-nav{flex:1; overflow-y:auto; padding:12px; scrollbar-width:thin;}
.hx-nav::-webkit-scrollbar{width:6px;}
.hx-nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
	font-weight:700;padding:16px 13px 6px;white-space:nowrap;}
.hx-nav a,.hx-nav .hx-parent{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
	color:var(--ink-2);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;
	transition:background .16s var(--ease),color .16s;}
.hx-nav a i,.hx-nav .hx-parent > i:first-child{font-size:17px;width:22px;text-align:center;color:var(--muted);transition:color .16s;flex:none;}
.hx-nav a:hover,.hx-nav .hx-parent:hover{background:var(--pri-soft);color:var(--pri-700);}
.hx-nav a:hover i,.hx-nav .hx-parent:hover > i{color:var(--pri);}
/* solid blue pill only for TOP-LEVEL links (direct children of .hx-nav).
   Without ">", this also hit .hx-sub a.is-active, whose blue text sat on the
   blue pill = invisible label ("no name"). Sub-links use .hx-sub a.is-active. */
.hx-nav > a.is-active{background:var(--pri);color:#fff;box-shadow:0 6px 14px -4px rgba(255, 255, 255, 0.5);}
.hx-nav > a.is-active i{color:#fff;}
.hx-nav .hx-parent .caret{margin-left:auto;font-size:13px;color:var(--muted);transition:transform .22s var(--ease);}
.hx-nav .hx-group.is-open .hx-parent .caret{transform:rotate(90deg);}
.hx-sub{list-style:none;margin:2px 0 4px;padding:0;max-height:0;overflow:hidden;transition:max-height .28s var(--ease);position:relative;}
.hx-sub::before{content:'';position:absolute;left:23px;top:2px;bottom:8px;width:1.5px;background:var(--line);}
.hx-group.is-open .hx-sub{max-height:460px;}
.hx-sub a{padding:8px 12px 8px 44px;font-size:13px;color:var(--ink-3);position:relative;}
.hx-sub a::before{content:'';position:absolute;left:20px;width:6px;height:6px;border-radius:50%;background:#c8d1e0;margin-top:7px;}
.hx-sub a:hover{color:var(--pri);background:var(--pri-soft);}
.hx-sub a.is-active{color:var(--pri);font-weight:600;}
.hx-sub a.is-active::before{background:var(--pri);box-shadow:0 0 0 3px var(--pri-soft);}

.hx-side-foot{flex:none;padding:12px;border-top:1px solid var(--line);}
.hx-side-user{display:flex;align-items:center;gap:11px;padding:9px;border-radius:12px;transition:background .15s;}
.hx-side-user:hover{background:var(--surface-3);}
.hx-side-user .av{flex:none;}
.hx-side-user b{color:var(--ink);font-size:13px;display:block;line-height:1.2;white-space:nowrap;}
.hx-side-user span{color:var(--muted);font-size:11.5px;white-space:nowrap;}

/* collapsed desktop: the sidebar is fully closed, not narrowed.
   Two states only -- open at full width, or gone with the page taking the
   whole viewport. There is no icon rail and no expand-on-hover, so the toggle
   in the topbar is the only thing that changes the state: open stays open and
   closed stays closed. visibility:hidden takes the closed panel out of the tab
   order and out of hit-testing, so a link nobody can see is also a link
   nothing can reach. */
.hx-shell.is-collapsed .hx-sidebar{
	visibility:hidden; border-right:none;
	transition:visibility 0s linear .28s;
}

/* main column */
.hx-main{display:flex; flex-direction:column; min-width:0;}

/* topbar */
.hx-topbar{position:sticky; top:0; z-index:30; height:var(--topbar-h); display:flex; align-items:center; gap:14px;
	padding:0 22px; background:var(--surface); border-bottom:1px solid var(--line);}
.hx-iconbtn{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
	color:var(--ink-2);background:transparent;border:none;cursor:pointer;font-size:20px;position:relative;
	transition:background .15s var(--ease),color .15s;}
.hx-iconbtn:hover{background:var(--surface-3);color:var(--pri);}
.hx-bars{display:none;}
.hx-search{flex:1;max-width:440px;display:flex;align-items:center;gap:10px;height:42px;padding:0 15px;
	background:var(--surface-3);border:1px solid var(--line);border-radius:12px;color:var(--muted);
	transition:border-color .16s,box-shadow .16s,background .3s;}
.hx-search:focus-within{border-color:var(--pri-500);box-shadow:0 0 0 4px var(--ring);background:var(--surface);}
.hx-search input{border:none;background:none;outline:none;color:var(--ink);font-size:14px;font-family:inherit;width:100%;}
.hx-search kbd{font-family:var(--sans);font-size:11px;color:var(--muted);background:var(--surface);border:1px solid var(--line);
	border-radius:6px;padding:1px 6px;}
.hx-spacer{flex:1;}
.hx-badge-dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid var(--surface);}

.hx-user{display:flex;align-items:center;gap:10px;padding:5px 10px 5px 6px;border-radius:12px;cursor:pointer;transition:background .15s;position:relative;}
.hx-user:hover{background:var(--surface-3);}
.hx-user .meta b{font-size:13.5px;display:block;line-height:1.15;}
.hx-user .meta span{font-size:11.5px;color:var(--muted);}
@media(max-width:640px){.hx-user .meta{display:none;}}

/* content area */
.hx-content{padding:var(--s6); width:100%; max-width:1340px; margin:0 auto; flex:1;}
.hx-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:var(--s5);}
.hx-crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-bottom:6px;}
.hx-crumb a{color:var(--ink-3);font-weight:500;}
.hx-crumb a:hover{color:var(--pri);}
.hx-page-head h1{font-size:25px;font-weight:800;}
.hx-page-actions{display:flex;gap:10px;flex-wrap:wrap;}

.hx-footer{padding:var(--s5) var(--s6);color:var(--muted);font-size:12.5px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:auto;}

/* avatars */
.av{width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;
	font-weight:700;font-size:13px;flex:none;font-family:var(--sans);}
.av.sm{width:30px;height:30px;font-size:11px;}
.av.lg{width:52px;height:52px;font-size:18px;}

/* overlay / fade for drawers (contract preserved for page scripts) —
   opacity/visibility (not display) so it can fade, and pointer-events:none
   while inactive so it never blocks the page. Sits under every drawer. */
.fadebg{position:fixed;inset:0;background:rgba(8,13,24,.5);backdrop-filter:blur(2px);z-index:1000;
	opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--ease),visibility .28s var(--ease);}
.fadebg.active{opacity:1;visibility:visible;pointer-events:auto;}
/* scroll lock while a drawer is open — stops background scroll + iOS/Android bleed.
   The -fixed variant (added by JS on mobile) pins the body so iOS can't bleed-scroll;
   JS preserves/restores the scroll offset via body.style.top + window.scrollTo. */
body.hx-scroll-lock{overflow:hidden;}
body.hx-scroll-lock-fixed{position:fixed;left:0;right:0;width:100%;}

/* dropdown menu (profile / notifications) */
.hx-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:var(--surface);border:1px solid var(--line);
	border-radius:16px;box-shadow:var(--sh-lg);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
	transition:opacity .16s var(--ease),transform .16s,visibility .16s;z-index:50;}
.hx-menu.show{opacity:1;visibility:visible;transform:none;}
.hx-menu .head{padding:12px 12px 10px;margin:-6px -6px 6px;background:var(--grad);color:#fff;border-radius:16px 16px 0 0;display:flex;align-items:center;gap:10px;}
.hx-menu .head b{font-size:14px;} .hx-menu .head span{font-size:12px;opacity:.85;display:block;}
.hx-menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--ink-2);font-weight:500;font-size:13.5px;}
.hx-menu a i{font-size:16px;color:var(--muted);width:20px;text-align:center;}
.hx-menu a:hover{background:var(--pri-soft);color:var(--pri);}
.hx-menu a:hover i{color:var(--pri);}
.hx-menu hr{border:none;border-top:1px solid var(--line-2);margin:6px 4px;}

/* right-side drawers (notification / support / poDetails) — contract kept */
.notification,.support,.poDetails{position:fixed;top:0;right:0;height:100vh;background:var(--surface);color:var(--ink-2);
	box-shadow:var(--sh-lg);border-left:1px solid var(--line);border-radius:22px 0 0 22px;z-index:1002;padding:22px;
	transform:translateX(100%);transition:transform .38s var(--ease);width:400px;max-width:92vw;}
.notification.active,.support.active,.poDetails.active{transform:translateX(0);}
.poDetails{width:min(150vh,1100px);max-width:96vw;}
.notification h3,.support h3,.poDetails h3{color:var(--ink);font-weight:700;font-size:18px;margin:2px 0 20px;font-family:var(--display);}
.notification > span,.support > span,.poDetails > span{position:absolute;right:20px;top:20px;width:34px;height:34px;line-height:34px;
	text-align:center;border-radius:9px;background:var(--surface-3);color:var(--muted);cursor:pointer;transition:background .15s,color .15s;}
.notification > span:hover,.support > span:hover,.poDetails > span:hover{background:var(--bad-soft);color:var(--bad);}

/* spinner overlay (#overlay contract kept) */
#overlay{position:fixed;inset:0;z-index:100000;display:none;background:rgba(8,13,24,.5);backdrop-filter:blur(3px);}
#overlay .cv-spinner{height:100%;display:flex;align-items:center;justify-content:center;}
#overlay .spinner{width:44px;height:44px;border:4px solid rgba(255,255,255,.25);border-top-color:var(--pri-500);border-radius:50%;animation:hx-spin .8s linear infinite;}
@keyframes hx-spin{to{transform:rotate(360deg);}}

/* loading + empty states */
.loadDataBefore{display:flex;align-items:center;justify-content:center;min-height:140px;width:100%!important;}
.loadDataBefore img{width:46px!important;height:46px!important;}
.hx-empty{text-align:center;padding:48px 20px;color:var(--muted);}
.hx-empty .ic{width:66px;height:66px;border-radius:18px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
	font-size:30px;background:var(--pri-soft);color:var(--pri);}
.hx-empty h4{color:var(--ink);margin:0 0 6px;font-size:16px;} .hx-empty p{margin:0;font-size:13.5px;}
.hx-skeleton{background:linear-gradient(100deg,var(--line-2) 30%,var(--surface-2) 50%,var(--line-2) 70%);
	background-size:200% 100%;animation:hx-shimmer 1.2s var(--ease) infinite;border-radius:8px;}
@keyframes hx-shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}

/* entrance */
.hx-rise{animation:hx-rise .45s var(--ease) both;}
@keyframes hx-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---------- 4. Responsive shell ---------- */
@media(max-width:992px){
	.hx-shell,.hx-shell.is-collapsed{grid-template-columns:1fr;}
	/* off-canvas drawer: slides via transform (GPU), sits ABOVE the backdrop,
	   and captures no pointer/touch events while closed so the page stays live. */
	.hx-sidebar{position:fixed;top:0;left:0;width:300px;max-width:85vw;height:100vh;height:100dvh;z-index:1001;
		transform:translateX(-100%);transition:transform .28s var(--ease);border-radius:0 20px 20px 0;
		pointer-events:none;overscroll-behavior:contain;will-change:transform;}
	.hx-sidebar.is-open{transform:translateX(0);box-shadow:var(--sh-lg);pointer-events:auto;}
	/* Fully neutralize the desktop "collapsed" state inside the drawer. is-collapsed
	   is persisted in localStorage and applied on every viewport, so without this a
	   user who closed the sidebar on desktop would find the mobile drawer button
	   opening nothing at all. The drawer is driven by .is-open, not by is-collapsed. */
	.hx-shell.is-collapsed .hx-sidebar{width:300px;max-width:85vw;position:fixed;box-shadow:none;
		visibility:visible;border-right:1px solid var(--line);transition:transform .3s var(--ease);}
	.hx-shell.is-collapsed .hx-sidebar.is-open{box-shadow:var(--sh-lg);}
	.hx-shell.is-collapsed .hx-group.is-open .hx-sub{max-height:460px!important;}
	.hx-bars{display:inline-flex;}
	.hx-collapse-btn{display:none;}
	.hx-content{padding:var(--s4);}
	.hx-search kbd{display:none;}
	/* tighter drawer so it doesn't feel oversized on a phone; smooth touch scroll */
	.hx-nav{padding:8px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
	.hx-nav a,.hx-nav .hx-parent{padding:9px 12px;font-size:13.5px;}
	.hx-nav-label{padding:12px 12px 5px;}
	.hx-sub a{padding:7px 12px 7px 42px;}
	.hx-brand{height:58px;padding-right:52px;}
	.hx-brand .brand-full{height:26px;}
	/* visible close button inside the drawer */
	.hx-sidenav-close{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:12px;right:12px;
		width:34px;height:34px;border:none;border-radius:10px;background:var(--surface-3);color:var(--ink-2);
		font-size:16px;cursor:pointer;z-index:3;transition:background .15s,color .15s;}
	.hx-sidenav-close:hover{background:var(--bad-soft);color:var(--bad);}
	.fadebg{background:rgba(8,13,24,.62);backdrop-filter:blur(3px);}
}
.hx-sidenav-close{display:none;}
/* phones / small tablets: declutter the topbar so it never overflows */
@media(max-width:768px){
	.hx-topbar{padding:0 12px;gap:8px;}
	.hx-search{display:none;}              /* search hidden on small screens */
	#hxSupport{display:none;}              /* trim topbar icons */
	.hx-content{padding:16px 13px;}
	.hx-page-head h1{font-size:21px;}
	/* legacy (compat) content wrapper + its tables */
	.mainarea,.mainarea_home{padding:14px!important;}
	/* any wide table scrolls inside its own box instead of the page */
	.hx-table-scroll,.att-matrix,.table-container,[id="LoadData"]{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
@media(max-width:560px){
	.hx-page-head h1{font-size:20px;}
	.hx-iconbtn{width:36px;height:36px;font-size:18px;}
	.hx-brand{padding:0 14px;}
	.hx-topbar{gap:4px;}
	/* stack page-head actions full-width so buttons are tappable */
	.hx-page-head{gap:12px;}
	.hx-page-actions{width:100%;}
	.hx-page-actions .hx-btn{flex:1;justify-content:center;}
	/* right drawers go (near) full-width on phones */
	.notification,.support,.poDetails{width:100vw;max-width:100vw;border-radius:0;}
}