/* ── BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body.panel-body { font-family:'Noto Sans Gujarati',sans-serif; background:#f0f2f5; color:#222; min-height:100vh; }
a { text-decoration:none; color:inherit; }

/* ── LOGIN ── */
.login-screen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1a1a2e 0%,#16213e 60%,#0f3460 100%);
}
.login-box {
  background:#fff; border-radius:12px; padding:40px 36px;
  width:360px; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-logo { font-size:26px; font-weight:700; color:#1a1a2e; text-align:center; margin-bottom:4px; }
.login-logo span { color:#f0a500; }
.login-sub { text-align:center; color:#888; font-size:13px; margin-bottom:24px; }
.login-hint { text-align:center; font-size:12px; color:#aaa; margin-top:12px; }

/* ── PANEL LAYOUT ── */
.panel-wrapper { display:flex; min-height:100vh; }

/* ── SIDEBAR ── */
.panel-sidebar {
  width:220px; background:#1a1a2e; display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:50;
}
.admin-sidebar { background:#0f3460; }
.panel-brand {
  padding:20px 16px; font-size:20px; font-weight:700; color:#f0a500;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.panel-brand small { font-size:11px; background:rgba(240,165,0,.2); color:#f0a500; padding:2px 6px; border-radius:3px; margin-left:6px; }
.panel-nav { flex:1; padding:12px 0; overflow-y:auto; }
.panel-nav .pnav {
  display:flex; align-items:center; gap:10px; padding:11px 18px;
  color:#b0b8cc; font-size:13px; transition:background .15s, color .15s;
}
.panel-nav .pnav i { width:16px; text-align:center; }
.panel-nav .pnav:hover, .panel-nav .pnav.active { background:rgba(240,165,0,.15); color:#f0a500; border-left:3px solid #f0a500; }
.btn-logout {
  margin:12px; padding:9px 14px; background:rgba(220,53,69,.15);
  color:#dc3545; border:1px solid rgba(220,53,69,.3); border-radius:5px;
  cursor:pointer; font-size:13px; font-family:'Noto Sans Gujarati',sans-serif;
  transition:background .2s;
}
.btn-logout:hover { background:rgba(220,53,69,.3); }
.btn-view-site {
  margin:0 12px 4px; padding:9px 14px; background:rgba(40,167,69,.15);
  color:#28a745; border:1px solid rgba(40,167,69,.3); border-radius:5px;
  display:flex; align-items:center; gap:8px; font-size:13px;
}
.btn-view-site:hover { background:rgba(40,167,69,.25); }

/* ── MAIN AREA ── */
.panel-main { margin-left:220px; flex:1; display:flex; flex-direction:column; min-height:100vh; }
.panel-topbar {
  background:#fff; padding:14px 24px; display:flex; justify-content:space-between; align-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.07); position:sticky; top:0; z-index:40;
}
.panel-topbar h2 { font-size:18px; color:#1a1a2e; }
.panel-user { font-size:13px; color:#666; }
.panel-user i { margin-right:5px; color:#f0a500; }

/* ── SECTIONS ── */
.psec { display:none; padding:24px; }
.psec.active { display:block; }

/* ── FORM ── */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:13px; color:#555; margin-bottom:5px; font-weight:600; }
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group input[type=url],
.form-group input[type=datetime-local],
.form-group select,
.form-group textarea {
  width:100%; padding:9px 12px; border:1px solid #ddd; border-radius:5px;
  font-size:13px; font-family:'Noto Sans Gujarati',sans-serif;
  outline:none; transition:border .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#f0a500; }
.form-group textarea { resize:vertical; }

/* Buttons */
.btn-primary {
  background:#f0a500; color:#fff; border:none; padding:9px 18px;
  border-radius:5px; cursor:pointer; font-size:13px;
  font-family:'Noto Sans Gujarati',sans-serif; transition:background .2s;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-primary:hover { background:#d4920a; }
.btn-primary.full { width:100%; justify-content:center; padding:12px; font-size:15px; }
.btn-secondary {
  background:#6c757d; color:#fff; border:none; padding:9px 18px;
  border-radius:5px; cursor:pointer; font-size:13px;
  font-family:'Noto Sans Gujarati',sans-serif;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-sm { background:#f0a500; color:#fff; border:none; padding:6px 10px; border-radius:4px; cursor:pointer; font-size:12px; white-space:nowrap; }
.btn-row { display:flex; gap:10px; margin-top:4px; }

/* ── COMPOSE GRID ── */
.compose-grid { display:grid; grid-template-columns:1fr 320px; gap:20px; }
.compose-left, .compose-right { display:flex; flex-direction:column; gap:0; }

/* Rich Editor */
.editor-toolbar {
  background:#f8f8f8; border:1px solid #ddd; border-bottom:none;
  padding:6px 10px; border-radius:5px 5px 0 0; display:flex; gap:4px; flex-wrap:wrap; align-items:center;
}
.editor-toolbar button {
  background:none; border:1px solid #ddd; padding:4px 8px; border-radius:3px;
  cursor:pointer; font-size:13px; transition:background .15s;
}
.editor-toolbar button:hover { background:#f0a500; color:#fff; border-color:#f0a500; }
.editor-toolbar select { padding:4px 6px; font-size:12px; border:1px solid #ddd; border-radius:3px; }
.rich-editor {
  min-height:260px; border:1px solid #ddd; padding:14px; border-radius:0 0 5px 5px;
  font-size:14px; line-height:1.7; outline:none; background:#fff;
}
.rich-editor:focus { border-color:#f0a500; }

/* Media Cards */
.media-card { background:#fff; border-radius:8px; padding:14px; box-shadow:0 2px 8px rgba(0,0,0,.07); margin-bottom:14px; }
.media-card h4 { font-size:13px; color:#555; margin-bottom:10px; }
.upload-zone {
  border:2px dashed #ddd; border-radius:6px; padding:20px; text-align:center;
  cursor:pointer; transition:border .2s; min-height:100px; display:flex;
  align-items:center; justify-content:center; flex-direction:column;
}
.upload-zone.small { padding:14px; min-height:70px; }
.upload-zone:hover { border-color:#f0a500; }
.upload-zone i { font-size:24px; color:#aaa; margin-bottom:6px; }
.upload-zone p { font-size:13px; color:#777; }
.upload-zone small { font-size:11px; color:#aaa; }
.img-url-row { display:flex; gap:6px; margin-top:8px; }
.img-url-row input { flex:1; padding:6px 10px; border:1px solid #ddd; border-radius:4px; font-size:12px; }

/* ── STATS ── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card {
  background:#fff; border-radius:8px; padding:18px 16px;
  display:flex; align-items:center; gap:14px; box-shadow:0 2px 8px rgba(0,0,0,.07);
  border-left:4px solid transparent;
}
.stat-card.blue { border-color:#0077cc; }
.stat-card.green { border-color:#28a745; }
.stat-card.orange { border-color:#f0a500; }
.stat-card.red { border-color:#dc3545; }
.stat-card i { font-size:28px; opacity:.7; }
.stat-card.blue i { color:#0077cc; }
.stat-card.green i { color:#28a745; }
.stat-card.orange i { color:#f0a500; }
.stat-card.red i { color:#dc3545; }
.stat-card h3 { font-size:26px; color:#1a1a2e; }
.stat-card p { font-size:12px; color:#888; }

.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dash-box { background:#fff; border-radius:8px; padding:18px; box-shadow:0 2px 8px rgba(0,0,0,.07); }
.dash-box h4 { font-size:14px; color:#555; margin-bottom:14px; border-bottom:2px solid #f0a500; padding-bottom:8px; }
.activity-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.activity-list li { font-size:13px; color:#555; display:flex; align-items:center; gap:8px; }
.green-dot { color:#28a745; font-size:8px; }
.blue-dot { color:#0077cc; font-size:8px; }
.orange-dot { color:#f0a500; font-size:8px; }
.cat-bars { display:flex; flex-direction:column; gap:8px; }
.cat-bar-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.cat-bar-row span:first-child { width:80px; text-align:right; color:#555; }
.cat-bar-bg { flex:1; background:#eee; border-radius:10px; height:8px; }
.cat-bar-fill { height:8px; border-radius:10px; background:#f0a500; }

/* ── TABLE ── */
.table-wrap { background:#fff; border-radius:8px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.07); overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { background:#1a1a2e; color:#f0a500; padding:10px 12px; text-align:left; }
.data-table td { padding:10px 12px; border-bottom:1px solid #f0f0f0; vertical-align:middle; }
.data-table tr:hover td { background:#fafafa; }
.data-table img { width:52px; height:36px; object-fit:cover; border-radius:3px; }
.table-controls { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.table-controls input { flex:1; min-width:180px; padding:8px 12px; border:1px solid #ddd; border-radius:5px; font-size:13px; }
.table-controls select { padding:8px 10px; border:1px solid #ddd; border-radius:5px; font-size:13px; }

/* Status badges */
.s-badge { font-size:11px; padding:3px 8px; border-radius:10px; font-weight:700; }
.s-published { background:#d4edda; color:#155724; }
.s-draft { background:#fff3cd; color:#856404; }
.s-review { background:#cce5ff; color:#004085; }

/* Action Buttons */
.act-btn { border:none; padding:4px 10px; border-radius:3px; cursor:pointer; font-size:12px; margin-right:4px; }
.act-edit { background:#0077cc; color:#fff; }
.act-del { background:#dc3545; color:#fff; }
.act-approve { background:#28a745; color:#fff; }
.act-reject { background:#6c757d; color:#fff; }

/* Empty msg */
.empty-msg { text-align:center; padding:28px; color:#aaa; font-size:14px; }

/* ── MEDIA GRID ── */
.media-upload-bar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; }
.media-placeholder { grid-column:1/-1; text-align:center; padding:40px; color:#bbb; }
.media-placeholder i { font-size:40px; display:block; margin-bottom:8px; }
.media-file-item { position:relative; border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.media-file-item img, .media-file-item video { width:100%; height:90px; object-fit:cover; display:block; }
.media-file-item .mf-name { font-size:11px; padding:4px 6px; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-file-item .mf-del { position:absolute; top:4px; right:4px; background:rgba(220,53,69,.85); color:#fff; border:none; border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:11px; }

/* ── TICKER MANAGER ── */
.ticker-manager { background:#fff; border-radius:8px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.07); max-width:700px; }
.ticker-manager h4 { margin-bottom:14px; color:#555; }
.ticker-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.ticker-list li {
  display:flex; align-items:center; justify-content:space-between;
  background:#f8f8f8; padding:10px 14px; border-radius:5px; font-size:13px;
}
.ticker-list li button { background:#dc3545; color:#fff; border:none; padding:3px 8px; border-radius:3px; cursor:pointer; font-size:11px; }

/* ── SETTINGS ── */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.settings-box { background:#fff; border-radius:8px; padding:18px; box-shadow:0 2px 8px rgba(0,0,0,.07); }
.settings-box h4 { font-size:14px; color:#555; margin-bottom:14px; border-bottom:2px solid #f0a500; padding-bottom:8px; display:flex; align-items:center; gap:6px; }

/* ── MINI MODAL ── */
.mini-modal { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:500; display:flex; align-items:center; justify-content:center; }
.mini-modal-box { background:#fff; border-radius:8px; padding:24px; width:360px; }
.mini-modal-box h4 { margin-bottom:16px; font-size:16px; border-bottom:2px solid #f0a500; padding-bottom:8px; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .panel-sidebar { width:180px; }
  .panel-main { margin-left:180px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .compose-grid { grid-template-columns:1fr; }
  .settings-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .panel-sidebar { transform:translateX(-100%); transition:transform .3s; }
  .panel-sidebar.open { transform:translateX(0); }
  .panel-main { margin-left:0; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .dash-grid { grid-template-columns:1fr; }
}

/* ── One-time signup toggle ── */
#signupForm .form-group small { display:block; margin-top:4px; }
#signupForm { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── User stats row ── */
.user-stats-row { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.ustat { background:#fff; border-radius:8px; padding:12px 18px; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.07); border-left:4px solid #ddd; }
.ustat i { font-size:18px; color:#aaa; }
.ustat.green { border-color:#28a745; } .ustat.green i { color:#28a745; }
.ustat.blue  { border-color:#0077cc; } .ustat.blue i  { color:#0077cc; }
.ustat.red   { border-color:#dc3545; } .ustat.red i   { color:#dc3545; }

/* ══════════════════════════════════════════
   PANEL MOBILE RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .panel-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .panel-brand       { padding: 12px 14px; font-size: 16px; }
  .panel-nav         { display: flex; flex-direction: row; flex-wrap: wrap; padding: 4px; width: 100%; }
  .panel-nav .pnav   { padding: 8px 10px; font-size: 12px; border-left: none !important; border-bottom: 3px solid transparent; }
  .panel-nav .pnav.active, .panel-nav .pnav:hover { border-bottom-color: #f0a500; border-left: none !important; }
  .panel-nav .pnav i { display: none; }
  .btn-logout, .btn-view-site { margin: 4px 8px; padding: 6px 10px; font-size: 11px; }

  .panel-main        { margin-left: 0; }
  .panel-topbar      { padding: 10px 14px; }
  .panel-topbar h2   { font-size: 15px; }
  .psec              { padding: 14px 12px; }

  .compose-grid      { grid-template-columns: 1fr; }
  .stats-grid        { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card         { padding: 14px 12px; gap: 10px; }
  .stat-card h3      { font-size: 22px; }
  .dash-grid         { grid-template-columns: 1fr; }
  .settings-grid     { grid-template-columns: 1fr; }
  .user-stats-row    { gap: 8px; }
  .ustat             { padding: 10px 12px; font-size: 13px; }

  .table-wrap        { overflow-x: auto; }
  .data-table        { min-width: 540px; }
  .table-controls    { flex-direction: column; }
  .table-controls input,
  .table-controls select { width: 100%; }

  .mini-modal-box    { width: 95%; padding: 16px; }

  .login-box         { width: 95%; padding: 28px 20px; }
  .login-logo        { font-size: 22px; }
}

@media (max-width: 480px) {
  .stats-grid        { grid-template-columns: 1fr 1fr; }
  .stat-card i       { font-size: 20px; }
  .stat-card h3      { font-size: 18px; }
  .rich-editor       { min-height: 180px; }
  .editor-toolbar    { gap: 3px; }
  .editor-toolbar button { padding: 3px 6px; font-size: 12px; }
  .media-card        { padding: 10px; }
  .upload-zone       { padding: 14px; min-height: 80px; }
  .btn-row           { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
}

/* ── E-PAPER ADMIN ── */
.epaper-upload-box {
  background: #fff; border-radius: 10px; padding: 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08); margin-bottom: 8px;
}
.epaper-upload-box h3 { font-size: 16px; color: #333; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.epaper-form { max-width: 600px; }

.pdf-drop-zone {
  border: 2px dashed #ddd; border-radius: 8px; padding: 28px 20px;
  text-align: center; cursor: pointer; transition: border .2s, background .2s;
  background: #fff8f8;
}
.pdf-drop-zone:hover { border-color: #e53935; background: #fff0f0; }
.pdf-drop-zone p { font-size: 14px; color: #666; margin: 8px 0 4px; }
.pdf-drop-zone small { font-size: 12px; color: #aaa; }

.ep-progress {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; background: #f4f4f4; border-radius: 6px;
  padding: 10px 14px;
}
.ep-progress-bar {
  flex: 1; height: 8px; background: #e53935;
  border-radius: 4px; width: 0%; transition: width .3s;
}
#epProgressText { font-size: 13px; color: #555; min-width: 36px; }

.ep-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.ep-admin-card {
  background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.ep-admin-body { padding: 12px; }
.ep-admin-body h4 { font-size: 13px; margin-bottom: 4px; line-height: 1.4; }
.ep-admin-btns { display: flex; gap: 6px; margin-top: 10px; }