/* assets/base.css */
/* Felles design (admin + public) */

:root{
  --brand: #1f7a4f;
  --brand-2: #16a34a;
  --brand-3: #10b981;
  --brand-soft: #eafaf1;

  --sun: #f59e0b;
  --sky: #38bdf8;
  --rose: #fb7185;

  --ink: #0f172a;
  --muted: #64748b;

  --card: #ffffff;
  --border: rgba(15, 23, 42, .10);

  --shadow: 0 14px 34px rgba(2, 6, 23, .10);
  --shadow-soft: 0 10px 22px rgba(2, 6, 23, .08);

  --radius: 18px;
}

html, body{ color: var(--ink); }

body{
  background:
    radial-gradient(1200px 420px at 10% 0%, rgba(56,189,248,.10), transparent 55%),
    radial-gradient(900px 360px at 85% 10%, rgba(245,158,11,.08), transparent 55%),
    #f7faf8;
}

/* Typografi */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6{
  letter-spacing: -0.02em;
}

/* Mobil “tap highlight” */
a, button{ -webkit-tap-highlight-color: transparent; }

/* Navbar */
.navbar{ backdrop-filter: saturate(140%) blur(8px); }
.navbar-brand{
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brand-dot{
  display:inline-block;
  width:.55rem; height:.55rem;
  background: var(--brand-2);
  border-radius: 999px;
  margin-left: .35rem;
  vertical-align: middle;
}

/* Links */
a{ color: inherit; }
a.link-brand{
  color: var(--brand-2);
  font-weight: 700;
}
a.link-brand:hover{
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Text muted override */
.text-muted{ color: var(--muted) !important; }

/* Buttons */
.btn-primary{
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 10px 20px rgba(2,6,23,.08);
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--brand-2);
  border-color: var(--brand-2);
}
.btn-outline-primary{
  color: var(--brand);
  border-color: rgba(31,122,79,.35);
}
.btn-outline-primary:hover{
  background: var(--brand-soft);
  border-color: rgba(31,122,79,.55);
  color: var(--brand);
}
.btn-outline-secondary{
  border-color: rgba(15, 23, 42, .18);
}
.btn-outline-secondary:hover{
  background: rgba(15,23,42,.03);
}
.btn.btn-sm{ border-radius: 12px; }

/* Inputs */
.form-control, .form-select{
  border-radius: 12px;
  border-color: rgba(15,23,42,.14);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(31,122,79,.55);
  box-shadow: 0 0 0 .2rem rgba(31,122,79,.14);
}

/* Cards */
.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  background: var(--card);
}
.card .card-footer{ border-top: 1px solid var(--border); }

/* Filter chips */
.filter-chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .40rem .60rem;
  border-radius: 999px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.22);
  color: #0f5132;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 750;
}
.filter-chip:hover{ background: rgba(16,185,129,.14); }

/* Hero */
.page-hero{
  border-radius: var(--radius);
  background:
    radial-gradient(1200px 300px at 10% 0%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(900px 260px at 80% 10%, rgba(245,158,11,.16), transparent 55%),
    linear-gradient(135deg, #eafaf1 0%, #f7faf8 55%, #ffffff 100%);
  border: 1px solid rgba(31,122,79,.18);
  box-shadow: 0 14px 32px rgba(2,6,23,.06);
}
.page-hero h1{ font-weight: 900; }

/* Badges */
.badge-soft{
  background: rgba(16,185,129,.12);
  color: #0f5132;
  border: 1px solid rgba(16,185,129,.22);
  font-weight: 800;
}
.badge-muted{
  background: #ffffff;
  border: 1px dashed rgba(15,23,42,.18);
  color: #334155;
}

/* Pagination */
.pagination .page-link{
  border-radius: 12px;
  border-color: rgba(15,23,42,.12);
}
.pagination .page-item.active .page-link{
  background: var(--brand);
  border-color: var(--brand);
}

/* Offcanvas */
.offcanvas{ border-left: 1px solid rgba(15,23,42,.10); }

/* Fokus-ring */
:focus-visible{
  outline: 2px solid rgba(31,122,79,.45);
  outline-offset: 2px;
  border-radius: 10px;
}