/* ═══════════════════════════════════════════════════════════════
   LKTI LPPM IAKN Toraja — Institutional Academic Design System
   Inspired by: Springer, Elsevier, OJS journals
   Identity: IAKN Toraja (navy-purple + crimson red + gold)
   ═══════════════════════════════════════════════════════════════ */

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

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  /* IAKN Toraja institutional palette */
  --navy:          #1a1838;   /* deep navy-purple — authority */
  --navy-mid:      #252347;   /* mid navy */
  --navy-light:    #3b3873;   /* lighter navy for hover */
  --crimson:       #b91c2a;   /* IAKN red */
  --crimson-dark:  #9b1522;
  --gold:          #c9970a;   /* academic gold — muted, prestigious */
  --gold-light:    #f5c200;   /* bright gold accent */

  /* Semantic */
  --primary:         var(--navy);
  --primary-hover:   var(--navy-mid);
  --primary-fg:      #f8f7ff;

  /* Backgrounds — warm academic paper feel */
  --bg-body:         #f5f4f0;   /* warm parchment-ish */
  --bg-paper:        #ffffff;
  --bg-muted:        #f0eff6;
  --bg-subtle:       #e8e6f0;

  /* Text */
  --text-primary:    #1a1730;
  --text-secondary:  #4a4768;
  --text-muted:      #7a78a0;
  --text-light:      #a0a0c0;

  /* Borders */
  --border:          #dddbe8;
  --border-strong:   #c8c5d8;
  --border-focus:    var(--navy);

  /* Semantic colors */
  --success:         #166534;
  --success-bg:      #f0fdf4;
  --success-border:  #bbf7d0;
  --warning:         #92400e;
  --warning-bg:      #fffbeb;
  --warning-border:  #fde68a;
  --danger:          var(--crimson);
  --danger-bg:       #fff1f2;
  --danger-border:   #fecdd3;
  --info:            #1e3a8a;
  --info-bg:         #eff6ff;
  --info-border:     #bfdbfe;

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(26,24,56,0.05);
  --shadow-sm:   0 1px 4px rgba(26,24,56,0.08), 0 1px 2px rgba(26,24,56,0.04);
  --shadow-md:   0 4px 16px rgba(26,24,56,0.10), 0 2px 6px rgba(26,24,56,0.06);
  --shadow-lg:   0 8px 32px rgba(26,24,56,0.12), 0 4px 12px rgba(26,24,56,0.08);
  --shadow-xl:   0 20px 60px rgba(26,24,56,0.16), 0 8px 24px rgba(26,24,56,0.10);

  /* Radius */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* Typography */
  --font-display: 'Poppins', Arial, sans-serif;
  --font-body:    'Poppins', Arial, sans-serif;

  /* Spacing */
  --space-section: 3rem;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Poppins', Arial, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: rgba(26,24,56,0.12); }

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-muted); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.container       { width:100%; max-width:68rem; margin:0 auto; padding:0 1.5rem; }
.container-wide  { width:100%; max-width:82rem; margin:0 auto; padding:0 1.5rem; }
.main-layout     { min-height:100vh; display:flex; flex-direction:column; }
.main-content    { flex:1; padding:2rem 0 3rem; }

/* ═══════════════════════════════════════════════════════════════
   TOP BAR — institutional identity strip (navy, crimson accent)
   ═══════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--navy);
  /* Padding simetris atas-bawah + border di kedua sisi = konten benar-benar center */
  padding-top: 2.5px;           /* sama tebal dengan border-bottom agar optically center */
  border-top: 2.5px solid transparent;   /* placeholder agar box-model simetris */
  border-bottom: 2.5px solid var(--crimson);
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  position: relative;
  z-index: 51;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  padding: 0.3125rem 0;  /* 5px atas-bawah → konten center di dalam min-height */
}

/* Left: institution name */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar-brand strong { color: rgba(255,255,255,0.9); }

/* Divider dot */
.topbar-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--crimson);
  display: inline-block;
}

/* Right: utility links */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.topbar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  /* padding simetris agar tombol center secara vertikal */
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  line-height: 1;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.topbar-action:hover { color: var(--gold-light); background: rgba(255,255,255,0.06); }
.topbar-action svg   { flex-shrink: 0; }

/* Theme toggle button — sun/moon */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* width = height → perfect square → konten icon center */
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  transition: all 0.15s;
  flex-shrink: 0;
  line-height: 1;  /* pastikan tidak ada extra line-height */
}
.theme-toggle:hover { background: rgba(255,255,255,0.13); color: var(--gold-light); }
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }

/* Dark mode */
.dark-mode .theme-toggle .icon-sun  { display: none; }
.dark-mode .theme-toggle .icon-moon { display: block; }

/* Topbar separator */
.topbar-sep {
  width: 1px;
  height: 0.875rem;
  background: rgba(255,255,255,0.12);
  margin: 0 0.25rem;
}

/* Locale toggle di dalam topbar — override warna agar cocok dengan bg navy */
.topbar .locale-toggle {
  border-color: rgba(255,255,255,0.15);
  height: 1.375rem;           /* lebih kecil, proporsional dengan topbar */
}
.topbar .locale-btn {
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
}
.topbar .locale-btn.active {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
}
.topbar .locale-btn:not(.active):hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
}

/* Hide topbar brand on very small screens */
@media (max-width: 480px) {
  .topbar-brand { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — CSS variables override
   ═══════════════════════════════════════════════════════════════ */
.dark-mode {
  --navy:         #2d2960;
  --bg-body:      #0f0e1a;
  --bg-paper:     #17162a;
  --bg-muted:     #1f1e35;
  --bg-subtle:    #252341;
  --text-primary: #e8e6f8;
  --text-secondary:#a8a4cc;
  --text-muted:   #6e6a90;
  --text-light:   #4a4770;
  --border:       #2e2b4a;
  --border-strong:#3a3760;
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR — main navigation
   ═══════════════════════════════════════════════════════════════ */
/* ── NAVBAR ──────────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-paper);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: background 0.3s, border-color 0.3s;
}

/* Padding simetris atas-bawah → konten selalu center tanpa perlu height fixed */
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;   /* 12px atas = 12px bawah → perfect center */
}

/* ── Brand ────────────────────────────────────────────────────── */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
  /* Hapus semua transform/margin tersembunyi */
  padding: 0;
  margin: 0;
}

.navbar-brand img {
  display: block;    /* hilangkan inline baseline gap */
  flex-shrink: 0;
}

.navbar-brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1875rem;    /* 3px antara title dan sub */
  padding: 0;
  margin: 0;
}

.navbar-brand-title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 0;
  margin: 0;
}

.navbar-brand-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--crimson);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0;
  margin: 0;
  opacity: 0.85;
}

/* ── Nav links ────────────────────────────────────────────────── */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

.nav-link:hover { color: var(--navy); background: var(--bg-muted); }

.nav-link.active {
  color: var(--navy);
  background: var(--bg-subtle);
  font-weight: 600;
  position: relative;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -0.4375rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--crimson);
  border-radius: 2px;
}

/* ── Navbar right ─────────────────────────────────────────────── */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}

/* ── Logout button ────────────────────────────────────────────── */
.btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--crimson);
  background: transparent;
  border: 1.5px solid rgba(185,28,42,0.25);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.btn-logout:hover {
  background: var(--danger-bg);
  border-color: var(--crimson);
  color: var(--crimson-dark);
}

/* ─── User chip ──────────────────────────────────────────────── */
.user-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg-muted);
  cursor: default;
}

.user-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.user-chip-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Role badge ─────────────────────────────────────────────── */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role-superadmin { background: rgba(185,28,42,.12); color: var(--crimson); }
.role-admin      { background: rgba(26,24,56,.10);  color: var(--navy); }
.role-editor     { background: rgba(201,151,10,.12); color: var(--gold); }
.role-reviewer   { background: rgba(21,128,61,.10);  color: #166534; }
.role-author     { background: var(--bg-subtle);     color: var(--text-secondary); }

/* ─── Locale toggle ──────────────────────────────────────────── */
.locale-toggle {
  display: inline-flex;
  align-items: center;     /* center vertikal tombol ID/EN */
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  height: 1.625rem;        /* tinggi tetap agar center di topbar */
}

.locale-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5625rem;
  height: 100%;            /* isi penuh locale-toggle height */
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  line-height: 1;          /* hapus extra line-height */
  transition: all 0.15s;
}

.locale-btn.active      { background: var(--navy); color: #fff; }
.locale-btn:not(.active):hover { background: var(--bg-muted); color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5625rem 1.125rem;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease-out;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-primary:hover { background: var(--navy-mid); border-color: var(--navy-mid); }

.btn-crimson {
  background: var(--crimson);
  color: #fff;
  border-color: var(--crimson);
}
.btn-crimson:hover { background: var(--crimson-dark); }

.btn-gold {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.btn-gold:hover { background: #a87c06; }

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-outline:hover { background: var(--bg-muted); }

.btn-outline-white {
  background: transparent;
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.35);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.12); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-muted); color: var(--text-primary); }

.btn-danger {
  background: var(--crimson);
  color: #fff;
  border-color: var(--crimson);
}
.btn-danger:hover { background: var(--crimson-dark); }

.btn-secondary {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--border); color: var(--text-primary); }

/* Sizes */
.btn-xs { padding: 0.2rem 0.5rem; font-size: 0.6875rem; border-radius: var(--r-sm); border-width:1px; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
.btn-lg { padding: 0.75rem 1.75rem; font-size: 0.9375rem; }
.btn-xl { padding: 0.9375rem 2.25rem; font-size: 1rem; border-radius: var(--r-lg); }

/* Aliases for legacy classes */
.btn-red         { background: var(--crimson); color: #fff; border-color: var(--crimson); }
.btn-red:hover   { background: var(--crimson-dark); }
.btn-destructive { background: var(--crimson); color: #fff; border-color: var(--crimson); }
.btn-destructive:hover { background: var(--crimson-dark); }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}

.card-hover {
  transition: box-shadow 0.2s ease-out, transform 0.2s ease-out, border-color 0.2s;
}
.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.card-body   { padding: 1.375rem; }
.card-header { padding: 1rem 1.375rem; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid var(--border); }
.card-footer { padding: 0.875rem 1.375rem; border-top: 1px solid var(--border); display:flex; align-items:center; gap:0.75rem; }

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.form-group { display:flex; flex-direction:column; gap:0.375rem; }

.label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.label-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

.input {
  width: 100%;
  height: 2.375rem;
  padding: 0 0.875rem;
  background: var(--bg-paper);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26,24,56,0.12);
}

.input::placeholder { color: var(--text-light); }
.input.error { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(185,28,42,0.10); }

textarea.input { height: auto; padding: 0.625rem 0.875rem; resize: vertical; line-height: 1.6; }
select.input   { cursor: pointer; height: 2.375rem; }
.input-lg      { height: 2.75rem; font-size: 0.9375rem; }

.field-error { font-size: 0.75rem; color: var(--crimson); margin-top: 0.25rem; display:flex; align-items:center; gap:0.25rem; }

/* ═══════════════════════════════════════════════════════════════
   BADGES & STATUS
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.625rem;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge-primary   { background: rgba(26,24,56,.08);  color: var(--navy);    border-color: rgba(26,24,56,.12); }
.badge-crimson   { background: var(--danger-bg);     color: var(--crimson); border-color: var(--danger-border); }
.badge-gold      { background: rgba(201,151,10,.10); color: var(--gold);   border-color: rgba(201,151,10,.18); }
.badge-success   { background: var(--success-bg);    color: var(--success); border-color: var(--success-border); }
.badge-warning   { background: var(--warning-bg);    color: var(--warning); border-color: var(--warning-border); }
.badge-danger    { background: var(--danger-bg);     color: var(--crimson); border-color: var(--danger-border); }
.badge-muted     { background: var(--bg-muted);      color: var(--text-muted); border-color: var(--border); }
.badge-secondary { background: var(--bg-subtle);     color: var(--text-secondary); border-color: var(--border-strong); }
.badge-purple    { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.badge-cyan      { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.badge-orange    { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.badge-red       { background: var(--danger-bg); color: var(--crimson); border-color: var(--danger-border); }

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8375rem;
}

table.data-table thead {
  background: var(--navy);
  position: sticky;
  top: 0;
}

table.data-table th {
  padding: 0.75rem 1.125rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.06);
}

table.data-table th:last-child { border-right: none; }

table.data-table td {
  padding: 0.8125rem 1.125rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover td { background: var(--bg-muted); }

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.375rem;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--navy);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.stat-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS / FLASH
   ═══════════════════════════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.8375rem;
  line-height: 1.5;
  border-left: 4px solid transparent;
}

.alert-success { background: var(--success-bg); border-color: var(--success); color: #15803d; border-left-color: var(--success); border: 1px solid var(--success-border); border-left: 4px solid var(--success); }
.alert-error   { background: var(--danger-bg);  border-color: var(--crimson); color: var(--crimson); border: 1px solid var(--danger-border); border-left: 4px solid var(--crimson); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); border-left: 4px solid var(--warning); }
.alert-info    { background: var(--info-bg);    color: var(--info); border: 1px solid var(--info-border); border-left: 4px solid var(--info); }

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.page-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 0.1875rem;
}

.page-subtitle { font-size: 0.875rem; color: var(--text-muted); }

/* ─── Section heading with accent bar ───────────────────────── */
.section-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.section-heading::before {
  content: '';
  display: block;
  width: 4px;
  height: 1.375rem;
  background: var(--crimson);
  border-radius: 2px;
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0;
}

.section-subtitle { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.125rem; }

/* ═══════════════════════════════════════════════════════════════
   HERO — Academic Banner
   ═══════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: stretch;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

/* Dark navy-purple BG — IAKN Toraja identity */
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0f0d27 0%, #1a1838 45%, #201d45 100%);
}

/* Red stripe — IAKN signature */
.hero-top-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--crimson);
  z-index: 2;
}

.hero-red-stripe {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5px;
  background: var(--crimson);
  z-index: 2;
}

/* Geometric decoration */
.hero-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-deco::before {
  content: '';
  position: absolute;
  right: -8rem;
  top: -8rem;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  border: 60px solid rgba(255,255,255,0.03);
}

.hero-deco::after {
  content: '';
  position: absolute;
  left: -4rem;
  bottom: -6rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  border: 40px solid rgba(255,255,255,0.025);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  align-items: stretch;
}

/* Left gold vertical accent */
.hero-content::before {
  content: '';
  display: block;
  width: 5px;
  background: linear-gradient(to bottom, var(--gold-light), var(--gold));
  flex-shrink: 0;
  margin: 2.5rem 0;
  border-radius: 0 3px 3px 0;
  opacity: 0.9;
}

.hero-body {
  flex: 1;
  padding: 2.75rem 2.25rem 2.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.875rem;
  border-radius: var(--r-full);
  background: rgba(245,194,0,0.12);
  border: 1px solid rgba(245,194,0,0.25);
  color: var(--gold-light);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.125rem;
  width: fit-content;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #f8f7ff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.hero-subtitle {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero-desc {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2rem;
}

/* ISSN-style info strip */
.hero-meta {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  padding: 0.625rem 1.25rem;
  border-left: 1px solid rgba(255,255,255,0.12);
}

.hero-meta-item:first-child { border-left: none; padding-left: 0; }

.hero-meta-value {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: #f8f7ff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-meta-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

/* Right aside — "Published by" */
.hero-aside {
  width: 200px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.25);
  border-left: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  gap: 1rem;
  text-align: center;
}

.hero-aside-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

.hero-aside-name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--navy);
  border-top: 4px solid var(--crimson);
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  padding: 1.375rem 0;
}

.footer a { color: rgba(255,255,255,0.6); transition: color 0.15s; }
.footer a:hover { color: var(--gold-light); }
.footer strong { color: rgba(255,255,255,0.85); }

/* ═══════════════════════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════════════════════ */
.timeline-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

.timeline-step {
  flex: 1;
  min-width: 0; /* allow flex children to shrink properly */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.75rem;
  position: relative;
}

.timeline-step::before {
  content: '';
  position: absolute;
  top: 1.1875rem;
  left: calc(50% + 1.25rem);
  right: calc(-50% + 1.25rem);
  height: 2px;
  background: linear-gradient(90deg, var(--crimson), var(--border));
}

.timeline-step:last-child::before { display: none; }

.timeline-dot {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(26,24,56,.12);
}

.timeline-dot-active { background: var(--crimson); box-shadow: 0 0 0 3px rgba(185,28,42,.15); }

.timeline-step-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 0.25rem;
  /* Penggalan kata yang rapi: pecah antar kata saja, tidak di tengah kata */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.timeline-step-date {
  font-size: 0.6875rem;
  color: var(--text-muted);
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Tablet: jika ada ≥5 step, kolom menjadi terlalu sempit — susun vertikal lebih awal */
@media (max-width: 900px) {
  .timeline-steps { flex-direction: column; align-items: stretch; }
  .timeline-step  {
    flex-direction: row;
    text-align: left;
    padding: 0 0 1.25rem;
    align-items: flex-start;
    width: 100%;
    gap: 1rem;
    position: relative;
  }
  .timeline-step::before { display: none; }
  .timeline-step::after  {
    content: '';
    position: absolute;
    top: 2.375rem;
    left: 1.1875rem;
    bottom: 0;
    width: 2px;
    background: var(--border);
  }
  .timeline-step:last-child::after { display: none; }
  .timeline-dot   { margin-bottom: 0; flex-shrink: 0; }
  .timeline-step-title { font-size: 0.875rem; }
}

/* ═══════════════════════════════════════════════════════════════
   GRIDS
   ═══════════════════════════════════════════════════════════════ */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.text-muted   { color: var(--text-muted); }
.text-navy    { color: var(--navy); }
.text-crimson { color: var(--crimson); }
.text-gold    { color: var(--gold); }
.text-success { color: var(--success); }
.text-danger  { color: var(--crimson); }

.divider { height:1px; background:var(--border); margin:1.25rem 0; }
.divider-thick { height:2px; background:var(--border); }

.empty-state { text-align:center; padding:3rem 1.5rem; }
.empty-state-icon  { font-size:2.5rem; margin-bottom:0.75rem; opacity:0.3; }
.empty-state-title { font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text-primary); margin-bottom:0.375rem; }
.empty-state-desc  { font-size:0.875rem; color:var(--text-muted); }

.fade-in  { animation: fadeIn  0.35s ease-out both; will-change: opacity; }
.slide-up { animation: slideUp 0.35s ease-out both; will-change: opacity, transform; }
.delay-100 { animation-delay:.10s; }
.delay-200 { animation-delay:.20s; }
.delay-300 { animation-delay:.30s; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

.hide-mobile { }

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV — bottom tab bar
   ═══════════════════════════════════════════════════════════════ */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg-paper);
  border-top: 1px solid var(--border);
  padding: 0.25rem 0 calc(0.25rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 20px rgba(26,24,56,0.10);
}

.mobile-nav-inner { display:flex; justify-content:space-around; align-items:center; }

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  min-width: 3.5rem;
  transition: color 0.15s;
}

.mobile-nav-item.active { color: var(--navy); }
.mobile-nav-item.active svg { stroke: var(--navy); }

/* ─── Hamburger ──────────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: var(--r-md);
  transition: background 0.15s;
}
.hamburger:hover { background: var(--bg-muted); }
.hamburger span  { display:block; height:2px; background:var(--text-primary); border-radius:2px; transition:all .25s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ─── Mobile drawer ──────────────────────────────────────────── */
.mobile-drawer-overlay {
  display: none;
  position: fixed; inset:0; z-index:200;
  background: rgba(10,8,32,0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fadeIn .2s ease-out;
}

.mobile-drawer {
  position: absolute;
  top:0; right:0; bottom:0;
  width: min(300px, 88vw);
  background: var(--bg-paper);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  animation: slideFromRight .25s ease-out;
  border-left: 1px solid var(--border);
}

.mobile-drawer-head {
  background: var(--navy);
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 3px solid var(--crimson);
}

.drawer-user-name  { font-size:.875rem; font-weight:700; color:#fff; }
.drawer-user-role  { font-size:.6875rem; color:rgba(255,255,255,.5); margin-top:.125rem; }
.drawer-user-email { font-size:.6875rem; color:rgba(255,255,255,.4); margin-top:.0625rem; }

.drawer-nav { padding: .625rem; flex:1; }

.drawer-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0.875rem;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: background .15s, color .15s;
  margin-bottom: .125rem;
}
.drawer-nav-link:hover  { background:var(--bg-muted); }
.drawer-nav-link.active { background:rgba(26,24,56,.08); color:var(--navy); font-weight:600; }
.drawer-nav-link svg    { flex-shrink:0; color:var(--text-muted); }
.drawer-nav-link.active svg { color:var(--navy); }

.drawer-footer { padding:1rem 1.25rem; border-top:1px solid var(--border); }

@keyframes slideFromRight { from{transform:translateX(100%)} to{transform:translateX(0)} }

/* ─── PWA Banner ─────────────────────────────────────────────── */
.pwa-banner {
  position: fixed;
  bottom: calc(4.5rem + env(safe-area-inset-bottom,0px));
  left: 1rem; right: 1rem;
  z-index: 99;
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1rem 1.125rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: .875rem;
  max-width: 420px;
  margin: 0 auto;
  animation: slideUp .35s ease-out;
  border-top: 3px solid var(--crimson);
}

.pwa-banner-icon  { width:2.5rem; height:2.5rem; background:var(--navy); border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pwa-banner-title { font-size:.875rem; font-weight:700; color:var(--text-primary); }
.pwa-banner-desc  { font-size:.75rem; color:var(--text-muted); }

/* ─── Responsive table ───────────────────────────────────────── */
@media (max-width:640px) {
  .table-responsive thead { display:none; }
  .table-responsive tbody tr {
    display:block;
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    margin-bottom:.625rem;
    padding:.875rem 1rem;
    background:var(--bg-paper);
  }
  .table-responsive tbody td {
    display:flex; justify-content:space-between; align-items:center;
    padding:.3rem 0; border:none; font-size:.8125rem;
  }
  .table-responsive tbody td::before {
    content:attr(data-label);
    font-size:.6875rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; color:var(--text-muted); margin-right:.5rem; flex-shrink:0;
  }
}

/* ─── Responsive breakpoints ─────────────────────────────────── */
@media (max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  .hamburger      { display:flex !important; }
  .navbar-nav     { display:none !important; }
  .hide-mobile    { display:none !important; }
  .mobile-nav     { display:block; }
  .main-content   { padding-bottom:calc(4.5rem + env(safe-area-inset-bottom,0px)); }
  .page-header    { flex-direction:column; gap:.75rem; }
  .container-wide { padding:0 1rem; }
  .hero-aside     { display:none; }
  .hero-body      { padding:2rem 1.5rem; }
  .hero-title     { font-size:1.75rem; }
  .hero-actions   { flex-direction:column; align-items:flex-start; }
  .grid-3         { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  .stat-value { font-size:1.625rem; }
  .hero-meta  { flex-direction:column; gap:.5rem; }
  .hero-meta-item { border-left:none; border-top:1px solid rgba(255,255,255,.08); padding:.375rem 0; }
  .hero-meta-item:first-child { border-top:none; padding-top:0; }
}

@media (pointer:coarse) {
  .btn      { min-height:2.75rem; }
  .btn-sm   { min-height:2.25rem; }
  .nav-link { min-height:2.5rem; }
  .input    { height:2.75rem; }
}

.trashed-row { opacity:.5; }

/* ─── Published-by card ──────────────────────────────────────── */
.published-by-card {
  text-align:center;
}
.published-by-card p {
  font-size:.5625rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin-bottom:.375rem; font-weight:600;
}
.published-by-card strong {
  font-size:.6875rem; color:rgba(255,255,255,.75);
  font-weight:600; line-height:1.4; display:block; margin-top:.375rem;
}


/* ═══════════════════════════════════════════════════════════════
   COMPATIBILITY BRIDGE — safe, no layout-breaking !important
   Maps class names used in views → design system tokens
   ═══════════════════════════════════════════════════════════════ */

/* ─── Text colors — safe to use color-only !important ─────────── */
.text-navy    { color: var(--navy); }
.text-primary-600, .text-primary-700 { color: var(--navy); }
.text-blue-600 { color: var(--navy); }
.text-gray-900, .text-gray-800 { color: var(--text-primary); }
.text-secondary, .text-gray-700, .text-gray-600 { color: var(--text-secondary); }
.text-muted-fg, .text-gray-500, .text-gray-400  { color: var(--text-muted); }
.text-gray-300 { color: var(--text-light); }
.text-crimson, .text-red-500, .text-red-600, .text-red-700 { color: var(--crimson); }
.text-success-color, .text-green-600, .text-green-700 { color: var(--success); }
.text-warning-color, .text-yellow-600 { color: var(--warning); }
.text-purple-6, .text-purple-600, .text-purple-700 { color: #6d28d9; }

/* hover variants */
.hover\:text-primary-600:hover,
.hover\:text-primary-700:hover { color: var(--navy); }

/* ─── Backgrounds — scoped to avoid overriding hero/topbar ───── */
.bg-paper   { background: var(--bg-paper); }
.bg-muted   { background: var(--bg-muted); }
.bg-subtle  { background: var(--bg-subtle); }

/* bg-white ONLY inside .card or .main-content — never globally */
.card .bg-white,
.main-content .bg-white { background: var(--bg-paper); }

/* bg-gray-50 inside content areas only */
.main-content .bg-gray-50 { background: var(--bg-muted); }
.main-content .bg-gray-100 { background: var(--bg-subtle); }
.main-content .hover\:bg-gray-50:hover { background: var(--bg-muted); }

.bg-success-light, .bg-green-100 { background: var(--success-bg); }
.bg-warning-light, .bg-yellow-100 { background: var(--warning-bg); }
.bg-danger-light,  .bg-red-50     { background: var(--danger-bg); }
.bg-info-light, .bg-blue-50, .bg-blue-100 { background: var(--info-bg); }

/* ─── Borders ─────────────────────────────────────────────────── */
.border-light { border-color: var(--border); }
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--border); }
.border-crimson, .border-red-400, .border-red-500 { border-color: var(--crimson); }
.border-navy, .border-primary-600 { border-color: var(--navy); }

/* ─── Rounded ─────────────────────────────────────────────────── */
.rounded-card { border-radius: var(--r-lg); }
/* .rounded-xl kept as-is via rounded-card */
/* .rounded-lg, .rounded-md handled natively by browser */

/* ─── Typography helpers ──────────────────────────────────────── */
.font-600, .font-semibold { font-weight: 600; }
.font-700, .font-bold     { font-weight: 700; }
.font-medium              { font-weight: 500; }

/* Headings in views */
.text-2xl.font-700, .text-2xl.font-bold { color: var(--navy); }
.text-xl.font-700, .text-xl.font-bold   { color: var(--navy); }

/* ─── Form elements inside .main-content only ─────────────────── */
.main-content input:not([type=checkbox]):not([type=radio]),
.main-content select,
.main-content textarea {
  border-color: var(--border-strong);
  background: var(--bg-paper);
  color: var(--text-primary);
  font-family: var(--font-body);
}

.main-content input:not([type=checkbox]):not([type=radio]):focus,
.main-content select:focus,
.main-content textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26,24,56,0.10);
  outline: none;
}

.main-content label.block,
.main-content .block.text-sm.font-medium,
.main-content .block.text-sm.font-600 {
  color: var(--text-primary);
  font-weight: 600;
}

/* ─── File input ──────────────────────────────────────────────── */
input[type="file"]::file-selector-button {
  background: var(--bg-subtle);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  cursor: pointer;
  margin-right: 0.5rem;
  transition: background 0.15s;
}
input[type="file"]::file-selector-button:hover { background: var(--border); }

/* ─── Checkbox/radio accent ───────────────────────────────────── */
input[type="checkbox"], input[type="radio"] { accent-color: var(--navy); }

/* ─── Back links inside main-content ──────────────────────────── */
.main-content a.text-sm.text-gray-500 { color: var(--text-muted); }
.main-content a.text-sm.text-gray-500:hover { color: var(--navy); }

/* ─── Dark mode safe overrides ────────────────────────────────── */
.dark-mode .bg-paper,
.dark-mode .card .bg-white,
.dark-mode .main-content .bg-white { background: var(--bg-paper); }

.dark-mode .bg-muted,
.dark-mode .main-content .bg-gray-50 { background: var(--bg-muted); }

.dark-mode .border-light,
.dark-mode .border-gray-100,
.dark-mode .border-gray-200,
.dark-mode .border-gray-300 { border-color: var(--border); }

.dark-mode .main-content input:not([type=checkbox]):not([type=radio]),
.dark-mode .main-content select,
.dark-mode .main-content textarea {
  background: var(--bg-muted);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ─── Flex/grid/spacing helpers (no !important needed) ─────────── */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-1\.5 > * + * { margin-top: 0.375rem; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-1         { flex: 1; }
.flex-wrap      { flex-wrap: wrap; }
.flex-shrink-0  { flex-shrink: 0; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }

.w-full     { width: 100%; }
.max-w-sm   { max-width: 384px; }
.max-w-md   { max-width: 448px; }
.max-w-xl   { max-width: 576px; }
.max-w-2xl  { max-width: 672px; }

.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.p-4  { padding: 1rem; }
.p-5  { padding: 1.25rem; }
.p-6  { padding: 1.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }

.grid           { display: grid; }
.grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-2     { grid-column: span 2; }
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:col-span-2  { grid-column: span 2; }
}

.hidden          { display: none; }
.block           { display: block; }
.inline-flex     { display: inline-flex; }
.overflow-hidden  { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }
.resize-none     { resize: none; }
.relative        { position: relative; }
.absolute        { position: absolute; }
.line-clamp-1    { overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.line-clamp-2    { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.truncate        { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.whitespace-nowrap { white-space: nowrap; }
.uppercase       { text-transform: uppercase; }
.capitalize      { text-transform: capitalize; }
.underline       { text-decoration: underline; }
.hover\:underline:hover { text-decoration: underline; }
.cursor-pointer  { cursor: pointer; }
.select-none     { -webkit-user-select: none; user-select: none; }
.max-h-40        { max-height: 10rem; }
.max-h-48        { max-height: 12rem; }

/* ── Reusable UI components to reduce inline style repetition ── */

/* Section heading dengan red bar accent */
.sh { display:flex; align-items:center; gap:0.625rem; margin-bottom:1.25rem; }
.sh::before { content:''; display:block; width:4px; height:1.25rem; background:var(--crimson); border-radius:2px; flex-shrink:0; }
.sh h2, .sh .sh-title { font-family:var(--font-body); font-size:1.125rem; font-weight:700; color:var(--navy); margin:0; }

/* Stat card variants */
.sc          { background:var(--bg-paper); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.25rem 1.375rem; position:relative; overflow:hidden; box-shadow:var(--shadow-xs); }
.sc::before  { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--navy); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.sc.sc-red::before     { background:var(--crimson); }
.sc.sc-orange::before  { background:#d97706; }
.sc.sc-green::before   { background:#16a34a; }
.sc.sc-purple::before  { background:#7c3aed; }
.sc.sc-gold::before    { background:var(--gold); }

.sc-icon { width:2.25rem; height:2.25rem; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; margin-bottom:0.75rem; background:var(--bg-subtle); }
.sc-icon.red    { background:rgba(185,28,42,.09); }
.sc-icon.orange { background:rgba(217,119,6,.10); }
.sc-icon.green  { background:rgba(22,163,74,.10); }
.sc-icon.purple { background:rgba(124,58,237,.10); }
.sc-icon.gold   { background:rgba(201,151,10,.10); }

.sc-value { font-family:var(--font-body); font-size:2rem; font-weight:800; line-height:1; letter-spacing:-0.04em; color:var(--navy); margin-bottom:0.25rem; }
.sc-value.red    { color:var(--crimson); }
.sc-value.orange { color:#d97706; }
.sc-value.green  { color:#16a34a; }
.sc-value.purple { color:#7c3aed; }
.sc-value.gold   { color:var(--gold); }

.sc-label { font-size:0.6875rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-muted); }

/* Card table header */
.card-table-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.375rem; border-bottom:1px solid var(--border); }
.card-table-header h2 { font-size:0.9375rem; font-weight:700; color:var(--navy); }

/* Empty state with SVG */
.empty-svg { display:flex; flex-direction:column; align-items:center; gap:0.75rem; padding:3rem 1.5rem; text-align:center; }
.empty-svg svg { opacity:0.25; }
.empty-svg-title { font-weight:700; font-size:1rem; color:var(--text-primary); }
.empty-svg-desc  { font-size:0.875rem; color:var(--text-muted); margin-top:0.125rem; }

/* Muted text */
.t-muted { color:var(--text-muted); }
.t-navy  { color:var(--navy); }
.t-sm    { font-size:0.8125rem; }
.t-xs    { font-size:0.75rem; }

/* Deadline warning */
.deadline-warn { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.75rem; font-weight:600; color:var(--crimson); }

/* ── Icon action buttons ───────────────────────────────────── */
.btn-icon-edit,
.btn-icon-delete,
.btn-icon-view,
.btn-icon-restore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease-out;
  background: transparent;
  flex-shrink: 0;
  padding: 0;
  text-decoration: none;
}

.btn-icon-edit {
  color: var(--navy);
  border-color: var(--border);
  background: var(--bg-muted);
}
.btn-icon-edit:hover {
  background: var(--bg-subtle);
  border-color: var(--navy);
  color: var(--navy);
}

.btn-icon-delete {
  color: var(--crimson);
  border-color: var(--danger-border);
  background: var(--danger-bg);
  font-family: inherit;
}
.btn-icon-delete:hover {
  background: rgba(185,28,42,0.14);
  border-color: var(--crimson);
}

.btn-icon-view {
  color: var(--navy);
  border-color: var(--border);
  background: var(--bg-muted);
  text-decoration: none;
}
.btn-icon-view:hover {
  background: var(--bg-subtle);
  border-color: var(--navy);
}

.btn-icon-restore {
  color: var(--success);
  border-color: var(--success-border);
  background: var(--success-bg);
  font-family: inherit;
}
.btn-icon-restore:hover {
  background: rgba(22,163,74,0.14);
  border-color: var(--success);
}

/* Wrapper untuk grup ikon aksi dalam tabel */
.action-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* ── Edit Modal ─────────────────────────────────────────────── */
.edit-modal-wrap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.edit-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,8,32,0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.edit-modal-box {
  position: relative;
  background: var(--bg-paper);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  border-top: 4px solid var(--navy);
  animation: slideUp .22s ease-out both;
}

.edit-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-paper);
  z-index: 1;
}

.edit-modal-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

.edit-modal-title-icon {
  width: 2rem;
  height: 2rem;
  background: var(--bg-subtle);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.edit-modal-close {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-md);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.edit-modal-close:hover { background: var(--bg-muted); color: var(--text-primary); }

.edit-modal-body { padding: 1.5rem; }

.edit-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.75rem;
  background: var(--bg-paper);
}

/* Loading skeleton */
.edit-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 3rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--border);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .edit-modal-box { max-width: 100%; margin: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .edit-modal-wrap { align-items: flex-end; padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   MATERIAL AI PRINCIPLES — adopted 2026-06-01
   Prinsip dari "Estilo Material AI" DESIGN.md
   Warna IAKN Toraja dipertahankan; prinsip layout/motion/type diadopsi
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Typography Scale (clamp-based, responsive) ─────────── */
:root {
  --text-hero:    clamp(2rem, 5vw, 3.5rem);
  --text-h1:      clamp(1.5rem, 3vw, 2.25rem);
  --text-h2:      clamp(1.25rem, 2.5vw, 1.5rem);
  --text-h3:      1.125rem;
  --text-body:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-caption: 0.6875rem;

  /* Line-height per level */
  --lh-hero:   1.15;
  --lh-heading: 1.25;
  --lh-body:   1.65;
  --lh-tight:  1.1;

  /* Letter-spacing */
  --ls-tight:  -0.03em;
  --ls-normal: -0.01em;
  --ls-wide:   0.04em;
  --ls-wider:  0.08em;

  /* ─── 2. Z-index contract (Material AI §12) ─────────────── */
  --z-base:       0;
  --z-raised:     10;
  --z-sticky:     100;
  --z-overlay:    200;
  --z-modal:      300;
  --z-toast:      500;
  --z-tooltip:    600;

  /* ─── 3. Spacing rhythm (8px base unit) ────────────────── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-section: clamp(3rem, 7vw, 6rem);

  /* ─── 4. Motion tokens (ease-out physics) ───────────────── */
  --dur-fast:    150ms;
  --dur-normal:  200ms;
  --dur-slow:    300ms;
  --dur-entry:   420ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --stagger:     80ms;

  /* ─── 5. Max-width containment ──────────────────────────── */
  --max-content: 1280px;
  --max-prose:   72ch;
  --max-narrow:  640px;
}

/* ─── Apply clamp typography to elements ────────────────────── */
h1 { font-size: var(--text-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--text-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--text-h3); line-height: var(--lh-heading); }

.page-title {
  font-size: var(--text-h1) !important;
  letter-spacing: var(--ls-tight);
}

.hero-title {
  font-size: var(--text-hero) !important;
  line-height: var(--lh-hero) !important;
  letter-spacing: var(--ls-tight);
}

/* ─── Z-index: update existing usages to contract ───────────── */
.topbar        { z-index: var(--z-sticky) !important; }
.navbar        { z-index: var(--z-sticky) !important; }
.mobile-nav    { z-index: var(--z-sticky); }
.mobile-drawer-overlay { z-index: var(--z-overlay) !important; }
#confirmModal  { z-index: var(--z-modal) !important; }
#editModal     { z-index: var(--z-modal) !important; }
.pwa-banner    { z-index: var(--z-toast); }

/* ─── Motion: entry animation refinement ────────────────────── */
.fade-in {
  animation: fadeIn var(--dur-entry) var(--ease-out) both;
}

.slide-up {
  animation: slideUp var(--dur-entry) var(--ease-out) both;
}

/* Stagger helpers */
.stagger-1 { animation-delay: calc(var(--stagger) * 1); }
.stagger-2 { animation-delay: calc(var(--stagger) * 2); }
.stagger-3 { animation-delay: calc(var(--stagger) * 3); }
.stagger-4 { animation-delay: calc(var(--stagger) * 4); }
.stagger-5 { animation-delay: calc(var(--stagger) * 5); }
.stagger-6 { animation-delay: calc(var(--stagger) * 6); }

/* Smooth all transitions consistently */
.btn, .nav-link, .card-hover, .btn-icon-edit,
.btn-icon-delete, .btn-icon-view, .btn-icon-restore,
.drawer-nav-link, .locale-btn, .theme-toggle {
  transition-duration: var(--dur-normal);
  transition-timing-function: var(--ease-out);
}

/* Button active press — tactile feedback */
.btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* Card hover — Material lift */
.card-hover {
  transition: box-shadow var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out);
}
.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

/* ─── Skeleton shimmer (Material pattern) ───────────────────── */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-subtle);
  border-radius: var(--r-md);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.5) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Dark mode skeleton */
.dark-mode .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
}

/* ─── Material ripple effect ─────────────────────────────────── */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  top: var(--ripple-y, 50%);
  left: var(--ripple-x, 50%);
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
}

.ripple:active::after {
  animation: rippleEffect 600ms var(--ease-out) forwards;
}

@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ─── Page transition (fade only, 200ms) ────────────────────── */
.page-enter {
  animation: fadeIn var(--dur-slow) var(--ease-out) both;
}

/* ─── Max-width containment override ────────────────────────── */
.container-wide {
  max-width: var(--max-content);
}

/* ─── Empty state refinement (icon-based, no emoji) ─────────── */
.empty-svg {
  padding: clamp(2rem, 5vw, 4rem) 1.5rem;
}

/* ─── Prose max-width for body text ─────────────────────────── */
.prose { max-width: var(--max-prose); }

/* ─── min-height: 100dvh (not vh) ───────────────────────────── */
.main-layout { min-height: 100dvh; }

/* ─── Input focus refinement ─────────────────────────────────── */
.input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(26,24,56,0.12);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* ─── Navigation active indicator (crisp) ───────────────────── */
.nav-link.active::after {
  transition: width var(--dur-normal) var(--ease-out);
}

/* ─── Section spacing using clamp ───────────────────────────── */
.section         { padding: var(--sp-section) 0; }
.section-sm      { padding: calc(var(--sp-section) * 0.6) 0; }
.section-heading { margin-bottom: var(--sp-6); }

/* ─── Monospace for code/JSON (Material §10) ────────────────── */
code, pre, .font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.875em;
}

/* ─── Dark mode: motion tokens preserved ────────────────────── */
.dark-mode .card-hover:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}


/* ── Password toggle wrapper ──────────────────── */
.pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pw-wrap .input {
    padding-right: 2.5rem;
    width: 100%;
}
.pw-toggle {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    transition: color .15s;
    line-height: 1;
}
.pw-toggle:hover { color: var(--navy); }
.pw-toggle .icon-show { display: block; }
.pw-toggle .icon-hide { display: none; }
.pw-toggle.visible .icon-show { display: none; }
.pw-toggle.visible .icon-hide { display: block; }

/* ── Document Preview Modal ─────────────────────── */
.doc-preview-wrap {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9997;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.doc-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,8,32,0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.doc-preview-box {
    position: relative;
    background: var(--bg-paper);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 780px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp .22s ease-out both;
}
.doc-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--navy);
    flex-shrink: 0;
}
.doc-preview-head h3 { font-size:.875rem; font-weight:700; color:#fff; margin:0; }
.doc-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 2.5rem;
    background: #fff;
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 12pt;
    line-height: 1.8;
    color: #111;
}
/* Mammoth generated styles */
.doc-preview-body h1 { font-size:16pt; font-weight:700; margin:1.2em 0 .4em; }
.doc-preview-body h2 { font-size:14pt; font-weight:700; margin:1em 0 .4em; }
.doc-preview-body h3 { font-size:12pt; font-weight:700; margin:.8em 0 .3em; }
.doc-preview-body p  { margin: 0 0 .8em; }
.doc-preview-body table { border-collapse:collapse; width:100%; margin:.8em 0; }
.doc-preview-body td, .doc-preview-body th { border:1px solid #ccc; padding:.4em .6em; }
.doc-preview-body strong { font-weight:700; }
.doc-preview-body em     { font-style:italic; }
.doc-preview-body u      { text-decoration:underline; }
.doc-preview-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--bg-muted);
    flex-shrink: 0;
    gap: .75rem;
}
@media (max-width: 768px) {
    .doc-preview-box { max-width:100%; max-height:95vh; border-radius:var(--r-lg) var(--r-lg) 0 0; }
    .doc-preview-wrap { align-items: flex-end; padding:0; }
    .doc-preview-body { padding:1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   USER DROPDOWN  (navbar kanan — desktop)
   ═══════════════════════════════════════════════════════════════════ */
.user-dropdown {
  position: relative;
}

.user-chip-btn {
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  transition: background .15s, box-shadow .15s;
  user-select: none;
}
.user-chip-btn:hover,
.user-dropdown.open .user-chip-btn {
  background: var(--bg-subtle, #eae8f4);
  box-shadow: var(--shadow-xs);
}

.user-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .2s ease;
}
.user-dropdown.open .user-chevron {
  transform: rotate(180deg);
}

/* Avatar warna per role */
.role-superadmin-avatar { background: var(--crimson) !important; }
.role-admin-avatar      { background: var(--navy) !important; }
.role-editor-avatar     { background: var(--gold) !important; color: #fff !important; }
.role-reviewer-avatar   { background: #16a34a !important; }
.role-author-avatar     { background: var(--navy-mid) !important; }

/* Dropdown menu */
.user-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 220px;
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 12px);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
}
.user-dropdown.open .user-dropdown-menu {
  display: block;
  animation: dropdownFadeIn .15s ease-out;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header info */
.udrop-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  background: linear-gradient(135deg, var(--bg-muted) 0%, var(--bg-paper) 100%);
}
.udrop-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(26,24,56,.18);
}
.udrop-info { min-width: 0; }
.udrop-name {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.udrop-role { margin: .2rem 0 .15rem; }
.udrop-email {
  font-size: .6875rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Separator */
.udrop-sep {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* Menu items */
.udrop-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .625rem 1rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background .12s, color .12s;
  letter-spacing: .01em;
}
.udrop-item:hover {
  background: var(--bg-muted);
  color: var(--navy);
}
.udrop-item-danger { color: var(--crimson); }
.udrop-item-danger:hover {
  background: var(--danger-bg, rgba(185,28,42,.06));
  color: var(--crimson-dark);
}

/* ═══════════════════════════════════════════════════════════════════
   PROFILE MODAL CONTENT
   ═══════════════════════════════════════════════════════════════════ */
.prof-modal-hero {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1.25rem 1.5rem 1rem;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: var(--r-xl, 12px) var(--r-xl, 12px) 0 0;
}
.prof-avatar-lg {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.prof-hero-info { min-width: 0; }
.prof-hero-name {
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-hero-role {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  margin-top: .125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prof-modal-body {
  padding: 1.25rem 1.5rem .25rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.prof-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.prof-label {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .02em;
}
.prof-label svg { color: var(--navy); flex-shrink: 0; opacity: .7; }
.prof-label-hint {
  font-size: .625rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-muted);
  padding: .1rem .4rem;
  border-radius: var(--r-full);
  letter-spacing: .03em;
}
.prof-input {
  width: 100%;
  padding: .5rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--text-primary);
  background: var(--bg-paper);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.prof-input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26,24,56,.08);
}

.prof-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--text-muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: .25rem;
}
.prof-divider::before,
.prof-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.prof-hint-text {
  font-size: .75rem;
  color: var(--text-muted);
  margin: -.5rem 0 0;
}

/* pw-wrap override untuk modal profil */
#profileForm .pw-wrap {
  position: relative;
}
#profileForm .pw-wrap .prof-input {
  padding-right: 2.5rem;
}
#profileForm .pw-toggle {
  position: absolute;
  right: .625rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s;
  border-radius: var(--r-sm);
}
#profileForm .pw-toggle:hover { color: var(--navy); }
#profileForm .pw-toggle .eye-icon { display: block; flex-shrink: 0; }

.prof-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .625rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
}

/* Mobile-only: tampil hanya di mobile, hidden di desktop */
.show-mobile-only { display: none; }
@media (max-width: 768px) {
  .show-mobile-only { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════
   RWD + PWA FIXES — Modal Profil, Dropdown, Touch, Safe Area
   ═══════════════════════════════════════════════════════════════════ */

/* ── Modal profil: footer sticky ── */
.prof-modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--bg-muted);
  border-top: 1px solid var(--border);
  /* safe area notch iPhone */
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* ── Touch target: input minimal 44px ── */
.prof-input {
  min-height: 44px;
  padding: .625rem .75rem;
}

/* ── Touch target: pw-toggle lebih mudah dipencet ── */
#profileForm .pw-toggle {
  min-width: 44px;
  min-height: 44px;
  right: 0;
}

/* ── Dropdown: touch target chip lebih besar ── */
.user-chip-btn {
  min-height: 40px;
  padding: .3rem .625rem .3rem .3rem;
}

/* ══════════════════════════════════════════════════════
   MOBILE (≤ 640px) — Modal profil jadi bottom sheet
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Hero lebih compact */
  .prof-modal-hero {
    padding: 1rem 1.125rem .875rem;
    gap: .625rem;
    border-radius: 0;
  }
  .prof-avatar-lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: .75rem;
  }
  .prof-hero-name { font-size: .875rem; }
  .prof-hero-role { font-size: .6875rem; }

  /* Body lebih compact */
  .prof-modal-body {
    padding: 1rem 1.125rem .25rem;
    gap: .75rem;
  }
  .prof-modal-footer {
    padding: .875rem 1.125rem;
    padding-bottom: calc(.875rem + env(safe-area-inset-bottom, 0px));
  }

  /* Input full comfort di mobile */
  .prof-input { font-size: 1rem; /* cegah zoom iOS saat focus */ }

  /* Divider teks lebih kecil */
  .prof-divider { font-size: .625rem; }
}

/* ══════════════════════════════════════════════════════
   SAFE AREA — notch & home indicator iPhone
   ══════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .edit-modal-wrap {
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Bottom sheet di mobile */
  @media (max-width: 640px) {
    .edit-modal-box {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RWD GRID FIX — inline grid collapse di mobile
   Digunakan via class pada elemen yang punya inline style grid
   ═══════════════════════════════════════════════════════════════════ */

/* Grid 2 kolom → 1 kolom di ≤640px */
.rwd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) {
  .rwd-grid-2 { grid-template-columns: 1fr !important; }
}

/* Grid 3 kolom → 2 kolom di ≤1024px → 1 kolom di ≤640px */
.rwd-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
@media (max-width: 1024px) {
  .rwd-grid-3 { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 640px) {
  .rwd-grid-3 { grid-template-columns: 1fr !important; }
}

/* Grid 4 kolom → 2 di ≤1024px → 1 di ≤640px */
.rwd-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
@media (max-width: 1024px) {
  .rwd-grid-4 { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 640px) {
  .rwd-grid-4 { grid-template-columns: 1fr !important; }
}

/* Grid 5 kolom (role/level cards) → 3 di ≤640px → 2 di ≤380px */
.rwd-grid-5 { display: grid; grid-template-columns: repeat(5,1fr); }
@media (max-width: 640px) {
  .rwd-grid-5 { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 380px) {
  .rwd-grid-5 { grid-template-columns: repeat(2,1fr) !important; }
}

/* Field ID|translate|EN → stack vertikal di mobile, tombol translate berputar 90° */
@media (max-width: 640px) {
  .rwd-translate-grid { grid-template-columns: 1fr !important; }
  .rwd-translate-grid > div:nth-child(2) { flex-direction: row !important; justify-content: center; }
  .rwd-translate-grid > div:nth-child(2) .translate-btn { transform: rotate(90deg); }
}

/* Winner card (photo | info | actions) → stack 1 kolom di mobile, foto ikut center */
@media (max-width: 640px) {
  .rwd-winner-card { grid-template-columns: 1fr !important; }
  .rwd-winner-photo { flex-direction: row !important; justify-content: center; }
}

/* Sidebar layout (1fr + fixed) → stack di ≤768px */
.rwd-sidebar-grid { display: grid; gap: 1.25rem; }
@media (max-width: 768px) {
  .rwd-sidebar-grid { grid-template-columns: 1fr !important; }
}

/* Form grid 2 kolom → 1 kolom di ≤640px */
.rwd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }

/* Stage stepper (6 node progress) — tetap sejajar tapi rapatkan di layar sempit */
@media (max-width: 480px) {
  .stage-stepper-grid { gap: 0.125rem; }
}

/* Split panel 2 kolom dengan border-right — jadi 1 kolom + border-bottom di mobile */
@media (max-width: 640px) {
  .rwd-split-panel { grid-template-columns: 1fr !important; }
  .rwd-split-panel-left { border-right: none !important; border-bottom: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .rwd-form-grid { grid-template-columns: 1fr !important; }
}

/* Tabel wrapper yang konsisten */
.tbl-wrap { overflow-x: auto; width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   LANDING — CTA SECTION (RWD)
   ═══════════════════════════════════════════════════════════════ */
.cta-section {
  background: var(--navy);
  border-radius: var(--r-xl);
  padding: 3rem 2.5rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 4px 0 var(--crimson), inset 0 -4px 0 var(--crimson);
}

.cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-text {
  flex: 1;
  min-width: 0;
}

.cta-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.cta-btn-primary,
.cta-btn-secondary,
.cta-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
  min-height: 44px;
  white-space: nowrap;
}

.cta-btn-primary {
  padding: 0.75rem 1.75rem;
  background: var(--crimson);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  border: 2px solid var(--crimson);
}

.cta-btn-secondary {
  padding: 0.75rem 1.75rem;
  background: rgba(255,255,255,.08);
  color: #f4f2ee;
  font-size: 0.9375rem;
  border: 2px solid rgba(255,255,255,.25);
}

.cta-btn-gold {
  padding: 0.75rem 1.25rem;
  background: rgba(201,151,10,.12);
  color: var(--gold-light);
  font-size: 0.875rem;
  border: 1.5px solid rgba(201,151,10,.25);
}

/* Tablet: tombol mulai wrap, teks tetap di kiri */
@media (max-width: 768px) {
  .cta-section { padding: 2rem 1.5rem; }
  .cta-inner   { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .cta-actions { width: 100%; justify-content: flex-start; }
}

/* Mobile kecil: tombol full-width agar mudah diklik */
@media (max-width: 480px) {
  .cta-section  { padding: 1.75rem 1.25rem; border-radius: var(--r-lg); }
  .cta-actions  { flex-direction: column; align-items: stretch; }
  .cta-btn-primary,
  .cta-btn-secondary,
  .cta-btn-gold { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   LANDING — HERO FEATURE CARDS border-right di mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Saat 4 card jadi 1 kolom, hapus border-right antar card */
  .rwd-grid-4 > div[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .rwd-grid-4 > div:last-child {
    border-bottom: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RWD + PWA — perbaikan global (audit menyeluruh)
   ═══════════════════════════════════════════════════════════════ */

/* Cegah overflow horizontal di layar sangat sempit (<375px) */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, table { max-width: 100%; }

/* Tabel panjang: bungkus otomatis agar bisa discroll horizontal di mobile */
.table-responsive,
.card > table,
.card > .table {
  overflow-x: auto;
}

/* Safe-area untuk perangkat dengan notch (iPhone X+) */
body {
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav,
.bottom-nav,
#pwaBanner {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
  /* Input/select/textarea min 16px agar tidak memicu auto-zoom iOS/Android */
  .input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Touch target minimum 44x44px (WCAG / Apple HIG) */
  .btn,
  button,
  a.btn,
  .card-hover a,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
  }
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 1.25rem;
    min-height: 1.25rem;
  }

  /* Jarak antar elemen klikabel yang berdekatan */
  .btn + .btn,
  .cta-actions > * + * {
    margin-top: 0.5rem;
  }
}