/* ==========================================================================
   NEXORA TECHNOLOGIES — Admin panel theme
   ========================================================================== */

:root {
  --ax-primary:   #0F172A;   /* slate 900          */
  --ax-secondary: #EA580C;   /* orange 600 — action */
  --ax-indigo:    #F97316;   /* orange 500          */
  --ax-accent:    #06B6D4;
  --ax-success:   #16A34A;
  --ax-warning:   #F59E0B;
  --ax-danger:    #DC2626;

  --ax-bg:        #F1F5F9;
  --ax-surface:   #FFFFFF;
  --ax-surface-2: #F8FAFC;
  --ax-border:    #E2E8F0;
  --ax-text:      #0F172A;
  --ax-muted:     #64748B;

  --ax-sidebar-w: 264px;
  --ax-radius:    .85rem;
  --ax-shadow:    0 1px 3px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.05);
  --ax-font-head: 'Poppins', system-ui, sans-serif;
  --ax-font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body.ax-body {
  font-family: var(--ax-font-body);
  background: var(--ax-bg);
  color: var(--ax-text);
  font-size: .94rem;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 { font-family: var(--ax-font-head); font-weight: 600; letter-spacing: -.015em; color: var(--ax-text); }

a { color: var(--ax-secondary); text-decoration: none; }
a:hover { color: #C2410C; }

:focus-visible { outline: 3px solid rgba(234,88,12,.45); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------- Sidebar -- */
.ax-sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--ax-sidebar-w);
  background: var(--ax-primary);
  color: #CBD5E1;
  display: flex; flex-direction: column;
  z-index: 1045;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

.ax-sidebar-head {
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; gap: .6rem;
  flex-shrink: 0;
  text-decoration: none;                 /* it is a link to the dashboard now */
  transition: background-color .2s;
}
.ax-sidebar-head:hover { background: rgba(255,255,255,.05); }

/* Site logo in place of the old letter tile. Height-constrained with width
   auto so any logo shape — square mark or wide wordmark — sits correctly. */
.ax-logo {
  height: 34px; width: auto; max-width: 46px;
  object-fit: contain; flex-shrink: 0;
}
.ax-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #EA580C, #F97316 60%, #FB923C);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-family: var(--ax-font-head);
  flex-shrink: 0;
}
.ax-brand-name { color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.2; font-family: var(--ax-font-head); }
.ax-brand-sub  { font-size: .64rem; color: #94A3B8; letter-spacing: .09em; text-transform: uppercase; }

.ax-nav { flex: 1; overflow-y: auto; padding: .5rem .6rem 1rem; }
.ax-nav::-webkit-scrollbar { width: 6px; }
.ax-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; }

/* ---- Collapsible groups ---------------------------------------------------
   Thirty-odd destinations will not fit on a laptop screen however tightly they
   are packed, and a menu you have to scroll to read is a menu you stop reading.
   Groups collapse instead; the one you are working in opens itself.          */
.ax-nav-group { margin-bottom: .12rem; }

.ax-nav-label {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  font-size: .67rem; letter-spacing: .1em; text-transform: uppercase;
  color: #94A3B8; font-weight: 600;
  padding: .45rem .6rem; border: 0; background: none; border-radius: .5rem;
  cursor: pointer; text-align: left;
  transition: background-color .2s, color .2s;
}
.ax-nav-label:hover { background: rgba(255,255,255,.06); color: #E2E8F0; }

/* The chevron sits at the left edge; the tally is what floats right. Giving
   the chevron margin-left:auto pushes the whole label across instead. */
.ax-nav-label .chev {
  font-size: .7rem; color: #64748B; flex-shrink: 0;
  transition: transform .22s ease;
}
.ax-nav-label .nm { flex: 1; min-width: 0; }

.ax-nav-group.open > .ax-nav-label { color: #E2E8F0; }
.ax-nav-group.open > .ax-nav-label .chev { transform: rotate(90deg); color: #FB923C; }

/* A count of what is inside, so a collapsed group still says something. */
.ax-nav-label .tally {
  margin-left: auto; flex-shrink: 0;
  font-size: .63rem; color: #64748B; letter-spacing: 0; line-height: 1.5;
  background: rgba(255,255,255,.07); border-radius: 20px; padding: 0 .42rem;
}
.ax-nav-group.open > .ax-nav-label .tally { opacity: 0; }

/* Pending-work badge, rolled up from an item so a collapsed group still shows
   it. Pushed to the right; the tally sits after it. */
.ax-nav-label .alert-dot {
  margin-left: auto; flex-shrink: 0; min-width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; color: #fff; letter-spacing: 0;
  background: #DC2626; border-radius: 20px; padding: 0 .3rem;
}
.ax-nav-label .alert-dot + .tally { margin-left: .35rem; }
/* Once the group is open the item shows its own badge, so hide the rolled-up one. */
.ax-nav-group.open > .ax-nav-label .alert-dot { display: none; }

/* Collapse mechanism — deliberately simple and cache-proof.
 *
 * DEFAULT: every group is fully visible. So if the stylesheet and the script
 * ever fall out of sync (a cached file, a half-finished upload), the menu is
 * still completely usable — it just scrolls, the way it did before. A navigation
 * menu must never hide items unless we are certain the toggle works.
 *
 * The accordion only engages once the script adds `.js-nav` to the <nav>. Then
 * closed groups collapse via max-height, which — unlike the grid-rows trick —
 * needs no min-height incantation and cannot silently fail. 640px is safely
 * taller than the largest group; the exact value never shows because the
 * content is shorter. */
.ax-nav-items { overflow: hidden; }

.ax-nav.js-nav .ax-nav-group .ax-nav-items {
  max-height: 0;
  transition: max-height .26s ease;
}
.ax-nav.js-nav .ax-nav-group.open .ax-nav-items {
  max-height: 640px;
}
/* No animation on the very first paint, so nothing slides about on load. */
.ax-nav.booting .ax-nav-items { transition: none !important; }

.ax-nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .42rem .7rem .42rem 1.1rem; border-radius: .55rem;
  color: #CBD5E1; font-size: .86rem;
  margin-bottom: .08rem;
  transition: background-color .2s, color .2s;
}
.ax-nav-link i { font-size: .98rem; width: 18px; text-align: center; flex-shrink: 0; }
.ax-nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.ax-nav-link.active { background: linear-gradient(135deg, #EA580C, #F97316 60%, #FB923C); color: #fff; box-shadow: 0 5px 14px rgba(234,88,12,.32); }
.ax-nav-link .badge { margin-left: auto; font-size: .66rem; }

/* A collapsed group holding the active page keeps a marker, so you can still
   see where you are without opening anything. */
.ax-nav-group.has-active:not(.open) > .ax-nav-label { color: #FB923C; }
.ax-nav-group.has-active:not(.open) > .ax-nav-label .tally {
  background: rgba(234,88,12,.22); color: #FDBA74;
}

/* Pinned to the bottom, outside the scroll area, so the two things you always
   want are never below the fold. */
.ax-sidebar-foot {
  flex-shrink: 0; padding: .5rem .6rem .7rem;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; gap: .4rem;
}
.ax-sidebar-foot a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .45rem .5rem; border-radius: .55rem; font-size: .78rem;
  color: #CBD5E1; background: rgba(255,255,255,.06);
  transition: background-color .2s, color .2s;
}
.ax-sidebar-foot a:hover { background: rgba(255,255,255,.13); color: #fff; }
.ax-sidebar-foot a.out:hover { background: rgba(239,68,68,.22); color: #FCA5A5; }

/* --------------------------------------------------------------- Shell -- */
.ax-main { margin-left: var(--ax-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.ax-topbar {
  position: sticky; top: 0; z-index: 1030;
  background: color-mix(in srgb, var(--ax-surface) 82%, transparent);
  backdrop-filter: blur(16px) saturate(170%);
  border-bottom: 1px solid var(--ax-border);
  padding: .75rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap;
}
.ax-topbar h1 { font-size: 1.12rem; margin: 0; }

.ax-content { padding: 1.5rem; flex: 1; }

.ax-icon-btn {
  width: 38px; height: 38px; border-radius: .6rem;
  border: 1px solid var(--ax-border); background: var(--ax-surface);
  color: var(--ax-text); display: grid; place-items: center;
  transition: background-color .2s, color .2s;
}
.ax-icon-btn:hover { background: var(--ax-secondary); color: #fff; border-color: transparent; }

.ax-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  z-index: 1040; opacity: 0; visibility: hidden; transition: all .3s;
}
.ax-overlay.show { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------- Cards -- */
.ax-card {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow);
  margin-bottom: 1.5rem;
}
.ax-card-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ax-border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.ax-card-head h2, .ax-card-head h3 { font-size: 1rem; margin: 0; }
.ax-card-body { padding: 1.25rem; }

.ax-stat-card {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--ax-shadow);
  display: flex; align-items: center; gap: 1rem;
  height: 100%;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.ax-stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15,23,42,.1); }
.ax-stat-icon {
  width: 46px; height: 46px; border-radius: .7rem;
  display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0;
  background: rgba(234,88,12,.11); color: var(--ax-secondary);
}
.ax-stat-value { font-family: var(--ax-font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.ax-stat-label { font-size: .8rem; color: var(--ax-muted); }

/* -------------------------------------------------------------- Tables -- */
.ax-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.ax-table thead th {
  background: var(--ax-surface-2);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ax-muted); font-weight: 600;
  padding: .8rem 1rem; border-bottom: 1px solid var(--ax-border);
  white-space: nowrap;
}
.ax-table tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--ax-border);
  vertical-align: middle;
  color: var(--ax-text);
}
.ax-table tbody tr:last-child td { border-bottom: none; }
.ax-table tbody tr:hover { background: var(--ax-surface-2); }
.ax-table .ax-thumb { width: 46px; height: 46px; border-radius: .5rem; object-fit: cover; }

.table-responsive { border-radius: var(--ax-radius); }

/* A horizontally scrolling table gives no hint that there is more to the right,
   so people simply miss the columns they cannot see. This fades the right edge
   whenever the table overflows, which reads as "keep going". */
.table-responsive { position: relative; scrollbar-width: thin; }
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--ax-border); border-radius: 8px; }

/* Touch targets in table action columns — 32px was fiddly on a phone. */
@media (max-width: 767.98px) {
  .ax-table thead th,
  .ax-table tbody td { padding: .65rem .7rem; }
  .ax-table .ax-icon-btn { width: 38px; height: 38px; }
  .ax-table td:last-child { white-space: nowrap; }
}

/* Long values — emails, SKUs, invoice numbers — should wrap rather than force
   the whole table wider than the screen. */
.ax-table td { overflow-wrap: anywhere; }
.ax-table td code, .ax-table td .text-nowrap { overflow-wrap: normal; }

/* --------------------------------------------------------------- Forms -- */
.form-label { font-weight: 500; font-size: .86rem; margin-bottom: .35rem; color: var(--ax-text); }
.form-control, .form-select {
  border: 1.5px solid var(--ax-border);
  border-radius: .6rem;
  padding: .6rem .85rem;
  font-size: .92rem;
  background: var(--ax-surface);
  color: var(--ax-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ax-secondary);
  box-shadow: 0 0 0 4px rgba(234,88,12,.12);
  background: var(--ax-surface);
  color: var(--ax-text);
}
.form-text { font-size: .8rem; color: var(--ax-muted); }
.form-check-input:checked { background-color: var(--ax-secondary); border-color: var(--ax-secondary); }

.ax-editor { min-height: 320px; font-family: ui-monospace, Consolas, monospace; font-size: .86rem; line-height: 1.7; }

.ax-upload-preview {
  border: 1px dashed var(--ax-border); border-radius: .6rem;
  padding: .75rem; display: flex; align-items: center; gap: .85rem;
  background: var(--ax-surface-2); margin-top: .5rem;
}
.ax-upload-preview img { width: 68px; height: 68px; object-fit: cover; border-radius: .5rem; }

/* ------------------------------------------------------------- Buttons -- */
.btn { border-radius: .6rem; font-weight: 500; font-size: .9rem; padding: .55rem 1.05rem; font-family: var(--ax-font-head); }
.btn-ax-primary { background: linear-gradient(135deg, #EA580C, #F97316 60%, #FB923C); border: none; color: #fff; }
.btn-ax-primary:hover { color: #fff; filter: brightness(1.06); }
.btn-ax-outline { background: transparent; border: 1.5px solid var(--ax-border); color: var(--ax-text); }
.btn-ax-outline:hover { border-color: var(--ax-secondary); color: var(--ax-secondary); background: rgba(234,88,12,.05); }
.btn-sm { padding: .35rem .7rem; font-size: .82rem; }

/* -------------------------------------------------------------- Badges -- */
.ax-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 600; padding: .24rem .62rem; border-radius: 999px;
  text-transform: capitalize;
}
.ax-badge-new         { background: rgba(234,88,12,.12);  color: #C2410C; }
.ax-badge-read        { background: rgba(100,116,139,.14);color: #475569; }
.ax-badge-replied     { background: rgba(20,184,166,.13); color: #0F766E; }
.ax-badge-closed      { background: rgba(100,116,139,.14);color: #475569; }
.ax-badge-spam        { background: rgba(239,68,68,.12);  color: #B91C1C; }
.ax-badge-shortlisted { background: rgba(245,158,11,.14); color: #B45309; }
.ax-badge-interviewing{ background: rgba(6,182,212,.14);  color: #0E7490; }
.ax-badge-hired       { background: rgba(20,184,166,.14); color: #0F766E; }
.ax-badge-rejected    { background: rgba(239,68,68,.12);  color: #B91C1C; }
.ax-badge-active      { background: rgba(20,184,166,.13); color: #0F766E; }
.ax-badge-inactive    { background: rgba(100,116,139,.14);color: #475569; }

/* -------------------------------------------------------------- Alerts -- */
.alert { border: none; border-left: 4px solid; border-radius: .6rem; font-size: .9rem; }
.alert-success { background: rgba(20,184,166,.1);  border-left-color: var(--ax-success); color: #0F766E; }
.alert-danger  { background: rgba(239,68,68,.1);   border-left-color: var(--ax-danger);  color: #B91C1C; }
.alert-warning { background: rgba(245,158,11,.11); border-left-color: var(--ax-warning); color: #B45309; }
.alert-info    { background: rgba(234,88,12,.09);  border-left-color: var(--ax-secondary); color: #C2410C; }

/* ---------------------------------------------------------- Pagination -- */
.pagination .page-link {
  border: 1.5px solid var(--ax-border); color: var(--ax-text);
  border-radius: .5rem !important; margin: 0 .15rem; font-size: .88rem;
  background: var(--ax-surface);
}
.pagination .page-item.active .page-link { background: var(--ax-secondary); border-color: var(--ax-secondary); color: #fff; }

/* ----------------------------------------------------------- Bar chart -- */
.ax-chart { display: flex; align-items: flex-end; gap: .4rem; height: 170px; padding-top: 1rem; }
.ax-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 0; }
.ax-chart-bar {
  width: 100%; border-radius: .35rem .35rem 0 0;
  background: linear-gradient(180deg, #EA580C, #F97316 55%, #FB923C);
  min-height: 4px; transition: height .6s cubic-bezier(.16,1,.3,1);
  position: relative;
}
.ax-chart-bar[data-value]:hover::after {
  content: attr(data-value);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--ax-primary); color: #fff; font-size: .7rem;
  padding: .15rem .45rem; border-radius: .3rem; margin-bottom: .3rem; white-space: nowrap;
}
.ax-chart-label { font-size: .66rem; color: var(--ax-muted); white-space: nowrap; transform: rotate(-45deg); transform-origin: center; }

/* ---------------------------------------------------------- Login page -- */
.ax-login {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(800px 420px at 15% 10%, rgba(234,88,12,.34), transparent 60%),
    radial-gradient(700px 380px at 85% 25%, rgba(6,182,212,.26), transparent 60%),
    linear-gradient(145deg, #0F172A 0%, #172033 45%, #26201C 100%);
}
.ax-login-card {
  width: 100%; max-width: 430px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 1.4rem;
  padding: 2.25rem;
  box-shadow: 0 28px 64px rgba(2,6,23,.42);
}

/* ------------------------------------------------------------ Utilities */
.ax-muted { color: var(--ax-muted); }
.ax-tabs .nav-link { border-radius: .55rem; font-size: .88rem; color: var(--ax-muted); font-family: var(--ax-font-head); }
.ax-tabs .nav-link.active { background: var(--ax-secondary); color: #fff; }
.ax-empty { text-align: center; padding: 3rem 1rem; color: var(--ax-muted); }
.ax-empty i { font-size: 2.6rem; color: var(--ax-border); display: block; margin-bottom: .75rem; }

/* ---------------------------------------------------------- Responsive -- */
@media (max-width: 991.98px) {
  .ax-sidebar { transform: translateX(-100%); }
  .ax-sidebar.show { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.45); }
  .ax-main { margin-left: 0; }
  .ax-content { padding: 1rem; }
  .ax-topbar { padding: .7rem 1rem; }
}

@media print {
  .ax-sidebar, .ax-topbar, .btn, .ax-icon-btn { display: none !important; }
  .ax-main { margin-left: 0; }
  body.ax-body { background: #fff; }
}