/* admin.css */

#admin-login, #admin-panel {
  padding: 2rem;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

form#addCandidateForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

form#addCandidateForm input,
form#addCandidateForm select,
form#addCandidateForm textarea,
form#addCandidateForm button {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

form#addCandidateForm button {
  grid-column: 1 / -1;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

form#addCandidateForm button:hover {
  background-color: #0056b3;
}

#adminCandidates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

#adminCandidates .profile-card {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 8px;
  background: #fafafa;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#adminCandidates .profile-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 0.5rem;
}

#adminCandidates .profile-card button {
  display: inline-block;
  margin: 0.2rem;
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}

#adminCandidates .editBtn {
  background-color: #28a745;
  color: white;
}

#adminCandidates .deleteBtn {
  background-color: #dc3545;
  color: white;
}

/* ─── action card grid ───────────────────────────── */
.member-action-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem;
  margin-block:1rem 2rem;
}
.action-card{
  background:#fafafa;
  border:1px solid #ddd;
  border-radius:10px;
  padding:1rem;
  text-align:center;
  cursor:pointer;
  transition:.2s transform,.2s box-shadow;
}
.action-card:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.action-card img{
  width:48px;
  height:48px;
  margin-bottom:.5rem;
}

/* ─── panes (bulk or single) ─────────────────────── */
.member-pane{
  margin-top:1rem;
}
.backBtn{
  background:none;
  border:none;
  color:#007bff;
  cursor:pointer;
  font-size:.9rem;
  margin-bottom:1rem;
  padding:0;
}

/* ─── loader spinner ─────────────────────────────── */
.loader{
  width:32px;
  height:32px;
  border:4px solid #007bff30;
  border-top-color:#007bff;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-top:1rem;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* wider button so it looks good on mobile */
#uploadExcelBtn{
  margin-top:.5rem;
  width:100%;
}

/* status text */
.status{
  margin-top:.5rem;
  font-size:.9rem;
}
.status.success{color:#28a745;}
.status.error{color:#dc3545;}

#postSection {
  background: #f9f9f9;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#postSection h3 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  color: #1a237e;
}

#addPostForm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin-bottom: 2rem;
}

#addPostForm input,
#addPostForm textarea {
  padding: 0.8rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: border 0.3s ease;
}

#addPostForm input:focus,
#addPostForm textarea:focus {
  border-color: #1a73e8;
  outline: none;
}

#addPostForm button {
  align-self: flex-start;
  padding: 0.6rem 1.5rem;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#addPostForm button:hover {
  background-color: #0d47a1;
}

#adminPosts {
  display: grid;
  gap: 1rem;
  max-width: 700px;
}

.post-card {
  background: white;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.post-card h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #263238;
}

.post-card p {
  margin: 0 0 0.5rem;
  color: #455a64;
}

.post-card button {
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  background-color: #c62828;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.post-card button:hover {
  background-color: #b71c1c;
}

/* =========================================
   Admin UI — polished look
   ========================================= */
   :root{
    --brand:#0a4a96;
    --brand-600:#0a4a96;
    --brand-500:#1766d1;
    --brand-400:#3c86e5;
    --ink:#0f172a;
    --muted:#475569;
    --line:#e7eef6;
    --bg:#f6f9fe;
    --card:#ffffff;
    --danger:#dc3545;
    --success:#28a745;
    --warning:#f59e0b;
    --radius:18px;
    --radius-sm:12px;
    --shadow:0 12px 32px rgba(10,70,150,.08);
    --shadow-sm:0 6px 18px rgba(10,70,150,.06);
  }
  
  body { background: var(--bg); }
  
  /* --- Page containers --- */
  .admin-container{
    max-width:1200px;
    margin:2rem auto 3rem;
    padding:0 1rem;
  }
  .page-title{
    font-size:clamp(2rem,3.2vw,2.6rem);
    color:var(--brand-600);
    margin:0 0 1rem;
  }
  
  /* --- Auth card (login) --- */
  .auth-card{
    max-width:420px; margin:3.5rem auto;
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow);
    padding:2rem;
  }
  .auth-card h2{ margin:0 0 1rem; color:var(--brand-600); }
  .auth-card input{
    width:100%; padding:.8rem 1rem; border-radius:12px;
    border:1px solid var(--line); background:#fff; font-size:1rem;
    margin-bottom:.9rem;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:.5rem; border:none; border-radius:12px; cursor:pointer;
    font-weight:600; padding:.75rem 1.25rem;
    transition:.2s transform,.2s box-shadow,.2s background;
  }
  .btn:active{ transform:translateY(1px); }
  .btn.primary{ background:var(--brand-500); color:#fff; box-shadow:var(--shadow-sm); }
  .btn.primary:hover{ background:var(--brand-600); }
  .btn.ghost{ background:#fff; color:var(--brand-600); border:1px solid var(--line); }
  .btn.danger{ background:var(--danger); color:#fff; }
  
  /* --- Dashboard header tabs --- */
  .section-tabs{
    display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0 1.5rem;
  }
  .section-tabs .tab{
    padding:.6rem 1rem; border-radius:12px; border:1px solid var(--line);
    background:#fff; color:var(--ink); cursor:pointer; font-weight:600;
  }
  .section-tabs .tab[aria-selected="true"]{
    background:var(--brand-600); color:#fff; border-color:var(--brand-600);
  }
  
  /* --- Cards --- */
  .panel-card{
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:1.5rem;
  }
  .section-title{
    margin:0 0 1rem; color:var(--brand-600); font-size:1.6rem;
  }
  
  /* --- Action grid for Member Management --- */
  .member-action-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1rem; margin:0 0 2rem;
  }
  .action-card{
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:1.25rem; text-align:center; cursor:pointer; user-select:none;
    box-shadow:var(--shadow-sm); transition:.2s transform,.2s box-shadow;
  }
  .action-card:hover{
    transform:translateY(-4px); box-shadow:var(--shadow);
  }
  .action-card img{ width:56px; height:56px; margin-bottom:.6rem; }
  .action-card h4{ margin:.5rem 0; color:var(--brand-600); }
  
  /* --- Forms --- */
  .form-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
  }
  .form-grid input, .form-grid select, .form-grid textarea{
    width:100%; padding:.8rem 1rem; border:1px solid var(--line);
    border-radius:12px; background:#fff; font-size:1rem;
  }
  .form-grid textarea{ min-height:140px; resize:vertical; }
  .form-grid .full{ grid-column:1 / -1; }
  
  /* --- Candidate grid --- */
  #adminCandidates{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1rem; margin-top:1.25rem;
  }
  #adminCandidates .profile-card{
    background:#fff; border:1px solid var(--line); border-radius:16px;
    text-align:center; padding:1rem; box-shadow:var(--shadow-sm);
  }
  #adminCandidates .profile-card img{
    width:100%; height:200px; object-fit:cover; border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.06); margin-bottom:.6rem;
  }
  #adminCandidates .profile-card p{ margin:.25rem 0 .75rem; color:var(--muted); }
  #adminCandidates .profile-card .deleteBtn{ width:100%; }
  
  /* --- Bulk upload pane --- */
  .member-pane{ margin-top:1rem; }
  .backBtn{
    background:none; border:none; color:var(--brand-600); cursor:pointer;
    font-weight:600; margin-bottom:1rem;
  }
  #excelFileInput{
    border:1px solid var(--line); background:#fff; border-radius:12px;
    padding:.8rem 1rem; width:100%; max-width:520px; margin:.25rem 0 1rem;
  }
  #uploadExcelBtn{ width:100%; max-width:520px; }
  
  .loader{
    width:36px; height:36px; border:4px solid #cfe1f7; border-top-color:var(--brand-600);
    border-radius:50%; animation:spin 1s linear infinite; margin-top:1rem;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .status{ margin-top:.6rem; font-size:.95rem; }
  .status.success{ color:var(--success); }
  .status.error{ color:var(--danger); }
  
  /* --- Posts --- */
  #postSection.panel-card{ background:#f9fbff; }
  #addPostForm{ max-width:700px; display:flex; flex-direction:column; gap:1rem; }
  #adminPosts{ display:grid; gap:1rem; max-width:800px; }
  .post-card{
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:1rem;
    box-shadow:var(--shadow-sm);
  }
  .post-card h4{ margin:0 0 .5rem; color:var(--ink); }
  .post-card p{ margin:0 0 .75rem; color:var(--muted); }
  
  /* --- Modal (reusing matrimony.css visuals) --- */
  .hidden{ display:none !important; }
  
  /* --- Toast --- */
  .toast{
    position:fixed; right:20px; bottom:20px; z-index:9999;
    background:#111827; color:#fff; padding:.9rem 1.1rem; border-radius:12px;
    box-shadow:0 20px 40px rgba(0,0,0,.25); opacity:0; transform:translateY(8px);
    transition:opacity .2s, transform .2s;
  }
  .toast.show{ opacity:1; transform:translateY(0); }
  .toast.success{ background:#065f46; }
  .toast.error{ background:#7f1d1d; }
  
  /* --- Responsive tweaks --- */
  @media (max-width:860px){
    .form-grid{ grid-template-columns:1fr; }
  }
  .ticker{
    --dur: 22s;                  /* speed: lower = faster */
    background:#0A4A96;
    color:#fff;
    overflow:hidden;
    line-height:1;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .ticker__track{
    display:flex;
    width:max-content;           /* shrink-wrap content */
    gap:0;
    animation: ticker-slide var(--dur) linear infinite;
  }
  .ticker__item{
    flex:0 0 auto;               /* prevent shrinking */
    white-space:nowrap;
    padding-block:10px;
    font-size:1rem;
    font-weight:700;
    letter-spacing:.3px;
    padding-right:2rem;          /* space between repeats */
  }
  @keyframes ticker-slide{
    from{ transform: translateX(0); }
    to  { transform: translateX(-50%); } /* move by half (because we duplicated content) */
  }
  
  /* pause on hover */
  .ticker:hover .ticker__track{ animation-play-state: paused; }
  
  /* reduced motion */
  @media (prefers-reduced-motion: reduce){
    .ticker__track{ animation:none; transform:none; }
  }