/* Elevate Awards Admin Panel — admin.css */
:root {
  --navy:       #002050;
  --navy-deep:  #001040;
  --navy-soft:  #0A3060;
  --gold:       #C09020;
  --gold-light: #D4A830;
  --gold-pale:  #F0DC96;
  --white:      #FFFFFF;
  --gray-50:    #F8F7F4;
  --gray-100:   #F0EDE8;
  --gray-200:   #E2DDD6;
  --gray-400:   #9A9490;
  --gray-600:   #5C5854;
  --success:    #16A34A;
  --warning:    #D97706;
  --danger:     #DC2626;
  --info:       #0369A1;
  --body:       'Inter', system-ui, sans-serif;
  --mono:       'IBM Plex Mono', monospace;
  --sidebar-w:  260px;
  --topbar-h:   64px;
  --r:          10px;
  --shadow:     0 2px 12px rgba(0,32,80,.10);
  --shadow-md:  0 4px 24px rgba(0,32,80,.14);
}
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; }
body { font-family:var(--body); background:var(--gray-100); color:var(--navy); font-size:.93rem; line-height:1.6; }
a { color:var(--navy); text-decoration:none; }
img { max-width:100%; display:block; }
h1,h2,h3,h4 { margin:0; font-weight:600; line-height:1.2; }
p { margin:0 0 .8em; }

/* ── Layout ── */
.admin-wrap { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
  width:var(--sidebar-w); background:var(--navy-deep); color:rgba(255,255,255,.80);
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  display:flex; flex-direction:column; overflow-y:auto;
  transition:transform .3s ease;
}
.sidebar-brand {
  display:flex; align-items:center; gap:11px; padding:20px 22px;
  border-bottom:1px solid rgba(255,255,255,.10); flex-shrink:0;
}
.sidebar-brand img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(192,144,32,.50); }
.sidebar-brand .txt strong { display:block; font-size:.88rem; font-weight:600; color:#fff; }
.sidebar-brand .txt small  { display:block; font-family:var(--mono); font-size:.52rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); }

.sidebar-section { padding:18px 14px 8px; font-family:var(--mono); font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.35); }
.sidebar-nav { list-style:none; padding:0 10px; margin:0; }
.sidebar-nav li a {
  display:flex; align-items:center; gap:11px; padding:10px 14px; border-radius:8px;
  font-size:.86rem; color:rgba(255,255,255,.72); font-weight:500;
  transition:background .2s, color .2s;
}
.sidebar-nav li a:hover { background:rgba(255,255,255,.07); color:#fff; }
.sidebar-nav li a.active { background:var(--gold); color:var(--navy-deep); font-weight:600; }
.sidebar-nav li a.active .nav-icon { color:var(--navy-deep); }
.nav-icon { font-size:1rem; width:18px; text-align:center; flex-shrink:0; }
.sidebar-footer { margin-top:auto; padding:16px 20px; border-top:1px solid rgba(255,255,255,.10); font-size:.80rem; color:rgba(255,255,255,.45); }

/* Topbar */
.topbar {
  position:fixed; left:var(--sidebar-w); right:0; top:0; height:var(--topbar-h);
  background:var(--white); border-bottom:1px solid var(--gray-200);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; z-index:100; box-shadow:var(--shadow);
}
.topbar-left { display:flex; align-items:center; gap:12px; }
.topbar h1  { font-size:1.05rem; font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar-user { display:flex; align-items:center; gap:10px; font-size:.85rem; }
.topbar-user .avatar { width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; }

.sidebar-toggle { display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--navy); padding:6px; }

/* Main content */
.main-content { margin-left:var(--sidebar-w); margin-top:var(--topbar-h); padding:28px; min-height:calc(100vh - var(--topbar-h)); }

/* ── Cards ── */
.card { background:var(--white); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); border:1px solid var(--gray-200); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--gray-100); }
.card-header h2 { font-size:1rem; font-weight:600; }

/* Stat cards */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; }
.stat-card { background:var(--white); border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow); border:1px solid var(--gray-200); position:relative; overflow:hidden; }
.stat-card::before { content:""; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--gold); }
.stat-card .label { font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-400); margin-bottom:8px; }
.stat-card .value { font-size:1.9rem; font-weight:700; color:var(--navy); font-family:var(--mono); line-height:1; }
.stat-card .sub   { font-size:.78rem; color:var(--gray-400); margin-top:4px; }
.stat-card .icon  { position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:2rem; opacity:.12; }
.stat-card.gold::before   { background:var(--gold); }
.stat-card.green::before  { background:var(--success); }
.stat-card.blue::before   { background:var(--info); }
.stat-card.orange::before { background:var(--warning); }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:6px; font-size:.84rem; font-weight:600; border:1.5px solid transparent; cursor:pointer; transition:all .2s; text-decoration:none; white-space:nowrap; }
.btn-primary  { background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-primary:hover  { background:var(--navy-soft); }
.btn-gold     { background:var(--gold); color:var(--navy-deep); border-color:var(--gold); }
.btn-gold:hover     { background:var(--gold-light); }
.btn-success  { background:var(--success); color:#fff; border-color:var(--success); }
.btn-danger   { background:var(--danger);  color:#fff; border-color:var(--danger); }
.btn-warning  { background:var(--warning); color:#fff; border-color:var(--warning); }
.btn-outline  { background:transparent; border-color:var(--gray-200); color:var(--navy); }
.btn-outline:hover { border-color:var(--navy); }
.btn-sm { padding:5px 13px; font-size:.78rem; }
.btn-xs { padding:3px 10px; font-size:.72rem; }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:.72rem; font-weight:600; font-family:var(--mono); }
.badge-pending  { background:#FEF3C7; color:#92400E; }
.badge-approved { background:#D1FAE5; color:#065F46; }
.badge-rejected { background:#FEE2E2; color:#991B1B; }
.badge-confirmed{ background:#D1FAE5; color:#065F46; }
.badge-failed   { background:#FEE2E2; color:#991B1B; }
.badge-open     { background:#D1FAE5; color:#065F46; }
.badge-closed   { background:#FEE2E2; color:#991B1B; }
.badge-gold     { background:#FEF3C7; color:#92400E; }

/* ── Tables ── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
table th { font-family:var(--mono); font-size:.66rem; letter-spacing:.10em; text-transform:uppercase; color:var(--gray-400); padding:10px 14px; text-align:left; border-bottom:2px solid var(--gray-200); white-space:nowrap; }
table td { padding:11px 14px; border-bottom:1px solid var(--gray-100); font-size:.87rem; vertical-align:middle; }
table tr:last-child td { border-bottom:none; }
table tr:hover td { background:var(--gray-50); }
table .actions { display:flex; gap:6px; flex-wrap:wrap; }

/* ── Forms ── */
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.10em; text-transform:uppercase; color:var(--gray-600); margin-bottom:6px; }
.form-group .req { color:var(--gold); }
.form-control { width:100%; padding:10px 13px; border:1.5px solid var(--gray-200); border-radius:6px; font-size:.9rem; font-family:var(--body); background:var(--white); color:var(--navy); transition:border-color .2s; }
.form-control:focus { outline:none; border-color:var(--gold); }
textarea.form-control { min-height:100px; resize:vertical; }
select.form-control { 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='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%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:0 18px; }
.form-note { font-size:.78rem; color:var(--gray-400); margin-top:4px; }

/* ── Alerts ── */
.alert { padding:12px 16px; border-radius:var(--r); margin-bottom:18px; font-size:.88rem; border-left:4px solid; }
.alert-success { background:#D1FAE5; color:#065F46; border-color:var(--success); }
.alert-danger   { background:#FEE2E2; color:#991B1B; border-color:var(--danger); }
.alert-warning  { background:#FEF3C7; color:#92400E; border-color:var(--warning); }
.alert-info     { background:#E0F2FE; color:#075985; border-color:var(--info); }

/* ── Voting toggle ── */
.voting-status { display:flex; align-items:center; gap:16px; padding:20px 24px; border-radius:var(--r); border:2px solid; margin-bottom:24px; }
.voting-status.open   { background:#D1FAE5; border-color:var(--success); }
.voting-status.closed { background:#FEE2E2; border-color:var(--danger); }
.vote-toggle { width:56px; height:28px; border-radius:999px; border:none; cursor:pointer; position:relative; transition:background .25s; }
.vote-toggle::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:left .25s; }
.vote-toggle.on { background:var(--success); }
.vote-toggle.on::after { left:31px; }
.vote-toggle.off { background:var(--danger); }

/* ── Nominee photo ── */
.nominee-photo-thumb { width:50px; height:50px; border-radius:6px; object-fit:cover; border:1px solid var(--gray-200); }
.photo-placeholder { width:50px; height:50px; border-radius:6px; background:var(--gray-100); display:flex; align-items:center; justify-content:center; color:var(--gray-400); font-size:1.4rem; border:1px solid var(--gray-200); }

/* ── Progress bar ── */
.progress { height:8px; background:var(--gray-200); border-radius:999px; overflow:hidden; }
.progress-bar { height:100%; background:var(--gold); border-radius:999px; transition:width .4s ease; }

/* ── Vote share link ── */
.share-link { background:var(--gray-50); border:1.5px solid var(--gray-200); border-radius:8px; padding:12px 16px; display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.80rem; word-break:break-all; }
.share-link a { color:var(--navy); font-weight:600; flex:1; }
.copy-btn { background:var(--navy); color:#fff; border:none; border-radius:6px; padding:6px 12px; font-size:.78rem; cursor:pointer; white-space:nowrap; transition:background .2s; }
.copy-btn:hover { background:var(--navy-soft); }

/* ── Charts placeholder ── */
.chart-wrap { height:220px; display:flex; align-items:center; justify-content:center; background:var(--gray-50); border-radius:var(--r); border:1px dashed var(--gray-200); color:var(--gray-400); font-size:.84rem; }

/* ── Responsive ── */
@media(max-width:1024px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .topbar { left:0; }
  .main-content { margin-left:0; }
  .sidebar-toggle { display:block; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .main-content { padding:16px; }
}
