/* ================================================================
   CardLink — base.css
   Reset · Variáveis · Tipografia · Formulários · Botões · Misc
   ================================================================ */

/* ─── Google Font: Inter ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── Reset ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── Variáveis — Modo Escuro (padrão) ─────────────────────────── */
:root{
  --bg:#0d0f14;
  --surface:#161b25;
  --surface2:#1e2536;
  --surface3:#252d42;
  --border:#2e3a52;
  --border2:#3d4e6a;
  --accent:#4c6ef5;
  --accent2:#6488ff;
  --accent3:#92a9ff;
  --accent-glow:rgba(76,110,245,.22);
  --accent-glow2:rgba(76,110,245,.10);
  --text:#eef0f8;
  --text2:#c8cee0;
  --muted:#7f8ca8;
  --danger:#f03e3e;
  --success:#37b24d;
  --warning:#f59f00;
  --font-head:'Inter',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --radius:10px;
  --radius-lg:16px;
  --radius-xl:22px;
  --shadow:0 8px 32px rgba(0,0,0,.55);
  --shadow-accent:0 0 60px rgba(76,110,245,.16);
  --sidebar-w:250px;
  --topbar-h:60px;
}

/* ─── Modo Claro ────────────────────────────────────────────────── */
[data-theme="light"]{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface2:#eef1f8;
  --surface3:#e3e8f4;
  --border:#d0d8ec;
  --border2:#b8c3de;
  --accent:#3b5bdb;
  --accent2:#4c6ef5;
  --accent3:#6488ff;
  --accent-glow:rgba(59,91,219,.14);
  --accent-glow2:rgba(59,91,219,.07);
  --text:#1a1e2e;
  --text2:#2e3a52;
  --muted:#5a6680;
  --danger:#c92a2a;
  --success:#2f9e44;
  --warning:#e67700;
}

/* ─── Base ──────────────────────────────────────────────────────── */
html{font-size:18px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:var(--accent2);text-decoration:none;transition:.2s;font-weight:500}
a:hover{color:var(--accent3);text-decoration:underline}
img{max-width:100%;height:auto}

/* ─── Formulários ───────────────────────────────────────────────── */
input,textarea,select{
  font-family:var(--font-body);
  font-size:16px;
  background:var(--surface2);
  border:2px solid var(--border);
  color:var(--text);
  border-radius:var(--radius);
  padding:12px 14px;
  width:100%;
  outline:none;
  transition:.2s;
  line-height:1.5;
  -webkit-appearance:none;
  appearance:none;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-glow);
  background:var(--surface3);
}
textarea{resize:vertical;min-height:90px}
select option{background:var(--surface2);color:var(--text)}

/* ─── Botões ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:var(--radius);
  font-family:var(--font-body);font-size:15px;font-weight:600;
  cursor:pointer;border:none;transition:.2s;text-decoration:none;
  white-space:nowrap;letter-spacing:.01em;min-height:46px;
  line-height:1.2;-webkit-tap-highlight-color:transparent;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 18px rgba(76,110,245,.4)}
.btn-primary:hover{background:var(--accent2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(76,110,245,.48);color:#fff;text-decoration:none}
.btn-ghost{background:transparent;color:var(--text2);border:2px solid var(--border2);font-weight:500}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent2);background:var(--accent-glow2);text-decoration:none}
.btn-danger{background:transparent;color:var(--danger);border:2px solid rgba(240,62,62,.35)}
.btn-danger:hover{background:rgba(240,62,62,.10);border-color:var(--danger)}
.btn-success{background:rgba(55,178,77,.12);color:var(--success);border:2px solid rgba(55,178,77,.4)}
.btn-success:hover{background:rgba(55,178,77,.22)}
.btn-sm{padding:10px 18px;font-size:14px;border-radius:9px;min-height:40px}
.btn-xs{padding:8px 13px;font-size:13px;border-radius:8px;min-height:36px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ─── Tags / Badges ─────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 11px;border-radius:20px;font-weight:700;letter-spacing:.03em}
.tag-free{background:var(--surface3);color:var(--muted);border:1px solid var(--border)}
.tag-pro{background:rgba(76,110,245,.15);color:var(--accent2);border:1px solid rgba(76,110,245,.35)}
.tag-equipe{background:rgba(245,159,0,.14);color:var(--warning);border:1px solid rgba(245,159,0,.35)}
.tag-admin{background:rgba(240,62,62,.12);color:var(--danger);border:1px solid rgba(240,62,62,.35)}
.tag-ativo{background:rgba(55,178,77,.12);color:var(--success);border:1px solid rgba(55,178,77,.35)}
.tag-inativo{background:rgba(240,62,62,.12);color:var(--danger);border:1px solid rgba(240,62,62,.35)}

/* ─── Toast ─────────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:20px;right:20px;
  background:var(--surface2);border:2px solid var(--border2);
  color:var(--text);padding:14px 20px;border-radius:var(--radius);
  font-size:15px;z-index:9999;transform:translateY(120px);opacity:0;
  transition:.4s cubic-bezier(.34,1.56,.64,1);
  max-width:min(340px, calc(100vw - 40px));
  box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;font-weight:500;
}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{border-color:rgba(55,178,77,.5);color:var(--success)}
.toast.error{border-color:rgba(240,62,62,.5);color:var(--danger)}

/* ─── Modal ─────────────────────────────────────────────────────── */
.modal-bg{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.78);z-index:500;
  align-items:center;justify-content:center;
  padding:16px;backdrop-filter:blur(6px);
  overflow-y:auto;
}
.modal-bg.show{display:flex}
.modal{
  background:var(--surface);border:2px solid var(--border2);
  border-radius:var(--radius-xl);padding:24px;
  width:100%;max-width:620px;
  box-shadow:var(--shadow),var(--shadow-accent);
  position:relative;
  margin:auto;
}
.modal h2{font-family:var(--font-head);font-size:20px;font-weight:700;margin-bottom:20px;letter-spacing:-.01em}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{margin-bottom:14px}
.form-group label{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);margin-bottom:6px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;
}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;padding-top:16px;border-top:2px solid var(--border)}

/* ─── Info / Pro box ─────────────────────────────────────────────── */
.info-box{background:var(--accent-glow2);border:2px solid rgba(76,110,245,.25);padding:13px 16px;border-radius:var(--radius);font-size:15px;color:var(--text2);margin-bottom:18px;display:flex;gap:10px;align-items:flex-start;font-weight:500}
.pro-box{background:rgba(245,159,0,.08);border:2px solid rgba(245,159,0,.3);padding:13px 16px;border-radius:var(--radius);font-size:14px;color:var(--text2);display:flex;gap:10px;align-items:center}

/* ─── Misc ───────────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:50px 20px;color:var(--muted)}
.empty-state .icon{font-size:46px;margin-bottom:16px;opacity:.6;display:block}
.empty-state h3{font-family:var(--font-head);font-size:18px;color:var(--text2);margin-bottom:8px}
.empty-state p{font-size:16px;line-height:1.7}
.divider{height:2px;background:var(--border);margin:20px 0}

/* ─── Botão tema ─────────────────────────────────────────────────── */
.theme-toggle{
  position:fixed;bottom:20px;right:20px;
  width:48px;height:48px;border-radius:50%;
  background:var(--surface2);border:2px solid var(--border2);
  color:var(--text);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:1000;transition:all .25s ease;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle:hover{transform:scale(1.1);border-color:var(--accent);background:var(--surface3)}

/* ─── Temas de cartão ────────────────────────────────────────────── */
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.theme-opt{border-radius:9px;cursor:pointer;border:3px solid transparent;transition:.2s;display:flex;flex-direction:column;align-items:center;padding:9px 5px;gap:5px;background:var(--surface3)}
.theme-opt:hover{border-color:var(--border2)}
.theme-opt.sel{border-color:var(--accent)}
.theme-dot{width:24px;height:24px;border-radius:50%}
.theme-name{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}

/* ─── Slug field ─────────────────────────────────────────────────── */
.slug-field{display:flex;align-items:center;background:var(--surface2);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden}
.slug-field .prefix{padding:12px 11px 12px 14px;color:var(--muted);font-size:13px;white-space:nowrap;border-right:2px solid var(--border);flex-shrink:0}
.slug-field input{border:none!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;flex:1;padding:12px 12px;min-width:0}
.slug-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}

/* ─── Upgrade banner ─────────────────────────────────────────────── */
.upgrade-banner{background:linear-gradient(135deg,rgba(76,110,245,.12),rgba(100,136,255,.06));border:2px solid rgba(76,110,245,.28);border-radius:var(--radius);padding:16px 20px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.upgrade-banner .txt h4{font-family:var(--font-head);font-size:16px;font-weight:700;margin-bottom:3px}
.upgrade-banner .txt p{font-size:14px;color:var(--text2);line-height:1.55}

/* ─── Responsivo — Form ──────────────────────────────────────────── */
@media(max-width:600px){
  .form-row{grid-template-columns:1fr}
  .modal{padding:20px 16px;border-radius:var(--radius-lg)}
  .modal-footer{flex-direction:column-reverse}
  .modal-footer .btn{width:100%;justify-content:center}
  .theme-grid{grid-template-columns:repeat(4,1fr);gap:6px}
}