:root {
  --app-primary: #3157d5;
  --app-primary-dark: #223da8;
  --app-accent: #6f5cf1;
  --app-surface: #ffffff;
  --app-bg: #f4f7fc;
  --app-text: #1e293b;
  --app-muted: #64748b;
  --app-border: #e6ebf3;
  --app-radius: 18px;
  --app-shadow: 0 10px 32px rgba(30, 41, 59, .08);
  --app-shadow-hover: 0 18px 45px rgba(49, 87, 213, .15);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body.app-body {
  min-height: 100vh;
  color: var(--app-text);
  background:
    radial-gradient(circle at 0 0, rgba(111, 92, 241, .10), transparent 28rem),
    radial-gradient(circle at 100% 10%, rgba(49, 87, 213, .09), transparent 30rem),
    var(--app-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-navbar {
  background: linear-gradient(115deg, #243fa9 0%, #3157d5 54%, #6f5cf1 115%);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 30px rgba(35, 55, 140, .22);
}
.app-navbar .container-fluid { min-height: 66px; }
.app-navbar .navbar-brand { display: flex; align-items: center; gap: .75rem; }
.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255,255,255,.17);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  font-size: 1.2rem;
}
.brand-copy { line-height: 1.06; }
.brand-title { display:block; font-size: .99rem; font-weight: 750; letter-spacing: -.01em; }
.brand-subtitle { display:block; margin-top:.25rem; font-size:.68rem; font-weight:500; opacity:.78; }

.app-navbar .nav-link {
  margin: .15rem .08rem;
  padding: .58rem .78rem !important;
  border-radius: 11px;
  color: rgba(255,255,255,.82) !important;
  font-size: .91rem;
  font-weight: 550;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link.active,
.app-navbar .show > .nav-link {
  color: #fff !important;
  background: rgba(255,255,255,.14);
}
.app-navbar .nav-link:hover { transform: translateY(-1px); }
.app-navbar .dropdown-menu {
  min-width: 220px;
  padding: .55rem;
  border: 1px solid rgba(226,232,240,.85);
  border-radius: 15px;
  box-shadow: 0 18px 45px rgba(15,23,42,.16);
}
.app-navbar .dropdown-item {
  padding: .62rem .72rem;
  border-radius: 10px;
  font-size: .9rem;
}
.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item.active {
  color: var(--app-primary-dark);
  background: #eef2ff;
  font-weight: 650;
}
.nav-icon { width: 1.15rem; display:inline-block; margin-right:.35rem; text-align:center; }
.year-chip {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .68rem;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
  font-size:.79rem;
  white-space:nowrap;
}
.account-trigger { display:flex !important; align-items:center; gap:.55rem; }
.account-avatar {
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.18);
  font-weight:750;
}
.account-name { max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.app-main { width:100%; max-width:1480px; min-height:calc(100vh - 150px); }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.page-heading h4,
.app-main > h4,
.app-main .d-flex h4 { font-weight:780; letter-spacing:-.025em; color:#172033; }
.page-kicker {
  display:inline-flex;
  margin-bottom:.32rem;
  color:var(--app-primary);
  font-size:.72rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.card {
  border: 1px solid rgba(230,235,243,.95);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow) !important;
  overflow: hidden;
}
.card-body { padding: 1.25rem; }
.card-header { border-bottom-color: var(--app-border); background:#fff; }

.form-label { margin-bottom:.42rem; color:#475569; font-size:.83rem; font-weight:680; }
.form-control,
.form-select {
  min-height:43px;
  border-color:#dce3ee;
  border-radius:12px;
  color:#243047;
  background-color:#fff;
  box-shadow:none !important;
}
.form-control:focus,
.form-select:focus {
  border-color:#8197ec;
  box-shadow:0 0 0 .22rem rgba(49,87,213,.11) !important;
}
textarea.form-control { min-height:auto; }
.form-text, .text-muted { color:var(--app-muted) !important; }

.btn {
  min-height:39px;
  padding:.52rem .84rem;
  border-radius:11px;
  font-weight:650;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary {
  border-color:var(--app-primary);
  background:linear-gradient(135deg, var(--app-primary), #5873e6);
  box-shadow:0 7px 16px rgba(49,87,213,.18);
}
.btn-primary:hover { border-color:var(--app-primary-dark); background:linear-gradient(135deg, var(--app-primary-dark), var(--app-primary)); }
.btn-sm { min-height:32px; padding:.36rem .65rem; border-radius:9px; font-size:.8rem; }

.alert { border:0; border-radius:14px; box-shadow:0 8px 22px rgba(15,23,42,.05); }
.badge { padding:.44em .66em; border-radius:8px; font-weight:650; }

.table { --bs-table-bg: transparent; margin-bottom:.25rem; }
.table thead th {
  padding:.78rem .72rem;
  border-bottom:1px solid #dfe6f0;
  color:#607087;
  background:#f7f9fd;
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
}
.table tbody td { padding:.76rem .72rem; border-bottom-color:#edf1f6; }
.table tbody tr:hover { background:rgba(238,242,255,.62); }
.table-responsive { border-radius:13px; }
.pagination .page-link { margin:0 .12rem; border:0; border-radius:9px !important; color:#4055ad; }
.pagination .page-item.active .page-link { background:var(--app-primary); }

.section-icon {
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--app-primary);
  background:#eef2ff;
  font-size:1.05rem;
}

.metric-card { position:relative; overflow:hidden; }
.metric-card::after {
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-30px;
  top:-35px;
  border-radius:50%;
  background:rgba(49,87,213,.07);
}
.metric-label { color:var(--app-muted); font-size:.79rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.metric-value { margin-top:.2rem; font-size:1.8rem; line-height:1.1; font-weight:800; letter-spacing:-.04em; }
.metric-help { margin-top:.3rem; color:var(--app-muted); font-size:.78rem; }

.activity-card { transition:transform .2s ease, box-shadow .2s ease; }
.activity-card:hover { transform:translateY(-4px); box-shadow:var(--app-shadow-hover) !important; }
.activity-media { position:relative; aspect-ratio:16 / 10; overflow:hidden; background:#e9eef7; }
.activity-photo-button {
  width:100%;
  height:100%;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
}
.activity-thumb { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease, filter .25s ease; }
.activity-photo-button:hover .activity-thumb { transform:scale(1.045); filter:brightness(.88); }
.activity-zoom {
  position:absolute;
  right:.75rem;
  bottom:.75rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.4rem .58rem;
  border-radius:10px;
  color:#fff;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(8px);
  font-size:.73rem;
  font-weight:700;
  opacity:0;
  transform:translateY(5px);
  transition:.22s ease;
}
.activity-photo-button:hover .activity-zoom { opacity:1; transform:none; }
.activity-placeholder {
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  color:#8b98ad;
  background:linear-gradient(135deg,#eef2f8,#e4eaf4);
}
.activity-placeholder i { font-size:2rem; opacity:.72; }
.activity-description {
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#526176;
  font-size:.9rem;
  line-height:1.55;
}
.activity-title { font-size:1.02rem; font-weight:760; letter-spacing:-.015em; }
.activity-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.38rem; color:var(--app-muted); font-size:.76rem; }
.meta-pill { display:inline-flex; align-items:center; gap:.28rem; padding:.3rem .48rem; border-radius:8px; background:#f3f6fb; }

.photo-preview-modal .modal-content { border:0; border-radius:18px; overflow:hidden; background:#111827; box-shadow:0 24px 70px rgba(0,0,0,.35); }
.photo-preview-modal .modal-header { color:#fff; border-bottom-color:rgba(255,255,255,.12); }
.photo-preview-modal .btn-close { filter:invert(1); }
.photo-preview-frame { min-height:260px; display:grid; place-items:center; background:#0b1120; }
.photo-preview-frame img { display:block; max-width:100%; max-height:78vh; object-fit:contain; }

.monthly-table .journal-count { font-size:1rem; font-weight:800; color:#243fa9; }
.status-dot { width:9px; height:9px; display:inline-block; border-radius:50%; margin-right:.35rem; }
.status-dot.ok { background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.status-dot.empty { background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.13); }

.app-footer { border-top:1px solid rgba(226,232,240,.8); background:rgba(255,255,255,.72); backdrop-filter:blur(12px); }

.loading-spinner { width:1rem; height:1rem; border-width:.14em; }

@media (max-width: 991.98px) {
  .app-navbar .navbar-collapse { padding:.7rem 0 1rem; }
  .app-navbar .nav-link { margin:.12rem 0; }
  .year-chip { margin:.5rem 0; }
  .account-name { max-width:none; }
}
@media (max-width: 575.98px) {
  .app-main { padding-top:1rem !important; }
  .card-body { padding:1rem; }
  .page-heading { flex-direction:column; }
  .activity-media { aspect-ratio:4 / 3; }
  .activity-zoom { opacity:1; transform:none; }
  .table thead th, .table tbody td { padding:.65rem .56rem; }
}

/* Branding dan logo yang dapat diubah dari dashboard admin */
.brand-mark.has-logo {
  padding: 3px;
  overflow: hidden;
  background: rgba(255,255,255,.96);
}
.brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 9px;
}
.login-brand-mark {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-size: 1.4rem;
  border-radius: 20px;
  background: linear-gradient(135deg,#3157d5,#6f5cf1);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 16px 35px rgba(49,87,213,.24);
}
.login-brand-mark.has-logo {
  padding: 5px;
  background: #fff;
  border-color: var(--app-border);
}
.login-brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 14px;
}
.branding-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 112px;
  padding: 1.2rem;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(115deg, #243fa9 0%, #3157d5 54%, #6f5cf1 115%);
  box-shadow: 0 16px 35px rgba(49,87,213,.22);
}
.branding-preview-logo {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  display: grid;
  place-items: center;
  padding: 5px;
  overflow: hidden;
  color: #3157d5;
  font-size: 1.65rem;
  border-radius: 20px;
  background: #fff;
}
.branding-preview-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 14px;
}
.branding-preview-title { font-size: 1.08rem; font-weight: 800; }
.branding-preview-subtitle { margin-top: .3rem; font-size: .82rem; opacity: .8; }