/* =========================================================
   Business Card Manager — Master Stylesheet
   Modern Dark UI · Glassmorphism · Award-level Design
   ========================================================= */

/* ─── Custom Properties ─────────────────────────────────── */
:root {
  --bg:            #060a14;
  --bg-2:          #0c1220;
  --bg-3:          #111826;
  --surface:       rgba(255,255,255,0.042);
  --surface-hov:   rgba(255,255,255,0.072);
  --surface-act:   rgba(99,102,241,0.12);
  --border:        rgba(255,255,255,0.07);
  --border-bright: rgba(255,255,255,0.14);

  --accent:        #6366f1;
  --accent-2:      #818cf8;
  --accent-glow:   rgba(99,102,241,0.35);
  --purple:        #a855f7;
  --pink:          #ec4899;
  --cyan:          #06b6d4;

  --text:          #f1f5f9;
  --text-2:        #94a3b8;
  --text-3:        #475569;

  --success:       #10b981;
  --warning:       #f59e0b;
  --danger:        #ef4444;
  --info:          #3b82f6;

  /* card-type palette */
  --c-visitor:     #3b82f6;
  --c-exhibitor:   #10b981;
  --c-speaker:     #f59e0b;
  --c-press:       #ef4444;
  --c-vip:         #f59e0b;
  --c-other:       #64748b;

  --sidebar-w:     240px;
  --topbar-h:      64px;
  --radius:        14px;
  --radius-sm:     8px;
  --radius-lg:     20px;
  --shadow:        0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg:     0 12px 48px rgba(0,0,0,0.6);
  --transition:    0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.6;
}
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
input,select,textarea { font-family:inherit; }
svg { display:block; flex-shrink:0; }
img { display:block; max-width:100%; }

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.2); }

/* ─── Background Orbs ────────────────────────────────────── */
.bg-orb {
  position:fixed;
  border-radius:50%;
  filter:blur(120px);
  opacity:0.18;
  pointer-events:none;
  z-index:0;
  animation:orbFloat 20s ease-in-out infinite alternate;
}
.orb-1 { width:600px; height:600px; background:radial-gradient(circle,#6366f1,transparent); top:-100px; left:-100px; animation-delay:0s; }
.orb-2 { width:500px; height:500px; background:radial-gradient(circle,#a855f7,transparent); bottom:0; right:-50px; animation-delay:-7s; }
.orb-3 { width:400px; height:400px; background:radial-gradient(circle,#06b6d4,transparent); top:40%; left:50%; transform:translateX(-50%); animation-delay:-14s; }

@keyframes orbFloat {
  from { transform:translate(0,0) scale(1); }
  to   { transform:translate(40px,30px) scale(1.1); }
}

/* ─── App Shell ──────────────────────────────────────────── */
#app {
  display:flex;
  min-height:100vh;
  position:relative;
  z-index:1;
}

/* ─── Sidebar ────────────────────────────────────────────── */
#sidebar {
  width:var(--sidebar-w);
  height:100vh;
  position:fixed;
  top:0; left:0;
  background:rgba(10,14,30,0.85);
  backdrop-filter:blur(24px);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:0;
  transition:transform var(--transition), width var(--transition);
  z-index:100;
  overflow:hidden;
}
#sidebar.collapsed { transform:translateX(-100%); }

.sidebar-logo {
  display:flex;
  align-items:center;
  gap:12px;
  padding:24px 20px;
  border-bottom:1px solid var(--border);
}
.logo-icon {
  width:40px; height:40px;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  flex-shrink:0;
  box-shadow:0 0 20px var(--accent-glow);
}
.logo-icon svg { width:22px; height:22px; }
.logo-title { font-size:1.05rem; font-weight:700; background:linear-gradient(135deg,#fff,var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.logo-sub { font-size:0.68rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.08em; }

.sidebar-nav {
  flex:1;
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow-y:auto;
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  color:var(--text-2);
  font-size:0.875rem;
  font-weight:500;
  position:relative;
  transition:background var(--transition), color var(--transition);
  cursor:pointer;
}
.nav-item:hover { background:var(--surface-hov); color:var(--text); }
.nav-item.active { background:var(--surface-act); color:var(--accent-2); }
.nav-icon { width:20px; height:20px; flex-shrink:0; }
.nav-icon svg { width:20px; height:20px; }
.nav-label { flex:1; white-space:nowrap; }
.nav-badge {
  font-size:0.7rem;
  font-weight:600;
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  padding:1px 7px;
  min-width:22px;
  text-align:center;
}
.nav-indicator {
  width:3px; height:20px;
  background:var(--accent);
  border-radius:999px;
  position:absolute;
  right:-12px;
  opacity:0;
  transition:opacity var(--transition);
}
.nav-item.active .nav-indicator { opacity:1; }

.sidebar-footer {
  padding:16px 20px;
  border-top:1px solid var(--border);
}
.sidebar-version { font-size:0.72rem; color:var(--text-3); }

/* ─── Main Content ───────────────────────────────────────── */
#main {
  margin-left:var(--sidebar-w);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:margin-left var(--transition);
}
#main.expanded { margin-left:0; }

/* ─── Topbar ─────────────────────────────────────────────── */
#topbar {
  height:var(--topbar-h);
  background:rgba(10,14,30,0.75);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  gap:16px;
}
.topbar-left { display:flex; align-items:center; gap:14px; }
.topbar-right { display:flex; align-items:center; gap:10px; }

.sidebar-toggle {
  width:36px; height:36px;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-2);
  transition:background var(--transition), color var(--transition);
}
.sidebar-toggle svg { width:20px; height:20px; }
.sidebar-toggle:hover { background:var(--surface-hov); color:var(--text); }

.page-breadcrumb {
  font-size:0.9rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
}

.global-search-wrap {
  position:relative;
  display:flex;
  align-items:center;
}
.global-search-wrap .search-icon { position:absolute; left:10px; width:16px; height:16px; color:var(--text-3); pointer-events:none; }
#globalSearch {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  padding:8px 32px 8px 34px;
  width:240px;
  font-size:0.85rem;
  transition:border-color var(--transition), box-shadow var(--transition), width var(--transition);
  outline:none;
}
#globalSearch:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
  width:300px;
}
#globalSearch::placeholder { color:var(--text-3); }
.search-clear {
  position:absolute;
  right:8px;
  color:var(--text-3);
  font-size:0.75rem;
  line-height:1;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--transition);
}
.global-search-wrap.has-value .search-clear { opacity:1; pointer-events:all; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 18px;
  border-radius:var(--radius-sm);
  font-size:0.855rem;
  font-weight:600;
  transition:all var(--transition);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(255,255,255,0.08),transparent);
  opacity:0;
  transition:opacity var(--transition);
}
.btn:hover::after { opacity:1; }
.btn-sm { padding:7px 14px; font-size:0.8rem; }
.btn-lg { padding:12px 28px; font-size:0.95rem; }

.btn-primary {
  background:linear-gradient(135deg,var(--accent),var(--purple));
  color:#fff;
  box-shadow:0 4px 16px var(--accent-glow);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 24px var(--accent-glow); }
.btn-primary:active { transform:translateY(0); }

.btn-outline {
  background:transparent;
  border:1px solid var(--border-bright);
  color:var(--text-2);
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent-2); background:var(--surface-act); }

.btn-ghost {
  background:var(--surface);
  color:var(--text-2);
  border:1px solid var(--border);
}
.btn-ghost:hover { background:var(--surface-hov); color:var(--text); }

.btn-danger {
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;
  box-shadow:0 4px 16px rgba(239,68,68,0.3);
}
.btn-danger:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(239,68,68,0.4); }

.btn-link { background:none; border:none; color:var(--accent-2); font-size:0.83rem; font-weight:500; padding:0; cursor:pointer; }
.btn-link:hover { text-decoration:underline; }

/* Ripple effect */
.btn { isolation:isolate; }
.ripple {
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  transform:scale(0);
  animation:ripple 0.55s linear;
  pointer-events:none;
}
@keyframes ripple { to { transform:scale(4); opacity:0; } }

/* ─── Page Sections ──────────────────────────────────────── */
.page-section {
  padding:28px;
  display:none;
  flex-direction:column;
  gap:24px;
  animation:fadeInUp 0.35s ease both;
  flex:1;
}
.page-section.active { display:flex; }

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

.section-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.section-title {
  font-size:1.65rem;
  font-weight:800;
  background:linear-gradient(135deg,var(--text),var(--accent-2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.02em;
  line-height:1.2;
}
.section-subtitle { font-size:0.85rem; color:var(--text-2); margin-top:4px; }
.header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ─── Dashboard – Stats Grid ─────────────────────────────── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:16px;
}
.stat-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
  cursor:default;
  position:relative;
  overflow:hidden;
}
.stat-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.03),transparent);
  pointer-events:none;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border-bright); background:var(--surface-hov); }

.stat-icon {
  width:44px; height:44px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.stat-icon svg { width:22px; height:22px; }
.stat-icon--total    { background:linear-gradient(135deg,rgba(99,102,241,0.25),rgba(99,102,241,0.1)); color:var(--accent-2); }
.stat-icon--visitor  { background:linear-gradient(135deg,rgba(59,130,246,0.25),rgba(59,130,246,0.1)); color:#60a5fa; }
.stat-icon--exhibitor{ background:linear-gradient(135deg,rgba(16,185,129,0.25),rgba(16,185,129,0.1)); color:#34d399; }
.stat-icon--speaker  { background:linear-gradient(135deg,rgba(245,158,11,0.25),rgba(245,158,11,0.1)); color:#fbbf24; }
.stat-icon--vip      { background:linear-gradient(135deg,rgba(245,158,11,0.3),rgba(245,158,11,0.1));  color:#fcd34d; }
.stat-icon--month    { background:linear-gradient(135deg,rgba(236,72,153,0.25),rgba(236,72,153,0.1)); color:#f472b6; }

.stat-value {
  font-size:2.1rem;
  font-weight:800;
  font-family:'JetBrains Mono',monospace;
  color:var(--text);
  letter-spacing:-0.03em;
  line-height:1;
}
.stat-label { font-size:0.78rem; color:var(--text-2); font-weight:500; }

/* ─── Dashboard – Row ────────────────────────────────────── */
.dash-row {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:20px;
}
.dash-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.dash-card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px 12px;
  border-bottom:1px solid var(--border);
}
.dash-card-header h3 { font-size:0.9rem; font-weight:600; color:var(--text); }

/* ─── Donut Chart ────────────────────────────────────────── */
.chart-wrap {
  display:flex;
  align-items:center;
  gap:28px;
  padding:24px;
  flex-wrap:wrap;
}
canvas#donutChart { flex-shrink:0; }
.chart-legend { display:flex; flex-direction:column; gap:8px; }
.legend-item {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.8rem;
  color:var(--text-2);
}
.legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.legend-val { font-weight:700; color:var(--text); margin-left:auto; font-variant-numeric:tabular-nums; }

/* ─── Recent List ────────────────────────────────────────── */
.recent-list { display:flex; flex-direction:column; padding:8px 0; overflow-y:auto; max-height:360px; }
.recent-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 20px;
  cursor:pointer;
  transition:background var(--transition);
  border-radius:0;
}
.recent-item:hover { background:var(--surface-hov); }
.recent-avatar {
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  font-size:0.85rem;
  flex-shrink:0;
  color:#fff;
}
.recent-info { flex:1; min-width:0; }
.recent-name { font-size:0.875rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-meta { font-size:0.76rem; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-badge { flex-shrink:0; }

/* Skeleton loader */
.skeleton-list { padding:8px 20px; display:flex; flex-direction:column; gap:12px; }
.skeleton-item {
  height:42px;
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface-hov) 50%,var(--surface) 75%);
  background-size:200% 100%;
  border-radius:var(--radius-sm);
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer { to { background-position:-200% 0; } }

/* ─── Filters Bar ────────────────────────────────────────── */
.filters-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.filter-group { display:flex; gap:8px; flex-wrap:wrap; }
.filter-select {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-2);
  padding:7px 28px 7px 12px;
  font-size:0.82rem;
  font-weight:500;
  cursor:pointer;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  transition:border-color var(--transition), background-color var(--transition);
}
.filter-select:focus, .filter-select:hover { border-color:var(--accent); color:var(--text); }
.filter-select option { background:#1a1d2e; color:var(--text); }
.filter-right { display:flex; align-items:center; gap:8px; }

/* ─── View Toggle ────────────────────────────────────────── */
.view-toggle {
  display:flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.view-btn {
  padding:7px 10px;
  color:var(--text-3);
  transition:background var(--transition), color var(--transition);
}
.view-btn:hover { background:var(--surface-hov); color:var(--text-2); }
.view-btn.active { background:var(--surface-act); color:var(--accent-2); }

/* ─── Table ──────────────────────────────────────────────── */
.table-container {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  overflow-x:auto;
}
.cards-table {
  width:100%;
  border-collapse:collapse;
  font-size:0.84rem;
}
.cards-table thead { background:rgba(255,255,255,0.03); }
.cards-table th {
  padding:12px 16px;
  text-align:left;
  font-size:0.74rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-3);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.cards-table th.sortable { cursor:pointer; user-select:none; }
.cards-table th.sortable:hover { color:var(--text-2); }
.sort-icon { font-size:0.85em; opacity:0.5; margin-left:3px; }
.th-check { width:40px; }
.th-actions { width:110px; }

.cards-table tbody tr {
  border-bottom:1px solid var(--border);
  transition:background var(--transition);
  animation:rowIn 0.3s ease both;
}
@keyframes rowIn { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
.cards-table tbody tr:last-child { border-bottom:none; }
.cards-table tbody tr:hover { background:var(--surface-hov); cursor:pointer; }
.cards-table tbody tr.selected { background:var(--surface-act); }

.cards-table td {
  padding:13px 16px;
  vertical-align:middle;
  color:var(--text-2);
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cards-table td.td-name { color:var(--text); font-weight:600; }
.cards-table td.td-email a { color:var(--accent-2); }
.cards-table td.td-email a:hover { text-decoration:underline; }

.td-actions {
  display:flex;
  gap:6px;
  opacity:0;
  transition:opacity var(--transition);
}
tr:hover .td-actions { opacity:1; }
.action-btn {
  width:30px; height:30px;
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3);
  transition:background var(--transition), color var(--transition);
}
.action-btn svg { width:14px; height:14px; }
.action-btn:hover { background:var(--surface-hov); color:var(--text); }
.action-btn.delete:hover { background:rgba(239,68,68,0.15); color:var(--danger); }

.table-empty { text-align:center; padding:60px !important; color:var(--text-3); }
.table-empty-icon { font-size:3rem; margin-bottom:12px; }

/* ─── Checkbox ───────────────────────────────────────────── */
.checkbox {
  appearance:none;
  width:16px; height:16px;
  border:1.5px solid var(--border-bright);
  border-radius:4px;
  cursor:pointer;
  position:relative;
  transition:background var(--transition), border-color var(--transition);
  flex-shrink:0;
}
.checkbox:checked { background:var(--accent); border-color:var(--accent); }
.checkbox:checked::after {
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ─── Badges ─────────────────────────────────────────────── */
.badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 9px;
  border-radius:999px;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.03em;
  white-space:nowrap;
}
.badge-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

.badge-Visitor  { background:rgba(59,130,246,0.15);  color:#60a5fa; }
.badge-Exhibitor{ background:rgba(16,185,129,0.15);  color:#34d399; }
.badge-Speaker  { background:rgba(245,158,11,0.15);  color:#fbbf24; }
.badge-Press    { background:rgba(239,68,68,0.15);   color:#f87171; }
.badge-VIP      { background:rgba(245,158,11,0.2);   color:#fcd34d; box-shadow:0 0 8px rgba(245,158,11,0.3); }
.badge-Other    { background:rgba(100,116,139,0.15); color:#94a3b8; }

/* ─── Grid View ──────────────────────────────────────────── */
.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.grid-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  animation:fadeInUp 0.35s ease both;
}
.grid-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--border-bright); }
.grid-card-header {
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  position:relative;
  overflow:hidden;
}
.grid-card-header::before {
  content:'';
  position:absolute;
  inset:0;
  opacity:0.12;
}
.grid-avatar {
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  font-size:1.1rem;
  color:#fff;
  border:2px solid rgba(255,255,255,0.2);
  position:relative;
  z-index:1;
}
.grid-badge { position:relative; z-index:1; }
.grid-card-body { padding:16px 20px 20px; }
.grid-name { font-size:0.95rem; font-weight:700; color:var(--text); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grid-role { font-size:0.78rem; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:12px; }
.grid-detail { display:flex; align-items:center; gap:7px; font-size:0.78rem; color:var(--text-3); margin-bottom:4px; }
.grid-detail svg { width:13px; height:13px; flex-shrink:0; color:var(--text-3); }
.grid-detail span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grid-card-footer {
  padding:10px 20px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:flex-end;
  gap:6px;
  opacity:0;
  transition:opacity var(--transition);
}
.grid-card:hover .grid-card-footer { opacity:1; }

/* ─── Pagination ─────────────────────────────────────────── */
.pagination-bar {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.page-info { font-size:0.82rem; color:var(--text-2); margin-right:8px; }
.page-btn {
  width:34px; height:34px;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:0.82rem;
  font-weight:600;
  color:var(--text-2);
  background:var(--surface);
  border:1px solid var(--border);
  transition:all var(--transition);
}
.page-btn:hover { border-color:var(--accent); color:var(--accent-2); background:var(--surface-act); }
.page-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.page-btn:disabled { opacity:0.35; pointer-events:none; }

/* ─── Form ───────────────────────────────────────────────── */
.card-form { display:flex; flex-direction:column; gap:20px; }
.form-grid { display:flex; flex-direction:column; gap:18px; }

.form-block {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color var(--transition);
}
.form-block:focus-within { border-color:rgba(99,102,241,0.35); }

.form-block-header {
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.02);
}
.form-block-icon {
  width:32px; height:32px;
  background:var(--surface-act);
  border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-2);
}
.form-block-icon svg { width:16px; height:16px; }
.form-block-header h3 { font-size:0.88rem; font-weight:600; color:var(--text); }

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:16px 20px;
}
.form-row + .form-row { padding-top:0; }
.form-row--four { grid-template-columns:repeat(4,1fr); }
.form-field--wide { grid-column:1 / -1; }

.form-field { display:flex; flex-direction:column; gap:6px; }
.field-label {
  font-size:0.78rem;
  font-weight:600;
  color:var(--text-2);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.field-label.required::after { content:' *'; color:var(--danger); }

.form-control {
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  padding:9px 13px;
  font-size:0.875rem;
  transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
  outline:none;
  width:100%;
}
.form-control:hover { border-color:var(--border-bright); }
.form-control:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
  background:rgba(99,102,241,0.06);
}
.form-control::placeholder { color:var(--text-3); }
.form-control.error { border-color:var(--danger); }
.form-control option { background:#1a1d2e; }

.form-textarea { resize:vertical; min-height:80px; line-height:1.6; }
.char-count { font-size:0.72rem; color:var(--text-3); text-align:right; margin-top:-2px; }

.field-error { font-size:0.75rem; color:var(--danger); min-height:16px; }
.field-error:first-of-type:empty { display:none; }
/* Warning style (email non-blocking) */
.form-control.error { border-color:var(--warning) !important; }
.form-control.error + .field-error { color:var(--warning); }

.form-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:4px;
}

/* ─── Import / Export ────────────────────────────────────── */
.io-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.io-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.io-card h3 { font-size:1.05rem; font-weight:700; color:var(--text); }
.io-card p { font-size:0.85rem; color:var(--text-2); line-height:1.6; }
.io-card-icon {
  width:52px; height:52px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.io-card-icon svg { width:26px; height:26px; }
.io-card-icon--export { background:linear-gradient(135deg,rgba(16,185,129,0.2),rgba(16,185,129,0.08)); color:#34d399; }
.io-card-icon--import { background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(99,102,241,0.08)); color:var(--accent-2); }
.io-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Drop Zone */
.drop-zone {
  border:2px dashed var(--border-bright);
  border-radius:var(--radius);
  padding:32px;
  text-align:center;
  transition:border-color var(--transition), background var(--transition);
  cursor:pointer;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color:var(--accent);
  background:var(--surface-act);
}
.drop-zone-inner svg { margin:0 auto 12px; color:var(--text-3); }
.drop-zone-inner p { font-size:0.88rem; color:var(--text-2); }
.drop-hint { font-size:0.75rem; color:var(--text-3); display:block; margin-top:4px; }

.import-option-row { display:flex; gap:20px; align-items:center; }
.radio-label { display:flex; align-items:center; gap:7px; font-size:0.85rem; color:var(--text-2); cursor:pointer; }
.radio-label input[type=radio] {
  accent-color:var(--accent);
  width:15px; height:15px;
}

/* ─── Modals ─────────────────────────────────────────────── */
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(6,10,20,0.75);
  backdrop-filter:blur(8px);
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--transition);
}
.modal-overlay.open {
  opacity:1;
  pointer-events:all;
}
.modal {
  background:var(--bg-2);
  border:1px solid var(--border-bright);
  border-radius:var(--radius-lg);
  position:relative;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-lg);
  transform:scale(0.95) translateY(12px);
  transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  width:100%;
}
.modal-overlay.open .modal { transform:scale(1) translateY(0); }
.modal--detail { max-width:600px; }
.modal--wide   { max-width:860px; }
.modal--confirm{ max-width:400px; padding:32px; text-align:center; }

.modal-close {
  position:absolute;
  top:16px; right:16px;
  width:32px; height:32px;
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition), color var(--transition);
  z-index:1;
}
.modal-close:hover { background:var(--surface-hov); color:var(--text); }

.modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px 16px;
  border-bottom:1px solid var(--border);
}
.modal-header h3 { font-size:1rem; font-weight:700; color:var(--text); }

.modal-body { padding:24px; overflow-y:auto; }
.modal-footer {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 24px;
  border-top:1px solid var(--border);
}

/* Card Detail Body */
.detail-hero {
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px;
  border-bottom:1px solid var(--border);
}
.detail-avatar {
  width:64px; height:64px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.4rem; color:#fff;
  flex-shrink:0;
}
.detail-name { font-size:1.3rem; font-weight:700; color:var(--text); }
.detail-role { font-size:0.88rem; color:var(--text-2); }
.detail-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.detail-field {
  padding:14px 24px;
  border-bottom:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.detail-field:nth-child(odd) { border-right:1px solid var(--border); }
.detail-field-label { font-size:0.72rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
.detail-field-value { font-size:0.875rem; color:var(--text-2); word-break:break-word; }
.detail-field-value a { color:var(--accent-2); }
.detail-field-value a:hover { text-decoration:underline; }
.detail-field-value.empty { color:var(--text-3); font-style:italic; }
.detail-notes { padding:16px 24px; }
.detail-notes-label { font-size:0.72rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; margin-bottom:8px; }
.detail-notes-text { font-size:0.875rem; color:var(--text-2); line-height:1.7; white-space:pre-wrap; }

/* Confirm Modal */
.confirm-icon {
  width:60px; height:60px;
  background:rgba(239,68,68,0.12);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
  color:var(--danger);
}
.confirm-icon svg { width:28px; height:28px; }
#confirmTitle { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:8px; }
#confirmMessage { font-size:0.875rem; color:var(--text-2); margin-bottom:24px; }

/* Import Preview */
.import-summary { font-size:0.88rem; color:var(--text-2); margin-bottom:12px; }
.preview-table-wrap { overflow-x:auto; max-height:360px; overflow-y:auto; }
.preview-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.preview-table th {
  padding:8px 12px;
  text-align:left;
  font-size:0.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-3);
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  position:sticky; top:0;
}
.preview-table td {
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  color:var(--text-2);
  white-space:nowrap;
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ─── Toast ──────────────────────────────────────────────── */
#toastContainer {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:500;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.toast {
  min-width:280px;
  max-width:400px;
  background:var(--bg-3);
  border:1px solid var(--border-bright);
  border-radius:var(--radius-sm);
  padding:14px 18px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  box-shadow:var(--shadow-lg);
  pointer-events:all;
  animation:toastIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
  position:relative;
  overflow:hidden;
}
.toast.removing { animation:toastOut 0.3s ease forwards; }
@keyframes toastIn  { from { opacity:0; transform:translateX(60px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { to   { opacity:0; transform:translateX(60px); max-height:0; margin-bottom:-8px; padding:0 18px; } }

.toast::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
}
.toast-success::before { background:var(--success); }
.toast-error::before   { background:var(--danger); }
.toast-info::before    { background:var(--info); }
.toast-warning::before { background:var(--warning); }

.toast-icon { width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.toast-success .toast-icon { color:var(--success); }
.toast-error   .toast-icon { color:var(--danger); }
.toast-info    .toast-icon { color:var(--info); }
.toast-warning .toast-icon { color:var(--warning); }

.toast-content { flex:1; min-width:0; }
.toast-title { font-size:0.875rem; font-weight:600; color:var(--text); }
.toast-msg   { font-size:0.8rem; color:var(--text-2); margin-top:2px; }

/* ─── Loading Overlay ────────────────────────────────────── */
.loading-overlay {
  position:fixed;
  inset:0;
  background:rgba(6,10,20,0.7);
  backdrop-filter:blur(4px);
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.loading-spinner {
  width:44px; height:44px;
  border:3px solid var(--border-bright);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── Scan Card Section ──────────────────────────────────── */
.nav-scan-item { position:relative; }
.nav-pill {
  font-size:0.62rem;
  font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  color:#fff;
  border-radius:999px;
  padding:1px 6px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  animation:pillPulse 2.5s ease-in-out infinite;
}
@keyframes pillPulse { 0%,100%{box-shadow:0 0 0 0 var(--accent-glow)} 50%{box-shadow:0 0 0 5px transparent} }

.stat-icon--photo { background:linear-gradient(135deg,rgba(6,182,212,0.25),rgba(6,182,212,0.08)); color:#22d3ee; }

/* ── Step containers ── */
.scan-step { width:100%; }

/* ── Upload / Drop Zone ── */
.scan-drop-zone {
  border:2px dashed var(--border-bright);
  border-radius:var(--radius-lg);
  background:var(--surface);
  cursor:pointer;
  transition:border-color var(--transition), background var(--transition), transform var(--transition);
  min-height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.scan-drop-zone:hover, .scan-drop-zone.drag-over {
  border-color:var(--accent);
  background:var(--surface-act);
  transform:scale(1.005);
}
.scan-zone-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:40px 20px;
  text-align:center;
}
.scan-zone-icon { color:var(--text-3); transition:color var(--transition), transform var(--transition); }
.scan-drop-zone:hover .scan-zone-icon { color:var(--accent-2); transform:scale(1.08); }
.scan-zone-title { font-size:1.35rem; font-weight:700; color:var(--text); }
.scan-zone-sub   { font-size:0.85rem; color:var(--text-3); margin-top:-4px; }
.scan-action-btns { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.scan-manual-hint { font-size:0.82rem; color:var(--text-3); margin-top:6px; }

/* ── Two-column result layout ── */
.scan-result-layout {
  display:grid;
  grid-template-columns:340px 1fr;
  gap:24px;
  align-items:start;
}

/* ── Left column: image ── */
.scan-img-col { display:flex; flex-direction:column; gap:12px; position:sticky; top:calc(var(--topbar-h) + 16px); }
.scan-img-frame {
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-3);
  border:1px solid var(--border);
  aspect-ratio:1.6/1;
}
.scan-card-photo {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.ocr-status-overlay {
  position:absolute;
  inset:0;
  background:rgba(6,10,20,0.82);
  backdrop-filter:blur(4px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  transition:opacity 0.4s ease;
}
.ocr-status-overlay.hidden { opacity:0; pointer-events:none; }
.ocr-spin-ring {
  width:48px; height:48px;
  border:3px solid rgba(99,102,241,0.25);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.9s linear infinite;
}
#ocrStatusText { font-size:0.88rem; color:var(--text-2); font-weight:500; }

.scan-img-meta { display:flex; flex-direction:column; gap:8px; }
.ocr-confidence {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:0.8rem;
  color:var(--text-2);
}
.ocr-confidence-bar {
  flex:1;
  height:4px;
  background:var(--border);
  border-radius:999px;
  overflow:hidden;
}
.ocr-confidence-fill { height:100%; border-radius:999px; transition:width 0.8s ease; }

.ocr-raw-text {
  background:var(--bg-3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px;
  font-size:0.72rem;
  font-family:'JetBrains Mono',monospace;
  color:var(--text-2);
  white-space:pre-wrap;
  max-height:200px;
  overflow-y:auto;
  line-height:1.6;
  animation:fadeInUp 0.3s ease;
}

/* ── Right column: form ── */
.scan-form-col {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.scan-extracted-banner {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  background:linear-gradient(135deg,rgba(99,102,241,0.12),rgba(168,85,247,0.08));
  border-bottom:1px solid var(--border);
  font-size:0.82rem;
  color:var(--accent-2);
  font-weight:500;
}
.compact-form { padding:0; }
.compact-grid { display:flex; flex-direction:column; gap:0; }
.compact-row-1, .compact-row-2, .compact-row-4 {
  display:grid;
  gap:14px;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
}
.compact-row-1 { grid-template-columns:1fr; }
.compact-row-2 { grid-template-columns:1fr 1fr; }
.compact-row-4 { grid-template-columns:repeat(4,1fr); }
.compact-form .form-actions {
  padding:16px 20px;
  background:rgba(255,255,255,0.02);
  border-top:1px solid var(--border);
}

/* ── Compact form controls ── */
.compact-form .form-control {
  padding:8px 12px;
  font-size:0.84rem;
}
.compact-form .field-label {
  font-size:0.72rem;
  margin-bottom:4px;
}
.compact-form .form-textarea { min-height:60px; }

/* ── Table photo thumbnail ── */
.th-photo { width:44px; }
.td-photo { padding:6px 8px !important; }
.card-thumb {
  width:36px; height:24px;
  border-radius:4px;
  object-fit:cover;
  border:1px solid var(--border);
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition);
}
.card-thumb:hover { transform:scale(2.5); box-shadow:var(--shadow-lg); z-index:10; position:relative; }
.photo-icon {
  width:24px; height:24px;
  color:var(--text-3);
  opacity:0.3;
}

/* ── Grid card with photo ── */
.grid-card-photo-bg {
  position:absolute;
  inset:0;
  object-fit:cover;
  width:100%;
  height:100%;
  opacity:0.18;
  filter:blur(2px);
}

/* ── Detail modal photo ── */
.detail-photo-wrap {
  padding:20px 24px 0;
}
.detail-card-photo {
  width:100%;
  max-height:240px;
  object-fit:contain;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-3);
  cursor:zoom-in;
  transition:transform var(--transition);
}
.detail-card-photo:hover { transform:scale(1.02); }

/* ── Utility ── */
.w-full { width:100%; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .dash-row { grid-template-columns:1fr; }
  .form-row--four { grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --sidebar-w: 220px; }
  .io-grid { grid-template-columns:1fr; }
  .detail-fields { grid-template-columns:1fr; }
  .detail-field:nth-child(odd) { border-right:none; }
  .scan-result-layout { grid-template-columns:1fr; }
  .scan-img-col { position:static; }
  .scan-img-frame { aspect-ratio:auto; max-height:260px; }
  .compact-row-4 { grid-template-columns:1fr 1fr; }
}
@media (max-width: 700px) {
  #sidebar { transform:translateX(-100%); }
  #sidebar.mobile-open { transform:translateX(0); }
  #main { margin-left:0; }
  .page-section { padding:16px; }
  #topbar { padding:0 16px; }
  #globalSearch { width:160px; }
  #globalSearch:focus { width:200px; }
  .form-row { grid-template-columns:1fr; }
  .form-row--four { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns:1fr; }
  .cards-grid { grid-template-columns:1fr; }
}