/* ================================================================
   PIXROCK PANEL — Tailwind class overrides
   Targets exact classNames from the React bundle
   ================================================================ */

/* ── OUTER SHELL ── */
.flex.bg-\[#0F172A\].h-screen.text-white.overflow-hidden{
  display:flex!important;height:100vh!important;overflow:hidden!important;background:var(--bg)!important;
}

/* ── SIDEBAR ZONE ── */
.w-64.flex-shrink-0.h-full.overflow-y-auto{
  width:var(--sidebar)!important;min-width:var(--sidebar)!important;
  flex-shrink:0!important;height:100vh!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  background:var(--surface)!important;border-right:1px solid var(--bd0)!important;
  scrollbar-width:thin;scrollbar-color:var(--bd1) transparent;
}
.w-64.flex-shrink-0.h-full.overflow-y-auto::-webkit-scrollbar{width:3px}
.w-64.flex-shrink-0.h-full.overflow-y-auto::-webkit-scrollbar-thumb{background:var(--bd1);border-radius:3px}

/* Sidebar inner wrapper */
.sidebar.p-4.text-white.w-56.min-h-screen.flex.flex-col.justify-between{
  width:100%!important;min-height:unset!important;height:100%!important;
  padding:0!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;
}

/* Brand title */
.sidebar .text-xl.font-bold.mb-4{
  font-size:12px!important;font-weight:700!important;letter-spacing:1.5px!important;
  text-transform:uppercase!important;color:var(--t0)!important;
  padding:16px 14px 14px!important;margin:0!important;
  border-bottom:1px solid var(--bd0)!important;
  display:flex!important;align-items:center!important;gap:8px!important;
}
.sidebar .text-xl.font-bold.mb-4::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 6px var(--accent);flex-shrink:0;
}

/* Welcome */
.sidebar .mb-6.text-gray-300.text-sm{
  font-size:11px!important;color:var(--t1)!important;
  padding:10px 14px 6px!important;margin:0!important;
}

/* Nav */
.sidebar nav.flex.flex-col.gap-2{gap:2px!important;padding:4px 8px!important}

/* Logout */
.mt-6.w-full.bg-red-600.py-2.rounded{
  display:block!important;width:calc(100% - 16px)!important;margin:8px 8px 12px!important;
  background:transparent!important;border:1px solid var(--bd1)!important;
  border-radius:var(--r)!important;color:var(--t1)!important;
  font-family:'Inter',sans-serif!important;font-size:12px!important;font-weight:500!important;
  padding:8px!important;cursor:pointer!important;transition:all .12s!important;
  letter-spacing:0!important;text-transform:none!important;
}
.mt-6.w-full.bg-red-600.py-2.rounded:hover{
  background:rgba(239,68,68,.12)!important;border-color:rgba(239,68,68,.28)!important;color:var(--red)!important;
}

/* ── MAIN ZONE — scrolls independently ── */
.flex-1.overflow-y-auto.p-6{
  flex:1 1 0%!important;height:100vh!important;overflow-y:auto!important;overflow-x:hidden!important;
  padding:0!important;background:var(--bg)!important;display:flex!important;flex-direction:column!important;
  scrollbar-width:thin;scrollbar-color:var(--bd1) transparent;
}
.flex-1.overflow-y-auto.p-6::-webkit-scrollbar{width:5px}
.flex-1.overflow-y-auto.p-6::-webkit-scrollbar-track{background:transparent}
.flex-1.overflow-y-auto.p-6::-webkit-scrollbar-thumb{background:var(--bd1);border-radius:5px}
.flex-1.overflow-y-auto.p-6::-webkit-scrollbar-thumb:hover{background:var(--bd2)}

/* ── PAGE HEADER ── */
.flex.justify-between.items-center.mb-4{
  padding:14px 22px!important;margin:0!important;
  background:var(--surface)!important;border-bottom:1px solid var(--bd0)!important;
  flex-shrink:0!important;
}
.text-2xl.font-bold,.text-2xl.font-bold.mb-4,
.text-xl.font-bold.mb-4,.text-xl.font-bold.text-white.mb-4,
.text-xl.font-semibold,.text-xl.font-semibold.mb-3,.text-3xl.font-bold.mb-6{
  font-size:13px!important;font-weight:600!important;letter-spacing:.4px!important;
  text-transform:uppercase!important;color:var(--t0)!important;margin:0!important;
}

/* ── SEARCH BAR ── */
.mb-4.flex.items-center.gap-3{
  display:flex!important;align-items:center!important;gap:8px!important;
  padding:9px 22px!important;margin:0!important;
  background:var(--surface)!important;border-bottom:1px solid var(--bd0)!important;flex-shrink:0!important;
}
.p-2.w-96.bg-gray-800.rounded{
  background:var(--bg)!important;border:1px solid var(--bd1)!important;
  border-radius:var(--r)!important;color:var(--t0)!important;
  font-family:'Inter',sans-serif!important;font-size:12.5px!important;
  padding:6px 11px!important;width:260px!important;transition:border-color .12s!important;
}
.p-2.w-96.bg-gray-800.rounded:focus{border-color:var(--blue)!important;outline:none!important;box-shadow:0 0 0 3px rgba(59,130,246,.15)!important}
.p-2.w-96.bg-gray-800.rounded::placeholder{color:var(--t2)!important}
.px-3.py-2.bg-gray-700.rounded{
  background:transparent!important;border:1px solid var(--bd1)!important;
  border-radius:var(--r)!important;color:var(--t1)!important;
  font-family:'Inter',sans-serif!important;font-size:12px!important;
  padding:6px 11px!important;cursor:pointer!important;transition:all .12s!important;letter-spacing:0!important;text-transform:none!important;
}
.px-3.py-2.bg-gray-700.rounded:hover{background:var(--hover)!important;color:var(--t0)!important;border-color:var(--bd2)!important}

/* ── TABLE WRAPPER — page scrolls vertically, wrapper only horizontal ── */
.w-full.overflow-x-auto.bg-gray-900.border.border-gray-700.rounded,
.w-full.overflow-x-auto.rounded.bg-gray-900.border.border-gray-700{
  background:transparent!important;border:none!important;border-radius:0!important;
  box-shadow:none!important;overflow-x:auto!important;overflow-y:visible!important;
  padding:0 16px!important;
  scrollbar-width:thin;scrollbar-color:var(--bd1) var(--surface);
}
.w-full.overflow-x-auto.bg-gray-900.border.border-gray-700.rounded::-webkit-scrollbar,
.w-full.overflow-x-auto.rounded.bg-gray-900.border.border-gray-700::-webkit-scrollbar{height:5px}
.w-full.overflow-x-auto.bg-gray-900.border.border-gray-700.rounded::-webkit-scrollbar-track,
.w-full.overflow-x-auto.rounded.bg-gray-900.border.border-gray-700::-webkit-scrollbar-track{background:var(--surface);border-radius:5px}
.w-full.overflow-x-auto.bg-gray-900.border.border-gray-700.rounded::-webkit-scrollbar-thumb,
.w-full.overflow-x-auto.rounded.bg-gray-900.border.border-gray-700::-webkit-scrollbar-thumb{background:var(--bd1);border-radius:5px}
.w-full.overflow-x-auto.bg-gray-900.border.border-gray-700.rounded::-webkit-scrollbar-thumb:hover,
.w-full.overflow-x-auto.rounded.bg-gray-900.border.border-gray-700::-webkit-scrollbar-thumb:hover{background:var(--bd2)}

/* TABLE */
.w-full.table-auto.border-collapse,
.min-w-\[1100px\].w-full.table-auto.border-collapse,
.min-w-\[1000px\],.min-w-\[1100px\],.min-w-\[1200px\],.min-w-\[1600px\]{
  background:var(--surface)!important;border:1px solid var(--bd0)!important;
  border-collapse:separate!important;border-radius:var(--rl)!important;border-spacing:0!important;
  overflow:hidden!important;width:100%!important;margin:12px 0!important;
}

/* Header row */
.bg-gray-800.text-gray-300 th,
.bg-gray-800.text-gray-300.text-sm th{
  background:var(--raised)!important;border:none!important;
  border-bottom:1px solid var(--bd1)!important;color:var(--t1)!important;
  font-size:10.5px!important;font-weight:600!important;letter-spacing:.8px!important;
  padding:10px 12px!important;text-align:left!important;text-transform:uppercase!important;
  white-space:nowrap!important;cursor:pointer!important;user-select:none!important;transition:color .12s,background .12s!important;
}
.bg-gray-800.text-gray-300 th:hover,
.bg-gray-800.text-gray-300.text-sm th:hover{color:var(--t0)!important;background:var(--hover)!important}

/* ID column — header */
.bg-gray-800.text-gray-300 th:first-child,
.bg-gray-800.text-gray-300.text-sm th:first-child{
  width:52px!important;min-width:52px!important;max-width:52px!important;text-align:center!important;
}
/* Actions column — header */
.bg-gray-800.text-gray-300 th:last-child,
.bg-gray-800.text-gray-300.text-sm th:last-child{
  width:110px!important;min-width:110px!important;text-align:center!important;
}

/* Filter row */
.bg-gray-700 th,tr.bg-gray-700>th{
  background:var(--surface)!important;border:none!important;
  border-bottom:1px solid var(--bd0)!important;padding:6px 8px!important;
}
.bg-gray-700 th:first-child{width:52px!important;min-width:52px!important;max-width:52px!important;padding:6px!important}

/* Filter inputs */
.w-full.p-1.bg-gray-800.rounded.text-sm,
.bg-gray-700 input,thead input{
  background:var(--bg)!important;border:1px solid var(--bd0)!important;
  border-radius:var(--r)!important;color:var(--t0)!important;
  font-size:11px!important;padding:5px 8px!important;width:100%!important;box-sizing:border-box!important;
  transition:border-color .12s!important;
}
.w-full.p-1.bg-gray-800.rounded.text-sm:focus,thead input:focus{
  border-color:var(--blue)!important;outline:none!important;box-shadow:0 0 0 2px rgba(59,130,246,.15)!important;
}
thead input::placeholder{color:var(--t2)!important;font-size:11px!important}

/* Body rows */
.hover\:bg-gray-800,.hover\:bg-gray-800.text-sm{
  border:none!important;transition:background .1s!important;
}
.hover\:bg-gray-800:hover,.hover\:bg-gray-800.text-sm:hover{background:var(--hover)!important}
.hover\:bg-gray-800+.hover\:bg-gray-800,.hover\:bg-gray-800.text-sm+.hover\:bg-gray-800.text-sm{
  border-top:1px solid var(--bd0)!important;
}
.hover\:bg-gray-800:nth-child(even),.hover\:bg-gray-800.text-sm:nth-child(even){
  background:rgba(255,255,255,.016)!important;
}
.hover\:bg-gray-800:nth-child(even):hover,.hover\:bg-gray-800.text-sm:nth-child(even):hover{
  background:var(--hover)!important;
}

/* Body cells */
.p-3.border,.p-3.border.border-gray-700,.p-3.border.border-gray-700.cursor-pointer,
.p-3.border.border-gray-700.cursor-pointer.w-20,.p-3.border.border-gray-700.w-28,
.p-3.border.border-gray-700.w-32,.p-3.border.border-gray-700.w-40,
.p-3.border.border-gray-700.w-48,.p-3.border.border-gray-700.w-60,
.p-3.border.cursor-pointer,.p-3.border.cursor-pointer.w-20,
.p-3.border.text-center,.p-3.border.w-48,.p-6.text-center{
  border:none!important;border-top:1px solid var(--bd0)!important;
  color:var(--t0)!important;font-size:12.5px!important;padding:9px 12px!important;
  vertical-align:middle!important;white-space:nowrap!important;
  max-width:220px!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
/* First body row - no top border */
.hover\:bg-gray-800:first-child .p-3,.hover\:bg-gray-800.text-sm:first-child .p-3{border-top:none!important}
/* ID cell */
.hover\:bg-gray-800 td:first-child,.hover\:bg-gray-800.text-sm td:first-child,
.p-3.border:first-child,.p-3.border.border-gray-700:first-child{
  width:52px!important;min-width:52px!important;max-width:52px!important;
  text-align:center!important;padding:9px 6px!important;
  color:var(--t1)!important;font-size:11.5px!important;
}
/* Actions cell */
.hover\:bg-gray-800 td:last-child,.hover\:bg-gray-800.text-sm td:last-child{
  width:110px!important;min-width:110px!important;text-align:center!important;
}
/* Empty/loading */
td[colspan]{border:none!important;text-align:center!important;color:var(--t1)!important;padding:48px!important;font-size:13px!important;max-width:none!important}

/* Employee photo */
.w-12.h-12.rounded.object-cover{
  border:1px solid var(--bd1)!important;border-radius:50%!important;
  height:30px!important;width:30px!important;object-fit:cover!important;
}

/* ── BUTTONS ── */
.px-4.py-2.bg-blue-600.rounded{
  background:var(--accent)!important;border:none!important;border-radius:var(--r)!important;
  color:#fff!important;font-family:'Inter',sans-serif!important;font-size:12.5px!important;
  font-weight:500!important;padding:7px 14px!important;
  letter-spacing:.3px!important;text-transform:none!important;cursor:pointer!important;transition:background .12s!important;
}
.px-4.py-2.bg-blue-600.rounded:hover{background:var(--accent2)!important}
.px-4.py-2.bg-blue-600.rounded:disabled{opacity:.4!important;cursor:not-allowed!important}

.px-2.py-1.bg-green-600.rounded.text-sm{
  background:rgba(34,197,94,.12)!important;border:1px solid rgba(34,197,94,.28)!important;
  border-radius:var(--r)!important;color:var(--green)!important;
  font-family:'Inter',sans-serif!important;font-size:11px!important;font-weight:500!important;
  padding:3px 9px!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer!important;transition:all .12s!important;
}
.px-2.py-1.bg-green-600.rounded.text-sm:hover{background:rgba(34,197,94,.22)!important}

.px-2.py-1.bg-red-600.rounded.text-sm{
  background:rgba(239,68,68,.12)!important;border:1px solid rgba(239,68,68,.28)!important;
  border-radius:var(--r)!important;color:var(--red)!important;
  font-family:'Inter',sans-serif!important;font-size:11px!important;font-weight:500!important;
  padding:3px 9px!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer!important;transition:all .12s!important;
}
.px-2.py-1.bg-red-600.rounded.text-sm:hover{background:rgba(239,68,68,.22)!important;color:#fff!important}

.px-4.py-2.bg-gray-700.rounded,.px-3.py-1.bg-gray-700.rounded{
  background:var(--raised)!important;border:1px solid var(--bd1)!important;
  border-radius:var(--r)!important;color:var(--t1)!important;
  font-family:'Inter',sans-serif!important;font-size:12.5px!important;
  font-weight:400!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer!important;transition:all .12s!important;
}
.px-4.py-2.bg-gray-700.rounded:hover,.px-3.py-1.bg-gray-700.rounded:hover{
  background:var(--hover)!important;border-color:var(--bd2)!important;color:var(--t0)!important;
}
.px-3.py-2.bg-red-600.rounded{
  background:rgba(239,68,68,.12)!important;border:1px solid rgba(239,68,68,.28)!important;
  border-radius:var(--r)!important;color:var(--red)!important;
  font-family:'Inter',sans-serif!important;font-size:12.5px!important;
  font-weight:500!important;padding:7px 14px!important;cursor:pointer!important;transition:all .12s!important;
}
.px-3.py-2.bg-red-600.rounded:hover{background:rgba(239,68,68,.22)!important;color:#fff!important}
button:disabled{opacity:.35!important;cursor:not-allowed!important}

/* ── PAGINATION ── */
.flex.items-center.justify-between.mt-4{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  background:var(--surface)!important;border-top:1px solid var(--bd0)!important;
  padding:10px 22px!important;margin:0!important;flex-shrink:0!important;
  position:sticky!important;bottom:0!important;
}
.flex.items-center.justify-between.mt-4>.div:first-child,
.flex.items-center.justify-between.mt-4>div:first-child{
  color:var(--t1)!important;font-size:12px!important;
}
.flex.items-center.justify-between.mt-4 .flex.items-center.gap-2{
  display:flex!important;align-items:center!important;gap:4px!important;
}
.flex.items-center.justify-between.mt-4 span{
  background:var(--raised)!important;border:1px solid var(--bd1)!important;
  border-radius:var(--r)!important;color:var(--t0)!important;
  font-size:12px!important;font-weight:600!important;
  padding:5px 14px!important;min-width:86px!important;text-align:center!important;display:inline-block!important;
}
.flex.items-center.justify-between.mt-4 button{
  background:var(--raised)!important;border:1px solid var(--bd1)!important;
  border-radius:var(--r)!important;color:var(--t1)!important;
  font-family:'Inter',sans-serif!important;font-size:11.5px!important;
  min-width:50px!important;padding:5px 12px!important;
  text-transform:none!important;letter-spacing:0!important;cursor:pointer!important;transition:all .12s!important;
}
.flex.items-center.justify-between.mt-4 button:not(:disabled):hover{
  background:var(--hover)!important;border-color:var(--bd2)!important;color:var(--t0)!important;
}
.flex.items-center.justify-between.mt-4 button:disabled{
  background:var(--bg)!important;border-color:var(--bd0)!important;
  color:var(--t2)!important;cursor:not-allowed!important;
}

/* ── DASHBOARD CARDS ── */
.grid.grid-cols-1.md\:grid-cols-3.gap-6{padding:20px!important;margin:0!important;gap:12px!important}
.p-6.bg-blue-600.rounded-lg.shadow-lg,.p-6.bg-green-600.rounded-lg.shadow-lg,
.p-6.bg-yellow-500.text-black.rounded-lg.shadow-lg,.p-6.bg-purple-600.rounded-lg.shadow-lg,
.p-6.bg-teal-600.rounded-lg.shadow-lg,.p-6.bg-red-600.rounded-lg.shadow-lg{
  background:var(--raised)!important;border-radius:var(--rl)!important;
  box-shadow:none!important;padding:18px 20px!important;color:var(--t0)!important;
  transition:background .15s,transform .15s!important;
}
.p-6.bg-blue-600.rounded-lg.shadow-lg{border:1px solid rgba(59,130,246,.2)!important}
.p-6.bg-green-600.rounded-lg.shadow-lg{border:1px solid rgba(34,197,94,.2)!important}
.p-6.bg-yellow-500.text-black.rounded-lg.shadow-lg{border:1px solid rgba(234,179,8,.2)!important}
.p-6.bg-purple-600.rounded-lg.shadow-lg{border:1px solid rgba(168,85,247,.2)!important}
.p-6.bg-teal-600.rounded-lg.shadow-lg{border:1px solid rgba(20,184,166,.2)!important}
.p-6.bg-red-600.rounded-lg.shadow-lg{border:1px solid rgba(239,68,68,.2)!important}
.p-6.bg-blue-600.rounded-lg.shadow-lg:hover,.p-6.bg-green-600.rounded-lg.shadow-lg:hover,
.p-6.bg-yellow-500.text-black.rounded-lg.shadow-lg:hover,.p-6.bg-purple-600.rounded-lg.shadow-lg:hover,
.p-6.bg-teal-600.rounded-lg.shadow-lg:hover,.p-6.bg-red-600.rounded-lg.shadow-lg:hover{
  background:var(--hover)!important;transform:translateY(-1px)!important;
}
.p-6.bg-blue-600.rounded-lg.shadow-lg h2,.p-6.bg-green-600.rounded-lg.shadow-lg h2,
.p-6.bg-yellow-500.text-black.rounded-lg.shadow-lg h2,.p-6.bg-purple-600.rounded-lg.shadow-lg h2,
.p-6.bg-teal-600.rounded-lg.shadow-lg h2,.p-6.bg-red-600.rounded-lg.shadow-lg h2{
  font-size:11px!important;font-weight:600!important;letter-spacing:.8px!important;
  text-transform:uppercase!important;color:var(--t1)!important;margin-bottom:6px!important;
}
.text-4xl.font-bold.mt-2{font-size:28px!important;font-weight:700!important;color:var(--t0)!important;margin:4px 0 0!important}

/* ── MODALS ── */
.fixed.inset-0.bg-black\/50.flex.items-center.justify-center.z-50,
.fixed.inset-0.bg-black\/50.flex.items-start.justify-center.z-50.overflow-auto,
.fixed.inset-0.bg-black\/60.flex.items-center.justify-center.z-50,
.fixed.inset-0.z-50.flex.items-center.justify-center.bg-black\/60{
  backdrop-filter:blur(4px)!important;background:rgba(0,0,0,.65)!important;
}
.bg-\[#0F172A\].p-6.rounded.w-\[700px\],
.bg-\[#0F172A\].text-white.p-6.rounded.mt-8.w-\[900px\].max-w-\[95\%\],
.bg-\[#0F172A\].text-white.p-6.rounded.w-\[420px\],
.bg-\[#0F172A\].text-white.p-6.rounded.w-\[600px\],
.bg-\[#0F172A\].text-white.p-6.rounded.w-\[600px\].max-w-full,
.bg-\[#0F172A\].text-white.p-6.rounded.w-\[720px\].max-w-full,
.bg-\[#0F172A\].text-white.p-6.rounded.w-\[760px\].max-w-full{
  background:var(--raised)!important;border:1px solid var(--bd1)!important;
  border-radius:var(--rl)!important;box-shadow:0 24px 80px rgba(0,0,0,.8)!important;
  overflow-y:auto!important;max-height:92vh!important;scrollbar-width:thin;
}
.bg-\[#0F172A\] h2,.bg-\[#0F172A\] h3{
  font-size:14px!important;font-weight:600!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--t0)!important;margin-bottom:16px!important;
}
.block.mb-1{
  color:var(--t1)!important;font-size:11.5px!important;font-weight:500!important;
  display:block!important;margin-bottom:4px!important;letter-spacing:0!important;text-transform:none!important;
}
.p-2.bg-gray-800.rounded,.p-2.bg-gray-800.rounded.col-span-2,.p-2.border,.p-2.border.border-gray-700{
  background:var(--bg)!important;border:1px solid var(--bd1)!important;
  border-radius:var(--r)!important;color:var(--t0)!important;
  font-size:13px!important;padding:8px 11px!important;width:100%!important;
  box-sizing:border-box!important;transition:border-color .12s!important;max-width:none!important;
}
.p-2.bg-gray-800.rounded:focus,.p-2.bg-gray-800.rounded.col-span-2:focus,
.p-2.border:focus,.p-2.border.border-gray-700:focus{
  border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(59,130,246,.15)!important;outline:none!important;
}
.flex.justify-end.gap-3,.flex.justify-end.gap-3.mt-4,.flex.justify-end.mt-4.gap-3,.mt-4.flex.justify-end.gap-3{
  display:flex!important;justify-content:flex-end!important;gap:8px!important;margin-top:18px!important;
}
.grid.grid-cols-2.gap-3,.grid.grid-cols-2.gap-4,.grid.grid-cols-1.gap-3{gap:12px!important}

/* ── MISC ── */
.text-blue-400{color:var(--blue)!important}
.text-green-400{color:var(--green)!important}
.text-gray-400{color:var(--t1)!important}
.border-gray-700{border-color:var(--bd0)!important}
*{scrollbar-width:thin;scrollbar-color:var(--bd1) transparent}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--bd1);border-radius:5px}
*::-webkit-scrollbar-thumb:hover{background:var(--bd2)}
*:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px!important}