/* ============================================================
   HMP HOODMONEY — Styles
============================================================ */

:root {
  --bg: #1a1a2e;
  --bg2: #16213e;
  --surface: #1e2a45;
  --surface2: #243352;
  --border: #2d3f5e;
  --border2: #3a5082;
  --accent: #6c5ecf;
  --accent2: #8b7ee8;
  --accent-soft: rgba(108,94,207,0.15);
  --text: #e2e8f4;
  --text-muted: #8a9bc4;
  --text-dim: #4a5a7a;
  --green: #22c55e;
  --green-soft: rgba(34,197,94,0.12);
  --red: #ef4444;
  --red-soft: rgba(239,68,68,0.12);
  --yellow: #f59e0b;
  --yellow-soft: rgba(245,158,11,0.12);
  --radius: 6px;
  --font: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --nav-h: 52px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:var(--font); font-size:14px; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

/* ── LOGIN ── */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; background:linear-gradient(135deg,#0f0f23 0%,#1a1a3e 50%,#0d1b3e 100%); }
.login-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.login-grid { position:absolute; inset:-50%; background-image:linear-gradient(rgba(108,94,207,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(108,94,207,0.08) 1px,transparent 1px); background-size:40px 40px; animation:grid-drift 20s linear infinite; }
@keyframes grid-drift { 0%{transform:translate(0,0)} 100%{transform:translate(40px,40px)} }

.login-card { position:relative; width:400px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:40px; box-shadow:0 24px 80px rgba(0,0,0,0.6); animation:card-in 0.5s ease; }
@keyframes card-in { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.login-logo { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.logo-hmp { font-size:24px; font-weight:700; color:var(--accent2); letter-spacing:0.1em; }
.logo-hood { font-size:14px; font-weight:600; color:var(--text-muted); letter-spacing:0.15em; text-transform:uppercase; }
.login-subtitle { font-size:12px; color:var(--text-dim); margin-bottom:32px; }
.login-form { display:flex; flex-direction:column; gap:16px; }

.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; }

input, select, textarea {
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
  font-family:var(--font); font-size:14px; padding:9px 12px;
  border-radius:var(--radius); outline:none; transition:border-color 0.2s,box-shadow 0.2s; width:100%;
}
textarea { line-height:1.5; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(108,94,207,0.2); }
input::placeholder, textarea::placeholder { color:var(--text-dim); }
select { 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='%238a9bc4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:30px; cursor:pointer; }

.login-error { color:var(--red); font-size:13px; background:var(--red-soft); padding:8px 12px; border-radius:var(--radius); border:1px solid rgba(239,68,68,0.2); }
.login-error code { background:rgba(255,255,255,0.1); padding:1px 5px; border-radius:3px; font-family:var(--font-mono); }

.btn-login { width:100%; padding:11px; background:var(--accent); color:white; border:none; border-radius:var(--radius); font-family:var(--font); font-size:14px; font-weight:600; cursor:pointer; letter-spacing:0.04em; transition:all 0.2s; margin-top:4px; }
.btn-login:hover:not(:disabled) { background:var(--accent2); transform:translateY(-1px); box-shadow:0 6px 20px rgba(108,94,207,0.4); }
.btn-login:disabled { opacity:0.6; cursor:not-allowed; }

/* ── APP ── */
.app { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* ── NAV ── */
.topnav { height:var(--nav-h); background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 24px; flex-shrink:0; z-index:10; }
.topnav-left { display:flex; align-items:center; gap:32px; }
.nav-logo { display:flex; align-items:baseline; gap:6px; }
.nav-links { display:flex; gap:4px; }
.nav-link { padding:6px 14px; font-size:13px; font-weight:500; color:var(--text-muted); border-radius:var(--radius); cursor:pointer; transition:all 0.2s; user-select:none; }
.nav-link:hover { color:var(--text); background:var(--surface2); }
.nav-link.active { background:var(--accent-soft); color:var(--accent2); }
.topnav-right { display:flex; align-items:center; }
.nav-user { display:flex; align-items:center; gap:10px; }
.user-avatar { width:30px; height:30px; background:var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:white; }
.user-info { display:flex; flex-direction:column; line-height:1.2; }
.user-info span { font-size:13px; }
.user-role { font-size:10px !important; color:var(--text-dim); font-weight:600; letter-spacing:0.08em; }
.btn-logout { padding:5px 12px; background:none; border:1px solid var(--border); color:var(--text-muted); font-family:var(--font); font-size:12px; border-radius:var(--radius); cursor:pointer; transition:all 0.2s; }
.btn-logout:hover { border-color:var(--red); color:var(--red); }

/* ── PAGES ── */
.page { flex:1; overflow-y:auto; padding:24px 28px; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-title { font-size:20px; font-weight:700; letter-spacing:-0.01em; }
.btn-add { padding:8px 18px; background:var(--accent); color:white; border:none; border-radius:var(--radius); font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.btn-add:hover { background:var(--accent2); box-shadow:0 4px 14px rgba(108,94,207,0.4); transform:translateY(-1px); }

/* ── DASHBOARD ── */
.dash-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.dash-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:24px; transition:transform 0.2s; }
.dash-card:hover { transform:translateY(-2px); }
.dash-card-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:12px; }
.dash-card-val { font-size:36px; font-weight:700; font-family:var(--font-mono); }
.dash-card.pending .dash-card-val { color:var(--yellow); }
.dash-card.approved .dash-card-val { color:var(--green); }
.dash-card.declined .dash-card-val { color:var(--red); }
.dash-links { text-align:center; color:var(--text-muted); font-size:14px; }
.dash-links a { color:var(--accent2); cursor:pointer; }

/* ── FILTERS ── */
.filters-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:16px; }
.filter-group { display:flex; flex-direction:column; gap:5px; min-width:110px; }
.filter-group label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); }
.filter-group input, .filter-group select { padding:6px 10px; font-size:13px; }
.btn-clear-filter { padding:6px 14px; background:none; border:1px solid var(--border); color:var(--text-muted); font-family:var(--font); font-size:13px; border-radius:var(--radius); cursor:pointer; transition:all 0.2s; align-self:flex-end; }
.btn-clear-filter:hover { border-color:var(--accent); color:var(--accent2); }

/* ── TABLE ── */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table thead { background:var(--surface2); border-bottom:1px solid var(--border); }
.data-table th { padding:10px 14px; text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); white-space:nowrap; }
.data-table td { padding:10px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:rgba(255,255,255,0.03); }
.cell-id { font-family:var(--font-mono); font-size:12px; color:var(--text-dim); }
.cell-geo { font-weight:600; letter-spacing:0.05em; color:var(--accent2); }

.priority-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:0.04em; }
.priority-badge.Urgent { background:rgba(239,68,68,0.15); color:#f87171; border:1px solid rgba(239,68,68,0.3); }
.priority-badge.Normal { background:rgba(100,116,139,0.15); color:#94a3b8; border:1px solid rgba(100,116,139,0.25); }

.status-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; cursor:pointer; transition:all 0.2s; white-space:nowrap; border:1px solid transparent; }
.status-badge.Pending  { background:var(--yellow-soft); color:var(--yellow); border-color:rgba(245,158,11,0.25); }
.status-badge.Approved { background:var(--green-soft);  color:var(--green);  border-color:rgba(34,197,94,0.25); }
.status-badge.Declined { background:var(--red-soft);    color:var(--red);    border-color:rgba(239,68,68,0.25); }
.status-badge:hover { opacity:0.8; transform:scale(1.02); }

.role-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:0.06em; }
.role-badge.admin { background:var(--accent-soft); color:var(--accent2); border:1px solid rgba(108,94,207,0.3); }
.role-badge.user  { background:rgba(100,116,139,0.15); color:#94a3b8; border:1px solid rgba(100,116,139,0.25); }

.resolved-by { font-size:12px; color:var(--text-muted); font-style:italic; }
.actions-cell { display:flex; gap:6px; white-space:nowrap; }
.btn-action { padding:4px 10px; font-size:11px; font-weight:600; border-radius:4px; cursor:pointer; border:1px solid; font-family:var(--font); transition:all 0.15s; }
.btn-edit   { background:var(--accent-soft); border-color:rgba(108,94,207,0.3); color:var(--accent2); }
.btn-edit:hover { background:rgba(108,94,207,0.25); }
.btn-delete { background:var(--red-soft); border-color:rgba(239,68,68,0.25); color:var(--red); }
.btn-delete:hover { background:rgba(239,68,68,0.25); }
.empty-state { padding:48px; text-align:center; color:var(--text-dim); font-size:14px; }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-box { background:var(--surface); border:1px solid var(--border2); border-radius:10px; width:100%; max-width:600px; box-shadow:0 24px 80px rgba(0,0,0,0.7); animation:modal-in 0.2s ease; max-height:90vh; overflow-y:auto; }
@keyframes modal-in { from{opacity:0;transform:scale(0.96) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--border); }
.modal-header h2 { font-size:16px; font-weight:700; }
.modal-close { width:28px; height:28px; background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:4px; transition:all 0.2s; }
.modal-close:hover { background:var(--surface2); color:var(--text); }
.modal-body { padding:24px; }
.modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.full-width { grid-column:1/-1; }
.req { color:var(--red); }
.team-select-wrap { display:flex; gap:8px; }
.team-select-wrap select { flex:1; }
.btn-add-team { padding:0 12px; background:var(--accent-soft); border:1px solid rgba(108,94,207,0.3); color:var(--accent2); border-radius:var(--radius); font-family:var(--font); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all 0.2s; }
.btn-add-team:hover { background:rgba(108,94,207,0.25); }
.btn-save-team { padding:8px 14px; background:var(--accent); border:none; color:white; border-radius:var(--radius); font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; }
.modal-error { margin-top:12px; padding:8px 12px; background:var(--red-soft); border:1px solid rgba(239,68,68,0.2); border-radius:var(--radius); color:var(--red); font-size:13px; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--border); }
.btn-cancel { padding:8px 18px; background:none; border:1px solid var(--border); color:var(--text-muted); font-family:var(--font); font-size:13px; border-radius:var(--radius); cursor:pointer; transition:all 0.2s; }
.btn-cancel:hover { border-color:var(--border2); color:var(--text); }
.btn-save { padding:8px 20px; background:var(--accent); border:none; color:white; font-family:var(--font); font-size:13px; font-weight:600; border-radius:var(--radius); cursor:pointer; transition:all 0.2s; }
.btn-save:hover:not(:disabled) { background:var(--accent2); box-shadow:0 4px 14px rgba(108,94,207,0.4); }
.btn-save:disabled { opacity:0.6; cursor:not-allowed; }

/* ── VIEW MODAL ── */
.view-grid { display:flex; flex-direction:column; gap:0; margin-bottom:20px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.view-row { display:flex; align-items:flex-start; border-bottom:1px solid var(--border); }
.view-row:last-child { border-bottom:none; }
.view-label { width:120px; flex-shrink:0; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); padding:10px 14px; background:var(--surface2); }
.view-val { flex:1; padding:10px 14px; font-size:13px; color:var(--text); }
.view-notes-section { margin-top:4px; }
.view-notes-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; font-size:13px; color:var(--text-muted); line-height:1.6; min-height:60px; white-space:pre-wrap; word-break:break-word; }

/* ── STATUS MODAL ── */
.status-options { display:flex; flex-direction:column; gap:8px; }
.status-opt { width:100%; padding:11px 16px; border-radius:var(--radius); font-family:var(--font); font-size:14px; font-weight:500; cursor:pointer; text-align:left; border:1px solid; transition:all 0.2s; }
.status-opt.pending  { background:var(--yellow-soft); border-color:rgba(245,158,11,0.25); color:var(--yellow); }
.status-opt.approved { background:var(--green-soft);  border-color:rgba(34,197,94,0.25); color:var(--green); }
.status-opt.declined { background:var(--red-soft);    border-color:rgba(239,68,68,0.2);  color:var(--red); }
.status-opt:hover { transform:translateX(4px); filter:brightness(1.1); }

/* ── STATS ── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:20px; display:flex; gap:16px; align-items:center; transition:transform 0.2s; }
.stat-card:hover { transform:translateY(-2px); }
.stat-icon { font-size:28px; }
.stat-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:6px; }
.stat-num { font-size:32px; font-weight:700; font-family:var(--font-mono); line-height:1; margin-bottom:4px; }
.stat-pct { font-size:13px; color:var(--text-muted); }
.stat-card.pending  .stat-num { color:var(--yellow); }
.stat-card.approved .stat-num { color:var(--green); }
.stat-card.declined .stat-num { color:var(--red); }
.stat-card.total    .stat-num { color:var(--accent2); }

.stats-bars-section, .stats-by-team, .stats-by-geo { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:20px 24px; margin-bottom:16px; }
.section-title { font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; }
.stats-bars { display:flex; flex-direction:column; gap:14px; }
.bar-row { display:flex; align-items:center; gap:12px; }
.bar-label { width:90px; font-size:13px; color:var(--text-muted); font-weight:500; }
.bar-track { flex:1; height:10px; background:var(--surface2); border-radius:5px; overflow:hidden; }
.bar-fill { height:100%; border-radius:5px; transition:width 0.6s ease; }
.bar-fill.pending  { background:var(--yellow); }
.bar-fill.approved { background:var(--green); }
.bar-fill.declined { background:var(--red); }
.bar-pct { width:40px; font-size:13px; font-family:var(--font-mono); text-align:right; }

.mini-table { width:100%; border-collapse:collapse; font-size:13px; }
.mini-table th { text-align:left; padding:6px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); border-bottom:1px solid var(--border); }
.mini-table td { padding:8px 12px; border-bottom:1px solid var(--border); }
.mini-table tbody tr:last-child td { border-bottom:none; }
.mini-table tbody tr:hover { background:rgba(255,255,255,0.02); }

/* ── TOAST ── */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface2); border:1px solid var(--border2); border-radius:24px; padding:10px 20px; font-size:13px; color:var(--text); opacity:0; transition:all 0.3s; z-index:200; white-space:nowrap; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error { background:var(--red-soft); border-color:rgba(239,68,68,0.3); color:var(--red); }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .stats-grid, .dash-cards { grid-template-columns:repeat(2,1fr); }
  .modal-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .page { padding:16px; }
  .topnav { padding:0 16px; }
  .nav-links { display:none; }
  .dash-cards { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
}