/* =========================================================
   SmartLink Ad Network — Design System
   Palette: Ink #0F1225, Violet #6C5CE7, Teal #00D9C0,
            Cloud #F6F7FB, Slate #6B7280
   Type: 'Sora' (display) + 'Inter' (body/UI)
   ========================================================= */

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

:root{
  --ink:#0F1225;
  --ink-soft:#171B33;
  --violet:#6C5CE7;
  --violet-dark:#5847d1;
  --teal:#00D9C0;
  --cloud:#F6F7FB;
  --slate:#6B7280;
  --border:#E7E9F3;
  --radius:14px;
}

*{box-sizing:border-box;}

body{
  font-family:'Inter', system-ui, sans-serif;
  background:var(--cloud);
  color:#1B1E2E;
}

h1,h2,h3,h4,h5,h6{ font-family:'Sora', sans-serif; letter-spacing:-0.01em; }

a{ text-decoration:none; }

.text-gradient{
  background:linear-gradient(90deg, var(--teal), var(--violet));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.btn-gradient{
  background:linear-gradient(90deg, var(--violet), #8f7bf0);
  color:#fff;
  border:none;
}
.btn-gradient:hover{ color:#fff; filter:brightness(1.08); }

/* ---------- Public Navbar ---------- */
.sl-navbar{
  background:var(--ink);
}
.sl-navbar .nav-link{ color:rgba(255,255,255,.75); }
.sl-navbar .nav-link:hover{ color:#fff; }

/* ---------- Hero ---------- */
.sl-hero{
  background:radial-gradient(1100px 500px at 15% -10%, #262b52 0%, var(--ink) 55%);
  position:relative;
}
.sl-hero-icon{
  font-size:11rem;
  color:transparent;
  background:linear-gradient(135deg, var(--teal), var(--violet));
  -webkit-background-clip:text;
  background-clip:text;
  opacity:.9;
}

.sl-feature-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem 1.5rem;
  height:100%;
}
.sl-feature-card i{ font-size:2rem; color:var(--violet); }

.sl-cta{ background:var(--ink); color:#fff; }

/* ---------- Auth pages ---------- */
.sl-auth-wrap{ min-height:calc(100vh - 76px); background:var(--cloud); }
.sl-auth-card{ border-radius:20px; }
.sl-auth-icon{ font-size:2.4rem; color:var(--violet); }

/* ---------- Pricing ---------- */
.sl-pricing-card{ border-radius:var(--radius); transition:transform .15s ease; }
.sl-pricing-card:hover{ transform:translateY(-4px); }
.sl-pricing-highlight{ border:2px solid var(--violet) !important; }

/* ---------- App Shell (dashboard) ---------- */
.sl-app{ display:flex; min-height:100vh; }

.sl-sidebar{
  width:260px;
  flex-shrink:0;
  background:var(--ink);
  color:#fff;
  padding:1.25rem 1rem;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.sl-sidebar-brand{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:1.1rem;
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .25rem 1.25rem;
}
.sl-sidebar-brand i{ color:var(--teal); }

.sl-sidebar-user{
  display:flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.05);
  border-radius:12px;
  padding:.6rem .7rem;
  margin-bottom:1rem;
}
.sl-sidebar-user img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.sl-sidebar-user .name{ font-size:.85rem; font-weight:600; }
.sl-sidebar-user .role{ font-size:.7rem; color:rgba(255,255,255,.5); }

.sl-sidebar-nav{ display:flex; flex-direction:column; gap:.15rem; }
.sl-sidebar-nav a{
  color:rgba(255,255,255,.7);
  padding:.6rem .75rem;
  border-radius:10px;
  font-size:.88rem;
  display:flex; align-items:center; gap:.6rem;
}
.sl-sidebar-nav a i{ width:18px; text-align:center; }
.sl-sidebar-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sl-sidebar-nav a.active{ background:var(--violet); color:#fff; }

.sl-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.sl-topbar{
  display:flex; align-items:center;
  padding:1rem 1.5rem;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.sl-burger{ background:none; border:none; font-size:1.2rem; margin-right:.75rem; }
.sl-icon-btn{ background:var(--cloud); border:none; width:38px; height:38px; border-radius:50%; }
.sl-badge-dot{ position:absolute; top:-4px; right:-4px; font-size:.6rem; }
.sl-theme-toggle{ background:var(--cloud); border:none; width:38px; height:38px; border-radius:50%; }

.sl-content{ padding:1.5rem; flex:1; }

/* ---------- Cards & Stats ---------- */
.sl-card{ border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 1px 2px rgba(15,18,37,.03); }

.sl-stat-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
}
.sl-stat-card i{ font-size:1.3rem; color:var(--violet); background:rgba(108,92,231,.1); width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.sl-stat-card .value{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.4rem; margin-top:.6rem; }
.sl-stat-card .label{ font-size:.78rem; color:var(--slate); }

.sl-mini-stat{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; }
.sl-mini-stat .label{ font-size:.78rem; color:var(--slate); }
.sl-mini-stat .value{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.2rem; }

.sl-quick-action{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  background:var(--cloud); border-radius:12px; padding:1.25rem .5rem;
  color:#1B1E2E; text-align:center; font-size:.82rem; font-weight:600;
}
.sl-quick-action i{ font-size:1.4rem; color:var(--violet); }
.sl-quick-action:hover{ background:#ECEAFB; color:#1B1E2E; }

.sl-table th{ font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; color:var(--slate); border-bottom-width:1px; }
.sl-table td{ font-size:.88rem; }

.sl-avatar-lg{ width:110px; height:110px; border-radius:50%; object-fit:cover; border:3px solid var(--border); }

.sl-notification-item{ border-bottom:1px solid var(--border); padding:.85rem 0; }
.sl-notification-item:last-child{ border-bottom:none; }

/* ---------- Dark mode ---------- */
body.dark-mode{ background:#0B0D1C; color:#E6E8F5; }
body.dark-mode .sl-topbar,
body.dark-mode .sl-card,
body.dark-mode .sl-stat-card,
body.dark-mode .sl-mini-stat,
body.dark-mode .sl-quick-action{ background:#141731; border-color:#242850; color:#E6E8F5; }
body.dark-mode .sl-content{ background:#0B0D1C; }
body.dark-mode .sl-quick-action{ color:#E6E8F5; }
body.dark-mode .text-muted{ color:#9498B8 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .sl-sidebar{
    position:fixed; left:-280px; top:0; z-index:1050; transition:left .25s ease; box-shadow:0 0 30px rgba(0,0,0,.3);
  }
  .sl-sidebar.open{ left:0; }
}