/* ============================================================
   HRIS — DESIGN SYSTEM v2
   Mobile-first, teal identity, Plus Jakarta Sans + Inter
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── CSS Custom Properties ── */
:root {
  --brand:        #14B8A6; /* Teal 500 */
  --brand-dark:   #0D9488; /* Teal 600 */
  --brand-light:  #F0FDFA; /* Teal 50 */
  --brand-mid:    #99F6E4; /* Teal 200 */

  --accent:       #EF9F27;
  --accent-dark:  #BA7517;
  --accent-light: #FAEEDA;

  --danger:       #E24B4A;
  --danger-light: #FCEBEB;

  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-400: #94A3B8;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --transition: 0.18s ease;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
}

/* ── Base ── */
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Inter', 'DM Sans', sans-serif;
}

h1, h2, h3, .display {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--slate-200); border-radius: 99px; }
.dark ::-webkit-scrollbar-thumb { background: var(--slate-700); }

/* ============================================================
   TOPBAR
   ============================================================ */
.header-gradient {
  background: #fff;
  border-bottom: 1px solid var(--slate-100);
}
.dark .header-gradient {
  background: var(--slate-900);
  border-bottom: 1px solid var(--slate-800);
}

/* ── Logo badge ── */
.logo-badge {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar-item {
  transition: all var(--transition);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
}

.sidebar-item:hover {
  background: var(--brand-light);
  border-left-color: var(--brand-mid);
  color: var(--brand-dark);
}

.sidebar-item.active {
  background: var(--brand-light);
  border-left-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 600;
}

.dark .sidebar-item:hover,
.dark .sidebar-item.active {
  background: rgba(29,158,117,0.12);
  border-left-color: var(--brand);
  color: var(--brand-mid);
}

/* ── Sidebar icon color ── */
.sidebar-item .sidebar-icon { color: var(--slate-400); transition: color var(--transition); }
.sidebar-item:hover .sidebar-icon,
.sidebar-item.active .sidebar-icon { color: var(--brand); }

/* ============================================================
   BOTTOM NAV (mobile only)
   ============================================================ */
#bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #fff;
  border-top: 1px solid var(--slate-100);
  z-index: 100;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.07);
}
.dark #bottom-nav {
  background: var(--slate-900);
  border-top-color: var(--slate-800);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 3px;
  padding: 8px 4px 6px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--slate-400);
  transition: color var(--transition), transform var(--transition);
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
}
.bnav-item:active { transform: scale(0.93); }

.bnav-item.active { color: var(--brand); }
.dark .bnav-item.active { color: var(--brand-mid); }

.bnav-icon-wrap {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.bnav-item.active .bnav-icon-wrap {
  background: var(--brand-light);
}
.dark .bnav-item.active .bnav-icon-wrap {
  background: rgba(29,158,117,0.15);
}

/* Center protruding button */
.bnav-center-btn {
  flex: 0 0 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -30px;
}
.bnav-center-wrap {
  width: 52px;
  height: 52px;
  background: var(--brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  transition: transform var(--transition), background var(--transition);
}
.dark .bnav-center-wrap {
  border-color: var(--slate-900);
}
.bnav-center-btn:active .bnav-center-wrap {
  transform: scale(0.93);
}

.bnav-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* More drawer */
#more-drawer {
  display: none;
  position: fixed;
  bottom: 64px;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--slate-100);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 99;
  padding: 12px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.1);
  max-height: 55vh;
  overflow-y: auto;
}
.dark #more-drawer {
  background: var(--slate-800);
  border-top-color: var(--slate-700);
}
#more-drawer.open { display: block; }

.drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition);
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-700);
  font-family: 'DM Sans', sans-serif;
}
.dark .drawer-item { color: var(--slate-200); }
.drawer-item:hover { background: var(--brand-light); color: var(--brand-dark); }
.dark .drawer-item:hover { background: rgba(29,158,117,0.12); color: var(--brand-mid); }
.drawer-item.active { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
.dark .drawer-item.active { background: rgba(29,158,117,0.12); color: var(--brand-mid); }
.drawer-item i { width: 20px; height: 20px; }

.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 98;
  backdrop-filter: blur(2px);
}
.drawer-backdrop.open { display: block; }

@media (max-width: 1023px) {
  #bottom-nav { display: flex; }
  #module-host { padding-bottom: 80px !important; }
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--brand);
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stat-card .stat-number {
  font-family: 'DM Serif Display', serif;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--slate-900);
}
.dark .stat-card .stat-number { color: #fff; }

.stat-card .stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-400);
}

.stat-card .stat-trend {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 4px;
}
.stat-trend.up   { color: var(--brand); }
.stat-trend.warn { color: var(--accent-dark); }
.stat-trend.down { color: var(--danger); }

/* ============================================================
   TAB PILLS (module tabs)
   ============================================================ */
.tab-pill-group {
  display: flex;
  gap: 6px;
  background: var(--slate-100);
  border-radius: var(--radius-xl);
  padding: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-pill-group::-webkit-scrollbar { display: none; }

.dark .tab-pill-group { background: var(--slate-800); }

.tab-pill {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: var(--radius-xl);
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all var(--transition);
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}
.dark .tab-pill { color: var(--slate-400); }

.tab-pill:hover { color: var(--brand); }
.dark .tab-pill:hover { color: var(--brand-mid); }

.tab-pill.tab-active {
  background: #0d9488;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.dark .tab-pill.tab-active {
  background: #0f766e;
  color: #fff;
}

/* Legacy tab-active (border style, kept for compat) */
.tab-active-legacy {
  border-bottom: 3px solid var(--brand);
  color: var(--brand-dark);
  font-weight: 600;
}
.dark .tab-active-legacy {
  border-bottom-color: var(--brand-mid);
  color: var(--brand-mid);
}

/* ============================================================
   CARDS & HOVER
   ============================================================ */
.card-hover {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius-lg);
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(29,158,117,0.2);
}
.dark .card-hover { border-color: rgba(255,255,255,0.05); }
.dark .card-hover:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  border-color: rgba(29,158,117,0.25);
}

/* ============================================================
   EMPLOYEE / APPLICANT TABLE — MOBILE CARD MODE
   ============================================================ */
@media (max-width: 768px) {

  /* ── Applicants table ── */
  .applicants-table thead { display: none; }

  .applicants-table tr {
    display: block;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--slate-200);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
  }
  .applicants-table tr:hover { box-shadow: var(--shadow-md); }
  .dark .applicants-table tr { background: var(--slate-800); border-color: var(--slate-700); }

  /* Card header row */
  .applicants-table tr .card-person-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--slate-100);
  }
  .dark .applicants-table tr .card-person-header { border-bottom-color: var(--slate-700); }

  .applicants-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    font-size: 12px;
    border: none;
  }
  .applicants-table td::before {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-400);
    flex-shrink: 0;
  }

  .applicants-table td:nth-child(1)::before  { content: "Code"; }
  .applicants-table td:nth-child(2)::before  { content: "Name"; }
  .applicants-table td:nth-child(3)::before  { content: "Email"; }
  .applicants-table td:nth-child(4)::before  { content: "Phone"; }
  .applicants-table td:nth-child(5)::before  { content: "Position"; }
  .applicants-table td:nth-child(6)::before  { content: "Department"; }
  .applicants-table td:nth-child(7)::before  { content: "Status"; }
  .applicants-table td:nth-child(8)::before  { content: "Date"; }
  .applicants-table td:nth-child(9)::before  { content: "Actions"; }

  /* ── Employee table ── */
  .employee-table thead { display: none; }

  .employee-table tr {
    display: block;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--slate-200);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
  }
  .employee-table tr:hover { box-shadow: var(--shadow-md); }
  .dark .employee-table tr { background: var(--slate-800); border-color: var(--slate-700); }

  .employee-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    font-size: 12px;
    border: none;
  }
  .employee-table td::before {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-400);
    flex-shrink: 0;
  }

  .employee-table td:nth-child(1)::before  { content: "Code"; }
  .employee-table td:nth-child(2)::before  { content: "Name"; }
  .employee-table td:nth-child(3)::before  { content: "Email"; }
  .employee-table td:nth-child(4)::before  { content: "Phone"; }
  .employee-table td:nth-child(5)::before  { content: "Department"; }
  .employee-table td:nth-child(6)::before  { content: "Position"; }
  .employee-table td:nth-child(7)::before  { content: "Salary Grade"; }
  .employee-table td:nth-child(8)::before  { content: "Status"; }
  .employee-table td:nth-child(9)::before  { content: "Joined"; }
  .employee-table td:nth-child(10)::before { content: "Actions"; }
}

/* ============================================================
   AVATAR INITIALS (employee / applicant cards)
   ============================================================ */
.avatar-initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}

/* ============================================================
   POSITION TABLE
   ============================================================ */
.position-table td:nth-child(6),
.position-table th:nth-child(6) { text-align: center; }
.position-table td:nth-child(4) { text-align: center; }

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--slate-200);
  background: #fff;
}
.dark .table-responsive { border-color: var(--slate-700); background: var(--slate-800); }

.position-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'DM Sans', sans-serif;
  min-width: 600px;
}

.position-table thead {
  background: var(--slate-50);
}
.dark .position-table thead { background: var(--slate-900); }

.position-table-header th {
  padding: 12px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-400);
  border-bottom: 1px solid var(--slate-200);
  white-space: nowrap;
  user-select: none;
  transition: color var(--transition);
}
.dark .position-table-header th { color: var(--slate-600); border-bottom-color: var(--slate-700); }

.position-table-header th.sorting      { cursor: pointer; }
.position-table-header th.sorting::after       { content: ' ⇅'; font-size: 0.65rem; opacity: 0.4; }
.position-table-header th.sorting_asc::after   { content: ' ▲'; opacity: 0.8; color: var(--brand); }
.position-table-header th.sorting_desc::after  { content: ' ▼'; opacity: 0.8; color: var(--brand); }

.position-table tbody tr {
  transition: background var(--transition), box-shadow var(--transition);
  border-bottom: 1px solid var(--slate-100);
}
.dark .position-table tbody tr { border-bottom-color: var(--slate-800); }

.position-table tbody tr:hover {
  background: var(--brand-light);
  box-shadow: inset 3px 0 0 var(--brand);
}
.dark .position-table tbody tr:hover {
  background: rgba(29,158,117,0.07);
  box-shadow: inset 3px 0 0 var(--brand);
}

.position-table tbody td {
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--slate-700);
  vertical-align: middle;
  white-space: nowrap;
}
.dark .position-table tbody td { color: var(--slate-200); }

.position-table tbody td:first-child { font-weight: 600; color: var(--slate-800); min-width: 180px; }
.dark .position-table tbody td:first-child { color: #fff; }

.position-table tbody tr:nth-child(even) { background-color: rgba(248,250,252,0.7); }
.dark .position-table tbody tr:nth-child(even) { background-color: rgba(255,255,255,0.015); }
.position-table tbody tr:nth-child(even):hover { background: var(--brand-light); }
.dark .position-table tbody tr:nth-child(even):hover { background: rgba(29,158,117,0.07); }

/* ── Status Badges ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}

.status-badge.open     { background: var(--brand-light); color: var(--brand-dark); }
.status-badge.closed   { background: var(--slate-100);   color: var(--slate-600); }
.status-badge.closing  { background: var(--accent-light); color: var(--accent-dark); }

.dark .status-badge.open    { background: rgba(29,158,117,0.15); color: var(--brand-mid); }
.dark .status-badge.closed  { background: rgba(100,116,139,0.15); color: var(--slate-400); }
.dark .status-badge.closing { background: rgba(239,159,39,0.15); color: var(--accent); }

/* ── Dept tag ── */
.dept-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--slate-600); }
.dark .dept-tag { color: var(--slate-400); }
.dept-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Applicant count ── */
.applicant-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  background: var(--brand-light);
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-dark);
}
.dark .applicant-count { background: rgba(29,158,117,0.15); color: var(--brand-mid); }

/* ── Action buttons ── */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  background: transparent;
}
.action-btn:active { transform: scale(0.93); }

.action-btn.edit-btn   { color: var(--brand); }
.action-btn.edit-btn:hover   { background: var(--brand-light); }
.dark .action-btn.edit-btn:hover { background: rgba(29,158,117,0.12); }

.action-btn.delete-btn { color: var(--danger); }
.action-btn.delete-btn:hover { background: var(--danger-light); }
.dark .action-btn.delete-btn:hover { background: rgba(226,75,74,0.12); }

/* ============================================================
   MOBILE CARD VIEW — position table
   ============================================================ */
@media (max-width: 767px) {
  .table-responsive { border: none; background: none; }
  .position-table { min-width: unset; }
  .position-table thead { display: none; }

  .position-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--slate-200);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
  }
  .position-table tbody tr:hover { box-shadow: var(--shadow-md); }
  .dark .position-table tbody tr { background: var(--slate-800); border-color: var(--slate-700); }

  .position-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border: none;
    font-size: 0.85rem;
    white-space: normal;
  }

  .position-table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-400);
    flex-shrink: 0;
  }
  .dark .position-table tbody td[data-label]::before { color: var(--slate-600); }
  .position-table tbody td:first-child { display: none !important; }

  .position-table tbody tr:hover {
    box-shadow: inset 3px 0 0 var(--brand), var(--shadow-sm);
  }
  .hide-mobile { display: none !important; }
}

/* ============================================================
   DATATABLE OVERRIDES
   ============================================================ */
.dataTables_wrapper { font-family: 'DM Sans', sans-serif !important; }

.dataTables_length label,
.dataTables_filter label {
  font-size: 0.8rem !important;
  color: var(--slate-400) !important;
}
.dark .dataTables_length label,
.dark .dataTables_filter label { color: var(--slate-600) !important; }

.dataTables_length select,
.dataTables_filter input {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--slate-200) !important;
  padding: 0.4rem 0.6rem !important;
  font-size: 0.8rem !important;
  background: #fff !important;
  color: var(--slate-800) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.dark .dataTables_length select,
.dark .dataTables_filter input {
  border-color: var(--slate-700) !important;
  background: var(--slate-800) !important;
  color: var(--slate-200) !important;
}

.dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--slate-200) !important;
  margin: 0 2px !important;
  padding: 0.35rem 0.7rem !important;
  font-size: 0.8rem !important;
  transition: all var(--transition) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.dataTables_paginate .paginate_button.current {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}
.dataTables_paginate .paginate_button:hover:not(.current) {
  background: var(--brand-light) !important;
  color: var(--brand-dark) !important;
  border-color: var(--brand-mid) !important;
}
.dark .dataTables_paginate .paginate_button { border-color: var(--slate-700) !important; color: var(--slate-200) !important; }
.dark .dataTables_paginate .paginate_button.current { background: var(--brand) !important; border-color: var(--brand) !important; }

.dataTables_info { font-size: 0.78rem !important; color: var(--slate-400) !important; }

.dataTables_processing {
  background: rgba(29,158,117,0.08) !important;
  border: 1px solid rgba(29,158,117,0.2) !important;
  border-radius: var(--radius-md) !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
}

/* ============================================================
   KANBAN PIPELINE
   ============================================================ */
.kanban-col {
  min-width: 260px;
  border-radius: var(--radius-md);
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
}
.dark .kanban-col {
  background: var(--slate-800);
  border-color: var(--slate-700);
}

@media (max-width: 768px) {
  .kanban-col { width: 100%; min-width: 220px; }
  #pl-board { gap: 12px; }
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
.form-input, input[type="text"], input[type="email"],
input[type="tel"], input[type="number"], input[type="password"],
input[type="date"], select, textarea {
  font-family: 'DM Sans', sans-serif;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(29,158,117,0.15) !important;
}

/* ── Primary buttons ── */
.btn-primary {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--brand-dark);
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(29,158,117,0.3);
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Submit button (apply.html) ── */
.btn-submit {
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-submit:hover {
  background: var(--brand-dark) !important;
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(29,158,117,0.3);
}
.btn-submit:active { transform: scale(0.97); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================================
   TOGGLE SWITCHES
   ============================================================ */
.toggle + .slider {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.4rem;
  background-color: var(--slate-200);
  border-radius: 9999px;
  transition: background-color var(--transition);
}
.toggle:checked + .slider { background-color: var(--brand); }

.slider::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 1rem;
  height: 1rem;
  background-color: white;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle:checked + .slider::before { transform: translateX(1.1rem); }

.dark .toggle + .slider { background-color: var(--slate-700); }
.dark .toggle:checked + .slider { background-color: var(--brand); }

/* Module-visibility toggle (track + thumb pattern) */
.toggle-track { transition: background-color 0.2s ease; }
.toggle-thumb { transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }

/* ============================================================
   SELECT2 ENHANCEMENTS
   ============================================================ */
.select2-container--default .select2-selection--single {
  background-color: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 1.5rem !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 1rem !important;
  transition: all var(--transition) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(29,158,117,0.15) !important;
  outline: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--slate-900) !important;
  font-size: 0.875rem !important;
  padding: 0 !important;
  line-height: 46px !important;
  font-family: 'DM Sans', sans-serif !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--slate-400) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; right: 12px !important; width: 30px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--slate-400) transparent transparent transparent !important;
  border-width: 6px 5px 0 5px !important;
}
.select2-container--default.select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent var(--slate-400) transparent !important;
  border-width: 0 5px 6px 5px !important;
}

.select2-dropdown {
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden !important;
  margin-top: 8px !important;
  z-index: 9999 !important;
  background-color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
}
.select2-container--default .select2-search--dropdown { padding: 10px !important; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--radius-lg) !important;
  padding: 0.65rem 1rem !important;
  outline: none !important;
  background-color: var(--slate-50) !important;
  font-size: 0.875rem !important;
  color: var(--slate-700) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.select2-results__options { max-height: 250px !important; }
.select2-results__option {
  padding: 0.75rem 1.25rem !important;
  font-size: 0.875rem !important;
  color: var(--slate-700) !important;
  transition: all 0.1s ease !important;
  font-family: 'DM Sans', sans-serif !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--slate-100) !important;
  color: var(--slate-900) !important;
  font-weight: 600 !important;
}

/* Dark mode Select2 */
.dark .select2-container--default .select2-selection--single {
  background-color: var(--slate-800) !important;
  border-color: var(--slate-700) !important;
}
.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--slate-100) !important; }
.dark .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(29,158,117,0.15) !important;
}
.dark .select2-dropdown { background-color: var(--slate-800) !important; border-color: var(--slate-700) !important; }
.dark .select2-container--default .select2-search--dropdown { background-color: var(--slate-800) !important; }
.dark .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--slate-900) !important;
  border-color: var(--slate-700) !important;
  color: var(--slate-100) !important;
}
.dark .select2-results__option { color: var(--slate-300) !important; }
.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(29,158,117,0.12) !important;
  color: var(--brand-mid) !important;
}

/* ============================================================
   MOBILE RESPONSIVE — content padding
   ============================================================ */
@media (max-width: 640px) {
  #module-host { padding: 1rem !important; padding-bottom: 80px !important; }
  .grid { gap: 0.75rem !important; }
  .stat-card { padding: 1rem !important; }
}
@media (max-width: 768px) {
  #sidebar { width: 100% !important; max-width: 240px; }
  table { font-size: 0.75rem; }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  #module-host { padding: 1.25rem !important; padding-bottom: 80px !important; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.fade-in  { animation: fadeIn 0.3s ease forwards; }
.chart-bar { transition: height 0.5s ease; }
.spinner  { animation: spin 0.8s linear infinite; }

.skeleton {
  background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-50) 50%, var(--slate-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 99px;
}

/* ============================================================
   APPLY PAGE — Sticky position pill
   ============================================================ */
#sticky-position-pill {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--slate-100);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#sticky-position-pill.visible { transform: translateY(0); }

/* ============================================================
   STEP DOTS (apply page)
   ============================================================ */
.step-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--slate-200);
  transition: background 0.3s, box-shadow 0.3s;
}
.step-dot.active { background: var(--brand); box-shadow: 0 0 0 3px rgba(29,158,117,0.2); }
.step-dot.done   { background: var(--brand-mid); }

/* ============================================================
   STAR RATING
   ============================================================ */
.star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-rating input { display: none; }
.star-rating label { cursor: pointer; width: 25px; color: var(--slate-200); transition: color 0.2s; }
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: var(--accent); }

/* ============================================================
   UAN SUCCESS BOX
   ============================================================ */
.uan-box {
  background: var(--brand-light);
  border: 1px solid var(--brand-mid);
  border-radius: var(--radius-xl);
}

/* ============================================================
   MISC UTILITY
   ============================================================ */
input, select, button { font-size: inherit; }

.gradient-text {
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sidebar backdrop */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 40;
  backdrop-filter: blur(2px);
}
#sidebar-backdrop.active { display: block; }

/* ============================================================
   SWEETALERT2 GLOBAL POLISH
   ============================================================ */
.swal2-popup {
  border-radius: 1.25rem !important;
  font-family: 'DM Sans', sans-serif !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14), 0 6px 20px rgba(0,0,0,0.07) !important;
}
.swal2-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
}
.dark .swal2-popup  { background: #1e293b !important; }
.dark .swal2-title  { color: #f1f5f9 !important; }
.dark .swal2-html-container { color: #cbd5e1 !important; }
.swal2-html-container { font-family: 'DM Sans', sans-serif !important; }
.swal2-confirm, .swal2-cancel, .swal2-deny {
  border-radius: 0.6rem !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.6rem 1.3rem !important;
  transition: opacity 0.15s, transform 0.1s !important;
}
.swal2-confirm:hover, .swal2-cancel:hover { opacity: 0.88 !important; }
.swal2-confirm:active, .swal2-cancel:active { transform: scale(0.97) !important; }
.swal2-icon {
  margin-top: 1.1rem !important;
  margin-bottom: 0.25rem !important;
  width: 3.25rem !important;
  height: 3.25rem !important;
}
.swal2-icon .swal2-icon-content { font-size: 1.8rem !important; }
.swal2-close {
  font-size: 1.2rem !important;
  color: #94a3b8 !important;
}
.swal2-close:hover { color: #0f172a !important; background: transparent !important; }
.dark .swal2-close:hover { color: #f1f5f9 !important; }
.swal2-validation-message {
  border-radius: 0.5rem !important;
  font-size: 0.8rem !important;
  font-family: 'DM Sans', sans-serif !important;
}
.swal2-timer-progress-bar {
  background: rgba(79,70,229,0.3) !important;
  border-radius: 0 0 1.25rem 1.25rem !important;
}

/* ── Form modal variant ── */
/* Hide the default SweetAlert2 title bar — we render our own header inside html */
.swal-form .swal2-header { display: none !important; }
.swal-form .swal2-html-container {
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.swal-form .swal2-actions {
  padding: 0.75rem 1.5rem 1.25rem !important;
  margin-top: 0 !important;
  border-top: 1px solid #f1f5f9 !important;
  gap: 0.5rem !important;
}
.dark .swal-form .swal2-actions { border-top-color: #334155 !important; }

/* ── Custom modal header (icon + title + close X) ── */
/* border-radius matches the popup's top corners so the header background
   doesn't overflow the rounded edges — avoids the "2 boxes" appearance. */
.swal-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  border-radius: 1.25rem 1.25rem 0 0;   /* match popup's top corners */
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}
.dark .swal-modal-header {
  background: #1e293b;
  border-bottom-color: #334155;
}
/* Form body padding — every non-header direct child of the html container */
.swal-form .swal2-html-container > *:not(.swal-modal-header) {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.swal-form .swal2-html-container > *:not(.swal-modal-header):first-of-type {
  padding-top: 1.25rem;
}
.swal-form .swal2-html-container > *:not(.swal-modal-header):last-child {
  padding-bottom: 0.5rem;
}
.swal-modal-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
}
/* Icon color variants */
.swal-icon-indigo  { background: #eef2ff; color: #4f46e5; }
.swal-icon-blue    { background: #eff6ff; color: #2563eb; }
.swal-icon-violet  { background: #f5f3ff; color: #7c3aed; }
.swal-icon-purple  { background: #faf5ff; color: #9333ea; }
.swal-icon-emerald { background: #ecfdf5; color: #059669; }
.swal-icon-teal    { background: #f0fdfa; color: #0d9488; }
.swal-icon-green   { background: #f0fdf4; color: #16a34a; }
.swal-icon-orange  { background: #fff7ed; color: #ea580c; }
.swal-icon-slate   { background: #f8fafc; color: #475569; }
.swal-icon-red     { background: #fef2f2; color: #dc2626; }
.dark .swal-icon-indigo  { background: rgba(79,70,229,.15); color: #818cf8; }
.dark .swal-icon-blue    { background: rgba(37,99,235,.15);  color: #60a5fa; }
.dark .swal-icon-violet  { background: rgba(124,58,237,.15); color: #a78bfa; }
.dark .swal-icon-purple  { background: rgba(147,51,234,.15); color: #c084fc; }
.dark .swal-icon-emerald { background: rgba(5,150,105,.15);  color: #34d399; }
.dark .swal-icon-teal    { background: rgba(13,148,136,.15); color: #2dd4bf; }
.dark .swal-icon-green   { background: rgba(22,163,74,.15);  color: #4ade80; }
.dark .swal-icon-orange  { background: rgba(234,88,12,.15);  color: #fb923c; }
.dark .swal-icon-slate   { background: rgba(71,85,105,.15);  color: #94a3b8; }
.dark .swal-icon-red     { background: rgba(220,38,38,.15);  color: #f87171; }

.swal-modal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .swal-modal-title { color: #f1f5f9; }
.swal-modal-subtitle {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 2px;
  line-height: 1.3;
}
.swal-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #94a3b8;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.swal-modal-close:hover { background: #f1f5f9; color: #0f172a; }
.dark .swal-modal-close:hover { background: #334155; color: #f1f5f9; }

/* ── Form body padding (the content below the header) ── */
.swal-form-body {
  padding: 1.25rem 1.5rem;
}

/* Standard form field label */
.swal-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 4px;
  margin-left: 2px;
}
/* Standard form field input/select/textarea inside Swal */
.swal2-html-container input:not([type="hidden"]),
.swal2-html-container select,
.swal2-html-container textarea {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.875rem !important;
}

/* ============================================================
   MODULE HOST — max-width for large screens
   ============================================================ */
#module-host > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ============================================================
   TAB PILL GROUP — overflow-fade cue
   ============================================================ */
.tab-pill-group-wrap {
  position: relative;
}
.tab-pill-group-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--slate-100));
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
}
.dark .tab-pill-group-wrap::after {
  background: linear-gradient(to right, transparent, var(--slate-800));
}
.tab-pill-group-wrap.has-overflow::after { opacity: 1; }

/* ============================================================
   SIDEBAR COLLAPSE
   ============================================================ */
#sidebar.collapsed {
  width: 56px;
}
#sidebar.collapsed #sidebar-nav span {
  display: none;
}
/* The collapse button is in the topbar <header>, a SIBLING of #sidebar — so these must be
   scoped to body.sidebar-collapsed, not #sidebar.collapsed (which can never match it). */
body.sidebar-collapsed #sidebar-collapse-btn [data-lucide="panel-left-close"] {
  display: none;
}
body.sidebar-collapsed #sidebar-collapse-btn [data-lucide="panel-left-open"] {
  display: block;
}

/* Collapsed sidebar → hide the brand TITLE in the topbar, keep the LOGO.
   #topbar-company carries Tailwind's `hidden sm:block`; this selector is specificity
   (1,1,1) vs `.sm\:block`'s (0,1,0), so it wins without !important. */
body.sidebar-collapsed #topbar-company {
  display: none;
}
#sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
#sidebar.collapsed .sidebar-item i,
#sidebar.collapsed .sidebar-item svg {
  margin: 0;
}
#sidebar.collapsed > div:first-child {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
/* Default (expanded): show the "close" icon, hide the "open" one. Overridden above by
   body.sidebar-collapsed. Was `#sidebar [data-lucide=…]`, which never matched — the button
   is in the topbar header, not inside #sidebar. */
#sidebar-collapse-btn [data-lucide="panel-left-open"] { display: none; }

/* ============================================================
   SWEETALERT2 — teal timer bar
   ============================================================ */
.swal2-timer-progress-bar {
  background: rgba(13,148,136,0.35) !important;
}

/* ============================================================
   DARK MODE CONTRAST FIXES
   ============================================================ */
.dark select, 
.dark select option,
.dark .select2-container--default .select2-selection--single,
.dark .select2-container--default .select2-results__option {
  background-color: var(--slate-800) !important;
  color: var(--slate-100) !important;
  border-color: var(--slate-700) !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--slate-100) !important;
}

.dark .select2-dropdown {
  background-color: var(--slate-800) !important;
  border-color: var(--slate-700) !important;
}
/* ============================================================
   CUSTOM SCROLLBAR
   ------------------------------------------------------------
   `.custom-scrollbar` is used by score-simulator.html,
   api/partial_hiring.php, api/partial_itemnumbers.php and the
   modal/table markup in myscripts.js, but was never actually
   defined anywhere — every one of those scroll areas fell back
   to the stock chunky OS scrollbar. Defined here (added
   2026-07-26) so the class finally does something.
   Firefox gets the standard properties; WebKit/Blink get the
   ::-webkit- pseudo-elements. Both are needed.
   ============================================================ */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
  background-clip: content-box;
}
.custom-scrollbar::-webkit-scrollbar-corner { background: transparent; }

.dark .custom-scrollbar { scrollbar-color: #475569 transparent; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #475569; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #64748b; }

/* ============================================================
   CRITERIA / SUB-CRITERIA DESCRIPTION  (.qs-desc)
   ------------------------------------------------------------
   Renders the rich text produced by the Qualification Standard
   toolbar (the same sanitizeQsHtml() whitelist: b/strong, i/em,
   u, br, span, font[color], p, div, ul, ol, li).

   Needed because Tailwind's Preflight resets `ul, ol` to
   list-style:none with no padding, so a bulleted description
   would silently render as plain lines. Scoped to .qs-desc so
   it cannot leak into the rest of the UI. Added 2026-07-26.
   ============================================================ */
.qs-desc ul { list-style: disc;    padding-left: 1.1rem; margin: 0.25rem 0; }
.qs-desc ol { list-style: decimal; padding-left: 1.3rem; margin: 0.25rem 0; }
.qs-desc li { margin: 0.1rem 0; }
.qs-desc p  { margin: 0.25rem 0; }
.qs-desc b, .qs-desc strong { font-weight: 700; }
.qs-desc i, .qs-desc em     { font-style: italic; }
.qs-desc u                  { text-decoration: underline; }

/* ============================================================
   PRINT FAN (Employees → Onboarding tab) — RADIAL DIAL
   ------------------------------------------------------------
   One trigger button (.print-fan-trigger). Clicking it draws a
   pulsing circle (.print-fan::before) around it and swings every
   .print-fan-item onto that circle's rim. Each item's position
   is NOT hardcoded — layoutPrintFan() in mod-employees.js reads
   however many .print-fan-item buttons exist inside the .print-fan
   at open time and spaces them evenly along an arc, writing the
   result into that item's --dx/--dy custom properties. So a THIRD
   (or 4th…) print button dropped into the markup later just needs
   no CSS/JS change at all — it auto-joins the ring.
   The arc is the UPPER semicircle only (centered on -90°, i.e.
   straight up), never lower — because the action cell is the
   onboarding table's LAST column and #onboarding-table-wrapper is
   overflow-x:auto (which implicitly clips overflow-y too), so a
   downward arc risks being cut off by the wrapper on the last
   visible row. An upward arc only risks the table's very first
   row, which has the header row's height as headroom above it.
   Toggled via togglePrintFan()/closePrintFans() in mod-employees.js.
   Added 2026-07-30.
   ============================================================ */
.print-fan { position: relative; display: inline-flex; align-items: center; }

.print-fan-trigger { position: relative; z-index: 2; transition: transform .15s ease; }
.print-fan.is-open .print-fan-trigger { transform: scale(1.04); }

/* the circle itself — sized to just enclose the item ring, fades/scales in, then pulses */
.print-fan::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc((var(--fan-radius, 34px) + 17px) * 2);
  height: calc((var(--fan-radius, 34px) + 17px) * 2);
  margin-left: calc((var(--fan-radius, 34px) + 17px) * -1);
  margin-top: calc((var(--fan-radius, 34px) + 17px) * -1);
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(13, 148, 136, .14), rgba(13, 148, 136, .05) 65%, transparent 100%);
  border: 1.5px solid rgba(13, 148, 136, .4);
  opacity: 0;
  transform: scale(.6);
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
  pointer-events: none;
  z-index: 0;
}
.print-fan.is-open::before {
  opacity: 1;
  transform: scale(1);
  animation: print-fan-pulse 1.6s ease-in-out .3s infinite;
}

@keyframes print-fan-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, .28); }
  50%      { box-shadow: 0 0 0 8px rgba(13, 148, 136, 0); }
}

/* Opt-in modifier — Directory tab's "Item number actions" fan (2026-08-19, on request).
   The base ::before above is a translucent glow BY DESIGN (fades into whatever's behind
   it), which is right for Onboarding's print button floating over an otherwise-empty
   cell. Directory's fan opens on TOP of the row's other action icons (View/Edit/Delete),
   so a translucent circle let those icons show through underneath the fan buttons —
   confusing, since it read as two overlapping controls. This swaps the fill for a fully
   opaque, theme-aware disc (matching the row's own card/table surface — bg-white /
   dark:bg-gray-800) so it fully occludes whatever's behind it instead of just tinting it.
   Class goes on the .print-fan container itself, e.g. class="print-fan print-fan-opaque". */
.print-fan-opaque::before {
  background: #ffffff;
  border-color: rgba(15, 23, 42, .12);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
}
.dark .print-fan-opaque::before {
  background: #1f2937;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

.print-fan-item {
  --dx: 0px;
  --dy: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: calc(var(--fan-half, 16px) * -1);
  margin-top: calc(var(--fan-half, 16px) * -1);
  z-index: 1;
  opacity: 0;
  transform: translate(0, 0) scale(.35);
  pointer-events: none;
  transition: transform .24s cubic-bezier(.34, 1.56, .64, 1), opacity .18s ease;
}
.print-fan.is-open .print-fan-item {
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--dx), var(--dy)) scale(1);
}