/* ===================================================
   Autoway — Admin dashboard styles (extends styles.css tokens)
=================================================== */

.admin-body { background: var(--bg-alt); }

/* Any element hidden via the `hidden` attribute must actually disappear —
   without this, a class below that sets its own `display` (e.g. .admin-login's
   display:flex) overrides the browser's default [hidden]{display:none} and
   the element stays visible even after JS sets el.hidden = true. This bit
   Autoway's own admin login: sign-in succeeded and the dashboard rendered,
   but the login card never went away because of exactly this. */
[hidden] { display: none !important; }

/* ---------- Login ---------- */
.admin-login{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:2rem;
}
.admin-login-card{
  width:100%; max-width:380px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2.2rem 2rem;
  text-align:center;
}
.admin-login-logo{ height:34px; margin:0 auto 1.4rem; }
.admin-login-card h1{ font-size:1.3rem; margin-bottom:.2em; }
.admin-login-sub{ font-size:.9rem; margin-bottom:1.6rem; }
.admin-login-card form{ text-align:left; }
.admin-back-link{ display:inline-block; margin-top:1.2rem; font-size:.85rem; color:var(--text-muted); }
.admin-back-link:hover{ color:var(--green-deep); }
.admin-toggle-row{ text-align:center; font-size:.85rem; margin:.9rem 0 0; }
.admin-toggle-row a{ color:var(--green-deep); font-weight:600; }

.btn-google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:.7rem 1rem; font-family:inherit; font-size:.92rem; font-weight:600; color:#3c4043;
  cursor:pointer;
}
.btn-google:hover{ background:#f7f8f8; }
.admin-divider{
  display:flex; align-items:center; gap:.8rem;
  margin:1.1rem 0; color:var(--text-muted); font-size:.78rem;
}
.admin-divider::before, .admin-divider::after{ content:''; flex:1; height:1px; background:var(--border); }

/* ---------- Header / Tabs ---------- */
.admin-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.admin-header-inner{
  max-width:1280px; margin:0 auto;
  padding:0 24px; height:68px;
  display:flex; align-items:center; gap:1rem;
}
.admin-title{ font-weight:700; color:var(--text-muted); font-size:.95rem; }
.admin-header-right{ margin-left:auto; display:flex; align-items:center; gap:1rem; }
.admin-user{ font-size:.85rem; color:var(--text-muted); }

.admin-tabs{
  max-width:1280px; margin:0 auto;
  padding:1rem 24px 0;
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.admin-tab{
  background:transparent;
  border:1px solid var(--border);
  border-bottom:none;
  padding:.65rem 1.1rem;
  border-radius:10px 10px 0 0;
  font-weight:600;
  font-size:.88rem;
  color:var(--text-muted);
  cursor:pointer;
  position:relative;
  top:1px;
}
.admin-tab.active{
  background:#fff;
  color:var(--green-deep);
  border-color:var(--border);
  border-bottom:1px solid #fff;
}
.tab-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 4px;
  background:var(--green); color:#1a2410;
  border-radius:999px; font-size:.68rem; font-weight:800;
  margin-left:.35rem;
}

.admin-main{
  max-width:1280px; margin:0 auto;
  padding:1.6rem 24px 4rem;
}
.tab-panel[hidden]{ display:none; }

.admin-panel-head{ margin-bottom:1.2rem; }
.admin-panel-head h2{ font-size:1.3rem; margin-bottom:.2em; }
.admin-panel-note{ font-size:.85rem; }
.admin-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

.admin-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem 1.6rem; box-shadow:var(--shadow-sm);
}

/* ---------- Table ---------- */
.admin-table-wrap{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  overflow-x:auto; box-shadow:var(--shadow-sm);
}
.admin-table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:720px; }
.admin-table th{
  text-align:left; padding:.8rem 1rem;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.admin-table td{ padding:.7rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table .thumb{
  width:44px; height:34px; border-radius:6px; overflow:hidden;
  background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.admin-table .thumb img{ width:100%; height:100%; object-fit:cover; }
.admin-table .row-actions{ display:flex; gap:.4rem; white-space:nowrap; }
.admin-empty{ padding:2rem; text-align:center; color:var(--text-muted); }
select.status-select{
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:.35rem .5rem; font-family:inherit; font-size:.85rem; background:#fff;
}
.msg-cell{ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Vehicle modal ---------- */
.admin-modal-overlay{
  position:fixed; inset:0; background:rgba(20,22,18,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding:3vh 1.2rem; z-index:300; overflow-y:auto;
}
.admin-modal-overlay[hidden]{ display:none; }
.admin-modal{
  background:#fff; border-radius:var(--radius); width:100%; max-width:640px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.4);
}
.admin-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.6rem; border-bottom:1px solid var(--border);
}
.admin-modal-head h3{ margin:0; font-size:1.1rem; }
.admin-modal form{ padding:1.4rem 1.6rem 1.6rem; }
.admin-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.admin-checkbox-row{ display:flex; gap:1.5rem; margin:.6rem 0 1.2rem; font-size:.9rem; }
.admin-checkbox-row label{ display:flex; align-items:center; gap:.4rem; color:var(--text); }
.admin-form-actions{ display:flex; gap:.8rem; }
.admin-photo-preview{ margin-top:.6rem; display:flex; gap:.6rem; }
.admin-photo-preview img{ width:90px; height:66px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }

/* ---------- Content accordion ---------- */
.admin-accordion{ display:flex; flex-direction:column; gap:.8rem; }
.accordion-item{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.accordion-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.4rem; cursor:pointer; font-weight:700; font-size:.95rem;
}
.accordion-head .chev{ transition:transform .2s ease; color:var(--text-muted); }
.accordion-item.open .accordion-head .chev{ transform:rotate(180deg); }
.accordion-body{ padding:0 1.4rem 1.4rem; display:none; }
.accordion-item.open .accordion-body{ display:block; }

.repeater{ display:flex; flex-direction:column; gap:.8rem; margin:.6rem 0 1.2rem; }
.repeater-row{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1rem; background:var(--bg-alt);
  display:flex; flex-direction:column; gap:.6rem;
}
.repeater-row-head{ display:flex; justify-content:flex-end; }
.repeater-remove{
  background:transparent; border:none; color:#c24a3d; cursor:pointer; font-size:.8rem; font-weight:600;
}
.repeater-add{ align-self:flex-start; }
.repeater-row label{ display:block; font-size:.78rem; color:var(--text-muted); margin-bottom:-.35rem; }
.repeater-row .checkbox-line{ display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--text); }
.repeater-row .checkbox-line input{ width:auto; }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:700; padding:.25rem .55rem; border-radius:999px;
}
.badge-published{ background:#e3f3e6; color:#1f7a34; }
.badge-pending{ background:#e6f0ff; color:#1a4fa0; }
.badge-rejected{ background:#fbe4e1; color:#96291b; }

/* ---------- Toast ---------- */
.admin-toast{
  position:fixed; top:1.2rem; right:1.2rem; z-index:400;
  background:#20241f; color:#fff; padding:.8rem 1.2rem; border-radius:var(--radius-sm);
  font-size:.88rem; box-shadow:0 12px 24px -8px rgba(0,0,0,.4);
  max-width:320px;
}
.admin-toast.success{ background:#356018; }
.admin-toast.error{ background:#7c2d20; }
.admin-toast[hidden]{ display:none; }

@media (max-width: 640px){
  .admin-form-grid{ grid-template-columns:1fr; }
  .admin-header-inner{ flex-wrap:wrap; height:auto; padding:12px 16px; }
  .admin-tabs{ padding:1rem 16px 0; overflow-x:auto; flex-wrap:nowrap; }
  .admin-main{ padding:1.2rem 16px 3rem; }
}