/* ============================================================
   Purushottam Mines — Admin panel stylesheet
   ============================================================ */
:root {
  /* Same restrained palette as the public site: neutrals + one accent, no gradients */
  --charcoal:#1f2429; --ink:#2c3237; --muted:#7c858d; --line:#e4e7ea; --bg:#f4f5f6; --card:#fff;
  --accent:#4a7a28; --accent-hover:#3b6320; --accent-soft:#eef3e8;
  --shadow:0 8px 24px rgba(16,24,32,.08); --shadow-sm:0 1px 3px rgba(16,24,32,.07);
  --radius:10px;
  --font:"Segoe UI","Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Semibold","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font); background:var(--bg); color:var(--ink); font-size:14.5px; letter-spacing:.01em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
h1,h2,h3,h4 { margin:0 0 .4em; color:var(--charcoal); font-family:var(--font-display); letter-spacing:-0.018em; }

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px;
  background:linear-gradient(135deg,#20262c,#2d353d); position:relative; overflow:hidden; }
.login-wrap::before { content:""; position:absolute; inset:0;
  background:radial-gradient(700px 400px at 80% 10%,rgba(31,169,224,.35),transparent),radial-gradient(600px 400px at 10% 100%,rgba(236,0,140,.3),transparent); }
.login-card { position:relative; z-index:2; background:#fff; border-radius:10px; padding:42px 38px; width:100%; max-width:410px; box-shadow:0 30px 70px rgba(0,0,0,.35); }
.login-card .rainbow { height:3px; background:var(--accent); margin:-42px -38px 26px; border-radius:10px 10px 0 0; }
.login-card img { height:46px; margin:0 auto 18px; }
.login-card h2 { text-align:center; }
.login-card p.sub { text-align:center; color:var(--muted); font-size:.9rem; margin-bottom:24px; }

/* ---------- Layout ---------- */
.admin { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.sb-backdrop { display:none; }  /* off-canvas overlay only used on mobile; must not occupy a grid cell on desktop */
.sidebar { background:var(--charcoal); color:#c2cbd4; padding:0 0 24px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar .rainbow { height:3px; background:var(--accent); }
.sidebar .brand { display:flex; align-items:center; gap:10px; padding:22px 22px 18px; }
.sidebar .brand img { height:38px; filter:brightness(0) invert(1); }
.sidebar .brand .bt { font-weight:700; color:#fff; font-size:.95rem; line-height:1.1; }
.sidebar .brand .bt small { display:block; color:#9aa3ab; font-size:.62rem; letter-spacing:1px; font-weight:600; }
.menu-label { font-size:.68rem; letter-spacing:1.5px; text-transform:uppercase; color:#6b7885; padding:16px 24px 8px; }
.menu a { display:flex; align-items:center; gap:12px; padding:11px 24px; font-weight:500; color:#c2cbd4; transition:.2s; border-left:3px solid transparent; }
.menu a svg { width:19px; height:19px; flex:none; }
.menu a:hover { background:rgba(255,255,255,.05); color:#fff; }
.menu a.active { background:rgba(255,255,255,.06); color:#fff; border-left-color:var(--accent); }
.menu a .badge { margin-left:auto; background:var(--accent); color:#fff; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:20px; }

.main { display:flex; flex-direction:column; min-width:0; }
.topbar { background:#fff; border-bottom:1px solid var(--line); padding:16px 30px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20; }
.topbar h1 { font-size:1.3rem; margin:0; }
.topbar .tb-actions { display:flex; align-items:center; gap:14px; }
.topbar .who { display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--muted); }
.topbar .avatar { width:38px; height:38px; border-radius:50%; background:var(--charcoal); color:#fff; display:grid; place-items:center; font-weight:700; }
.content { padding:30px; flex:1; }

/* ---------- Cards / grid ---------- */
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px; }
.stat-card { background:#fff; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:16px; border:1px solid var(--line); }
.stat-card .sc-icon { width:52px; height:52px; border-radius:13px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); flex:none; }
.stat-card .sc-num { font-size:1.8rem; font-weight:800; line-height:1; color:var(--charcoal); }
.stat-card .sc-label { color:var(--muted); font-size:.84rem; }

.panel { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid var(--line); margin-bottom:24px; overflow:hidden; }
.panel-head { padding:18px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-head h3 { margin:0; font-size:1.05rem; }
.panel-body { padding:24px; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:9px; font-weight:600; font-size:.9rem; cursor:pointer; border:1.5px solid transparent; transition:.2s; font-family:inherit; }
.btn svg { width:17px; height:17px; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-dark { background:var(--charcoal); color:#fff; }
.btn-light { background:#fff; color:var(--ink); border-color:var(--line); }
.btn-light:hover { border-color:var(--charcoal); color:var(--charcoal); }
.btn-danger { background:#fff; color:#e0413a; border-color:#f3c7c5; }
.btn-danger:hover { background:#e0413a; color:#fff; border-color:#e0413a; }
.btn-sm { padding:7px 12px; font-size:.82rem; }

/* ---------- Tables ---------- */
.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; padding:13px 16px; font-size:.74rem; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--line); }
.table td { padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr:last-child td { border-bottom:0; }
.table tr:hover td { background:#fafbfc; }
.table .thumb { width:64px; height:44px; border-radius:8px; object-fit:cover; }
.pill { display:inline-block; padding:4px 11px; border-radius:20px; font-size:.74rem; font-weight:700; }
.pill-green { background:#e7f7ec; color:#1c7a44; }
.pill-grey { background:#eef1f4; color:#6b7580; }
.pill-new { background:var(--accent); color:#fff; }
.row-actions { display:flex; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; padding:3px 9px; border-radius:6px; }

/* ---------- Forms ---------- */
.field { margin-bottom:20px; }
.field label { display:block; font-weight:600; font-size:.86rem; margin-bottom:7px; color:var(--charcoal); }
.field .hint { font-weight:400; color:var(--muted); font-size:.78rem; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=url], .field textarea, .field select {
  width:100%; padding:11px 14px; border:1.5px solid var(--line); border-radius:9px; font-family:inherit; font-size:.92rem; background:#fbfcfd; transition:.2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(74,122,40,.15); }
.field textarea { resize:vertical; min-height:90px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 20px; }
.form-actions { display:flex; gap:12px; padding-top:6px; }

/* color swatch picker */
.swatches { display:flex; gap:10px; flex-wrap:wrap; }
.swatch { width:34px; height:34px; border-radius:9px; cursor:pointer; border:3px solid transparent; box-shadow:var(--shadow-sm); }
.swatch.sel { border-color:var(--charcoal); transform:scale(1.08); }

/* image preview */
.img-prev { width:120px; height:84px; border-radius:10px; object-fit:cover; border:1px solid var(--line); background:#f4f6fa; margin-bottom:10px; }

/* ---------- Alerts ---------- */
.alert { padding:13px 18px; border-radius:10px; margin-bottom:20px; font-weight:500; font-size:.9rem; }
.alert-success { background:#e7f7ec; color:#1c7a44; border:1px solid #b7e6c8; }
.alert-error { background:#fdecec; color:#c0392b; border:1px solid #f4c4c4; }

/* CKEditor sizing */
.ck-editor__editable { min-height:260px; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .admin { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:-260px; width:250px; z-index:60; transition:left .3s; }
  .sidebar.open { left:0; }
  .cards { grid-template-columns:1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .menu-toggle { display:inline-flex !important; }
  .sb-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:55; display:none; }
  .sb-backdrop.open { display:block; }
}
.menu-toggle { display:none; background:none; border:0; cursor:pointer; padding:6px; }
.menu-toggle span { display:block; width:24px; height:3px; background:var(--charcoal); border-radius:3px; margin:5px 0; }
@media (max-width:560px) { .cards { grid-template-columns:1fr; } .content { padding:18px; } .topbar { padding:14px 18px; } }