/* =============================================================================
   BASE LICENSING — Admin UI
   Painel próprio, limpo e moderno (não precisa seguir o visual do Base Gestão).
   CSS puro, sem framework — hospedagem compartilhada simples.
   ============================================================================= */

:root {
  --bl-bg: #f4f6fb;
  --bl-surface: #ffffff;
  --bl-border: #e3e7ef;
  --bl-text: #1c2536;
  --bl-text-muted: #6b7486;
  --bl-primary: #4f5fea;
  --bl-primary-dark: #3c4ad0;
  --bl-primary-light: #eef0fe;
  --bl-sidebar-bg: #171c2e;
  --bl-sidebar-text: #aab0c6;
  --bl-sidebar-text-active: #ffffff;
  --bl-sidebar-active-bg: #262d47;
  --bl-success: #17a673;
  --bl-success-bg: #e8f8f1;
  --bl-warning: #dd9c1f;
  --bl-warning-bg: #fdf3de;
  --bl-danger: #e0435b;
  --bl-danger-bg: #fdeaee;
  --bl-muted-bg: #eceef3;
  --bl-radius: 10px;
  --bl-shadow: 0 1px 2px rgba(20, 24, 40, 0.04), 0 1px 12px rgba(20, 24, 40, 0.05);
  --bl-sidebar-w: 240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bl-bg);
  color: var(--bl-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bl-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 4px; font-weight: 600; color: var(--bl-text); }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 10px; }

code, .mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

/* ---------------------------------------------------------------- layout */

.bl-app { display: flex; min-height: 100vh; }

.bl-sidebar {
  width: var(--bl-sidebar-w);
  flex-shrink: 0;
  background: var(--bl-sidebar-bg);
  color: var(--bl-sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 20;
  transition: transform .2s ease;
}

.bl-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bl-sidebar-brand .bl-logo-dot {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--bl-primary), #7d8bff);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
}
.bl-sidebar-brand small { display: block; font-weight: 400; color: var(--bl-sidebar-text); font-size: 11px; }

.bl-nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
.bl-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px;
  border-radius: 8px;
  color: var(--bl-sidebar-text);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
}
.bl-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.bl-nav a.active { background: var(--bl-sidebar-active-bg); color: var(--bl-sidebar-text-active); }
.bl-nav .bl-icon { width: 16px; text-align: center; opacity: .9; font-size: 13px; }

.bl-sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.bl-sidebar-footer .bl-admin-name { color: #fff; font-weight: 600; display: block; }
.bl-sidebar-footer .bl-admin-email { color: var(--bl-sidebar-text); display: block; margin-bottom: 8px; word-break: break-all; }
.bl-sidebar-footer form { margin: 0; }
.bl-sidebar-footer button {
  background: rgba(255,255,255,.08); color: #fff; border: none; border-radius: 6px;
  padding: 6px 10px; font-size: 12px; cursor: pointer; width: 100%;
}
.bl-sidebar-footer button:hover { background: rgba(255,255,255,.16); }

.bl-main { margin-left: var(--bl-sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }

.bl-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: var(--bl-surface); border-bottom: 1px solid var(--bl-border);
  position: sticky; top: 0; z-index: 10;
}
.bl-topbar h1 { font-size: 18px; }
.bl-topbar-actions { display: flex; gap: 8px; align-items: center; }
.bl-menu-toggle { display: none; background: none; border: 1px solid var(--bl-border); border-radius: 8px; padding: 6px 10px; cursor: pointer; }

.bl-content { padding: 24px 28px 60px; flex: 1; }

.bl-page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.bl-page-header p { color: var(--bl-text-muted); margin: 4px 0 0; }

/* ---------------------------------------------------------------- cards */

.bl-card {
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius);
  box-shadow: var(--bl-shadow);
  padding: 20px;
  margin-bottom: 20px;
}
.bl-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
.bl-card-header h2 { margin: 0; }
.bl-card-header .bl-muted { color: var(--bl-text-muted); font-size: 12.5px; }

.bl-grid { display: grid; gap: 16px; }
.bl-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.bl-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.bl-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) { .bl-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .bl-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .bl-grid-2, .bl-grid-3, .bl-grid-4 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- stat cards */

.bl-stat { padding: 16px 18px; }
.bl-stat .bl-stat-label { font-size: 12px; color: var(--bl-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.bl-stat .bl-stat-value { font-size: 26px; font-weight: 700; line-height: 1; }
.bl-stat .bl-stat-sub { font-size: 12px; color: var(--bl-text-muted); margin-top: 6px; }

/* ---------------------------------------------------------------- tables */

.bl-table-wrap { overflow-x: auto; }
table.bl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.bl-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--bl-text-muted); font-weight: 600; padding: 10px 12px; border-bottom: 2px solid var(--bl-border);
  white-space: nowrap;
}
table.bl-table td { padding: 11px 12px; border-bottom: 1px solid var(--bl-border); vertical-align: middle; }
table.bl-table tr:last-child td { border-bottom: none; }
table.bl-table tr:hover td { background: #fafbfe; }
table.bl-table td.bl-nowrap, table.bl-table th.bl-nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.6;
  background: var(--bl-muted-bg); color: var(--bl-text-muted);
}
.badge-active { background: var(--bl-success-bg); color: var(--bl-success); }
.badge-pending { background: var(--bl-warning-bg); color: var(--bl-warning); }
.badge-warning { background: var(--bl-warning-bg); color: var(--bl-warning); }
.badge-danger { background: var(--bl-danger-bg); color: var(--bl-danger); }
.badge-muted { background: var(--bl-muted-bg); color: var(--bl-text-muted); }
.badge-primary { background: var(--bl-primary-light); color: var(--bl-primary-dark); }
.badge-outline { background: transparent; border: 1px solid var(--bl-border); color: var(--bl-text-muted); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid transparent;
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--bl-muted-bg); color: var(--bl-text);
  line-height: 1.4;
}
.btn:hover { text-decoration: none; filter: brightness(0.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--bl-primary); color: #fff; }
.btn-primary:hover { background: var(--bl-primary-dark); }
.btn-danger { background: var(--bl-danger); color: #fff; }
.btn-danger:hover { background: #c9384e; }
.btn-outline { background: transparent; border-color: var(--bl-border); color: var(--bl-text); }
.btn-outline:hover { background: var(--bl-bg); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-block { width: 100%; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- forms */

.bl-field { margin-bottom: 14px; }
.bl-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--bl-text); }
.bl-field .bl-hint { font-size: 12px; color: var(--bl-text-muted); margin-top: 4px; }
.bl-field-inline { display: flex; align-items: center; gap: 8px; }
.bl-field-inline label { margin: 0; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=url], select, textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--bl-border); border-radius: 8px;
  font-size: 13.5px; font-family: inherit; color: var(--bl-text); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bl-primary); box-shadow: 0 0 0 3px var(--bl-primary-light); }
textarea { resize: vertical; min-height: 70px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--bl-primary); }

.bl-checkbox-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 16px; }
@media (max-width: 640px) { .bl-checkbox-list { grid-template-columns: 1fr; } }
.bl-checkbox-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--bl-border); border-radius: 8px; }
.bl-checkbox-item label { margin: 0; font-weight: 500; font-size: 13px; }
.bl-checkbox-item .bl-hint { margin: 0; }

form.bl-inline { display: inline; }

/* ---------------------------------------------------------------- alerts / flash */

.bl-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13.5px; border: 1px solid transparent; }
.bl-alert-success { background: var(--bl-success-bg); color: #0e6b4d; border-color: #bfe9d8; }
.bl-alert-error { background: var(--bl-danger-bg); color: #a12338; border-color: #f5c2cd; }
.bl-alert-info { background: var(--bl-primary-light); color: var(--bl-primary-dark); border-color: #d6dafc; }

/* ---------------------------------------------------------------- empty state */

.bl-empty { text-align: center; padding: 48px 20px; color: var(--bl-text-muted); }
.bl-empty .bl-empty-icon { font-size: 30px; margin-bottom: 10px; opacity: .6; }
.bl-empty h3 { color: var(--bl-text); margin-bottom: 4px; }
.bl-empty p { max-width: 420px; margin: 0 auto 14px; }

/* ---------------------------------------------------------------- pagination */

.bl-pagination { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.bl-pagination a, .bl-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px;
  font-size: 12.5px; color: var(--bl-text); border: 1px solid var(--bl-border); text-decoration: none;
}
.bl-pagination a:hover { background: var(--bl-bg); text-decoration: none; }
.bl-pagination .bl-page-current { background: var(--bl-primary); border-color: var(--bl-primary); color: #fff; font-weight: 600; }
.bl-pagination .bl-page-disabled { opacity: .4; }

/* ---------------------------------------------------------------- filters bar */

.bl-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.bl-filters .bl-field { margin-bottom: 0; min-width: 160px; }

/* ---------------------------------------------------------------- misc */

.bl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bl-border); margin-bottom: 18px; }
.bl-tabs a { padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--bl-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bl-tabs a.active { color: var(--bl-primary); border-color: var(--bl-primary); }
.bl-tabs a:hover { text-decoration: none; color: var(--bl-primary); }

.bl-timeline { list-style: none; margin: 0; padding: 0; }
.bl-timeline li { display: flex; gap: 12px; padding: 0 0 18px; position: relative; }
.bl-timeline li::before { content: ''; position: absolute; left: 5px; top: 16px; bottom: 0; width: 1px; background: var(--bl-border); }
.bl-timeline li:last-child::before { display: none; }
.bl-timeline .bl-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bl-primary); margin-top: 3px; flex-shrink: 0; }
.bl-timeline .bl-timeline-body { flex: 1; }
.bl-timeline .bl-timeline-msg { font-size: 13.5px; }
.bl-timeline .bl-timeline-meta { font-size: 11.5px; color: var(--bl-text-muted); margin-top: 2px; }

.bl-kv { width: 100%; border-collapse: collapse; }
.bl-kv th { text-align: left; color: var(--bl-text-muted); font-weight: 600; font-size: 12.5px; padding: 7px 10px 7px 0; vertical-align: top; white-space: nowrap; width: 190px; }
.bl-kv td { padding: 7px 0; font-size: 13.5px; }

.bl-license-key { font-family: "SFMono-Regular", Consolas, monospace; font-size: 15px; font-weight: 700; letter-spacing: .5px; }

.bl-divider { border: none; border-top: 1px solid var(--bl-border); margin: 18px 0; }

.bl-chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding-top: 10px; }
.bl-chart-bars .bl-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bl-chart-bars .bl-bar { width: 100%; max-width: 22px; background: var(--bl-primary); border-radius: 3px 3px 0 0; min-height: 2px; }
.bl-chart-bars .bl-bar-label { font-size: 10px; color: var(--bl-text-muted); margin-top: 6px; white-space: nowrap; }

.bl-list-plain { list-style: none; margin: 0; padding: 0; }
.bl-list-plain li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bl-border); font-size: 13.5px; }
.bl-list-plain li:last-child { border-bottom: none; }
.bl-list-plain .bl-list-value { font-weight: 600; }

.bl-copyable { display: inline-flex; align-items: center; gap: 6px; }
.bl-copyable button { background: none; border: 1px solid var(--bl-border); border-radius: 6px; padding: 3px 8px; font-size: 11px; cursor: pointer; }
.bl-copyable button:hover { background: var(--bl-bg); }

.bl-modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15,18,30,.45); z-index: 50;
  align-items: center; justify-content: center; padding: 20px;
}
.bl-modal-backdrop.bl-open { display: flex; }
.bl-modal { background: #fff; border-radius: var(--bl-radius); padding: 22px; max-width: 440px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.bl-modal h3 { margin-bottom: 8px; }
.bl-modal p { color: var(--bl-text-muted); }
.bl-modal .btn-group { justify-content: flex-end; margin-top: 16px; }

@media (max-width: 900px) {
  .bl-sidebar { transform: translateX(-100%); }
  .bl-sidebar.bl-open { transform: translateX(0); }
  .bl-main { margin-left: 0; }
  .bl-menu-toggle { display: inline-flex; }
  .bl-content { padding: 18px 16px 50px; }
  .bl-topbar { padding: 12px 16px; }
}