/* static/admin/admin.css */
:root{
  --bg:#0f0f14;
  --elev:#151523;
  --text:#e8e8f3;
  --muted:#a8a8c0;
  --accent:#7c4dff; /* purple accent */
  --accent-2:#a684ff;
  --danger:#ff5e6c;
  --border:#24243a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0 0 .75rem 0}
.page-title{font-size:1.3rem;margin:0 0 1rem}
.page-title.with-pad{padding:0 1rem}

/* Header + Drawer */
.app-header{position:sticky;top:0;display:flex;align-items:center;gap:.75rem;background:var(--elev);border-bottom:1px solid var(--border);padding:.5rem 1rem;z-index:10}
.hamburger{font-size:1.25rem;border:1px solid var(--border);background:transparent;color:var(--text);border-radius:.5rem;padding:.35rem .6rem;cursor:pointer}
.brand{font-weight:600;letter-spacing:.2px}

.drawer{position:fixed;inset:0 30% 0 0;transform:translateX(-100%);background:var(--elev);border-right:1px solid var(--border);transition:transform .2s ease;z-index:20;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border)}
#closeDrawer{border:none;background:transparent;color:var(--muted);font-size:1.1rem;cursor:pointer}
.nav-links{list-style:none;margin:0;padding:0}
.nav-links li{border-bottom:1px solid var(--border)}
.nav-links a{display:block;padding:.9rem 1rem;color:var(--text)}
.nav-links a:hover{background:rgba(124,77,255,.12)}
.nav-links .danger a{color:var(--danger)}

/* Content wrapper */
.content{max-width:1100px;margin:0 auto;padding:1rem}

/* Auth card */
.auth-card{max-width:420px;margin:8vh auto;padding:1.25rem;border:1px solid var(--border);background:var(--elev);border-radius:.75rem}
.form{display:grid;gap:.6rem}
.form input[type="text"],
.form input[type="tel"],
.form input[type="password"],
.form textarea{width:100%;padding:.7rem;border:1px solid var(--border);border-radius:.5rem;background:#0d0d13;color:var(--text)}
.btn-primary{background:var(--accent);color:white;border:none;border-radius:.5rem;padding:.65rem 1rem;cursor:pointer}
.btn-primary:hover{background:var(--accent-2)}
.alert{background:#2a1324;color:#ffd1d8;border:1px solid #52213a;padding:.6rem;border-radius:.5rem;margin:.6rem 0}

/* Dashboard tiles */
.tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media (min-width:840px){.tile-grid{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;border:1px solid var(--border);background:var(--elev);border-radius:.75rem;padding:1rem;display:flex;flex-direction:column;gap:.4rem}
.tile:hover{outline:1px solid var(--accent);outline-offset:-1px}
.tile-title{font-weight:600;color:var(--muted)}
.tile-count{font-size:1.6rem;font-weight:700}
.badge-new{position:absolute;top:.5rem;right:.5rem;background:var(--accent);color:#fff;border-radius:999px;padding:.2rem .5rem;font-size:.72rem}
.tile.danger{border-color:#4b1b22}
.tile.danger:hover{outline-color:var(--danger)}

/* Messages layout */
.messages-layout{display:grid;grid-template-columns:260px 1fr;gap:1rem}
@media (max-width:900px){.messages-layout{grid-template-columns:1fr}}
.threads{border:1px solid var(--border);background:var(--elev);border-radius:.75rem;overflow:hidden}
.thread-list{max-height:70vh;overflow:auto}
.thread-item{display:flex;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--border);cursor:pointer}
.thread-item:hover{background:rgba(124,77,255,.08)}
.thread-item .meta{color:var(--muted);font-size:.85rem}
.badge{background:var(--accent);color:#fff;border-radius:999px;padding:.1rem .45rem;font-size:.7rem;margin-left:.4rem}
.empty-state{padding:1rem;color:var(--muted)}

.conversation{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--elev);border-radius:.75rem;min-height:70vh}
.conv-header{padding:.8rem 1rem;border-bottom:1px solid var(--border);color:var(--muted)}
.conv-body{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.msg{max-width:78%;padding:.6rem .8rem;border-radius:.75rem;border:1px solid var(--border)}
.msg.in {align-self:flex-start;background:#13131c}
.msg.out{align-self:flex-end;background:#19182b;border-color:#2a2251}
.msg time{display:block;color:var(--muted);font-size:.72rem;margin-top:.2rem}
.send-form{display:flex;gap:.5rem;padding:.8rem;border-top:1px solid var(--border)}
.send-form input{flex:1;padding:.65rem;border:1px solid var(--border);border-radius:.5rem;background:#0d0d13;color:var(--text)}
.hidden{display:none}

/* Generic list cards */
.card{border:1px solid var(--border);background:var(--elev);border-radius:.75rem}
.pad{padding:1rem}
.list-card{border:1px solid var(--border);background:var(--elev);border-radius:.75rem;padding:.5rem}
.list-item{padding:.7rem;border-bottom:1px solid var(--border)}
.list-item:last-child{border-bottom:none}

/* Media grid */
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media (min-width:840px){.media-grid{grid-template-columns:repeat(4,1fr)}}
.media-card{border:1px solid var(--border);background:var(--elev);border-radius:.75rem;overflow:hidden}
.media-card .thumb{display:block;aspect-ratio:16/9;background:#0b0b12}
.media-card .meta{padding:.6rem;font-size:.85rem;color:var(--muted)}