:root{--theme:#0ea5e9;--bg:#f6f9fc;--muted:#6b7280}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;color:#111;background:var(--bg)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo{width:28px;height:28px;border-radius:8px;background:var(--theme);object-fit:cover}
.logo.circle{border-radius:50%}
.topbar nav a{margin-left:12px;color:#111;text-decoration:none}
.btn{background:var(--theme);color:#fff;padding:8px 14px;border-radius:10px;text-decoration:none;display:inline-block}
.btn.ghost{background:#e6f6ff;color:#0369a1}

.page{display:grid;grid-template-columns:260px 1fr;gap:18px;padding:18px}
.sidebar{background:#fff;border:1px solid #eef2f7;border-radius:16px;padding:12px;position:sticky;top:64px;height:max-content}
.sidebar .group{margin:8px 0}
.sidebar .title{font-size:12px;color:var(--muted);margin:6px 8px}
.sidebar a{display:flex;gap:10px;align-items:center;color:#111;text-decoration:none;padding:8px 10px;border-radius:12px}
.sidebar a:hover{background:#f1f5f9}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.blue{background:#60a5fa}.dot.purple{background:#a78bfa}.dot.green{background:#22c55e}.dot.indigo{background:#6366f1}.dot.cyan{background:#06b6d4}.dot.rose{background:#f43f5e}.dot.slate{background:#64748b}.dot.amber{background:#f59e0b}.dot.teal{background:#14b8a6}.dot.lime{background:#84cc16}.dot.zinc{background:#71717a}

.content .card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px;margin-bottom:16px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.card.lg{padding:20px}

input[type=text],input[type=email],input[type=password],select,textarea{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px}
label{display:block;margin:.5rem 0 .35rem;color:#374151}

.table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden}
.table th,.table td{border-bottom:1px solid #eef2f7;padding:10px;text-align:left}
.table th{background:#f8fafc;color:#111}

.notice{background:#f0f9ff;border:1px solid #bae6fd;color:#0369a1;padding:10px;border-radius:10px;margin-bottom:12px}
.notice.error{background:#fef2f2;border-color:#fecaca;color:#b91c1c}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card h3{margin:0 0 6px}
.muted{color:var(--muted);font-size:12px}

.pager{margin:14px 0;display:flex;gap:8px;flex-wrap:wrap}
.pager a{padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;color:#111;background:#fff}
.pager a.active{background:var(--theme);color:#fff;border-color:var(--theme)}

.footer{background:#fff;border-top:1px solid #e5e7eb;padding:10px 16px;margin:18px;border-radius:12px}

.viewer{background:#000;border-radius:12px;overflow:hidden;position:relative}
.media{width:100%;max-height:70vh;display:block}
.docframe{width:100%;height:70vh;border:0;border-radius:12px;background:#fff}

.form-row{display:grid;grid-template-columns:1fr 2fr;gap:12px;margin:8px 0}

/* Optional hamburger (only appears on mobile if you use the element) */
.hamburger{display:none;background:none;border:0;padding:6px}
.hamburger span{display:block;height:2px;margin:4px 0;background:#111;width:18px}

@media (max-width:960px){
  .page{grid-template-columns:1fr}
  .sidebar{position:relative;top:auto}
  .media,.docframe{height:56vh}
  .hamburger{display:inline-block}
}

/* ============== Admin helpers used in UI ============== */
.form-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs .btn{padding:6px 12px;border-radius:10px}

/* ============== SAFE TOPBAR LOGO FIX (Option A) ============== */
.topbar .brand img.logo{
  height:40px;          /* controls visual size */
  width:auto;           /* preserve aspect ratio */
  max-width:180px;      /* prevent overly wide logos */
  object-fit:contain;   /* avoid cropping */
  border-radius:8px;
}
@media (max-width:520px){
  .topbar .brand img.logo{ height:32px; max-width:140px }
}
/* --- Hard logo fit for the topbar --- */
.topbar .brand img.logo{
  height: 42px !important;     /* visual height */
  width: auto !important;       /* keep aspect ratio */
  max-width: 220px;             /* stop ultra-wide logos */
  object-fit: contain;          /* no cropping */
  display: block;               /* removes baseline gap */
  border-radius: 8px;           /* keeps your rounded look */
}

/* Mobile tweak */
@media (max-width: 520px){
  .topbar .brand img.logo{
    height: 32px !important;
    max-width: 140px;
  }
}
/* ---- Mobile fixes for Login/Register ---- */
@media (max-width: 680px) {
  /* Stack label and input vertically */
  .form-row { grid-template-columns: 1fr !important; }
  .form-row label { margin-bottom: .35rem; }

  /* If login/register are side-by-side, force single column on phones */
  .auth-grid,
  .grid.auth-grid { grid-template-columns: 1fr !important; }

  /* Prevent card overflow in grid */
  .card, .content .card { min-width: 0; }

  /* Inputs should never overflow */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea { max-width: 100%; width: 100%; }

  /* Optional: full-width submit buttons on phones */
  .auth-actions .btn,
  .auth .btn { width: 100%; }
}
/* --- Mobile fixes for auth screens --- */
@media (max-width: 680px) {
  .form-row { grid-template-columns: 1fr !important; }
  .form-row label { margin-bottom: .35rem; }
  .grid.auth-grid { grid-template-columns: 1fr !important; }
  .card.auth { min-width: 0; }
  .auth-actions .btn { width: 100%; }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select, textarea { width: 100%; max-width: 100%; }
}
/* Keep footer neutral (no theme color) */
.footer { background:#fff; border-top:1px solid #e5e7eb; color:#111; }
.footer a { color:#111; text-decoration:none; }
.footer .btn { background:#e5e7eb; color:#111; }