/* =========================================================
   MA² SECURITY — Premium Upload / Verification UI (2025)
   Works with your existing HTML + JS (no class changes).
   ========================================================= */

:root{
  /* Brand */
  --ma2-navy: #0e1a2b;         /* deep header/nav tone */
  --ma2-ink:  #0f172a;         /* primary text */
  --ma2-gold: #c6a35e;         /* MA² accent */
  --ma2-gold-200:#f4ead4;      /* soft gold tint */
  --ma2-steel:#1f2a37;         /* muted navy text */
  --ma2-muted:#6b7280;
  --ma2-bg:#f7f8fb;            /* page background */
  --ma2-card:#ffffff;

  /* States */
  --ma2-success:#16a34a;
  --ma2-danger:#dc2626;
  --ma2-info:#2563eb;

  /* UI */
  --ma2-radius:14px;
  --ma2-shadow:0 10px 30px rgba(14,26,43,.08);
  --ma2-transition: all .25s cubic-bezier(.22,.61,.36,1);
}

/* Page baseline */
body{
  background:var(--ma2-bg);
  color:var(--ma2-ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}

/* Card housing the whole module (your existing wrapper) */
.ma2-upload-card{
  max-width:1080px;
  margin:48px auto;
  background:var(--ma2-card);
  border-radius:calc(var(--ma2-radius) + 2px);
  box-shadow:var(--ma2-shadow);
  padding:34px 28px;
  border:1px solid rgba(14,26,43,.06);
}

/* Header */
.ma2-upload-card > h2{
  font-size:28px;
  line-height:1.15;
  margin:0 0 6px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--ma2-ink);
}
.ma2-user-info{
  color:var(--ma2-muted);
  font-size:15px;
  margin-bottom:22px;
}

/* Grid of document blocks */
.ma2-doc-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:22px;
}

/* Each document block */
.ma2-doc{
  grid-column:span 12;
  background:linear-gradient(180deg,#fff, #fff);
  border:1px solid rgba(14,26,43,.06);
  border-radius:var(--ma2-radius);
  padding:20px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:var(--ma2-transition);
  position:relative;
  overflow:hidden;
}
.ma2-doc:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(14,26,43,.08);
  border-color:rgba(14,26,43,.10);
}
/* subtle top border accent */
.ma2-doc::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--ma2-gold),#e0c991 60%, transparent 100%);
  opacity:.7;
}

/* Head row */
.ma2-doc-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:4px;
}
.ma2-doc-head strong{
  font-weight:700; font-size:16px; color:var(--ma2-ink);
}

/* Status badges (keep your class names) */
.ma2-badge{
  font-size:12px; font-weight:600;
  padding:5px 10px; border-radius:999px; text-transform:capitalize;
  border:1px solid transparent;
}
.status-verified{ background:#dcfce7; color:var(--ma2-success); border-color:#bbf7d0;}
.status-pending{ background:#e6efff; color:var(--ma2-info); border-color:#c7d2fe;}
.status-rejected{ background:#fee2e2; color:var(--ma2-danger); border-color:#fecaca;}
.status-deleted,.status-none{ background:#eef2f7; color:#475569; border-color:#e2e8f0;}

/* Rejection reason */
.ma2-reason{
  background:#fff7ed; color:#7c3e0a;
  border:1px solid #fde68a; border-left-width:4px;
  padding:10px 12px; border-radius:10px; font-size:13px;
}

/* Inputs + actions (keep your classes unchanged) */
.ma2-file{
  width:100%;
  border:2px dashed #d6dae1;
  background:#fbfdff;
  color:var(--ma2-steel);
  padding:12px 12px;
  border-radius:10px;
  transition:var(--ma2-transition);
}
.ma2-file:hover:not(:disabled){ border-color:#b0b8c6;}
.ma2-file:focus{ outline:none; border-color:var(--ma2-info); background:#fff;}
.ma2-file:disabled{ opacity:.6; cursor:not-allowed;}

/* Primary button */
.ma2-upload-btn{
  align-self:flex-start;
  margin-top:10px;
  background:linear-gradient(180deg,var(--ma2-navy), #0b1424);
  color:#fff; border:none; border-radius:10px;
  padding:10px 16px; font-weight:700; font-size:14px;
  letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(14,26,43,.18);
  transition:var(--ma2-transition);
}
.ma2-upload-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(14,26,43,.22);
}
.ma2-upload-btn:disabled{ opacity:.55; cursor:not-allowed;}

/* Secondary (destructive) button */
.ma2-delete-btn{
  align-self:flex-start;
  background:#fff3f3; color:var(--ma2-danger);
  border:1px solid #fecaca;
  border-radius:10px; padding:8px 14px; font-weight:600; font-size:13px;
  margin-top:10px; transition:var(--ma2-transition);
}
.ma2-delete-btn:hover{ background:#ffe9e9;}
.ma2-delete-btn.loading{ opacity:.7; cursor:wait;}

/* Inline status labels under buttons */
.status-label{
  display:inline-block; margin-top:10px;
  font-size:13px; padding:6px 10px; border-radius:999px;
  border:1px solid #f3e8a1; background:#fffbe6; color:#704f00;
}
.status-label.status-pending{ background:#eaf3ff; color:#0b3b91; border-color:#c6dcff; }
.status-label.deletion-requested{ background:#fff7cc; color:#7a5900; }

/* Progress (MUST KEEP these selectors for JS) */
.ma2-progress{
  margin-top:10px; height:7px; background:#e5e9f2;
  border-radius:999px; overflow:hidden;
}
.ma2-progress-bar{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--ma2-gold) 0%, #e7c785 50%, var(--ma2-navy) 100%);
  transition:width .35s ease; /* <- JS updates width; keep this */
}

/* Feedback message */
.ma2-msg{
  margin-top:22px; padding:12px 16px; border-radius:12px;
  font-size:14px; text-align:center; display:none;
  border:1px solid transparent;
}
.ma2-msg.success{ display:block; background:#dcfce7; color:#065f46; border-color:#bbf7d0;}
.ma2-msg.error{ display:block; background:#fee2e2; color:#7f1d1d; border-color:#fecaca;}

/* Bottom hint */
.ma2-hint{
  margin-top:26px; color:var(--ma2-muted); text-align:center; font-size:14px;
}
.ma2-green{ color:var(--ma2-success); }

/* Subtle entrance animation on each doc block */
.ma2-doc{
  opacity:0; transform:translateY(8px);
  animation:ma2-fade-in .5s ease forwards;
}
@keyframes ma2-fade-in{
  to{ opacity:1; transform:translateY(0); }
}

/* Responsive layout */
@media (min-width:640px){
  .ma2-doc{ grid-column:span 6; }
}
@media (min-width:1024px){
  .ma2-doc{ grid-column:span 4; }
}

/* Optional dark preference (keeps brand vibe) */
@media (prefers-color-scheme: dark){
  body{ background:#0b1220; color:#e8eef8; }
  .ma2-upload-card{ background:#121a2a; border-color:rgba(255,255,255,.06); }
  .ma2-user-info{ color:#9aa6bd; }
  .ma2-doc{
    background:linear-gradient(180deg,#121a2a,#0f1726);
    border-color:rgba(255,255,255,.06);
  }
  .ma2-file{ background:#0f1726; border-color:#2a3550; color:#c9d4ea; }
  .ma2-progress{ background:#1d2740; }
  .ma2-progress-bar{ background:linear-gradient(90deg,var(--ma2-gold) 0%, #e0c991 45%, #6ea8ff 100%); }
  .ma2-delete-btn{ background:#2a1320; border-color:#5b1f28; color:#ffb4b4; }
}