/* ==========================================================================
   UEMP — Admin dashboard (dark sidebar, light workspace)
   ========================================================================== */

:root{
  --uemp-primary:#0d6efd;
  --uemp-secondary:#198754;
  --uemp-accent:#fd7e14;
  --uemp-side:#151d2c;
  --uemp-side-2:#1d2740;
  --uemp-side-text:#aab6cc;
  --uemp-bg:#f4f6fa;
  --uemp-line:#e5e9f0;
}

body{background:var(--uemp-bg);font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:#1f2733}

.uemp-shell{display:flex;min-height:100vh}

/* --------------------------------------------------------------- sidebar */
.uemp-sidebar{
  width:262px;flex:0 0 262px;background:var(--uemp-side);color:var(--uemp-side-text);
  position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:1045;
}
.uemp-sidebar-brand{
  display:flex;align-items:center;gap:.6rem;padding:1rem 1.15rem;color:#fff;font-weight:700;
  font-size:1.15rem;background:var(--uemp-side-2);position:sticky;top:0;z-index:2
}
.uemp-nav{list-style:none;margin:0;padding:.5rem 0 3rem}
.uemp-nav-heading{
  padding:1rem 1.15rem .35rem;font-size:.7rem;letter-spacing:1.4px;text-transform:uppercase;color:#5f6c85
}
.uemp-nav-link{
  display:flex;align-items:center;gap:.7rem;padding:.62rem 1.15rem;color:var(--uemp-side-text);
  text-decoration:none;font-size:.94rem;border-left:3px solid transparent
}
.uemp-nav-link i{width:20px;text-align:center;font-size:1rem}
.uemp-nav-link:hover{background:rgba(255,255,255,.05);color:#fff}
.uemp-nav-link.active{background:rgba(13,110,253,.16);color:#fff;border-left-color:var(--uemp-primary)}
.uemp-sidebar-backdrop{display:none}

.uemp-main{flex:1;margin-left:262px;min-width:0;display:flex;flex-direction:column}
.uemp-content{padding:1.25rem;flex:1}

/* ---------------------------------------------------------------- topbar */
.uemp-adminbar{
  display:flex;align-items:center;gap:.5rem;background:#fff;border-bottom:1px solid var(--uemp-line);
  padding:.6rem 1.25rem;position:sticky;top:0;z-index:1030
}
.uemp-event-select{min-width:190px;max-width:280px}
.uemp-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--uemp-primary);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700
}

/* ------------------------------------------------------------- kpi cards */
.uemp-kpi{
  background:#fff;border:1px solid var(--uemp-line);border-left:4px solid var(--uemp-primary);
  border-radius:12px;padding:.9rem 1rem;height:100%;box-shadow:0 1px 3px rgba(16,24,40,.05)
}
.uemp-kpi .num{font-size:1.85rem;font-weight:800;line-height:1.1}
.uemp-kpi .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:#6c757d;font-weight:600}
.uemp-kpi.k-green{border-left-color:#198754}
.uemp-kpi.k-amber{border-left-color:#ffc107}
.uemp-kpi.k-red{border-left-color:#dc3545}
.uemp-kpi.k-teal{border-left-color:#0dcaf0}
.uemp-kpi.k-purple{border-left-color:#6f42c1}

.uemp-panel{background:#fff;border:1px solid var(--uemp-line);border-radius:12px;padding:1rem;height:100%}
.uemp-panel h2{font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#6c757d;margin-bottom:.85rem}

/* --------------------------------------------------------- data tables */
table.dataTable tbody td{vertical-align:middle;white-space:nowrap}
table.dataTable tbody td.uemp-wrap{white-space:normal}
.uemp-table-panel{padding:.75rem}
/* Keep the grid compact: rows stay short and the header/pager stay close to
   the data instead of leaving a tall empty panel. */
.uemp-table-panel table.dataTable tbody td,
.uemp-table-panel table.dataTable thead th{padding:.45rem .5rem;font-size:.88rem}
.uemp-table-panel .dt-layout-row{margin:.35rem 0}
.uemp-table-panel div.dt-container div.dt-length select{width:auto;display:inline-block}
.dataTables_wrapper .row{margin:0}
div.dt-container .dt-paging .pagination{margin-bottom:0}
.dt-scroll-body{min-height:0 !important}
.uemp-thumb{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#eef1f6}
.uemp-thumb-fallback{
  width:38px;height:38px;border-radius:8px;background:#e9edf5;color:#7a869a;
  display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700
}

/* ------------------------------------------------------------- auth page */
.uemp-auth-body{background:linear-gradient(135deg,#151d2c,#1d2740);min-height:100vh}
.uemp-auth-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 20px 45px rgba(0,0,0,.35)}
.uemp-auth-logo{
  width:56px;height:56px;border-radius:14px;background:var(--uemp-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 1rem
}

/* ------------------------------------------------------------ venue mode */
.uemp-venue-body{background:#0e1520;color:#e8edf5;min-height:100vh}
.uemp-venue-header{
  display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;background:var(--uemp-primary);color:#fff;
  position:sticky;top:0;z-index:20
}
.uemp-venue-main{padding:1rem;max-width:640px;margin:0 auto}
#uempReader{border-radius:14px;overflow:hidden;background:#000;min-height:220px}
.uemp-result{border-radius:16px;padding:1.1rem;margin-top:1rem}
.uemp-result.ok{background:#0f5132;border:2px solid #198754}
.uemp-result.bad{background:#58151c;border:2px solid #dc3545}
.uemp-result.warn{background:#664d03;border:2px solid #ffc107}
.uemp-result h3{font-size:1.5rem;font-weight:800;margin:0 0 .5rem}
.uemp-result-photo{width:84px;height:84px;border-radius:12px;object-fit:cover;background:#223}
.uemp-venue-counters{display:flex;gap:.5rem;margin-top:1rem}
.uemp-venue-counters div{
  flex:1;background:#16202f;border:1px solid #24334a;border-radius:12px;text-align:center;padding:.6rem .3rem
}
.uemp-venue-counters .n{font-size:1.35rem;font-weight:800;color:#fff}
.uemp-venue-counters .l{font-size:.68rem;text-transform:uppercase;letter-spacing:1px;color:#8ea0bd}
.uemp-btn-xl{font-size:1.15rem;font-weight:700;padding:1rem;border-radius:14px;width:100%}
.uemp-offline-badge{position:fixed;left:12px;bottom:12px;z-index:50}

/* ------------------------------------------------------------ responsive */
@media (max-width: 991.98px){
  .uemp-sidebar{transform:translateX(-100%);transition:transform .2s ease}
  .uemp-sidebar.open{transform:translateX(0)}
  .uemp-main{margin-left:0}
  .uemp-sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1040}
}
@media print{
  .uemp-sidebar,.uemp-adminbar,.btn,.uemp-sidebar-backdrop{display:none !important}
  .uemp-main{margin:0}
  body{background:#fff}
}