/* ── Variables ─────────────────────────────────────────── */
:root {
  /* ── 1. MF Brand Identity Tokens ───────────────────────── */
  --mf-brand-orange:    #ff6b35;
  --mf-brand-orange-lt: #fff0eb;
  --mf-brand-orange-md: #ffcbb8;
  --mf-brand-peach:     #ff8c61;
  --mf-brand-purple:    #845ef7;
  --mf-brand-purple-lt: #ede9fe;

  /* ── 2. MF-Tuned Gender Tokens ──────────────────────────── */
  --gender-ikhwan-blue:   #2563eb;
  --gender-ikhwan-bg:     #eff6ff;
  --gender-ikhwan-border: #bfdbfe;
  --gender-akhwat-pink:   #e11d48;
  --gender-akhwat-bg:     #fff1f2;
  --gender-akhwat-border: #fecdd3;

  /* ── 3. Universal Semantic Function Tokens ───────────────── */
  --action-primary:        #16a34a;
  --action-primary-hover:  #15803d;
  --action-primary-lt:     #dcfce7;
  --action-primary-border: rgba(34, 197, 94, 0.3);
  
  --action-danger:         #dc2626;
  --action-danger-hover:   #b91c1c;
  --action-danger-lt:      #fee2e2;
  --action-danger-border:  rgba(239, 68, 68, 0.3);
  
  --status-warning:        #d97706;
  --status-warning-lt:     #fffbeb;
  --status-warning-border: rgba(245, 158, 11, 0.3);
  
  --status-info:           #2563eb;
  --status-info-lt:        #eff6ff;
  --status-info-border:    rgba(37, 99, 235, 0.3);

  /* ── 4. Surface, Border & Typography Tokens ──────────────── */
  --bg:          #fafaf9;
  --surface:     #ffffff;
  --border:      #f0ede8;
  --border-md:   #e5e0d8;
  --text:        #1c1917;
  --text-2:      #44403c;
  --text-3:      #78716c;
  --text-4:      #a8a29e;
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --shadow-xs:   0 1px 4px rgba(0,0,0,.06);
  --shadow-sm:   0 2px 12px rgba(0,0,0,.08);
  --shadow-md:   0 8px 32px rgba(0,0,0,.10);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.14);
  --ease:        cubic-bezier(.4,0,.2,1);
  --dur:         .22s;

  /* Aliases for backwards compatibility */
  --orange:    var(--mf-brand-orange);
  --orange-lt: var(--mf-brand-orange-lt);
  --orange-md: var(--mf-brand-orange-md);
  --peach:     var(--mf-brand-peach);
  --yellow:    #ffd166;
  --yellow-lt: #fff8e6;
  --purple:    var(--mf-brand-purple);
  --purple-lt: var(--mf-brand-purple-lt);
  --purple-md: #c4b5fd;
  --green:     var(--action-primary);
  --green-lt:  var(--action-primary-lt);
  --red:       var(--action-danger);
  --red-lt:    var(--action-danger-lt);
  --blue:      var(--gender-ikhwan-blue);
  --blue-lt:   var(--gender-ikhwan-bg);
  --rose:      var(--gender-akhwat-pink);
  --rose-lt:   var(--gender-akhwat-bg);
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:700;line-height:1.25;color:var(--text)}
h1{font-size:clamp(1.7rem,4vw,2.6rem)}
h2{font-size:clamp(1.2rem,3vw,1.7rem)}
p{color:var(--text-3);font-size:.93rem}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}

/* ── Toast Notifications ───────────────────────────────── */
#toast-container{
  position:fixed;
  top:1.2rem;right:1.2rem;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  pointer-events:none;
}
.toast{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.85rem 1.2rem;
  border-radius:var(--radius-md);
  font-size:.88rem;
  font-weight:600;
  box-shadow:var(--shadow-md);
  pointer-events:all;
  animation:toastIn .35s var(--ease) both;
  max-width:360px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.toast.hide{animation:toastOut .3s var(--ease) both}
.toast-success{background:var(--action-primary-lt);border:1.5px solid var(--action-primary-border);color:#15803d}
.toast-error  {background:var(--action-danger-lt);border:1.5px solid var(--action-danger-border);color:#b91c1c}
.toast-warning{background:var(--status-warning-lt);border:1.5px solid var(--status-warning-border);color:#b45309}
.toast-info   {background:var(--status-info-lt);border:1.5px solid var(--status-info-border);color:#1d4ed8}
.toast-icon{font-size:1.15rem;flex-shrink:0}
.toast-close{margin-left:auto;background:none;border:none;cursor:pointer;color:inherit;opacity:.6;font-size:1rem;padding:0 .2rem;line-height:1}
@keyframes toastIn {from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1;transform:none} to{opacity:0;transform:translateX(24px)}}

/* ── Navbar ─────────────────────────────────────────────── */
.navbar{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1.5px solid var(--border);
  padding:0 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:64px;
}
.navbar-brand{
  display:flex;align-items:center;gap:.55rem;
  font-weight:800;font-size:1.05rem;color:var(--text);
}
.brand-emoji{font-size:1.4rem}
.navbar-links{display:flex;gap:.2rem;list-style:none}
.navbar-links a{
  display:flex;align-items:center;gap:.3rem;
  font-size:.83rem;font-weight:600;color:var(--text-3);
  padding:.4rem .9rem;border-radius:var(--radius-sm);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.navbar-links a:hover{background:var(--orange-lt);color:var(--orange)}
.navbar-links a.active{background:var(--orange-lt);color:var(--orange)}

/* ── Page Wrapper ───────────────────────────────────────── */
.page-wrapper{max-width:860px;margin:0 auto;padding:2rem 1.2rem 5rem}

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  border-radius:var(--radius-xl);
  padding:3rem 2.5rem;
  text-align:center;
  margin-bottom:2rem;
  position:relative;overflow:hidden;
}
.hero-home{background:linear-gradient(135deg,#fff5f1 0%,#fff8e6 50%,#ede9fe 100%)}
.hero-login{background:linear-gradient(135deg,#ede9fe 0%,#fff5f1 100%)}
.hero-publik{background:linear-gradient(135deg,#fff8e6 0%,#dcfce7 100%)}
.hero-inbox{background:linear-gradient(135deg,#ede9fe 0%,#fff0eb 100%)}
.hero-logo{width:96px;height:auto;margin-bottom:1rem;filter:drop-shadow(0 6px 16px rgba(255,107,53,.2))}
.hero h1{color:var(--text);margin-bottom:.5rem}
.hero .subtitle{font-size:1.05rem;font-weight:700;color:var(--text-2);margin-bottom:.35rem}
.hero .desc{font-size:.9rem;color:var(--text-3);max-width:480px;margin:0 auto}
.hero-deco{
  position:absolute;border-radius:50%;pointer-events:none;opacity:.2;
}

/* ── Cards ──────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:1.8rem;
  box-shadow:var(--shadow-xs);
  border:1.5px solid var(--border);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.card-title{
  font-size:1rem;font-weight:700;color:var(--text);
  margin-bottom:1.2rem;
  display:flex;align-items:center;gap:.5rem;
}

/* ── Grid ───────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.section{margin-bottom:1.6rem}
@media(max-width:640px){.grid-2{grid-template-columns:1fr}}

/* ── Info Card ──────────────────────────────────────────── */
.info-card{background:linear-gradient(135deg,var(--orange-lt),var(--yellow-lt));border-color:var(--orange-md)}
.steps-list{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:.6rem}
.steps-list li{
  counter-increment:step;display:flex;align-items:flex-start;gap:.75rem;
  font-size:.9rem;color:var(--text-2)
}
.steps-list li::before{
  content:counter(step);
  background:var(--orange);color:#fff;font-weight:700;
  min-width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;flex-shrink:0;margin-top:.05rem;
}
.rules-box{
  background:var(--yellow-lt);border-radius:var(--radius-sm);
  padding:.9rem 1.1rem;margin-top:1.1rem;
  border-left:4px solid var(--yellow);
}
.rules-box p{font-size:.86rem;color:var(--text-2);margin-bottom:.1rem}
.rules-box p:first-child{font-weight:700;color:var(--text);margin-bottom:.4rem}

/* ── Forms ──────────────────────────────────────────────── */
.form-group{margin-bottom:1rem}
label{
  display:block;font-size:.83rem;font-weight:700;
  color:var(--text-2);margin-bottom:.4rem;
}
input[type="text"],
input[type="password"],
select,textarea{
  width:100%;padding:.72rem 1rem;
  border:1.8px solid var(--border-md);
  border-radius:var(--radius-sm);
  font-family:inherit;font-size:.9rem;color:var(--text);
  background:#fff;outline:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,107,53,.15);
}
textarea{resize:vertical;min-height:110px}
select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
  padding-right:2.5rem;
}
.char-count{text-align:right;font-size:.75rem;color:var(--text-4);margin-top:.3rem}

/* ── Gender Pill Selector ───────────────────────────────── */
.gender-pills{display:flex;gap:.75rem;margin-top:.4rem}
.gender-pill{
  flex:1;position:relative;
  display:flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.75rem 1rem;
  border:2px solid var(--border-md);border-radius:var(--radius-md);
  cursor:pointer;font-weight:700;font-size:.88rem;
  color:var(--text-3);background:#fff;
  transition:all var(--dur) var(--ease);user-select:none;
}
.gender-pill input{position:absolute;opacity:0;width:0;height:0}
.gender-pill:hover{border-color:var(--orange-md);color:var(--text)}
.gender-pill.selected-ikhwan{
  border-color:var(--gender-ikhwan-blue);background:var(--gender-ikhwan-bg);color:var(--gender-ikhwan-blue);
  box-shadow:0 0 0 4px rgba(37,99,235,.14);
}
.gender-pill.selected-akhwat{
  border-color:var(--gender-akhwat-pink);background:var(--gender-akhwat-bg);color:var(--gender-akhwat-pink);
  box-shadow:0 0 0 4px rgba(225,29,72,.14);
}
.gender-pill .pill-icon{font-size:1.4rem}
.gender-pill .pill-label{font-size:.8rem;font-weight:600;opacity:.8;margin-top:1px}
.gender-pill-inner{display:flex;flex-direction:column;align-items:center;gap:.15rem}

/* ── Recipient Cards ────────────────────────────────────── */
.recipient-select-wrap{position:relative}
.recipient-select-wrap select{padding-left:2.8rem}
.recipient-icon{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  font-size:1.1rem;pointer-events:none;z-index:1;
}

/* ── Unified Button Hierarchy ────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.68rem 1.35rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  line-height: 1.25;
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn.disabled,
button:disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  background: #e5e0d8 !important;
  color: #78716c !important;
  border-color: transparent !important;
}

/* Primary Action (Green) — Simpan, Lanjutkan, Aktifkan, Tetapkan, Confirm */
.btn-primary {
  background: var(--action-primary);
  color: #ffffff !important;
  border-color: var(--action-primary);
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.28);
}
.btn-primary:hover:not(:disabled) {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.38);
  transform: translateY(-1.5px);
}

/* Secondary Action (Clean Crisp White Button) — Batal, Kembali, Refresh, Tutup */
.btn-secondary {
  background: #ffffff !important;
  color: var(--text-2, #44403c) !important;
  border: 1.5px solid var(--border-md, #cbd5e1) !important;
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled) {
  background: #f8fafc !important;
  color: var(--text, #1c1917) !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.btn-secondary:focus-visible {
  border-color: #A52C74 !important;
  box-shadow: 0 0 0 3px rgba(165, 44, 116, 0.25) !important;
  outline: none !important;
}
.btn-secondary:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* Danger / Destructive Action (Red) — Hapus, Keluarkan, Bersihkan */
.btn-danger {
  background: var(--action-danger);
  color: #ffffff !important;
  border-color: var(--action-danger);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.28);
}
.btn-danger:hover:not(:disabled) {
  background: var(--action-danger-hover);
  border-color: var(--action-danger-hover);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.38);
  transform: translateY(-1.5px);
}

/* Ghost / Link Action (Subtle) */
.btn-ghost {
  background: transparent;
  color: var(--text-3) !important;
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--border);
  color: var(--text) !important;
}

.btn-brand, .btn-orange {
  background: linear-gradient(135deg, var(--orange), var(--peach));
  color: #ffffff !important;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.35);
}
.btn-brand:hover:not(:disabled), .btn-orange:hover:not(:disabled) {
  box-shadow: 0 6px 24px rgba(255, 107, 53, 0.45);
  transform: translateY(-2px);
}

.btn-yellow {
  background: linear-gradient(135deg,var(--yellow),#f0a500);
  color: #44400c !important;
  box-shadow: 0 4px 16px rgba(255,209,102,.45);
}
.btn-yellow:hover:not(:disabled) {
  box-shadow: 0 6px 24px rgba(255,209,102,.55);
  transform: translateY(-2px);
}

.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 0.85rem 1.8rem; font-size: 0.95rem; }
.btn-block { width: 100%; }

.btn-ikhwan {
  background: var(--gender-ikhwan-blue);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}
.btn-akhwat {
  background: var(--gender-akhwat-pink);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.3);
}

/* Spinner */
.spinner{
  width:18px;height:18px;
  border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;display:none;
}
.btn.loading .spinner{display:inline-block}
.btn.loading .btn-text{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Unified Modal Framework ────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease);
}
.modal-overlay.active,
.modal-overlay.show,
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal-card {
  background: var(--surface);
  border-radius: 24px;
  border: 1.5px solid var(--border-md);
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2.4rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.28s var(--ease);
  position: relative;
}
.modal-overlay.active .modal-card,
.modal-overlay.show .modal-card,
.modal-overlay.open .modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Modal Card Sizes */
.modal-card-sm { max-width: 420px; }
.modal-card-md { max-width: 580px; }
.modal-card-lg { max-width: 760px; }
.modal-card-xl { max-width: 940px; }

.modal-header {
  padding: 1.6rem 2rem 1.2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  background: var(--surface);
}
.modal-header-content { flex: 1; }
.modal-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.3rem 0;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modal-subtitle {
  font-size: 0.88rem;
  color: var(--text-3);
  margin: 0;
  line-height: 1.5;
}
.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--text-4);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color var(--dur), background var(--dur);
  line-height: 1;
}
.modal-close-btn:hover {
  color: var(--text);
  background: var(--border);
}

.modal-body {
  padding: 1.6rem 2rem;
  overflow-y: auto;
  flex: 1;
}
.modal-scroll-body {
  padding: 1.6rem 2rem;
  overflow-y: auto;
  max-height: 60vh;
  flex: 1;
}

.modal-footer {
  padding: 1.2rem 2rem;
  border-top: 1px solid var(--border);
  background: #fafaf9;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Legacy Overlay Aliases ────────────────────────────── */
.overlay{
  position:fixed;inset:0;z-index:800;
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(15,10,5,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
}
.overlay.show{opacity:1;pointer-events:all}
.modal{
  background:var(--surface);
  border-radius:var(--radius-xl);
  padding:2.2rem 1.8rem 1.8rem;
  width:100%;max-width:380px;
  box-shadow:var(--shadow-lg);
  transform:translateY(28px) scale(.97);
  opacity:0;
  transition:transform .35s var(--ease),opacity .3s var(--ease);
  position:relative;overflow:hidden;
}
.overlay.show .modal{transform:none;opacity:1}
.modal-stripe{
  position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--blue),#60a5fa);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-stripe.akhwat{background:linear-gradient(90deg,var(--rose),#fb7185)}
.modal-icon{font-size:2.8rem;text-align:center;margin-bottom:.7rem}
.modal-sub{font-size:.83rem;color:var(--text-3);text-align:center;margin-bottom:1.4rem;line-height:1.5}
.modal-cancel{
  display:block;width:100%;text-align:center;
  margin-top:.8rem;padding:.5rem;
  font-size:.83rem;font-weight:600;color:var(--text-4);
  background:none;border:none;cursor:pointer;border-radius:var(--radius-sm);
  transition:background var(--dur);font-family:inherit;
}
.modal-cancel:hover{background:var(--border);color:var(--text-3)}

/* ── Unified Status Badges ──────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.28rem 0.7rem;
  border-radius: 20px;
  line-height: 1.2;
  white-space: nowrap;
}
.badge-active, .badge-success {
  background: var(--action-primary-lt);
  color: #15803d;
  border: 1px solid var(--action-primary-border);
}
.badge-draft, .badge-warning {
  background: var(--status-warning-lt);
  color: #b45309;
  border: 1px solid var(--status-warning-border);
}
.badge-departed, .badge-closed, .badge-danger, .badge-suspended {
  background: var(--action-danger-lt);
  color: #b91c1c;
  border: 1px solid var(--action-danger-border);
}
.badge-inactive, .badge-info {
  background: var(--status-info-lt);
  color: #1d4ed8;
  border: 1px solid var(--status-info-border);
}
.badge-muhafidz, .badge-purple {
  background: var(--mf-brand-purple-lt);
  color: #6b21a8;
  border: 1px solid var(--purple-md);
}
.badge-neutral {
  background: var(--border);
  color: var(--text-3);
  border: 1px solid var(--border-md);
}
.badge-ikhwan {
  background: var(--gender-ikhwan-bg);
  color: var(--gender-ikhwan-blue);
  border: 1px solid var(--gender-ikhwan-border);
}
.badge-akhwat {
  background: var(--gender-akhwat-bg);
  color: var(--gender-akhwat-pink);
  border: 1px solid var(--gender-akhwat-border);
}

/* ── Unified Custom Tables ──────────────────────────────── */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
}
.table-custom {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: left;
}
.table-custom th {
  background: var(--bg);
  color: var(--text-2);
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-bottom: 1.5px solid var(--border-md);
  white-space: nowrap;
}
.table-custom td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.table-custom tr:last-child td {
  border-bottom: none;
}
.table-custom tbody tr:hover {
  background: rgba(255, 107, 53, 0.03);
}

/* ── Token Badge & Lock ─────────────────────────────────── */
.token-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:700;padding:.2rem .65rem;
  border-radius:20px;margin-left:.5rem;vertical-align:middle;
}
.token-badge.ikhwan{background:var(--blue-lt);color:var(--blue);border:1.5px solid #bfdbfe}
.token-badge.akhwat{background:var(--rose-lt);color:var(--rose);border:1.5px solid #fecdd3}
.form-locked{position:relative;pointer-events:none}
.form-locked::after{
  content:'🔒 Pilih kategori dan masukkan token terlebih dahulu';
  position:absolute;inset:0;
  background:rgba(250,250,249,.9);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1rem;
  font-size:.85rem;font-weight:600;color:var(--text-4);
  border-radius:var(--radius-md);pointer-events:none;
}

/* ── Message Cards ──────────────────────────────────────── */
.message-cards{display:flex;flex-direction:column;gap:.9rem}
.message-card{
  background:var(--surface);
  border-radius:var(--radius-md);
  padding:1.3rem 1.4rem;
  border:1.5px solid var(--border);
  box-shadow:var(--shadow-xs);
  position:relative;overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  animation:fadeUp .4s var(--ease) both;
}
.message-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--orange),var(--yellow));
  border-radius:4px 0 0 4px;
}
.message-card:hover{transform:translateX(4px);box-shadow:var(--shadow-sm)}
.message-card .sender{
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--orange);margin-bottom:.45rem;
}
.message-card .msg-text{font-size:.95rem;color:var(--text);font-weight:500;line-height:1.6}
.message-card .msg-time{font-size:.74rem;color:var(--text-4);margin-top:.55rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none}}

/* ── Skeleton ───────────────────────────────────────────── */
.skeleton-box{
  background:linear-gradient(90deg,#f0ede8 25%,#e8e4df 50%,#f0ede8 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:6px;
}
@keyframes shimmer{from{background-position:200% 0} to{background-position:-200% 0}}

/* ── Empty State ─────────────────────────────────────────── */
.empty-state{
  text-align:center;padding:3rem 1.5rem;color:var(--text-3);
}
.empty-state .emoji{font-size:2.8rem;margin-bottom:.8rem}
.empty-state p{font-size:.9rem;margin-bottom:.3rem}

/* ── Count Badge ─────────────────────────────────────────── */
.count-badge{
  display:inline-block;
  background:var(--orange-lt);color:var(--orange);
  font-size:.73rem;font-weight:700;
  padding:.18rem .65rem;border-radius:20px;margin-left:.5rem;
}

/* ── Login Card ──────────────────────────────────────────── */
.login-card{max-width:420px;margin:0 auto}
.divider{height:1.5px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:1.4rem 0}

/* ── Broadcast Card ─────────────────────────────────────── */
.broadcast-card{
  background:linear-gradient(135deg,#fffbf0,var(--yellow-lt));
  border-color:#ffe082;
}

/* ── Quick Link Cards ────────────────────────────────────── */
.quick-card{
  display:flex;align-items:center;gap:1rem;
  padding:1.3rem 1.5rem;border-radius:var(--radius-lg);
  text-decoration:none;border:1.5px solid var(--border);
  transition:all var(--dur) var(--ease);background:var(--surface);
  box-shadow:var(--shadow-xs);
}
.quick-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.quick-card-icon{font-size:2rem;flex-shrink:0}
.quick-card h3{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:.15rem}
.quick-card p{font-size:.8rem;color:var(--text-4);margin:0}

/* ── User Bar (Inbox) ────────────────────────────────────── */
.user-bar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.8rem;margin-bottom:1.4rem;
  padding:1rem 1.3rem;
  background:var(--surface);border-radius:var(--radius-lg);
  border:1.5px solid var(--border);box-shadow:var(--shadow-xs);
}
.user-bar-left{display:flex;align-items:center;gap:.75rem}
.avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--peach));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:1.05rem;flex-shrink:0;
}
.user-name{font-weight:700;font-size:.9rem;color:var(--text)}
.user-sub{font-size:.75rem;color:var(--text-4)}
.user-bar-right{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── Footer ──────────────────────────────────────────────── */
.footer{
  text-align:center;padding:1.3rem;color:var(--text-4);
  font-size:.8rem;border-top:1.5px solid var(--border);margin-top:3rem;
}

/* ── Emoji Reactions ─────────────────────────────────────── */
.reactions{
  display:flex;flex-wrap:wrap;gap:.4rem;
  margin-top:.85rem;padding-top:.75rem;
  border-top:1.5px solid var(--border);
}
.react-btn{
  display:inline-flex;align-items:center;gap:.28rem;
  padding:.32rem .7rem;
  border:1.8px solid var(--border-md);
  border-radius:20px;background:#fff;
  font-size:.8rem;font-weight:700;color:var(--text-3);
  cursor:pointer;transition:all .2s var(--ease);
  user-select:none;line-height:1;
  font-family:inherit;
}
.react-btn:hover{
  border-color:var(--orange-md);
  background:var(--orange-lt);
  color:var(--orange);
  transform:translateY(-2px) scale(1.06);
}
.react-btn.active{
  border-color:var(--orange);
  background:var(--orange-lt);
  color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,107,53,.15);
}
.react-btn.active.fire  {border-color:#ef4444;background:#fee2e2;color:#dc2626;box-shadow:0 0 0 3px rgba(239,68,68,.15)}
.react-btn.active.love  {border-color:#f43f5e;background:#fff1f2;color:#e11d48;box-shadow:0 0 0 3px rgba(244,63,94,.15)}
.react-btn.active.star  {border-color:#f59e0b;background:#fffbeb;color:#d97706;box-shadow:0 0 0 3px rgba(245,158,11,.15)}
.react-btn.active.laugh {border-color:#a16207;background:#fefce8;color:#92400e;box-shadow:0 0 0 3px rgba(161,98,7,.15)}
.react-btn.active.party {border-color:#7c3aed;background:var(--purple-lt);color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.react-btn.active.strong{border-color:#16a34a;background:var(--green-lt);color:#15803d;box-shadow:0 0 0 3px rgba(22,163,74,.15)}
.react-btn.active.wow   {border-color:#0ea5e9;background:#f0f9ff;color:#0284c7;box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.react-emoji{font-size:1rem;line-height:1}
.react-count{font-size:.78rem;font-weight:800;min-width:.6rem;text-align:center}
@keyframes reactPop{
  0%  {transform:scale(1)}
  40% {transform:scale(1.35) rotate(-8deg)}
  70% {transform:scale(.92) rotate(4deg)}
  100%{transform:scale(1)}
}
.react-btn.popping{animation:reactPop .38s var(--ease)}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:600px){
  .navbar{padding:0 1rem}
  .navbar-brand span:not(.brand-emoji){display:none}
  .hero{padding:2.2rem 1.4rem}
  .page-wrapper{padding:1.4rem .9rem 4rem}
  .card{padding:1.3rem}
  .modal{padding:1.8rem 1.3rem 1.4rem}
  .gender-pills{flex-direction:column}
}

/* ── Rapotan MF Custom Styles ───────────────────────────── */
.hero-rapotan {
  background: linear-gradient(135deg, var(--green-lt) 0%, var(--blue-lt) 50%, var(--purple-lt) 100%);
}

/* Split Layout */
.rapot-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 2.5rem;
}

.divider-vertical {
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--border-md) 15%, var(--border-md) 85%, transparent);
  align-self: stretch;
}

@media (max-width: 768px) {
  .rapot-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .divider-vertical {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--border-md) 15%, var(--border-md) 85%, transparent);
  }
}

.option-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

/* Visual Report Card Components */
.rapot-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rapot-sheet {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border-md);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  margin-top: 1.5rem;
  animation: fadeUp 0.6s var(--ease) both;
}

.rapot-header {
  border-bottom: 2px dashed var(--border-md);
  padding-bottom: 1.2rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.rapot-badge {
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.3rem 0.8rem;
  border-radius: 30px;
  background: var(--green-lt);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.rapot-tahfidz-card {
  background: var(--green-lt);
  border: 1.5px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  margin-bottom: 1.5rem;
}

.rapot-tahfidz-card h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #166534;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.rapot-tahfidz-card p {
  color: #1e3a1e;
  font-weight: 500;
  font-size: 0.88rem;
}

/* Diniyah Grades Grid */
.diniyah-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.diniyah-item {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur);
}

.diniyah-item:hover {
  transform: translateY(-2px);
  border-color: var(--border-md);
}

.diniyah-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.diniyah-mapel {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-2);
}

.diniyah-grade-letter {
  font-size: 0.95rem;
  font-weight: 800;
}

.diniyah-grade-letter.grade-a { color: var(--green); }
.diniyah-grade-letter.grade-b { color: var(--blue); }
.diniyah-grade-letter.grade-c { color: var(--purple); }

.diniyah-score {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.score-progress-container {
  height: 6px;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.score-progress-bar {
  height: 100%;
  border-radius: 10px;
  transition: width 1s var(--ease);
}

.score-progress-bar.bar-a { background: var(--green); }
.score-progress-bar.bar-b { background: var(--blue); }
.score-progress-bar.bar-c { background: var(--purple); }

/* Attendance Grid */
.absensi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.absensi-item {
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 0.8rem;
  border: 1.5px solid var(--border);
}

.absensi-count {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}

.absensi-label {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--text-3);
  margin-top: 0.15rem;
}

/* Catatan Wali Kelas */
.rapot-catatan-box {
  background: var(--orange-lt);
  border-left: 5px solid var(--orange);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  margin-bottom: 1rem;
  position: relative;
}

.rapot-catatan-box::before {
  content: '“';
  position: absolute;
  right: 1.2rem;
  top: -0.2rem;
  font-size: 3.5rem;
  color: var(--orange);
  opacity: 0.15;
  font-family: serif;
  line-height: 1;
}

.rapot-catatan-box h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.rapot-catatan-box p {
  font-style: italic;
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ── 3D Merry-Go-Round Carousel (.mgr) ─────────────────────── */
.past-rapotan-section {
  margin-top: 4rem;
  text-align: center;
}

.mgr-section,
.carousel-outer {
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: 1.5rem auto 0;
  padding: 1rem 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

.mgr-stage,
.carousel-container {
  position: relative;
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  overflow: visible;
}

.mgr-card,
.carousel-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 225px;
  background: var(--surface);
  border-radius: 18px;
  border: 1.8px solid var(--border-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  padding: 1.1rem 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.45s ease,
              filter 0.45s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  transform-origin: center center;
  will-change: transform, opacity, filter;
  pointer-events: none;
  cursor: default;
}

/* ── MF Brand Palette Family Soft Gradients ───────────────── */
.mgr-card-theme-0 {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
  border-color: #FDBA74;
}
.mgr-card-theme-1 {
  background: linear-gradient(135deg, #FFEDD5 0%, #FCE7F3 50%, #FBCFE8 100%);
  border-color: #F472B6;
}
.mgr-card-theme-2 {
  background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 50%, #F472B6 100%);
  border-color: #E879F9;
}
.mgr-card-theme-3 {
  background: linear-gradient(135deg, #F472B6 0%, #F3E8FF 50%, #E9D5FF 100%);
  border-color: #C084FC;
}
.mgr-card-theme-4 {
  background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 50%, #DDD6FE 100%);
  border-color: #A78BFA;
}
.mgr-card-theme-5 {
  background: linear-gradient(135deg, #DDD6FE 0%, #FFE4E6 50%, #FFEDD5 100%);
  border-color: #FB7185;
}

.mgr-card.mgr-card-active,
.mgr-card.active,
.carousel-card.active {
  border-width: 2px;
  box-shadow: 0 12px 32px rgba(132, 94, 247, 0.25);
  pointer-events: auto;
  cursor: pointer;
  opacity: 1 !important;
  filter: none !important;
}

.mgr-card.mgr-card-blurred,
.mgr-card.blurred,
.carousel-card.blurred {
  pointer-events: none;
  cursor: default;
}

/* Facing-forward Context Cards: faint/blurred content clipped cleanly inside each card */
.mgr-card.mgr-card-blurred .mgr-card-title,
.mgr-card.mgr-card-blurred .mgr-card-sem,
.mgr-card.mgr-card-blurred .mgr-card-icon,
.mgr-card.blurred .mgr-card-title,
.mgr-card.blurred .mgr-card-sem,
.mgr-card.blurred .mgr-card-icon,
.carousel-card.blurred .carousel-card-title,
.carousel-card.blurred .carousel-card-sem,
.carousel-card.blurred .carousel-card-icon {
  opacity: 0.22 !important;
  filter: blur(0.8px) !important;
  color: #475569 !important;
  font-size: 0.78rem !important;
  transition: opacity 0.3s ease;
}

.mgr-card.mgr-card-blurred .mgr-card-btn,
.mgr-card.blurred .mgr-card-btn,
.carousel-card.blurred .carousel-card-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Active card content — 100% sharp, opaque, ultra-crisp dark text (~2px smaller font size) */
.mgr-card.mgr-card-active .mgr-card-title,
.mgr-card.active .mgr-card-title,
.carousel-card.active .carousel-card-title {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.mgr-card.mgr-card-active .mgr-card-sem,
.mgr-card.active .mgr-card-sem,
.carousel-card.active .carousel-card-sem {
  color: #374151 !important;
  font-weight: 700 !important;
  font-size: 0.70rem !important;
  opacity: 1 !important;
  filter: none !important;
}

.mgr-card.mgr-card-active .mgr-card-icon,
.mgr-card.active .mgr-card-icon,
.carousel-card.active .carousel-card-icon {
  font-size: 2.0rem !important;
  opacity: 1 !important;
  filter: none !important;
}

.mgr-card-icon,
.carousel-card-icon {
  font-size: 2.0rem;
  margin-bottom: 0.1rem;
}

.mgr-card-title,
.carousel-card-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0.2rem 0 0.1rem;
  text-align: center;
  line-height: 1.25;
}

.mgr-card-sem,
.carousel-card-sem {
  font-size: 0.70rem;
  font-weight: 700;
  color: #374151;
  text-align: center;
}

.mgr-card-btn,
.carousel-card-btn {
  font-size: 0.70rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  background: rgba(255, 255, 255, 0.75);
  color: var(--purple-dark);
  border-radius: 20px;
  border: 1px solid rgba(147, 51, 234, 0.25);
  margin-top: auto;
  margin-bottom: 0.1rem;
  transition: all var(--dur) var(--ease);
  cursor: default;
  pointer-events: none;
}

.mgr-card.mgr-card-active .mgr-card-btn,
.mgr-card.active .mgr-card-btn,
.carousel-card.active .carousel-card-btn {
  background: var(--purple, #845ef7);
  color: #ffffff !important;
  border-color: var(--purple, #845ef7);
  box-shadow: 0 4px 14px rgba(132, 94, 247, 0.35);
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  padding: 0.3rem 0.75rem;
  margin-top: auto;
  margin-bottom: 0.1rem;
  pointer-events: auto;
  cursor: pointer;
  opacity: 1 !important;
  filter: none !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s ease,
              background 0.25s ease;
}

.mgr-card.mgr-card-active .mgr-card-btn:hover,
.mgr-card.mgr-card-active .mgr-card-btn:focus-visible,
.mgr-card.mgr-card-active:hover .mgr-card-btn {
  background: #6b21a8 !important;
  box-shadow: 0 6px 16px rgba(107, 33, 168, 0.45);
  transform: translateY(-2px) scale(1.04);
}

.mgr-card-btn .mgr-btn-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mgr-card.mgr-card-active .mgr-card-btn:hover .mgr-btn-arrow,
.mgr-card.mgr-card-active .mgr-card-btn:focus-visible .mgr-btn-arrow,
.mgr-card.mgr-card-active:hover .mgr-btn-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .mgr-card-btn,
  .mgr-card-btn *,
  .mgr-btn-arrow {
    transition: none !important;
    transform: none !important;
  }
}

.mgr-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 0.2rem;
  pointer-events: none;
  z-index: 200;
  width: 100%;
}

.mgr-nav-btn,
.mgr-arrow,
.carousel-arrow {
  width: 44px;
  height: 44px;
  background: var(--surface);
  border: 1.8px solid var(--border-md);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--dur) var(--ease);
  pointer-events: auto;
  color: var(--text-2);
}

.mgr-nav-btn:hover,
.mgr-arrow:hover,
.carousel-arrow:hover {
  background: var(--orange-lt);
  border-color: var(--orange-md);
  color: var(--orange);
  box-shadow: var(--shadow-sm);
  transform: scale(1.12);
}

.mgr-nav-prev,
.carousel-arrow-left {
  left: 0.2rem;
}

.mgr-nav-next,
.carousel-arrow-right {
  right: 0.2rem;
}

.mgr-indicators,
.carousel-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.mgr-dot,
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-md);
  cursor: pointer;
  transition: all 0.3s ease;
}

.mgr-dot.mgr-dot-active,
.mgr-dot.active,
.carousel-dot.active {
  width: 24px;
  border-radius: 12px;
  background: var(--orange);
}

/* Otorisasi Forms & Panels */
.rapot-form-card {
  animation: fadeUp 0.5s var(--ease) both;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .form-row-3 {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 600px) {
  .form-row-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .absensi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Questionnaire & Locked Panel Styling ───────────────── */
.option-card.locked {
  position: relative;
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg);
  border-color: var(--border-md);
  box-shadow: none !important;
}

.option-card.locked * {
  pointer-events: none;
  user-select: none;
}

.option-card.locked::after {
  content: '🔒 Terkunci';
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(239, 68, 68, 0.15);
  color: var(--rose);
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
  border-radius: 20px;
}

.option-card.active-tab {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.option-card.active-tab.yellow-tab {
  border-color: var(--orange-md) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

/* Slide Down Collapsible Panels */
.collapsible-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s var(--ease), margin 0.4s var(--ease);
  opacity: 0;
  margin-top: 0;
}

.collapsible-panel.open {
  max-height: 2000px;
  opacity: 1;
  margin-top: 1.5rem;
}

.badge-locked {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-3);
  background: var(--border);
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  margin-top: 0.4rem;
}

/* ── Admin Workspace Sub-Navbar Bar ── */
.admin-subnav-container {
  max-width: 1240px;
  margin: 0 auto 1.5rem auto;
  padding: 0 1.5rem;
}

.admin-subnav-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface, #ffffff);
  border: 1.5px solid var(--border-md, #cbd5e1);
  border-radius: var(--radius-md, 16px);
  padding: 0.45rem 0.6rem;
  box-shadow: var(--shadow-xs, 0 1px 3px rgba(0,0,0,0.05));
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.admin-subnav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-2, #44403c);
  border-radius: var(--radius-sm, 10px);
  text-decoration: none;
  transition: all var(--dur, 0.2s) var(--ease);
  border: 1.2px solid transparent;
}

.admin-subnav-item:hover {
  background: var(--bg, #f8fafc);
  color: var(--text, #0f172a);
  border-color: var(--border-md, #cbd5e1);
}

.admin-subnav-item.active {
  background: #fdf2f8 !important;
  color: #831843 !important;
  border-color: #fbcfe8 !important;
  box-shadow: 0 1px 3px rgba(131, 24, 67, 0.08);
}