/* cPanel Extended Admin - Part 1 minimal styles (Tailwind-ready scaffold)
   In later parts we will ship compiled Tailwind CSS.
*/
.cp-ext { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }
.cp-ext__topbar { background: #0b1220; border-bottom: 1px solid rgba(255,255,255,.08); }
.cp-ext__topbar-inner { max-width: 1200px; margin: 0 auto; padding: 14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cp-ext__brand { display:flex; align-items:center; gap:10px; color:#fff; }
.cp-ext__logo { width: 12px; height: 12px; border-radius: 999px; background: #34d399; display:inline-block; }
.cp-ext__brand-text { font-weight: 650; letter-spacing: .2px; }
.cp-ext__badge { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.12); color:#e5e7eb; }

.cp-ext__top-actions { display:flex; align-items:center; gap:10px; }
.cp-ext__link { color:#cbd5e1; text-decoration:none; font-size: 13px; }
.cp-ext__link:hover { color:#fff; }
.cp-ext__btn { color:#0b1220; background:#e5e7eb; text-decoration:none; padding:8px 12px; border-radius: 10px; font-weight:600; font-size: 13px; }
.cp-ext__btn:hover { opacity:.92; }

.cp-ext__container { max-width: 1200px; margin: 0 auto; padding: 16px; display:grid; grid-template-columns: 260px 1fr; gap: 16px; }
@media (max-width: 980px){ .cp-ext__container { grid-template-columns: 1fr; } .cp-ext__sidebar { position: sticky; top: 0; } }

.cp-ext__sidebar { background: #0b1220; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 10px; height: fit-content; }
.cp-ext__nav { display:block; padding: 10px 12px; border-radius: 12px; color:#cbd5e1; text-decoration:none; font-weight:600; font-size: 13px; }
.cp-ext__nav:hover { background: rgba(255,255,255,.06); color:#fff; }
.cp-ext__nav.is-active { background: rgba(52,211,153,.16); color:#d1fae5; border: 1px solid rgba(52,211,153,.28); }
.cp-ext__hr { height:1px; background: rgba(255,255,255,.08); margin: 10px 0; }

.cp-ext__main { }
.cp-ext__header { display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; margin-bottom: 12px; }
.cp-ext__h1 { margin:0; font-size: 20px; font-weight: 750; color:#0b1220; }
.cp-ext__muted { color:#64748b; font-size: 13px; margin-top: 6px; }
.cp-ext__alert { background: #ecfeff; border: 1px solid #a5f3fc; color:#0e7490; padding: 10px 12px; border-radius: 14px; margin-bottom: 12px; font-weight:600; }

.cp-ext__grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
@media (max-width: 980px){ .cp-ext__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .cp-ext__grid { grid-template-columns: 1fr; } }

.cp-ext__card { background:#fff; border:1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.cp-ext__card--pad { padding: 14px; }
.cp-ext__card-title { padding: 14px 14px 0 14px; font-weight: 700; color:#0b1220; }
.cp-ext__kpi { padding: 6px 14px 0 14px; font-size: 28px; font-weight: 800; color:#0b1220; }

.cp-ext__form-row { margin-bottom: 12px; }
.cp-ext__label { display:block; font-weight: 700; font-size: 13px; color:#0b1220; margin-bottom: 6px; }
.cp-ext__input { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid #e5e7eb; outline: none; }
.cp-ext__input:focus { border-color: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
.cp-ext__hint { font-size: 12px; color:#64748b; margin-top: 6px; }

.cp-ext__actions { display:flex; gap: 10px; margin-top: 10px; }
.cp-ext__btn-primary { border:0; cursor:pointer; background:#0b1220; color:#fff; padding: 10px 14px; border-radius: 12px; font-weight: 750; }
.cp-ext__btn-primary:hover { opacity: .94; }

.cp-ext__table-wrap { overflow:auto; }
.cp-ext__table { width: 100%; border-collapse: collapse; min-width: 520px; }
.cp-ext__table th { text-align:left; font-size: 12px; color:#475569; padding: 10px 8px; border-bottom: 1px solid #e5e7eb; }
.cp-ext__table td { padding: 10px 8px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.cp-ext__pill { display:inline-block; padding: 3px 10px; border-radius: 999px; background:#f1f5f9; color:#0f172a; font-weight: 700; font-size: 12px; }