/* ===== Global CSS — Inspira Management System ===== */
/* Satu file untuk semua: font, layout, grid, card, form, input, tombol, alert, link, utility. */

:root{
  /* Latar cerah gradasi crypto */
  --bg1:#fdfbfb;
  --bg2:#ebedff;
  --bg3:#fff5e6;

  /* Teks & elemen */
  --ink:#0d0f14;
  --muted:#525866;
  --card:#ffffff;
  --line:#00000012;

  /* Aksen */
  --accent:#5b61ff;
  --accent-2:#ff7b4a;

  /* Link */
  --a:#2f3137;        /* abu tua */
  --a-hover:#7b1f2f;  /* merah maroon */

  /* Status */
  --ok:#16a34a;
  --bad:#dc2626;

  /* UI */
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 600px at 15% 0%, var(--bg2) 0%, transparent 60%),
    radial-gradient(900px 550px at 85% 15%, var(--bg3) 0%, transparent 60%),
    linear-gradient(135deg, var(--bg1), #f6f8ff 60%, #fff);
}

/* ===== Anchor (a) — estetik, Poppins, abu tua, hover maroon ===== */
a, a:visited{
  color:var(--a);
  text-decoration:none;
  font-family:inherit;     /* Poppins */
  font-weight:600;
  transition:color .15s ease, background-size .2s ease;
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px; /* garis halus muncul saat hover */
}
a:hover{
  color:var(--a-hover);
  background-size:100% 2px;
}
a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px #ffe4e6;
  border-radius:6px;
}

/* Utility link class (jika dipakai di HTML) */
.link{ color:var(--a); text-decoration:none; }

/* ===== Layout ===== */
.page{min-height:100dvh; display:grid; place-items:center; padding:24px}
.wrap{width:min(1100px, 94vw)}

/* Dua kolom sejajar; tinggi dibuat sama (stretch) */
.grid-2{
  display:grid;
  grid-template-columns: 1.2fr 1fr; /* kiri lebih lebar */
  gap:24px;
  align-items: stretch; /* samakan tinggi */
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* ===== Card (box) ===== */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
  height:100%; /* agar mengikuti tinggi baris grid */
}
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.10); }
.card-body{ padding:28px; }
.card-title{ margin:0 0 12px; font-size:20px; font-weight:700; color:var(--ink); }

/* ===== Brand block ===== */
.brand{ display:flex; gap:16px; align-items:center; margin-bottom:12px; }
.brand-logo{
  width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center; font-weight:800; color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow);
}
.brand-title{ margin:0; font-size:26px; font-weight:800; letter-spacing:.2px; }
.brand-meta{ margin:4px 0 0; color:#3036a4; font-weight:600; font-size:14px; }
/* Link di area brand mengikuti gaya anchor global */
.brand-meta a{ color:var(--a); }

/* ===== Teks deskripsi ===== */
.desc{ margin:14px 0 0; line-height:1.6; color:#111827; }

/* Spacer untuk dorong elemen ke bawah */
.spacer{ flex:1; }

/* ===== Info-card dan Form-card isi flex agar presisi ===== */
.info-body{ display:flex; flex-direction:column; min-height:100%; }

/* Instagram follow bar di bawah kartu kiri */
.ig-follow{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px;
  background:linear-gradient(135deg, #ffffff 0%, #f3f6ff 100%);
  border:1px dashed #cfd6ff; color:#1f2670; text-decoration:none; font-weight:600;
  transition: filter .15s ease, transform .06s ease, box-shadow .15s ease;
}
.ig-follow:hover{ filter:brightness(1.05); box-shadow:0 8px 20px rgba(91,97,255,.25); }
.ig-icon{ display:inline-grid; place-items:center; }

/* Form card: konten ditengah secara vertikal, tapi tinggi kartu tetap sama dengan kiri */
.form-body{ display:flex; flex-direction:column; justify-content:center; min-height:100%; }

/* ===== Form ===== */
.form{ display:grid; gap:14px; margin-top:10px; font-family:inherit; }
.field{ display:grid; gap:8px; }
label{ font-weight:600; font-size:14px; color:#111827; font-family:inherit; }
.input{
  appearance:none; outline:none; border:none;
  width:100%; padding:12px 14px; border-radius:12px;
  background:#f8fafc; color:#0b1220;
  box-shadow: inset 0 0 0 1px #e5e7eb;
  transition: box-shadow .15s ease, transform .05s ease;
  font-family:inherit; font-size:15px;
}
.input::placeholder{ color:#8b93a7; }
.input:focus{
  box-shadow:
    inset 0 0 0 1px #cdd4ff,
    0 0 0 4px #e9ecff;
}

/* ===== Button ===== */
.btn{
  display:inline-block; width:100%;
  border:none; cursor:pointer; user-select:none;
  padding:12px 16px; border-radius:12px; font-weight:700; font-size:16px;
  background:linear-gradient(135deg, var(--accent), #3b42ff);
  color:#fff; letter-spacing:.2px;
  box-shadow: 0 8px 20px rgba(91,97,255,.35), inset 0 -2px 0 rgba(0,0,0,.08);
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
  font-family:inherit;
}
.btn:hover{ filter:brightness(1.05); box-shadow:0 12px 30px rgba(91,97,255,.45), inset 0 -2px 0 rgba(0,0,0,.08); }
.btn:active{ transform:translateY(1px); }

/* ===== Alert ===== */
.alert{
  padding:10px 12px; border-radius:10px; font-weight:600; font-size:14px; margin:6px 0 12px;
  border:1px solid;
}
.alert-error{ background:#fff1f2; color:#b91c1c; border-color:#fecdd3; }

/* ===== Utility ===== */
.note{ margin:8px 2px 0; color:var(--muted); font-size:12px; font-family:inherit; }

/* Penyesuaian padding khusus */
.info-card .card-body{ padding:32px; }

/* ====== KOMponen Dashboard Staff ====== */
.boxed{ max-width:1100px; margin:0 auto; }

.btn-chip{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px;
  border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
  font-weight:700; color:#0f172a; text-decoration:none;
}
.btn-chip:hover{ filter:brightness(1.03); }

.badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; border:1px solid transparent; }
.b-green{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.b-yellow{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
.b-red{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.b-blue{ background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }

.chip{ padding:4px 10px; border-radius:999px; font-weight:700; font-size:12px; background:#eef2ff; color:#1f2937; border:1px solid #e5e7eb; }
.chip-personal{ background:#ecfeff; color:#164e63; border-color:#a5f3fc; }
.chip-global{ background:#fef3c7; color:#92400e; border-color:#fde68a; }
.chip-marketing{ background:#e0e7ff; color:#3730a3; border-color:#c7d2fe; }

.task-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
@media (max-width: 1100px){ .task-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px){ .task-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .task-grid{ grid-template-columns: 1fr; } }
.task-card{ padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow); display:grid; gap:10px; }
.task-title{ margin:0; font-size:16px; font-weight:800; }
.task-desc{ margin:0; font-size:13px; color:#374151; }
.task-meta{ display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:#374151; }
.task-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Tabel */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid #e5e7eb; text-align:left; }

/* Modal <dialog> */
dialog{ border:none; border-radius:16px; padding:0; box-shadow:0 30px 80px rgba(0,0,0,.25); width:min(640px, 92vw); }
.modal{ padding:20px; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.modal-title{ margin:0; font-weight:800; font-size:18px; }
.close{ background:#f3f4f6; border:none; border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:700; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 600px){ .two-col{ grid-template-columns:1fr; } }

/* KPI */
.kpi{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
@media (max-width: 800px){ .kpi{ grid-template-columns: repeat(2,1fr); } }
.kpi .stat h4{ margin:0 0 6px; font-size:12px; color:#6b7280; text-transform:uppercase; letter-spacing:.06em; }