/* Admin panel styles - elegant, minimal, white theme */

:root{
  --bg:#fbfbfc;
  --panel:#ffffff;
  --muted:#edf0f2;
  --text:#08101a;
  --muted-text:#6b7280;
  --accent:#d4af37;
  --radius:10px;
  --container:1100px;
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
a{color:var(--text);text-decoration:none}
.admin-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:var(--panel);border-bottom:1px solid rgba(0,0,0,0.04)}
.admin-header__brand{display:flex;align-items:center;gap:12px}
.admin-header__brand .brand-mark{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#eecb74);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.admin-header__nav{display:flex;gap:16px;align-items:center}
.admin-header__nav a{padding:8px 10px;border-radius:8px;color:var(--muted-text)}
.admin-header__nav a.active{background:var(--muted);color:var(--text)}
.admin-header__logout button{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:8px 10px;border-radius:8px;cursor:pointer}

/* Main layout */
.admin-main{padding:28px;max-width:var(--container);margin:0 auto}
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.dashboard-card{padding:18px;border-radius:10px;background:var(--panel);box-shadow:0 6px 18px rgba(10,10,10,0.04)}
.metric{display:block;font-size:28px;font-weight:700;margin-top:8px}
.metric-detail{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.badge{background:var(--muted);padding:6px 8px;border-radius:8px;font-size:12px;color:var(--muted-text)}
.btn-primary,.btn-secondary{display:inline-block;padding:10px 12px;border-radius:8px;border:none;cursor:pointer}
.btn-primary{background:linear-gradient(90deg,var(--accent),#e7c86a);color:#fff}
.btn-secondary{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--text)}

/* Tables / lists */
.table-responsive{background:var(--panel);padding:12px;border-radius:10px;min-height:60px}
.table-loading{color:var(--muted-text);padding:16px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(0,0,0,0.04);text-align:left}

/* Forms */
.form-row{display:flex;gap:12px;align-items:center}
.form-control{padding:8px 10px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:#fff;min-width:0}

/* Modals */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal-content{background:var(--panel);padding:16px;border-radius:12px;max-width:900px;width:100%;box-shadow:0 12px 36px rgba(11,14,20,0.12)}
.modal-close{position:absolute;right:16px;top:12px;border:none;background:none;font-size:20px;cursor:pointer}

#article-modal .modal-content{
  max-width:none;
  width:80vw;
  max-height:80vh;
  background:#fff;
  border:1px solid rgba(8,10,20,0.08);
  box-shadow:0 18px 52px rgba(8,10,20,0.18);
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#article-modal .modal-body{
  margin-top:12px;
  overflow-y:auto;
  max-height:calc(80vh - 84px);
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(10,10,10,0.25) transparent;
}

#article-modal .modal-body::-webkit-scrollbar{
  width:6px;
}

#article-modal .modal-body::-webkit-scrollbar-track{
  background:transparent;
}

#article-modal .modal-body::-webkit-scrollbar-thumb{
  background:rgba(10,10,10,0.25);
  border-radius:999px;
}

#article-modal .modal-body::-webkit-scrollbar-thumb:hover{
  background:rgba(10,10,10,0.35);
}

/* Small utilities */
.alert{padding:10px;border-radius:8px;background:#fff3d9;border:1px solid rgba(212,175,55,0.12);color:#6b4b1d}
.alert-error{background:#ffecec;border:1px solid rgba(220,80,80,0.08);color:#8b2d2d}
.form-inline{display:flex;gap:8px;align-items:center}

/* Responsive */
@media (max-width:720px){
  .admin-header__nav{display:none}
  .dashboard-grid{grid-template-columns:1fr}
  .container{padding:12px}
}