/* ============================================================
   SHARED COMPONENTS — Staff Apply's Veyra
   Enterprise Dark Mode — Corporate Standard
   ============================================================ */

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-normal) var(--ease-default); }
a:hover { color: var(--color-primary-hover); }
button,input,textarea,select { font-family:inherit; font-size:inherit; color:inherit; border:none; outline:none; background:none; }
ul,ol { list-style:none; }
img { max-width:100%; display:block; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--color-border); border-radius:var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background:var(--color-text-muted); }

/* ── Focus Visible ── */
:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; border-radius:var(--radius-sm); }

/* ── Skip Link ── */
.skip-link {
  position:fixed; top:-100%; left:var(--space-4); z-index:var(--z-tooltip);
  padding:var(--space-2) var(--space-4); background:var(--color-primary); color:#fff;
  font-weight:var(--font-weight-semibold); border-radius:var(--radius-md);
  transition:top var(--duration-fast) var(--ease-default);
}
.skip-link:focus { top:var(--space-4); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { width:100%; max-width:var(--content-max-width); margin:0 auto; padding:0 var(--space-6); }
.content { flex:1; padding:var(--space-6); overflow-y:auto; overflow-x:hidden; }
.view { display:none; }
.view.active { display:block; animation:viewFadeIn .25s var(--ease-out); }

@keyframes viewFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   SIDEBAR — Dark Enterprise
   ============================================================ */
.sidebar {
  position:fixed; top:0; left:0; bottom:0;
  width:var(--sidebar-width);
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  display:flex; flex-direction:column;
  z-index:var(--z-sticky);
  transition:width var(--duration-slow) var(--ease-default);
  overflow:hidden;
}
.sidebar.collapsed { width:var(--sidebar-collapsed-width); }
.sidebar-logo {
  display:flex; align-items:center; gap:var(--space-3);
  padding:0 var(--space-4); height:var(--header-height);
  border-bottom:1px solid var(--sidebar-border); flex-shrink:0;
}
.sidebar-logo img,.sidebar-logo .sidebar-logo-img {
  width:32px; height:32px; border-radius:var(--radius-md); object-fit:contain; flex-shrink:0;
}
.sidebar-logo .logo-text {
  font-size:var(--font-size-md); font-weight:var(--font-weight-bold); white-space:nowrap;
  color:var(--color-text-primary); letter-spacing:var(--letter-spacing-tight);
}
.sidebar.collapsed .logo-text,.sidebar.collapsed .nav-label,.sidebar.collapsed .user-info-text,
.sidebar.collapsed .sidebar-toggle-label,.sidebar.collapsed .nav-badges { display:none; }
.sidebar-nav { flex:1; padding:var(--space-2); overflow-y:auto; overflow-x:hidden; }
.nav-item {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);
  cursor:pointer; color:var(--color-text-secondary);
  transition:var(--transition-colors); margin-bottom:2px; position:relative;
  font-size:var(--font-size-base); font-weight:var(--font-weight-medium);
  text-decoration:none; white-space:nowrap;
}
.nav-item:hover { background:var(--color-bg-hover); color:var(--color-text-primary); }
.nav-item.active { background:var(--color-primary-subtle); color:var(--color-primary); }
.nav-item.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:18px; background:var(--color-primary);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.nav-item i { width:20px; text-align:center; font-size:15px; flex-shrink:0; }
.nav-label { font-size:var(--font-size-base); }
.nav-badges { display:flex; gap:var(--space-1); margin-left:auto; }
.nav-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-full);
  font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);
}
.badge-pending-count { background:var(--color-warning-subtle); color:var(--color-warning); }
.badge-review-count { background:var(--color-info-subtle); color:var(--color-info); }
.sidebar-divider { height:1px; background:var(--sidebar-border); margin:var(--space-2) var(--space-3); }
.sidebar-footer { padding:var(--space-3); border-top:1px solid var(--sidebar-border); flex-shrink:0; }
.sidebar-toggle {
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md); cursor:pointer; color:var(--color-text-secondary);
  transition:var(--transition-colors); margin-bottom:var(--space-2); width:100%; text-align:left;
}
.sidebar-toggle:hover { background:var(--color-bg-hover); color:var(--color-text-primary); }
.user-info-box {
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3);
  background:var(--color-bg-hover); border-radius:var(--radius-md);
}
.user-avatar {
  width:32px; height:32px; background:var(--color-primary); border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  font-weight:var(--font-weight-bold); font-size:var(--font-size-sm); color:#fff;
  flex-shrink:0; text-transform:uppercase;
}
.user-info-text { flex:1; overflow:hidden; }
.user-info-text .name { font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-info-text .role { font-size:var(--font-size-xs); color:var(--color-text-muted); }
.logout-btn { background:none; border:none; color:var(--color-text-muted); cursor:pointer; padding:var(--space-1); border-radius:var(--radius-sm); transition:var(--transition-colors); }
.logout-btn:hover { color:var(--color-danger); background:var(--color-danger-subtle); }
.main-wrapper { margin-left:var(--sidebar-width); min-height:100vh; display:flex; flex-direction:column; transition:margin-left var(--duration-slow) var(--ease-default); }
.sidebar.collapsed ~ .main-wrapper { margin-left:var(--sidebar-collapsed-width); }

/* ============================================================
   HEADER / TOPBAR — Glassmorphism Dark
   ============================================================ */
.topbar,.header {
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-height); padding:0 var(--space-6);
  background:var(--glass-bg-heavy); backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--color-border);
  position:sticky; top:0; z-index:var(--z-sticky);
}
.topbar-left,.header-left { display:flex; align-items:center; gap:var(--space-3); }
.topbar-title,.page-title { font-size:var(--font-size-lg); font-weight:var(--font-weight-bold); color:var(--color-text-primary); }
.topbar-right,.header-right { display:flex; align-items:center; gap:var(--space-3); }
.header-user { display:flex; align-items:center; gap:var(--space-2); }
.header-user-name { font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--color-text-secondary); }

/* ============================================================
   BUTTONS — Micro-interactions
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-4); font-size:var(--font-size-base);
  font-weight:var(--font-weight-medium); border-radius:var(--radius-md);
  cursor:pointer; transition:var(--transition-all); white-space:nowrap; line-height:1;
  border:1px solid transparent;
}
.btn:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.btn-primary { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.btn-primary:hover { background:var(--color-primary-hover); border-color:var(--color-primary-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-primary:active { transform:translateY(0); box-shadow:none; }
.btn-secondary { background:var(--color-bg-surface); color:var(--color-text-primary); border-color:var(--color-border); box-shadow:var(--shadow-xs); }
.btn-secondary:hover { border-color:var(--color-border-hover); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.btn-secondary:active { transform:translateY(0); box-shadow:var(--shadow-xs); }
.btn-ghost { background:transparent; color:var(--color-text-secondary); }
.btn-ghost:hover { background:var(--color-bg-hover); color:var(--color-text-primary); }
.btn-success { background:var(--color-success); color:#fff; }
.btn-success:hover { background:var(--color-success-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-danger { background:var(--color-danger); color:#fff; }
.btn-danger:hover { background:var(--color-danger-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-warning { background:var(--color-warning); color:var(--color-text-inverse); }
.btn-warning:hover { background:var(--color-warning-hover); transform:translateY(-1px); }
.btn-info { background:var(--color-info); color:#fff; }
.btn-info:hover { background:#2563eb; transform:translateY(-1px); }
.btn-sm { padding:var(--space-1) var(--space-3); font-size:var(--font-size-sm); }
.btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border-radius:var(--radius-md);
  cursor:pointer; color:var(--color-text-secondary); transition:var(--transition-all); flex-shrink:0;
}
.btn-icon:hover { background:var(--color-bg-hover); color:var(--color-text-primary); transform:translateY(-1px); }
.btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn.loading { position:relative; color:transparent; pointer-events:none; }
.btn.loading::after {
  content:''; position:absolute; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.15); border-top-color:var(--color-primary);
  border-radius:var(--radius-full); animation:spin .6s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ============================================================
   BADGES / STATUS
   ============================================================ */
.badge {
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:3px 10px; font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold);
  border-radius:var(--radius-full); line-height:1.4; white-space:nowrap;
}
.badge-dot::before { content:''; width:6px; height:6px; border-radius:var(--radius-full); background:currentColor; flex-shrink:0; }
.badge-pending { background:var(--color-warning-subtle); color:var(--color-warning); }
.badge-under_review,.badge-review { background:var(--color-info-subtle); color:var(--color-info); }
.badge-approved,.badge-completed,.badge-active { background:var(--color-success-subtle); color:var(--color-success); }
.badge-rejected,.badge-inactive { background:var(--color-danger-subtle); color:var(--color-danger); }
.badge-second_phase,.badge-second-phase { background:var(--color-purple-subtle); color:var(--color-purple); }
.badge-admin { background:var(--color-purple-subtle); color:var(--color-purple); }
.badge-mod { background:var(--color-cyan-subtle); color:var(--color-cyan); }
.badge-interview_pending { background:var(--color-warning-subtle); color:var(--color-warning); }
.badge-interview_under_review { background:var(--color-info-subtle); color:var(--color-info); }
.badge-interview_approved { background:var(--color-success-subtle); color:var(--color-success); }
.badge-interview_rejected { background:var(--color-danger-subtle); color:var(--color-danger); }
.sb { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); border-radius:var(--radius-full); white-space:nowrap; }
.sb.pending { background:var(--color-warning-subtle); color:var(--color-warning); }
.sb.reviewing,.sb.under_review { background:var(--color-info-subtle); color:var(--color-info); }
.sb.accepted,.sb.approved,.sb.completed { background:var(--color-success-subtle); color:var(--color-success); }
.sb.rejected { background:var(--color-danger-subtle); color:var(--color-danger); }
.sb.second-phase,.sb.second_phase { background:var(--color-purple-subtle); color:var(--color-purple); }
.sb.interview_pending { background:var(--color-warning-subtle); color:var(--color-warning); }
.sb.interview_under_review { background:var(--color-info-subtle); color:var(--color-info); }
.sb.interview_approved { background:var(--color-success-subtle); color:var(--color-success); }
.sb.interview_rejected { background:var(--color-danger-subtle); color:var(--color-danger); }

/* ============================================================
   TABLES — Enterprise Dark
   ============================================================ */
.table-container {
  background:var(--color-bg-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
}
.table-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-border);
}
.table-title { font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); color:var(--color-text-primary); }
.table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
table thead th {
  padding:var(--space-3) var(--space-4); font-size:var(--font-size-xs);
  font-weight:var(--font-weight-semibold); color:var(--color-text-muted);
  text-transform:uppercase; letter-spacing:var(--letter-spacing-wider);
  text-align:left; border-bottom:1px solid var(--color-border);
  background:var(--color-bg-base); white-space:nowrap;
}
table tbody td {
  padding:var(--space-3) var(--space-4); font-size:var(--font-size-base);
  border-bottom:1px solid var(--color-border); color:var(--color-text-secondary);
  vertical-align:middle;
}
table tbody tr:last-child td { border-bottom:none; }
table tbody tr { transition:background var(--duration-fast) var(--ease-default); }
table tbody tr:hover { background:rgba(76,110,245,.06); }
table tbody tr:nth-child(even) { background:rgba(255,255,255,.015); }
table tbody tr:nth-child(even):hover { background:rgba(76,110,245,.06); }

/* ============================================================
   MODALS — Dark Enterprise
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.60);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  z-index:var(--z-modal); opacity:0; visibility:hidden;
  transition:opacity var(--duration-normal) var(--ease-default), visibility var(--duration-normal) var(--ease-default);
  padding:var(--space-6);
}
.modal-overlay.active,.modal-overlay.show { opacity:1; visibility:visible; }
.modal {
  background:var(--color-bg-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-xl);
  width:100%; max-width:520px; max-height:85vh;
  display:flex; flex-direction:column;
  transform:scale(.95) translateY(10px); transition:transform var(--duration-normal) var(--ease-out);
}
.modal-overlay.active .modal,.modal-overlay.show .modal { transform:scale(1) translateY(0); }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-border);
}
.modal-header h3 { font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); }
.modal-close {
  display:flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:var(--radius-sm); cursor:pointer; color:var(--color-text-muted);
  transition:var(--transition-colors);
}
.modal-close:hover { background:var(--color-bg-hover); color:var(--color-text-primary); }
.modal-body { padding:var(--space-5); overflow-y:auto; flex:1; }
.modal-footer {
  display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2);
  padding:var(--space-4) var(--space-5); border-top:1px solid var(--color-border);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container,.tc-box {
  position:fixed; top:var(--space-4); right:var(--space-4);
  z-index:var(--z-toast); display:flex; flex-direction:column;
  gap:var(--space-2); pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); background:var(--color-bg-elevated);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); min-width:280px; max-width:420px;
  pointer-events:auto; animation:toastIn .3s var(--ease-out);
  font-size:var(--font-size-base); border-left:3px solid var(--color-text-muted);
}
.toast.removing { animation:toastOut .25s var(--ease-in) forwards; }
.toast .ti { font-size:16px; flex-shrink:0; }
.toast .tm { flex:1; color:var(--color-text-primary); }
.toast .tx { background:none; border:none; color:var(--color-text-muted); cursor:pointer; padding:2px; border-radius:var(--radius-sm); transition:var(--transition-colors); flex-shrink:0; }
.toast .tx:hover { color:var(--color-text-primary); }
.toast.success { border-left-color:var(--color-success); } .toast.success .ti { color:var(--color-success); }
.toast.error { border-left-color:var(--color-danger); } .toast.error .ti { color:var(--color-danger); }
.toast.info { border-left-color:var(--color-info); } .toast.info .ti { color:var(--color-info); }
.toast.warning { border-left-color:var(--color-warning); } .toast.warning .ti { color:var(--color-warning); }
.toast-success { border-left-color:var(--color-success); } .toast-success .ti { color:var(--color-success); }
.toast-error { border-left-color:var(--color-danger); } .toast-error .ti { color:var(--color-danger); }
.toast-info { border-left-color:var(--color-info); } .toast-info .ti { color:var(--color-info); }
.toast-warning { border-left-color:var(--color-warning); } .toast-warning .ti { color:var(--color-warning); }
@keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(40px)} }

/* ============================================================
   FORMS — Dark Enterprise
   ============================================================ */
.form-group { display:flex; flex-direction:column; gap:var(--space-1); }
.form-group label { font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--color-text-secondary); }
.form-control,.fi,.ft,.fs {
  width:100%; padding:var(--space-2) var(--space-3); background:var(--color-bg-base);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  color:var(--color-text-primary); font-size:var(--font-size-base);
  transition:var(--transition-colors);
}
.form-control:hover,.fi:hover,.ft:hover,.fs:hover { border-color:var(--color-border-hover); }
.form-control:focus,.fi:focus,.ft:focus,.fs:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-subtle); }
.form-control::placeholder,.fi::placeholder,.ft::placeholder { color:var(--color-text-muted); }
.form-control:disabled,.fi:disabled,.ft:disabled { opacity:.5; cursor:not-allowed; }
.ft { min-height:100px; resize:vertical; }
.fs {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8.5L1 3.5h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:36px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.toggle-switch { display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer; font-size:var(--font-size-base); color:var(--color-text-secondary); }
.toggle-switch input { display:none; }
.toggle-track {
  position:relative; width:36px; height:20px; background:var(--color-border);
  border-radius:var(--radius-full); transition:background var(--duration-normal) var(--ease-default); flex-shrink:0;
}
.toggle-track::after {
  content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
  background:#fff; border-radius:var(--radius-full); box-shadow:var(--shadow-sm);
  transition:transform var(--duration-normal) var(--ease-default);
}
.toggle-switch input:checked + .toggle-track { background:var(--color-primary); }
.toggle-switch input:checked + .toggle-track::after { transform:translateX(16px); }
.form-group label.toggle-switch { flex-direction:row-reverse; justify-content:space-between; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) 0; flex-wrap:wrap; }
.filter-bar input,.filter-bar select {
  padding:var(--space-2) var(--space-3); background:var(--color-bg-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  color:var(--color-text-primary); font-size:var(--font-size-base);
  transition:var(--transition-colors); min-width:140px; box-shadow:var(--shadow-xs);
}
.filter-bar input:focus,.filter-bar select:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-subtle); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination,.inbox-pagination { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-4); border-top:1px solid var(--color-border); }
.pagination-info,.inbox-pagination-info { font-size:var(--font-size-sm); color:var(--color-text-muted); }
.pagination-buttons,.inbox-pagination-btns { display:flex; gap:var(--space-1); }
.pagination-buttons button,.inbox-pagination-btns button {
  display:flex; align-items:center; justify-content:center; min-width:32px; height:32px;
  padding:0 var(--space-2); border-radius:var(--radius-md); font-size:var(--font-size-sm);
  font-weight:var(--font-weight-medium); color:var(--color-text-secondary);
  background:var(--color-bg-surface); border:1px solid var(--color-border);
  cursor:pointer; transition:var(--transition-all); box-shadow:var(--shadow-xs);
}
.pagination-buttons button:hover:not(:disabled),.inbox-pagination-btns button:hover:not(:disabled) {
  background:var(--color-bg-hover); color:var(--color-text-primary); border-color:var(--color-border-hover);
  transform:translateY(-1px); box-shadow:var(--shadow-sm);
}
.pagination-buttons button.active,.inbox-pagination-btns button.active {
  background:var(--color-primary); color:#fff; border-color:var(--color-primary);
}
.pagination-buttons button:disabled,.inbox-pagination-btns button:disabled { opacity:.4; cursor:not-allowed; }

/* ============================================================
   PANELS / CARDS
   ============================================================ */
.panel { background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-neumorphic); }
.panel-title,.panel-h {
  display:flex; align-items:center; gap:var(--space-2); padding:var(--space-4) var(--space-5);
  font-size:var(--font-size-md); font-weight:var(--font-weight-semibold);
  color:var(--color-text-primary); border-bottom:1px solid var(--color-border);
}
.panel-title i,.panel-h i { color:var(--color-text-muted); }

/* ============================================================
   SEARCH BAR
   ============================================================ */
.search-bar {
  display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3);
  background:var(--color-bg-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); transition:var(--transition-colors); box-shadow:var(--shadow-xs);
}
.search-bar:focus-within { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-subtle); }
.search-bar i { color:var(--color-text-muted); font-size:14px; }
.search-bar input { border:none; background:none; color:var(--color-text-primary); font-size:var(--font-size-base); width:200px; outline:none; }
.search-bar input::placeholder { color:var(--color-text-muted); }

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notification-btn {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-md);
  color:var(--color-text-secondary); cursor:pointer; transition:var(--transition-all);
}
.notification-btn:hover { background:var(--color-bg-hover); color:var(--color-text-primary); transform:translateY(-1px); }
.notification-badge {
  position:absolute; top:4px; right:4px; width:8px; height:8px;
  background:var(--color-danger); border-radius:var(--radius-full); border:2px solid var(--color-bg-surface);
}
.notif-dropdown {
  position:absolute; top:calc(100% + 8px); right:0; width:340px; max-height:400px;
  background:var(--color-bg-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xl);
  z-index:var(--z-dropdown); display:flex; flex-direction:column; overflow:hidden;
}
.notif-dropdown-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); }
.notif-dropdown-list { overflow-y:auto; flex:1; }
.notif-empty { padding:var(--space-8) var(--space-4); text-align:center; color:var(--color-text-muted); font-size:var(--font-size-sm); }
.notif-item {
  display:flex; gap:var(--space-3); padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--color-border); cursor:pointer;
  transition:background var(--duration-fast) var(--ease-default); position:relative;
}
.notif-item:hover { background:var(--color-bg-hover); }
.notif-item.unread { background:var(--color-primary-subtle); }
.notif-item.unread::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--color-primary); }
.notif-icon { width:32px; height:32px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
.notif-icon.info { background:var(--color-info-subtle); color:var(--color-info); }
.notif-icon.success { background:var(--color-success-subtle); color:var(--color-success); }
.notif-icon.warning { background:var(--color-warning-subtle); color:var(--color-warning); }
.notif-icon.error { background:var(--color-danger-subtle); color:var(--color-danger); }
.notif-body { flex:1; min-width:0; }
.notif-title { font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); }
.notif-message { font-size:var(--font-size-xs); color:var(--color-text-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notif-time { font-size:var(--font-size-xs); color:var(--color-text-muted); margin-top:2px; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); font-size:var(--font-size-base); border:1px solid transparent; }
.alert-success { background:var(--color-success-subtle); color:var(--color-success-text); border-color:rgba(16,185,129,.15); }
.alert-danger { background:var(--color-danger-subtle); color:var(--color-danger-text); border-color:rgba(239,68,68,.15); }
.alert-warning { background:var(--color-warning-subtle); color:var(--color-warning-text); border-color:rgba(245,158,11,.15); }
.alert-info { background:var(--color-info-subtle); color:var(--color-text-primary); border-color:rgba(59,130,246,.15); }

/* ============================================================
   TABS
   ============================================================ */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--color-border); margin-bottom:var(--space-5); }
.tab-btn {
  flex:1; padding:var(--space-3) var(--space-4); font-size:var(--font-size-base);
  font-weight:var(--font-weight-medium); color:var(--color-text-muted);
  cursor:pointer; transition:var(--transition-colors); position:relative;
  text-align:center; background:none; border:none;
}
.tab-btn::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px;
  background:var(--color-primary); transform:scaleX(0);
  transition:transform var(--duration-normal) var(--ease-default);
}
.tab-btn:hover { color:var(--color-text-secondary); }
.tab-btn.active { color:var(--color-primary); }
.tab-btn.active::after { transform:scaleX(1); }
.tab-btn:focus-visible { outline:2px solid var(--color-primary); outline-offset:-2px; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.tab-content { display:none; }
.tab-content.active { display:block; animation:fadeIn var(--duration-normal) var(--ease-out); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ============================================================
   LOADING STATES
   ============================================================ */
.page-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--space-10); color:var(--color-text-muted); gap:var(--space-3); font-size:var(--font-size-sm); }
.spin { width:24px; height:24px; border:2.5px solid var(--color-border); border-top-color:var(--color-primary); border-radius:var(--radius-full); animation:spin .7s linear infinite; }
.es { display:flex; flex-direction:column; align-items:center; padding:var(--space-10) var(--space-4); text-align:center; }
.es-i { width:56px; height:56px; border-radius:var(--radius-full); background:var(--color-bg-hover); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--color-text-muted); margin-bottom:var(--space-4); }
.es-t { font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); color:var(--color-text-primary); margin-bottom:var(--space-1); }
.es-d { font-size:var(--font-size-sm); color:var(--color-text-muted); max-width:280px; }

/* ============================================================
   CONFIRM DIALOG
   ============================================================ */
.confirm-dialog { text-align:center; padding:var(--space-6); }
.confirm-dialog i { font-size:40px; color:var(--color-warning); margin-bottom:var(--space-4); }
.confirm-dialog p { font-size:var(--font-size-md); margin-bottom:var(--space-2); }
.confirm-dialog .confirm-subtext { font-size:var(--font-size-sm); color:var(--color-text-muted); }

/* ============================================================
   QUICK ACTIONS
   ============================================================ */
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.quick-action-btn {
  display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3);
  background:var(--color-bg-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); color:var(--color-text-secondary);
  font-size:var(--font-size-sm); font-weight:var(--font-weight-medium);
  cursor:pointer; transition:var(--transition-all); box-shadow:var(--shadow-xs);
}
.quick-action-btn:hover { background:var(--color-primary-subtle); color:var(--color-primary); border-color:rgba(76,110,245,.20); transform:translateY(-1px); box-shadow:var(--shadow-sm); }

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); }
.stat-card { background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4); transition:var(--transition-all); box-shadow:var(--shadow-neumorphic); }
.stat-card:hover { border-color:var(--color-border-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.stat-card-icon { width:36px; height:36px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:15px; }
.stat-card-icon.purple { background:var(--color-purple-subtle); color:var(--color-purple); }
.stat-card-icon.yellow { background:var(--color-warning-subtle); color:var(--color-warning); }
.stat-card-icon.blue { background:var(--color-info-subtle); color:var(--color-info); }
.stat-card-icon.cyan { background:var(--color-cyan-subtle); color:var(--color-cyan); }
.stat-card-icon.green { background:var(--color-success-subtle); color:var(--color-success); }
.stat-card-icon.red { background:var(--color-danger-subtle); color:var(--color-danger); }
.stat-card-icon.pink { background:var(--color-pink-subtle); color:var(--color-pink); }
.stat-card-icon.orange { background:var(--color-warning-subtle); color:#f97316; }
.stat-trend { font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); padding:2px 6px; border-radius:var(--radius-sm); }
.stat-trend.up { color:var(--color-success); background:var(--color-success-subtle); }
.stat-trend.down { color:var(--color-danger); background:var(--color-danger-subtle); }
.stat-trend.neutral { color:var(--color-text-muted); background:var(--color-bg-hover); }
.stat-number { font-size:var(--font-size-3xl); font-weight:var(--font-weight-bold); color:var(--color-text-primary); line-height:var(--line-height-tight); }
.stat-label { font-size:var(--font-size-sm); color:var(--color-text-muted); margin-top:var(--space-1); }

/* ============================================================
   CHART CARD
   ============================================================ */
.chart-card { background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-neumorphic); }
.chart-card-title { padding:var(--space-4) var(--space-5); font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); border-bottom:1px solid var(--color-border); }
.chart-canvas-wrapper { padding:var(--space-4); max-height:300px; }
.chart-canvas-wrapper canvas { width:100% !important; height:100% !important; }
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }

/* ============================================================
   RANGE INPUT
   ============================================================ */
input[type="range"] { -webkit-appearance:none; width:100%; height:4px; background:var(--color-border); border-radius:var(--radius-full); outline:none; }
input[type="range"]:focus { background:var(--color-primary-subtle); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:var(--radius-full); background:var(--color-primary); cursor:pointer; transition:transform var(--duration-fast) var(--ease-default); box-shadow:var(--shadow-sm); }
input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.2); }
input[type="range"]::-moz-range-thumb { width:16px; height:16px; border-radius:var(--radius-full); background:var(--color-primary); cursor:pointer; border:none; box-shadow:var(--shadow-sm); }

/* ============================================================
   PERMISSIONS
   ============================================================ */
.perm-check-label {
  display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  cursor:pointer; font-size:var(--font-size-sm); transition:var(--transition-all);
}
.perm-check-label:hover { border-color:var(--color-border-hover); background:var(--color-bg-hover); }
.perm-check-label:has(input:checked) { border-color:var(--color-primary); background:var(--color-primary-subtle); color:var(--color-primary); }
.perm-check-label input[type="checkbox"] { display:none; }
.perm-badge { display:inline-flex; padding:2px 8px; font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); border-radius:var(--radius-full); background:var(--color-bg-hover); color:var(--color-text-secondary); }
.perm-badge-full { background:var(--color-primary-subtle); color:var(--color-primary); }
.perm-status-line { display:flex; align-items:center; gap:var(--space-2); font-size:var(--font-size-sm); padding:var(--space-1) 0; }
.perm-status-line .perm-ok { color:var(--color-success); }
.perm-status-line .perm-denied { color:var(--color-danger); }
.perm-role-row { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) 0; }
.perm-role-dot { width:8px; height:8px; border-radius:var(--radius-full); flex-shrink:0; }
.perm-role-check { color:var(--color-success); }
.perm-role-x { color:var(--color-danger); }

/* ============================================================
   MEDIA PREVIEW
   ============================================================ */
.media-preview { border-radius:var(--radius-md); overflow:hidden; }
.media-preview video,.media-preview audio { width:100%; max-height:300px; border-radius:var(--radius-md); }
.file-size-compare { display:flex; gap:var(--space-3); margin-top:var(--space-2); }
.file-size-box { padding:var(--space-3); background:var(--color-bg-hover); border-radius:var(--radius-md); text-align:center; }
.file-size-box .size-value { font-size:var(--font-size-lg); font-weight:var(--font-weight-bold); }
.file-size-box .size-label { font-size:var(--font-size-xs); color:var(--color-text-muted); }

/* ============================================================
   STAFF ACTION / HIERARCHY
   ============================================================ */
.staff-action-option { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); cursor:pointer; transition:var(--transition-all); }
.staff-action-option:hover { border-color:var(--color-primary); background:var(--color-primary-subtle); transform:translateY(-1px); }
.staff-action-option:active { cursor:pointer; transform:translateY(0); }
.staff-hierarchy-item { transition:var(--transition-all); }
.staff-hierarchy-item:hover { border-color:var(--color-primary); background:var(--color-primary-subtle); }
.staff-hierarchy-item:active { cursor:grabbing; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) { .stats-grid{grid-template-columns:repeat(2,1fr)} .charts-grid{grid-template-columns:1fr} }
@media (max-width:768px) {
  .sidebar{transform:translateX(-100%);z-index:var(--z-overlay)}
  .sidebar.mobile-open{transform:translateX(0)}
  .main-wrapper{margin-left:0 !important}
  .content{padding:var(--space-4)}
  .form-row{grid-template-columns:1fr}
  .topbar,.header{padding:0 var(--space-4)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .search-bar input{width:120px}
}
@media (max-width:480px) { .stats-grid{grid-template-columns:1fr} .quick-actions{grid-template-columns:1fr} }