/* ═══════════════════════════════════════════════════════
   AKMA Ormawa — Design System v2.0
   Light Mode · Professional Blue · Responsive
═══════════════════════════════════════════════════════ */

/* Bar admin WP bawaan disembunyikan lewat filter show_admin_bar (13-layout.php) — baris CSS ini
   pengaman kedua, bukan gantinya. File ini HANYA di-enqueue di front-end (wp_enqueue_scripts di
   akma-ormawa.php), tak pernah dimuat di wp-admin, jadi aman disembunyikan tanpa syarat di sini. */
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }
* html body { margin-top: 0 !important; }

/* ── Custom Properties ────────────────────────────── */
:root {
  /* Vivid blue family shared w/ public landing page redesign — kept as brand accent here,
     tuned for AA body-text contrast on white (do not lighten --akma-primary further). */
  --akma-primary:       #1848c9;
  --akma-primary-h:     #2563eb;
  --akma-primary-d:     #0a1e52;
  --akma-primary-bg:    #eaf0fe;
  --akma-primary-rgb:   24,72,201;
  --akma-accent:        #22d3ee;
  --akma-success:       #2E7D32;
  --akma-success-bg:    #E8F5E9;
  --akma-warning:       #E65100;
  --akma-warning-bg:    #FFF3E0;
  --akma-error:         #C62828;
  --akma-error-bg:      #FFEBEE;
  --akma-info:          #01579B;
  --akma-info-bg:       #E1F5FE;
  --akma-bg:            #F1F5F9;
  --akma-surface:       #FFFFFF;
  --akma-surface-2:     #F8FAFC;
  --akma-border:        #E2E8F0;
  --akma-border-h:      #CBD5E1;
  --akma-text:          #1E293B;
  --akma-text-2:        #475569;
  --akma-text-3:        #94A3B8;
  --akma-sidebar-w:     260px;
  --akma-header-h:      64px;
  --akma-shadow-sm:     0 1px 2px rgba(0,0,0,.06);
  --akma-shadow:        0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --akma-shadow-md:     0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --akma-shadow-lg:     0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
  --akma-radius:        8px;
  --akma-radius-sm:     5px;
  --akma-radius-lg:     12px;
  --akma-radius-xl:     16px;
  --akma-transition:    0.2s ease;
}

/* ── Reset & Base ─────────────────────────────────── */
.akma-app *, .akma-app *::before, .akma-app *::after { box-sizing: border-box; }
.akma-app { font-family: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif; font-size: 14px; color: var(--akma-text); line-height: 1.6; }
.akma-app a { color: var(--akma-primary); text-decoration: none; }
.akma-app a:hover { color: var(--akma-primary-h); }
.akma-app h1,.akma-app h2,.akma-app h3,.akma-app h4 { font-weight: 700; line-height: 1.3; margin: 0 0 .75rem; color: var(--akma-text); }
.akma-app h1 { font-size: 1.5rem; }
.akma-app h2 { font-size: 1.25rem; }
.akma-app h3 { font-size: 1.1rem; }
.akma-app p  { margin: 0 0 .75rem; }

/* ── App Shell ────────────────────────────────────── */
.akma-app {
  display: flex;
  min-height: calc(100vh - 80px);
  background: var(--akma-bg);
  position: relative;
}

/* ── Sidebar ──────────────────────────────────────── */
.akma-sidebar {
  width: var(--akma-sidebar-w);
  flex-shrink: 0;
  background: var(--akma-surface);
  border-right: 1px solid var(--akma-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
  transition: transform var(--akma-transition), width var(--akma-transition);
  scrollbar-width: thin;
  scrollbar-color: var(--akma-border) transparent;
}
.akma-sidebar::-webkit-scrollbar { width: 4px; }
.akma-sidebar::-webkit-scrollbar-track { background: transparent; }
.akma-sidebar::-webkit-scrollbar-thumb { background: var(--akma-border); border-radius: 2px; }

/* Brand */
.akma-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--akma-border);
  flex-shrink: 0;
}
.akma-brand-mark {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--akma-primary) 0%, var(--akma-accent) 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(var(--akma-primary-rgb),.35);
}
.akma-brand-mark-img {
  background: none;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.akma-brand-text { flex: 1; min-width: 0; }
.akma-brand-name { display: block; font-weight: 800; font-size: 15px; color: var(--akma-primary); letter-spacing: -.02em; }
.akma-brand-sub  { display: block; font-size: 10.5px; color: var(--akma-text-3); margin-top: 1px; }
.akma-sidebar-close { display: none; background: none; border: none; cursor: pointer; padding: 4px; color: var(--akma-text-3); border-radius: 4px; }
.akma-sidebar-close:hover { background: var(--akma-border); }

/* Nav */
.akma-nav {
  flex: 1;
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.akma-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--akma-radius-sm);
  color: var(--akma-text-2);
  font-weight: 600;
  font-size: 13.75px;
  transition: all var(--akma-transition);
  position: relative;
  text-decoration: none;
}
.akma-nav-item:hover {
  background: var(--akma-primary-bg);
  color: var(--akma-primary);
}
.akma-nav-item.active {
  background: var(--akma-primary-bg);
  color: var(--akma-primary);
  font-weight: 800;
}
.akma-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--akma-primary);
  border-radius: 0 3px 3px 0;
}
.akma-nav-icon { color: inherit; display: flex; align-items: center; flex-shrink: 0; opacity: .85; }
.akma-nav-label { flex: 1; }
.akma-nav-indicator { width: 6px; height: 6px; border-radius: 50%; background: var(--akma-primary); }
.akma-nav-divider { height: 1px; background: var(--akma-border); margin: 8px 12px; }
.akma-nav-section-header {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--akma-text-3);
  padding: 14px 14px 4px;
  margin-top: 2px;
  pointer-events: none;
  user-select: none;
}
.akma-icon-svg { display: block; }

/* Sidebar user */
.akma-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--akma-border);
  flex-shrink: 0;
  background: var(--akma-surface-2);
}
.akma-user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--akma-primary),var(--akma-accent));
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.akma-user-info { flex: 1; min-width: 0; }
.akma-user-name { display: block; font-weight: 600; font-size: 12.5px; color: var(--akma-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akma-user-role { display: block; font-size: 11px; color: var(--akma-text-3); }
.akma-logout-btn { color: var(--akma-text-3); padding: 5px; border-radius: 5px; display: flex; flex-shrink: 0; transition: all var(--akma-transition); }
.akma-logout-btn:hover { color: var(--akma-error); background: var(--akma-error-bg); }

/* ── Mobile Overlay ───────────────────────────────── */
.akma-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 190;
  backdrop-filter: blur(2px);
}

/* ── Main ─────────────────────────────────────────── */
.akma-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ───────────────────────────────────────── */
.akma-header {
  height: var(--akma-header-h);
  background: var(--akma-surface);
  border-bottom: 1px solid var(--akma-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--akma-shadow-sm);
  flex-shrink: 0;
}
.akma-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--akma-text-2);
  border-radius: var(--akma-radius-sm);
  transition: all var(--akma-transition);
}
.akma-menu-btn:hover { background: var(--akma-bg); color: var(--akma-primary); }
.akma-header-title { flex: 1; min-width: 0; }
.akma-page-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--akma-text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akma-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.akma-header-notif {
  position: relative;
  color: var(--akma-text-2);
  padding: 8px;
  border-radius: var(--akma-radius-sm);
  transition: all var(--akma-transition);
  display: flex;
}
.akma-header-notif:hover { background: var(--akma-bg); color: var(--akma-primary); }
.akma-notif-count {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--akma-error);
  color: #fff; font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--akma-surface);
}
.akma-header-user { display: flex; align-items: center; gap: 8px; }
.akma-header-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--akma-primary),var(--akma-accent));
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.akma-header-username { font-size: 13px; font-weight: 600; color: var(--akma-text-2); }

/* ── Content ──────────────────────────────────────── */
.akma-content { flex: 1; padding: 28px 32px; overflow: auto; }
.akma-content .akma-wrap { max-width: none; padding: 0; margin: 0; }

/* ── Footer ───────────────────────────────────────── */
.akma-footer {
  padding: 14px 32px;
  background: var(--akma-surface);
  border-top: 1px solid var(--akma-border);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--akma-text-3);
  flex-shrink: 0;
}
.akma-footer-ver { font-size: 11px; }

/* ── Login Gate ───────────────────────────────────── */
.akma-login-gate {
  max-width: 480px; margin: 60px auto; padding: 40px;
  background: var(--akma-surface); border-radius: var(--akma-radius-lg);
  box-shadow: var(--akma-shadow-md); text-align: center;
}

/* ═══════════════════════════════════════════════════
   COMPONENTS
═══════════════════════════════════════════════════ */

/* ── Page Header ──────────────────────────────────── */
.akma-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--akma-border);
}
.akma-page-header h2 { margin: 0; }
.akma-page-header-actions { display: flex; gap: 8px; }
.akma-breadcrumb { font-size: 12px; color: var(--akma-text-3); margin-bottom: 6px; }
.akma-breadcrumb a { color: var(--akma-text-3); }
.akma-breadcrumb a:hover { color: var(--akma-primary); }
.akma-breadcrumb-sep { margin: 0 6px; }

/* ── Stat Cards ───────────────────────────────────── */
.akma-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.akma-stat-card {
  background: var(--akma-surface);
  border: 1px solid var(--akma-border);
  border-radius: var(--akma-radius-lg);
  padding: 20px;
  text-align: center;
  box-shadow: var(--akma-shadow-sm);
  transition: box-shadow var(--akma-transition);
  position: relative;
  overflow: hidden;
}
.akma-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,var(--akma-primary),var(--akma-accent));
}
.akma-stat-card:hover { box-shadow: var(--akma-shadow-md); }
.akma-stat-card.akma-warn::before { background: linear-gradient(90deg,var(--akma-warning),#f59e0b); }
.akma-stat-num   { display: block; font-size: 2.45rem; font-weight: 900; letter-spacing: -.02em; color: var(--akma-primary); line-height: 1.15; margin-bottom: 4px; }
.akma-stat-card.akma-warn .akma-stat-num { color: var(--akma-warning); }
.akma-stat-label { font-size: .8rem; color: var(--akma-text-2); font-weight: 500; }

/* ── Quick Links ──────────────────────────────────── */
.akma-quick-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }

/* ── Cards ────────────────────────────────────────── */
.akma-card {
  background: var(--akma-surface);
  border: 1px solid var(--akma-border);
  border-radius: var(--akma-radius-lg);
  padding: 20px;
  box-shadow: var(--akma-shadow-sm);
}
.akma-card-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--akma-text); display: flex; align-items: center; gap: 8px; }
.akma-card-title .akma-icon-svg { color: var(--akma-primary); }

/* ── Profile Card ─────────────────────────────────── */
.akma-profile-card {
  background: linear-gradient(135deg,var(--akma-primary-bg) 0%,#EFF6FF 100%);
  border: 1px solid #BFDBFE;
  border-radius: var(--akma-radius-lg);
  padding: 20px;
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.akma-profile-card-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--akma-primary),var(--akma-accent));
  color: #fff; font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(var(--akma-primary-rgb),.3);
}
.akma-profile-card-body { flex: 1; }
.akma-profile-card h3 { margin: 0 0 4px; font-size: 15px; color: var(--akma-primary-d); }
.akma-profile-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.akma-profile-meta-item { font-size: 12.5px; color: var(--akma-text-2); }
.akma-profile-meta-item strong { color: var(--akma-text); }

/* Document submit profile card */
.akma-profil-card-dokumen {
  background: var(--akma-surface-2);
  border: 1px solid var(--akma-border);
  border-radius: var(--akma-radius);
  padding: 16px;
  margin-bottom: 20px;
}
.akma-profil-row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--akma-border); font-size: 13px; }
.akma-profil-row:last-child { border-bottom: none; }
.akma-profil-label { font-weight: 600; min-width: 110px; color: var(--akma-text-2); }

/* ── Buttons ──────────────────────────────────────── */
.akma-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--akma-primary);
  color: #fff !important;
  border: none;
  border-radius: var(--akma-radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  transition: all var(--akma-transition);
  line-height: 1;
  white-space: nowrap;
}
.akma-btn:hover    { background: var(--akma-primary-h); box-shadow: 0 3px 8px rgba(var(--akma-primary-rgb),.4); transform: translateY(-1px); }
.akma-btn:active   { transform: translateY(0); box-shadow: none; }
.akma-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.akma-btn-outline  { background: transparent; color: var(--akma-primary) !important; border: 1.5px solid var(--akma-primary); }
.akma-btn-outline:hover { background: var(--akma-primary-bg); box-shadow: none; }
.akma-btn-ghost    { background: transparent; color: var(--akma-text-2) !important; border: 1.5px solid var(--akma-border); }
.akma-btn-ghost:hover { background: var(--akma-bg); color: var(--akma-text) !important; border-color: var(--akma-border-h); box-shadow: none; }
.akma-btn-ok       { background: var(--akma-success); }
.akma-btn-ok:hover { background: #388e3c; box-shadow: 0 3px 8px rgba(46,125,50,.35); }
.akma-btn-danger   { background: var(--akma-error); }
.akma-btn-danger:hover { background: #d32f2f; box-shadow: 0 3px 8px rgba(198,40,40,.35); }
.akma-btn-sm       { padding: 6px 12px; font-size: 12.5px; }
.akma-btn-lg       { padding: 12px 24px; font-size: 15px; }
.akma-btn-block    { width: 100%; justify-content: center; }

/* ── Notices ──────────────────────────────────────── */
.akma-notice {
  /* display:block (bukan flex) — hampir semua pemanggil menaruh teks bebas bercampur
     elemen inline (<strong>/<a>/<code>) langsung sbg children. Flex dgn gap memperlakukan
     TIAP elemen & TIAP potongan teks di antaranya sbg flex-item row terpisah, jadi kalimat
     yg wrap patah jadi kolom2 spt tabel. Pemanggil yg memang butuh baris ikon+tombol
     (mis. 05-mahasiswa.php) sudah set style="display:flex" inline sendiri & tak terpengaruh. */
  padding: 12px 16px;
  border-radius: var(--akma-radius);
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
.akma-notice-ok      { background: var(--akma-success-bg); border-left: 4px solid var(--akma-success); color: #1b5e20; }
.akma-notice-warning { background: var(--akma-warning-bg); border-left: 4px solid var(--akma-warning); color: #bf360c; }
.akma-notice-error   { background: var(--akma-error-bg);   border-left: 4px solid var(--akma-error);   color: #7f0000; }
.akma-notice-info    { background: var(--akma-info-bg);    border-left: 4px solid var(--akma-info);    color: #01579b; }
.akma-notice a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ── Forms ────────────────────────────────────────── */
.akma-form { max-width: 640px; }
.akma-form-section { margin-bottom: 28px; }
.akma-form-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--akma-text-3); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--akma-border); }
.akma-field { margin-bottom: 16px; }
.akma-field label { display: block; font-weight: 600; font-size: 13px; color: var(--akma-text); margin-bottom: 6px; }
.akma-field label .required { color: var(--akma-error); margin-left: 2px; }
.akma-field input[type=text],
.akma-field input[type=url],
.akma-field input[type=email],
.akma-field input[type=number],
.akma-field input[type=file],
.akma-field select,
.akma-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--akma-border);
  border-radius: var(--akma-radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--akma-text);
  background: var(--akma-surface);
  transition: border-color var(--akma-transition), box-shadow var(--akma-transition);
  box-sizing: border-box;
}
.akma-field input:focus,
.akma-field select:focus,
.akma-field textarea:focus {
  outline: none;
  border-color: var(--akma-primary);
  box-shadow: 0 0 0 3px rgba(var(--akma-primary-rgb),.12);
}
.akma-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.akma-field textarea { resize: vertical; min-height: 90px; }
.akma-field input[type=file] { cursor: pointer; }
.akma-hint { font-size: 12px; color: var(--akma-text-3); margin-top: 5px; display: block; }
.akma-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.akma-checkbox-group { display: flex; flex-direction: column; gap: 6px; }
.akma-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.akma-checkbox input { width: 16px; height: 16px; accent-color: var(--akma-primary); flex-shrink: 0; }
.akma-multitext-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.akma-multitext-row { display: flex; gap: 6px; align-items: center; }
.akma-multitext-row input { flex: 1; }
.akma-multitext-quick { margin-bottom: 8px; }
.akma-form-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* ── Tables ───────────────────────────────────────── */
.akma-table-wrap { overflow-x: auto; border-radius: var(--akma-radius); border: 1px solid var(--akma-border); box-shadow: var(--akma-shadow-sm); }
.akma-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--akma-surface);
}
.akma-table th {
  padding: 12px 16px;
  background: var(--akma-surface-2);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--akma-text-2);
  border-bottom: 1.5px solid var(--akma-border);
  text-align: left;
  white-space: nowrap;
}
.akma-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--akma-border);
  vertical-align: middle;
  color: var(--akma-text);
}
.akma-table tr:last-child td { border-bottom: none; }
.akma-table tr:hover td { background: var(--akma-surface-2); }
.akma-table-wrap .akma-table { border-radius: 0; border: none; }
.akma-empty { text-align: center; padding: 40px; color: var(--akma-text-3); font-size: 14px; }

/* ── Badges ───────────────────────────────────────── */
.akma-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--akma-bg);
  color: var(--akma-text-2);
  white-space: nowrap;
}
.akma-badge-pending,
.akma-badge-menunggu_pembina  { background: var(--akma-info-bg);    color: var(--akma-info); }
.akma-badge-active,
.akma-badge-disetujui         { background: var(--akma-success-bg); color: var(--akma-success); }
.akma-badge-revisi            { background: var(--akma-warning-bg); color: var(--akma-warning); }
.akma-badge-ditolak,
.akma-badge-inactive          { background: var(--akma-error-bg);   color: var(--akma-error); }
.akma-badge-fase              { background: var(--akma-primary-bg); color: var(--akma-primary); }
.akma-badge-draft             { background: var(--akma-bg);         color: var(--akma-text-3); }

/* "Perlu tindakan Anda SEKARANG" — semantik BEDA dari .akma-badge-active (yg berarti "status
   aktif/selesai", warna hijau, dipakai luas di 10+ tempat lain spt "Aktif"/"Selesai"/"Anggota").
   Amber+dot berdenyut supaya perhatian sungguh tertuju kesitu, bukan disamakan dgn status hijau
   yg justru berarti "sudah beres". Jangan reuse akma-badge-active utk makna ini. */
.akma-badge-need { background: var(--akma-warning-bg); color: var(--akma-warning); gap:6px; box-shadow: 0 0 0 1px rgba(230,81,0,.12) inset; }
.akma-badge-need::before {
    content:''; width:6px; height:6px; border-radius:50%; background: var(--akma-warning); flex-shrink:0;
    animation: akma-badge-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes akma-badge-ping {
    0%   { box-shadow: 0 0 0 0 rgba(230,81,0,.55); }
    70%  { box-shadow: 0 0 0 5px rgba(230,81,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(230,81,0,0); }
}
@media (prefers-reduced-motion: reduce) { .akma-badge-need::before { animation: none; } }

/* ── Filter Bar ───────────────────────────────────── */
.akma-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  align-items: center;
  background: var(--akma-surface);
  padding: 14px 16px;
  border-radius: var(--akma-radius);
  border: 1px solid var(--akma-border);
}
.akma-filter-bar select,
.akma-filter-bar input[type=text] {
  padding: 8px 12px;
  border: 1.5px solid var(--akma-border);
  border-radius: var(--akma-radius-sm);
  font-size: 13px;
  background: var(--akma-surface);
  color: var(--akma-text);
}
.akma-filter-bar select:focus,
.akma-filter-bar input:focus { border-color: var(--akma-primary); outline: none; }

/* ── Tabs ─────────────────────────────────────────── */
.akma-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--akma-border);
  margin: 0 0 20px;
  overflow-x: auto;
}
.akma-tab {
  padding: 10px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--akma-text-2);
  font-family: inherit;
  transition: all var(--akma-transition);
  white-space: nowrap;
}
.akma-tab:hover  { color: var(--akma-primary); }
.akma-tab.active { color: var(--akma-primary); border-bottom-color: var(--akma-primary); }
.akma-tab-content { animation: akma-fadein .2s ease; }
@keyframes akma-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Ormawa Grid ──────────────────────────────────── */
.akma-ormawa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.akma-ormawa-card {
  background: var(--akma-surface);
  border: 1px solid var(--akma-border);
  border-radius: var(--akma-radius-lg);
  padding: 20px 16px;
  text-align: center;
  transition: all var(--akma-transition);
  cursor: pointer;
}
.akma-ormawa-card:hover { box-shadow: var(--akma-shadow-md); border-color: var(--akma-primary); transform: translateY(-2px); }
.akma-ormawa-card img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--akma-border);
  margin-bottom: 10px;
}
.akma-ormawa-card h4 { font-size: 12px; margin: 0 0 10px; color: var(--akma-text); font-weight: 600; line-height: 1.4; }
.akma-logo-placeholder {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--akma-primary-bg);
  border: 2px solid var(--akma-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: var(--akma-primary);
  margin: 0 auto 10px;
}
.akma-ormawa-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.akma-ormawa-logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--akma-border); box-shadow: var(--akma-shadow-sm); }
.akma-ormawa-header h2 { margin: 0 0 4px; }
.akma-ormawa-header .akma-badge { margin-left: 8px; }

/* ── Kegiatan Cards ───────────────────────────────── */
.akma-kegiatan-list { display: grid; gap: 14px; }
.akma-kegiatan-card {
  background: var(--akma-surface);
  border: 1px solid var(--akma-border);
  border-radius: var(--akma-radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all var(--akma-transition);
}
.akma-kegiatan-card:hover { box-shadow: var(--akma-shadow-md); border-color: var(--akma-border-h); }
.akma-kegiatan-card-body { flex: 1; min-width: 0; }
.akma-kegiatan-card h4 { margin: 0 0 6px; font-size: 15px; }
.akma-kegiatan-card p { margin: 0; font-size: 12.5px; color: var(--akma-text-2); }
.akma-kegiatan-header { margin-bottom: 20px; }
.akma-kegiatan-header h2 { margin-bottom: 8px; }
.akma-kegiatan-meta { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0; }
.akma-kegiatan-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--akma-text-2); }

/* ── Dokumen Grid ─────────────────────────────────── */
.akma-dokumen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.akma-dokumen-card {
  background: var(--akma-surface);
  border: 1.5px solid var(--akma-border);
  border-radius: var(--akma-radius-lg);
  padding: 18px;
  transition: all var(--akma-transition);
  position: relative;
}
.akma-dokumen-card:hover { box-shadow: var(--akma-shadow-md); }
.akma-dokumen-card h4 { font-size: 13.5px; margin: 0 0 8px; }
.akma-dokumen-card.akma-status-disetujui { border-color: #86efac; background: #f0fdf4; }
.akma-dokumen-card.akma-status-revisi    { border-color: #fcd34d; background: #fffbeb; }
.akma-dokumen-card.akma-status-ditolak   { border-color: #fca5a5; background: #fff5f5; opacity: .8; }
.akma-dokumen-card.akma-status-menunggu_pembina { border-color: #93c5fd; background: #eff6ff; }
.akma-dokumen-actions { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.akma-revisi-note { font-size: 12px; background: var(--akma-warning-bg); border-radius: 4px; padding: 8px 10px; margin: 8px 0; color: var(--akma-warning); }

/* ── Review Card (Pembina) ────────────────────────── */
.akma-review-card {
  background: var(--akma-surface);
  border: 1px solid var(--akma-border);
  border-radius: var(--akma-radius-lg);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--akma-shadow-sm);
  transition: box-shadow var(--akma-transition);
}
.akma-review-card:hover { box-shadow: var(--akma-shadow-md); }
.akma-review-header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.akma-review-ormawa { font-weight: 700; font-size: 15px; }
.akma-review-pengusul { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--akma-text-2); margin-bottom: 8px; padding: 8px 10px; background: var(--akma-surface-2); border-radius: 6px; }
.akma-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--akma-border); align-items: flex-start; }
.akma-review-data { background: var(--akma-surface-2); border: 1px solid var(--akma-border); border-radius: 6px; padding: 10px 12px; margin: 8px 0; }
.akma-review-data h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--akma-text-3); margin-bottom: 8px; }
.akma-review-field { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--akma-border); font-size: 13px; }
.akma-review-field:last-child { border-bottom: none; }
.akma-review-key  { font-weight: 600; min-width: 150px; color: var(--akma-text-2); flex-shrink: 0; }
.akma-revisi-form,
.akma-tolak-form  { width: 100%; margin-top: 8px; }
.akma-revisi-form textarea,
.akma-tolak-form textarea {
  width: 100%; margin-bottom: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--akma-border);
  border-radius: var(--akma-radius-sm);
  font-family: inherit; font-size: 13px;
  resize: vertical;
}
.akma-revisi-form textarea:focus,
.akma-tolak-form textarea:focus { border-color: var(--akma-primary); outline: none; }

/* ── NIM Lookup ───────────────────────────────────── */
.akma-nim-lookup { position: relative; }
.akma-nim-result { margin-top: 6px; font-size: 13px; min-height: 22px; }
.akma-nim-ok  { color: var(--akma-success); font-weight: 600; }
.akma-nim-err { color: var(--akma-error); }
.akma-nim-found { background: var(--akma-success-bg); border: 1px solid #86efac; padding: 8px 12px; border-radius: 6px; color: #1b5e20; font-size: 13px; margin-top: 6px; }

/* ── Risiko Table ─────────────────────────────────── */
.akma-risiko-table-wrap { overflow-x: auto; border-radius: var(--akma-radius); border: 1px solid var(--akma-border); }
.akma-risiko-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.akma-risiko-table th { padding: 10px 12px; background: var(--akma-surface-2); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--akma-text-2); border-bottom: 1.5px solid var(--akma-border); }
.akma-risiko-table td { padding: 8px 12px; border-bottom: 1px solid var(--akma-border); }
.akma-risiko-table tr:last-child td { border-bottom: none; }
.akma-risiko-sel { width: 68px; padding: 5px 8px; border: 1.5px solid var(--akma-border); border-radius: 4px; font-size: 13px; }

/* ── Modal ────────────────────────────────────────── */
.akma-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.akma-modal[style*="flex"] { animation: akma-modal-in .2s ease; }
@keyframes akma-modal-in { from { opacity: 0; } to { opacity: 1; } }
.akma-modal-box {
  background: var(--akma-surface);
  border-radius: var(--akma-radius-xl);
  padding: 28px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--akma-shadow-lg);
  animation: akma-modal-box-in .2s ease;
}
@keyframes akma-modal-box-in { from { transform: scale(.95) translateY(8px); } to { transform: none; } }
.akma-modal-box h3 { margin-top: 0; }
.akma-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.akma-modal-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--akma-text-3); padding: 4px; border-radius: 4px; }
.akma-modal-close:hover { background: var(--akma-bg); color: var(--akma-text); }

/* ── Verify Page ──────────────────────────────────── */
.akma-verify-card { padding: 24px; border-radius: var(--akma-radius-lg); margin-top: 16px; }
.akma-avatar { border-radius: 50%; object-fit: cover; vertical-align: middle; flex-shrink: 0; }
.akma-verify-valid   { border: 2px solid #86efac; background: #f0fdf4; }
.akma-verify-invalid { border: 2px solid #fca5a5; background: #fff5f5; }
.akma-verify-pending { border: 2px solid #fcd34d; background: #fffbeb; }
.akma-verify-valid h3   { color: var(--akma-success); display: flex; align-items: center; gap: 8px; }
.akma-verify-invalid h3 { color: var(--akma-error); }
.akma-verify-pending h3 { color: #b45309; }

/* ── Add Panitia ──────────────────────────────────── */
.akma-add-panitia { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; background: var(--akma-surface-2); border: 1px solid var(--akma-border); border-radius: var(--akma-radius); padding: 16px; margin-top: 16px; }
.akma-add-panitia input[type=text] { padding: 9px 12px; border: 1.5px solid var(--akma-border); border-radius: var(--akma-radius-sm); font-size: 13.5px; }

/* ── Settings ─────────────────────────────────────── */
.akma-settings-section { background: var(--akma-surface); border: 1px solid var(--akma-border); border-radius: var(--akma-radius-lg); padding: 22px; margin-bottom: 20px; }
.akma-settings-section h3 { margin-top: 0; font-size: 15px; color: var(--akma-primary); border-bottom: 1px solid var(--akma-border); padding-bottom: 10px; margin-bottom: 16px; }

/* ── Misc Utils ───────────────────────────────────── */
.akma-muted    { color: var(--akma-text-3); font-size: 12.5px; }
.akma-no-logo  { color: var(--akma-text-3); }
.akma-actions  { display: flex; gap: 6px; align-items: center; }
.akma-divider  { height: 1px; background: var(--akma-border); margin: 20px 0; }
.akma-text-center { text-align: center; }
.akma-mt-1 { margin-top: 8px; } .akma-mt-2 { margin-top: 16px; } .akma-mt-3 { margin-top: 24px; }
.akma-mb-1 { margin-bottom: 8px; } .akma-mb-2 { margin-bottom: 16px; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .akma-sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); z-index: 200; box-shadow: var(--akma-shadow-lg); }
  .akma-sidebar.open { transform: translateX(0); }
  .akma-overlay.open { display: block; }
  .akma-sidebar-close { display: flex; }
  .akma-menu-btn { display: flex; }
  .akma-main { margin-left: 0 !important; }
  .akma-content { padding: 20px 20px; }
}

@media (max-width: 640px) {
  .akma-content { padding: 16px 14px; }
  .akma-stats-grid { grid-template-columns: 1fr 1fr; }
  .akma-field-row { grid-template-columns: 1fr; }
  .akma-ormawa-grid { grid-template-columns: repeat(2,1fr); }
  .akma-dokumen-grid { grid-template-columns: 1fr; }
  .akma-header { padding: 0 14px; }
  .akma-header-username { display: none; }
  .akma-footer { padding: 10px 14px; font-size: 11px; }
  .akma-profile-card { flex-direction: column; gap: 12px; }
  .akma-review-key { min-width: 100px; }
  .akma-kegiatan-card { flex-direction: column; gap: 10px; }
  .akma-filter-bar { flex-direction: column; align-items: stretch; }
  .akma-form-actions { flex-direction: column; }
  .akma-btn-block-sm { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .akma-ormawa-grid { grid-template-columns: 1fr; }
  .akma-stat-num { font-size: 1.75rem; }
}

/* ── Bottom Tab Bar (mobile, app-like primary navigation) ──────────────────
   Konvensi app Indonesia (Gojek/Tokopedia/Instagram): bar tab persisten di
   bawah, thumb-reach, 4-5 tujuan TERPENTING per role (ditandai
   'mobile_primary'=>true di akma_get_nav_items(), lihat 13-layout.php).
   Sidebar off-canvas (hamburger) tetap ada utk menu LENGKAP — bar ini
   HANYA jalan pintas, bukan pengganti. Desktop: tersembunyi total. */
.akma-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .akma-bottom-nav {
    display: flex;
    align-items: stretch;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 250;
    background: var(--akma-surface);
    border-top: 1px solid var(--akma-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .akma-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 4px;
    color: var(--akma-text-3);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    position: relative;
    transition: color var(--akma-transition);
  }
  .akma-bottom-nav-icon { display: flex; opacity: .8; transition: opacity var(--akma-transition), transform var(--akma-transition); }
  .akma-bottom-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .akma-bottom-nav-item.active { color: var(--akma-primary); font-weight: 800; }
  .akma-bottom-nav-item.active .akma-bottom-nav-icon { opacity: 1; transform: translateY(-1px); }
  .akma-bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 28px; height: 3px;
    background: var(--akma-primary);
    border-radius: 0 0 3px 3px;
    transform: translateX(-50%);
  }
  .akma-bottom-nav-item:active { background: var(--akma-primary-bg); }

  /* Reserve space so fixed bottom bar never covers page content */
  .akma-content { padding-bottom: calc(20px + 56px + env(safe-area-inset-bottom, 0)); }
  .akma-footer  { display: none; } /* footer teks kecil tak berguna & tertutup bar di mobile */
}

@media (prefers-reduced-motion: reduce) {
  .akma-bottom-nav-item, .akma-bottom-nav-icon { transition: none !important; }
}

/* ═══════════════════════════════════════════════════
   PROFIL PAGE
═══════════════════════════════════════════════════ */
.akma-profil-page { max-width: 1000px; }

/* Hero */
.akma-profil-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, var(--akma-primary-bg) 0%, #EFF6FF 100%);
  border: 1px solid #BFDBFE;
  border-radius: var(--akma-radius-xl);
  padding: 28px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.akma-profil-avatar-lg {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--akma-primary), var(--akma-accent));
  color: #fff; font-weight: 900; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(var(--akma-primary-rgb),.35);
}
.akma-profil-hero-body { flex: 1; min-width: 0; }
.akma-profil-hero-body h2 { margin: 0 0 4px; font-size: 20px; }
.akma-profil-email { font-size: 13px; color: var(--akma-text-2); margin: 0 0 10px; }
.akma-profil-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* Completion ring */
.akma-profil-completion { position: relative; width: 80px; height: 80px; flex-shrink: 0; text-align: center; }
.akma-ring { width: 80px; height: 80px; transform: rotate(-90deg); }
.akma-ring-bg   { fill: none; stroke: var(--akma-border); stroke-width: 3; }
.akma-ring-fill { fill: none; stroke: var(--akma-primary); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.akma-ring-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-58%); font-size: 16px; font-weight: 800; color: var(--akma-primary); }
.akma-ring-sub   { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 20%); font-size: 10px; color: var(--akma-text-3); font-weight: 600; }

/* Grid layout */
.akma-profil-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.akma-profil-form-col  {  }
.akma-profil-sidebar-col { display: flex; flex-direction: column; gap: 0; }

/* Field groups */
.akma-profil-group { margin-bottom: 20px; }
.akma-profil-group-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--akma-text-3); margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--akma-border);
}
.akma-profil-group .akma-field-row { grid-template-columns: 1fr 1fr; gap: 12px; }

/* Save status */
.akma-save-status { margin-left: 10px; transition: all .3s; }

/* Keanggotaan list */
.akma-keanggotaan-list { display: flex; flex-direction: column; gap: 10px; }
.akma-keanggotaan-item {
  padding: 12px 14px;
  background: var(--akma-surface-2);
  border: 1px solid var(--akma-border);
  border-radius: var(--akma-radius);
}
.akma-keanggotaan-name { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.akma-keanggotaan-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }

/* Checklist */
.akma-checklist { display: flex; flex-direction: column; gap: 6px; }
.akma-check-item { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--akma-border); }
.akma-check-item:last-child { border-bottom: none; }
.akma-check-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.akma-check-item.done   .akma-check-icon { background: var(--akma-success-bg); color: var(--akma-success); font-weight: 700; }
.akma-check-item.missing .akma-check-icon { background: var(--akma-bg); color: var(--akma-text-3); }
.akma-check-item.done   { color: var(--akma-text); }
.akma-check-item.missing { color: var(--akma-text-3); }

/* Responsive */
@media (max-width: 860px) {
  .akma-profil-grid { grid-template-columns: 1fr; }
  .akma-profil-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .akma-profil-completion { position: absolute; top: 24px; right: 24px; }
  .akma-profil-hero { position: relative; }
}

/* ═══════════════════════════════════════════════════
   DASHBOARD SAYA
═══════════════════════════════════════════════════ */
.akma-dash { max-width: 1000px; }
.akma-dash-top { display: grid; grid-template-columns: 1fr auto; gap: 20px; margin-bottom: 24px; align-items: start; }
.akma-dash-profile { display: flex; gap: 18px; background: linear-gradient(135deg,var(--akma-primary-bg) 0%,#EFF6FF 100%); border: 1px solid #BFDBFE; border-radius: var(--akma-radius-xl); padding: 24px; align-items: flex-start; }
.akma-dash-avatar { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg,var(--akma-primary),var(--akma-accent)); color: #fff; font-weight: 900; font-size: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 3px 10px rgba(var(--akma-primary-rgb),.3); }
.akma-dash-profile-body { flex: 1; min-width: 0; }
.akma-dash-profile-body h2 { font-size: 17px; margin: 0 0 6px; }
.akma-dash-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.akma-dash-meta span { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--akma-text-2); }
.akma-dash-meta .akma-icon-svg { width: 13px; height: 13px; opacity: .65; }
.akma-dash-completion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.akma-completion-bar-wrap { flex: 1; min-width: 100px; max-width: 180px; height: 7px; background: var(--akma-border); border-radius: 4px; overflow: hidden; }
.akma-completion-bar { height: 100%; background: linear-gradient(90deg,var(--akma-primary),var(--akma-accent)); border-radius: 4px; transition: width .6s ease; }
.akma-completion-label { font-size: 12px; color: var(--akma-text-2); font-weight: 600; white-space: nowrap; }
.akma-dash-profil-ok { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--akma-success); font-weight: 600; }
.akma-dash-profil-ok .akma-icon-svg { color: var(--akma-success); }
.akma-link-sm { font-size: 12.5px; color: var(--akma-primary); font-weight: 600; }
.akma-link-sm:hover { text-decoration: underline; }
.akma-dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 200px; }
.akma-dash-stat { background: var(--akma-surface); border: 1px solid var(--akma-border); border-radius: var(--akma-radius-lg); padding: 14px 16px; text-align: center; box-shadow: var(--akma-shadow-sm); }
.akma-dash-stat-n { display: block; font-size: 1.95rem; font-weight: 900; letter-spacing: -.02em; color: var(--akma-primary); line-height: 1.1; }
.akma-dash-stat-l { font-size: 10.5px; color: var(--akma-text-2); font-weight: 500; display: block; margin-top: 3px; }
.akma-dash-stat-warn .akma-dash-stat-n { color: var(--akma-warning); }
.akma-dash-stat-warn { border-color: #fcd34d; }
.akma-dash-stat-danger .akma-dash-stat-n { color: var(--akma-error); }
.akma-dash-stat-danger { border-color: #fca5a5; }
/* Quickstart */
.akma-dash-quickstart h3 { margin-bottom: 16px; }
.akma-quickstart-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 14px; }
.akma-qs-card { display: flex; flex-direction: column; gap: 6px; background: var(--akma-surface); border: 1.5px solid var(--akma-border); border-radius: var(--akma-radius-lg); padding: 22px 20px 22px; transition: all .2s; position: relative; text-decoration: none; color: var(--akma-text); }
.akma-qs-card:hover { border-color: var(--akma-primary); box-shadow: var(--akma-shadow-md); transform: translateY(-2px); color: var(--akma-text); }
.akma-qs-card.akma-qs-primary { border-color: var(--akma-primary); background: var(--akma-primary-bg); }
.akma-qs-icon { font-size: 26px; margin-bottom: 4px; }
.akma-qs-card h4 { font-size: 14px; font-weight: 700; margin: 0; }
.akma-qs-card p  { font-size: 12px; color: var(--akma-text-2); margin: 0; line-height: 1.5; }
.akma-qs-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--akma-primary); opacity: .55; }
/* Kegiatan section */
.akma-dash-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.akma-dash-section-header h3 { margin: 0; }
.akma-kegiatan-cards { display: grid; gap: 14px; }
/* Kegiatan card */
.akma-keg-card { background: var(--akma-surface); border: 1px solid var(--akma-border); border-radius: var(--akma-radius-lg); padding: 20px; transition: all .2s; box-shadow: var(--akma-shadow-sm); }
.akma-keg-card:hover { box-shadow: var(--akma-shadow-md); border-color: var(--akma-border-h); }
.akma-keg-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.akma-keg-card-title h4 { font-size: 15px; margin: 0 0 3px; }
.akma-keg-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.akma-keg-meta span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--akma-text-2); }
.akma-keg-meta .akma-icon-svg { width: 13px; height: 13px; opacity: .65; }
.akma-keg-progress { margin-bottom: 12px; }
.akma-keg-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--akma-text-2); margin-bottom: 5px; font-weight: 500; }
.akma-keg-progress-bar { height: 6px; background: var(--akma-border); border-radius: 3px; overflow: hidden; }
.akma-keg-progress-fill { height: 100%; background: linear-gradient(90deg,var(--akma-primary),var(--akma-accent)); border-radius: 3px; transition: width .6s ease; }
.akma-keg-revisi-alert { display: flex; align-items: center; gap: 7px; background: var(--akma-warning-bg); color: var(--akma-warning); border-radius: 6px; padding: 8px 12px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.akma-keg-revisi-alert .akma-icon-svg { color: var(--akma-warning); flex-shrink: 0; }
.akma-keg-card-footer { display: flex; align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid var(--akma-border); flex-wrap: wrap; }
.akma-keg-card-footer .akma-link-sm { display: flex; align-items: center; gap: 4px; }
.akma-keg-card-footer .akma-icon-svg { width: 14px; height: 14px; }
/* Responsive */
@media (max-width: 768px) {
  .akma-dash-top { grid-template-columns: 1fr; }
  .akma-dash-stats { grid-template-columns: repeat(4,1fr); min-width: unset; }
  .akma-dash-profile { flex-direction: column; }
}
@media (max-width: 480px) {
  .akma-dash-stats { grid-template-columns: 1fr 1fr; }
  .akma-quickstart-grid { grid-template-columns: 1fr; }
  .akma-keg-card-header { flex-direction: column; }
}

/* ── STEPPER (Detail Kegiatan) ── */
.akma-stepper { display: flex; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--akma-border); }
.akma-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.akma-step-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--akma-bg); color: var(--akma-text-3); border: 2px solid var(--akma-border); transition: all .3s; }
.akma-step.active .akma-step-dot { background: var(--akma-primary); color: #fff; border-color: var(--akma-primary); box-shadow: 0 0 0 4px rgba(var(--akma-primary-rgb),.15); }
.akma-step.done .akma-step-dot { background: var(--akma-success); color: #fff; border-color: var(--akma-success); }
.akma-step-label { font-size: 11.5px; color: var(--akma-text-3); font-weight: 600; white-space: nowrap; }
.akma-step.active .akma-step-label, .akma-step.done .akma-step-label { color: var(--akma-text); }
.akma-step-line { flex: 1; height: 2px; background: var(--akma-border); margin: 0 8px; margin-bottom: 22px; min-width: 20px; transition: background .3s; }
.akma-step-line.done { background: var(--akma-success); }
.akma-keg-head-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.akma-keg-head-top h2 { margin: 0; }
@media (max-width: 560px) { .akma-step-label { display: none; } }

/* ── MEMBERSHIP GATE CARD ── */
.akma-gate-card { max-width: 520px; margin: 24px auto; background: var(--akma-surface); border: 1px solid var(--akma-border); border-radius: var(--akma-radius-xl); padding: 36px 32px; text-align: center; box-shadow: var(--akma-shadow-md); }
.akma-gate-card.akma-gate-pending { border-color: #fcd34d; background: #fffdf5; }
.akma-gate-icon { font-size: 44px; margin-bottom: 12px; }
.akma-gate-card h3 { font-size: 18px; margin: 0 0 10px; }
.akma-gate-card p { color: var(--akma-text-2); font-size: 14px; margin: 0 0 22px; line-height: 1.6; }
.akma-gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── POSISI SAYA (Detail Kegiatan) ── */
.akma-myrole { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--akma-surface); border: 1px solid var(--akma-border); border-radius: var(--akma-radius); padding: 12px 16px; margin-bottom: 16px; }
.akma-myrole-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.akma-myrole-label { font-size: 13px; font-weight: 700; color: var(--akma-text-2); }
.akma-myrole-action { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.akma-join-select { padding: 7px 10px; border: 1.5px solid var(--akma-border); border-radius: var(--akma-radius-sm); font-size: 13px; background: var(--akma-surface); color: var(--akma-text); }
.akma-join-select:focus { border-color: var(--akma-primary); outline: none; }
@media (max-width: 560px){ .akma-myrole { flex-direction: column; align-items: stretch; } .akma-myrole-action { justify-content: stretch; } .akma-join-select { flex: 1; } }

/* ── BANNER SIMULASI (Super Admin View As) ── */
.akma-sim-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; padding:10px 16px; border-radius:8px; margin-bottom:18px; font-size:13.5px; font-weight:600; box-shadow:0 2px 8px rgba(124,58,237,.3); }
.akma-sim-banner strong { font-weight:800; }
.akma-sim-stop { background:rgba(255,255,255,.2); color:#fff !important; padding:5px 14px; border-radius:6px; font-weight:700; font-size:12.5px; text-decoration:none; transition:background .2s; white-space:nowrap; }
.akma-sim-stop:hover { background:rgba(255,255,255,.35); color:#fff !important; }

/* ── ACTIVITY FEED ── */
.akma-card-title { display:flex; align-items:center; }
.akma-feed { display:flex; flex-direction:column; }
.akma-feed-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--akma-border); }
.akma-feed-item:last-child { border-bottom:none; }
.akma-feed-icon { font-size:16px; flex-shrink:0; width:24px; text-align:center; }
.akma-feed-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.akma-feed-text { font-size:13.5px; color:var(--akma-text); line-height:1.4; }
.akma-feed-meta { font-size:11.5px; color:var(--akma-text-3); }


/* ── NOTIFIKASI LIST ── */
.akma-notif-list { display:flex; flex-direction:column; gap:8px; }
.akma-notif-item { display:flex; gap:12px; padding:14px 16px; background:var(--akma-surface); border:1px solid var(--akma-border); border-radius:var(--akma-radius); text-decoration:none; color:var(--akma-text); transition:all .15s; }
.akma-notif-item:hover { border-color:var(--akma-primary); box-shadow:var(--akma-shadow-sm); color:var(--akma-text); }
.akma-notif-ic { font-size:20px; flex-shrink:0; width:28px; text-align:center; }
.akma-notif-content { display:flex; flex-direction:column; gap:2px; min-width:0; }
.akma-notif-title { font-weight:600; font-size:13.5px; }
.akma-notif-msg { font-size:12.5px; color:var(--akma-text-2); }
.akma-notif-time { font-size:11px; color:var(--akma-text-3); margin-top:2px; }

/* ── MANAJEMEN SURAT ── */
.akma-surat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.akma-surat-card { background:var(--akma-surface); border:1px solid var(--akma-border); border-radius:var(--akma-radius-lg); padding:16px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--akma-shadow-sm); }
.akma-surat-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.akma-surat-head h4 { margin:0; font-size:14px; line-height:1.35; }
.akma-surat-meta { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--akma-text-2); }
.akma-surat-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:6px; border-top:1px solid var(--akma-border); }

/* ── STUDIO SURAT (live editor) ── */
.akma-studio-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:20px; align-items:start; }
.akma-studio-left { background:var(--akma-surface); border:1px solid var(--akma-border); border-radius:var(--akma-radius-lg); padding:0; overflow:hidden; box-shadow:var(--akma-shadow-sm,0 1px 3px rgba(0,0,0,.06)); }
/* tabs as segmented pills */
.akma-studio-tabs { display:flex; gap:4px; padding:10px 12px; background:var(--akma-bg); border-bottom:1px solid var(--akma-border); flex-wrap:wrap; }
.akma-stud-tab { padding:8px 14px; background:transparent; border:1px solid transparent; border-radius:999px; cursor:pointer; font-size:13px; font-weight:600; color:var(--akma-text-2); transition:all .15s; display:inline-flex; align-items:center; gap:6px; }
.akma-stud-tab:hover { background:var(--akma-surface); color:var(--akma-text); }
.akma-stud-tab.active { color:#fff; background:var(--akma-primary); border-color:var(--akma-primary); box-shadow:0 2px 6px rgba(0,0,0,.15); }
.akma-stud-pane { padding:16px; }
.akma-stud-pane > .akma-muted:first-child { margin-top:0; }
/* placeholder chips */
.akma-chips { margin-bottom:10px; line-height:1.9; background:var(--akma-bg); border:1px dashed var(--akma-border); border-radius:8px; padding:8px 10px; }
.akma-chip { display:inline-block; background:var(--akma-primary-bg); color:var(--akma-primary); border:1px solid #bfdbfe; border-radius:5px; padding:2px 7px; margin:2px; font-size:11px; font-family:monospace; cursor:pointer; transition:all .12s; }
.akma-chip:hover { background:var(--akma-primary); color:#fff; transform:translateY(-1px); }
/* Sisipkan popover (Template tab) */
.akma-insert-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.akma-insert-dropdown { position:relative; }
.akma-insert-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:30; width:340px; max-height:380px; overflow-y:auto; background:var(--akma-surface); border:1px solid var(--akma-border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:10px; }
.akma-insert-group { margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--akma-border); line-height:1.9; }
.akma-insert-group:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.akma-insert-group > small { display:block; color:var(--akma-text-3); font-weight:600; margin-bottom:4px; }
.akma-insert-ttdopts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--akma-text-3); }
.akma-insert-ttdopts input[type=number] { width:48px; padding:2px 4px; font-size:12px; border:1px solid var(--akma-border); border-radius:3px; }
.akma-insert-ttdopts select { font-size:12px; padding:2px 4px; border:1px solid var(--akma-border); border-radius:3px; }
/* Grid Tanda Tangan (TTD & Alur tab) */
.akma-ttd-row { border:1px solid #fdba74; border-radius:8px; padding:10px; margin-bottom:8px; background:#fffaf5; }
.akma-ttd-row-head { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.akma-ttd-row-label { font-size:12px; font-weight:700; color:#9a3412; white-space:nowrap; }
.akma-ttd-row-head input[type=text] { flex:1; font-size:12px; padding:4px 7px; border:1px solid #fcd9a7; border-radius:4px; }
.akma-ttd-prefix-hint { font-size:11px; white-space:nowrap; color:#9a3412; background:#ffedd5; border:1px solid #fdba74; border-radius:10px; padding:2px 8px; }
.akma-ttd-prefix-hint em { font-style:normal; font-weight:700; }
.akma-ttd-prefix-hint-new { color:#0369a1; background:#e0f2fe; border-color:#7dd3fc; }
.akma-ttd-row-cells { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
.akma-ttd-cell { display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid #fed7aa; border-radius:6px; padding:8px; min-width:160px; position:relative; }
.akma-ttd-cell select, .akma-ttd-cell input[type=text] { font-size:12px; padding:4px 6px; border:1px solid var(--akma-border); border-radius:4px; }
.akma-ttd-cell button { align-self:flex-end; background:none; border:none; color:#b91c1c; font-weight:700; cursor:pointer; font-size:13px; padding:0 2px; }
.akma-ttd-cell-blank { justify-content:center; align-items:center; min-height:62px; background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px,#f1f1f1 12px); border-style:dashed; }
.akma-ttd-cell-blank button { align-self:auto; position:absolute; top:4px; right:6px; }
.akma-ttd-cell-add { display:flex; gap:6px; align-self:flex-end; }
#akma-tpl-html { width:100%; height:420px; font-family:monospace; font-size:12px; border:1.5px solid var(--akma-border); border-radius:6px; padding:10px; resize:vertical; box-sizing:border-box; }
/* TinyMCE polish */
.akma-studio-left .mce-tinymce { border-radius:8px !important; box-shadow:none !important; border:1.5px solid var(--akma-border) !important; }
.akma-studio-left .mce-toolbar-grp { background:var(--akma-bg) !important; border-bottom:1px solid var(--akma-border) !important; }
.akma-studio-actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center; }
/* preview */
.akma-studio-right { position:sticky; top:12px; }
.akma-preview-label { font-size:13px; font-weight:700; color:var(--akma-text); margin-bottom:8px; display:flex; gap:8px; align-items:center; }
.akma-preview-label::before { content:'👁'; }
#akma-prev-status { font-size:11px; color:var(--akma-text-3); font-weight:500; margin-left:auto; }
.akma-preview-paper { background:#3a3d42; border-radius:12px; padding:16px; max-height:80vh; overflow:auto; box-shadow:inset 0 2px 8px rgba(0,0,0,.3); }
#akma-preview-frame { width:100%; height:72vh; border:none; background:#fff; border-radius:3px; box-shadow:0 6px 24px rgba(0,0,0,.4); }
/* field & signer rows — friendly cards */
.akma-fld-row { display:grid; grid-template-columns:auto 1.1fr 1.2fr 1fr auto 1.2fr 1.2fr auto; gap:8px; align-items:center; margin-bottom:8px; padding:10px; background:var(--akma-bg); border:1px solid var(--akma-border); border-radius:8px; transition:border-color .15s; }
.akma-fld-row:hover { border-color:var(--akma-primary); }
.akma-fld-row input[type=text], .akma-fld-row select, .akma-fld-row textarea { padding:6px 8px; border:1px solid var(--akma-border); border-radius:5px; font-size:12px; background:var(--akma-surface); }
.akma-fld-row input:focus, .akma-fld-row select:focus, .akma-fld-row textarea:focus { outline:none; border-color:var(--akma-primary); box-shadow:0 0 0 2px var(--akma-primary-bg); }
.akma-fld-row .fr { font-size:11px; display:flex; align-items:center; gap:4px; white-space:nowrap; color:var(--akma-text-2); }
.akma-fld-row .fr label { font-weight:600; }
.akma-fld-row textarea { resize:vertical; min-height:32px; font-family:monospace; }
.akma-row-ord { display:flex; flex-direction:column; gap:2px; }
.akma-row-ord button { border:1px solid var(--akma-border); background:var(--akma-surface); border-radius:4px; cursor:pointer; font-size:10px; line-height:1; padding:3px 5px; color:var(--akma-text-2); }
.akma-row-ord button:hover { background:var(--akma-primary); color:#fff; border-color:var(--akma-primary); }
@media(max-width:980px){ .akma-studio-grid { grid-template-columns:1fr; } .akma-studio-right{ position:static; } .akma-fld-row { grid-template-columns:1fr 1fr; } }
/* ════════════════════════════════════════════════════════════════════
   UI/UX REFINEMENTS (audit 2026-06-09) — badge colors, tap targets,
   section nav, statbox component, table scroll affordance, a11y.
   Appended (non-destructive overrides).
   ════════════════════════════════════════════════════════════════════ */

/* Badge warna yang hilang */
.akma-badge-menunggu_approval,
.akma-badge-menunggu_ketua,
.akma-badge-info        { background: var(--akma-info-bg);    color: var(--akma-info); }
.akma-badge-download    { background: var(--akma-bg);          color: var(--akma-text-2); }

/* Tap target ≥ 40px untuk tombol ikon (aksesibilitas mobile) */
.akma-sidebar-close, .akma-logout-btn, .akma-header-notif {
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* .akma-menu-btn SENGAJA tidak ikut baris di atas — "display:inline-flex" di sana dulu
   menimpa "display:none" bawaannya (line ~229) di SEMUA lebar layar, membuat hamburger
   nyasar tampil di desktop juga (padahal sidebar penuh sudah ada di sana). Ukuran tap
   target tetap dijaga tanpa memaksa visibility — display TETAP diatur murni oleh aturan
   dasar (none) + override @media(max-width:1024px) di bawah (flex). */
.akma-menu-btn { min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
.akma-sidebar-close { padding: 8px; }
.akma-logout-btn { padding: 8px; }

/* Fokus keyboard yang jelas (a11y) */
.akma-app a:focus-visible, .akma-btn:focus-visible, .akma-tab:focus-visible,
.akma-app button:focus-visible, .akma-app input:focus-visible,
.akma-app select:focus-visible, .akma-app textarea:focus-visible {
  outline: 2px solid var(--akma-primary); outline-offset: 2px;
}

/* Section-nav pill bar (untuk dashboard panjang / Control Tower) */
.akma-secnav {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--akma-surface); border: 1px solid var(--akma-border);
  border-radius: var(--akma-radius); padding: 8px; margin: 0 0 16px;
  box-shadow: var(--akma-shadow-sm);
}
.akma-secnav a {
  font-size: 12.5px; font-weight: 600; color: var(--akma-text-2);
  padding: 7px 12px; border-radius: 999px; white-space: nowrap; line-height: 1;
}
.akma-secnav a:hover { background: var(--akma-surface-2); color: var(--akma-primary); }
.akma-secnav a.active { background: var(--akma-primary-bg); color: var(--akma-primary); }

/* Komponen statbox (pengganti grid stat inline) */
.akma-statgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; margin: 0 0 16px; }
.akma-statbox { background: var(--akma-surface); border: 1px solid var(--akma-border); border-radius: var(--akma-radius); padding: 14px 16px; text-align: center; }
.akma-statbox .n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.akma-statbox .l { font-size: 12px; color: var(--akma-text-3); margin-top: 2px; display: block; }
.akma-statbox.ok  { background: var(--akma-success-bg); border-color: transparent; } .akma-statbox.ok  .n { color: var(--akma-success); }
.akma-statbox.warn{ background: var(--akma-warning-bg); border-color: transparent; } .akma-statbox.warn .n { color: var(--akma-warning); }
.akma-statbox.info{ background: var(--akma-info-bg);    border-color: transparent; } .akma-statbox.info .n { color: var(--akma-info); }
.akma-statbox.danger{ background: var(--akma-error-bg); border-color: transparent; } .akma-statbox.danger .n { color: var(--akma-error); }

/* Af--ordance scroll tabel di layar kecil */
@media (max-width: 768px) {
  .akma-table-wrap { position: relative; }
  .akma-table-wrap::after {
    content: "› geser"; position: absolute; top: 6px; right: 6px;
    font-size: 10px; color: var(--akma-text-3); background: var(--akma-surface);
    padding: 2px 6px; border-radius: 4px; pointer-events: none; opacity: .85;
  }
  .akma-secnav { overflow-x: auto; flex-wrap: nowrap; }
}

/* Stat grid inline lama: pastikan reflow 1 kolom di ponsel kecil */
@media (max-width: 420px) {
  .akma-statgrid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .akma-app *, .akma-sidebar { transition: none !important; }
}

/* Mini-rantai approval (kartu review approver) */
.akma-chain { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; }
.akma-chain-step { font-size:11px; line-height:1; padding:4px 8px; border-radius:999px; border:1px solid var(--akma-border); color:var(--akma-text-3); background:var(--akma-surface-2); white-space:nowrap; }
.akma-chain-step.done { color:var(--akma-success); background:var(--akma-success-bg); border-color:transparent; }
.akma-chain-step.now  { color:var(--akma-primary); background:var(--akma-primary-bg); border-color:transparent; font-weight:700; }
.akma-chain-step.rej  { color:var(--akma-error); background:var(--akma-error-bg); border-color:transparent; }

/* Stepper GLOBAL per-bundle (6 tingkat kanonik, "udah sampai mana" — bukan per-dokumen).
   Node bulat + garis penghubung ala workflow-tracker (bukan lagi rentetan chip datar) —
   markup dari akma_bundle_global_stepper_html() dibungkus per-langkah agar ::after (garis)
   punya elemen jangkar; dipakai 4 titik (Pembina/Staff/Mahasiswa×2), semua ikut ter-upgrade. */
.akma-bundle-stepper { display:flex; align-items:flex-start; gap:2px; margin:6px 0 14px; overflow-x:auto; }
.akma-wf-step { position:relative; display:flex; flex-direction:column; align-items:center; flex:1 1 0; min-width:64px; z-index:1; }
.akma-wf-step:not(:last-child)::after {
    content:''; position:absolute; top:14px; left:calc(50% + 18px); width:calc(100% - 36px);
    height:2px; background:var(--akma-border); z-index:-1; }
.akma-wf-step.done:not(:last-child)::after { background:var(--akma-success); }
.akma-wf-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; background:var(--akma-surface); border:2px solid var(--akma-border);
    color:var(--akma-text-3); margin-bottom:6px; box-shadow:0 0 0 4px var(--akma-surface); }
.akma-wf-step.done .akma-wf-dot { background:var(--akma-success); border-color:var(--akma-success); color:#fff; }
.akma-wf-step.now  .akma-wf-dot { background:var(--akma-primary); border-color:var(--akma-primary); color:#fff;
    width:32px; height:32px; margin-bottom:4px; box-shadow:0 0 0 4px var(--akma-primary-bg); }
.akma-wf-label { font-size:10.5px; font-weight:600; color:var(--akma-text-3); text-align:center; line-height:1.25; padding:0 2px; }
.akma-wf-step.done .akma-wf-label { color:var(--akma-text-2); font-weight:700; }
.akma-wf-step.now  .akma-wf-label { color:var(--akma-primary); font-weight:800; background:var(--akma-primary-bg);
    padding:2px 8px; border-radius:5px; }
/* Nama lama (.akma-stepper-step/.akma-stepper-arrow) dipertahankan sebagai fallback CSS mati —
   tak dipakai markup baru, tapi tak dihapus utk jaga-jaga override tema/plugin lain yg mungkin ada. */
.akma-stepper-step { font-size:12px; line-height:1.3; padding:6px 10px; border-radius:999px; border:1px solid var(--akma-border); color:var(--akma-text-3); background:var(--akma-surface); white-space:nowrap; }
.akma-stepper-step.done { color:var(--akma-success); background:var(--akma-success-bg); border-color:transparent; }
.akma-stepper-step.now  { color:#fff; background:var(--akma-primary); border-color:transparent; font-weight:700; }
.akma-stepper-step.up   { opacity:.65; }
.akma-stepper-arrow { color:var(--akma-text-3); font-size:12px; margin:0 1px; }

/* ── INBOX + DRAWER (dashboard Pembina/WD/Sub-Kor/Staff) ──────────────────────────────────
   Baris ringkasan = baris "inbox" (bukan lagi kartu accordion inline); klik membuka RINCIAN
   sebagai drawer geser dari kanan, bukan expand di tempat — jadi antrean list tetap ramping
   & pandangan tak melompat-lompat, sementara rincian dapat ruang penuh utk dibaca. Konsep
   diadaptasi dari gaya "Inbox/Data-Grid + Slide-over Drawer" yang direferensikan user, dibangun
   ulang dgn sistem CSS sendiri (tanpa CDN Tailwind/Font Awesome) agar tetap self-hosted. */
.akma-inbox-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:12px 14px;
    margin-bottom:14px; background:var(--akma-surface-2); border:1px solid var(--akma-border); border-radius:var(--akma-radius-lg); }
.akma-inbox-search { position:relative; flex:1 1 240px; max-width:340px; }
.akma-inbox-search input { width:100%; padding:9px 12px 9px 34px; border:1.5px solid var(--akma-border);
    border-radius:var(--akma-radius); font-size:13.5px; background:var(--akma-surface); box-sizing:border-box;
    transition:border-color .15s, box-shadow .15s; }
.akma-inbox-search input:focus { outline:none; border-color:var(--akma-primary); box-shadow:0 0 0 3px var(--akma-primary-bg); }
.akma-inbox-search::before { content:'🔍'; position:absolute; left:11px; top:50%; transform:translateY(-50%);
    font-size:12px; opacity:.55; pointer-events:none; }
.akma-inbox-select { padding:9px 30px 9px 12px; border:1.5px solid var(--akma-border); border-radius:var(--akma-radius);
    font-size:13px; font-weight:600; background:var(--akma-surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%2394A3B8" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>') no-repeat right 12px center;
    color:var(--akma-text-2); cursor:pointer; appearance:none; -webkit-appearance:none; transition:border-color .15s; max-width:100%; }
.akma-inbox-select:hover { border-color:var(--akma-border-h); }
.akma-inbox-select:focus { outline:none; border-color:var(--akma-primary); box-shadow:0 0 0 3px var(--akma-primary-bg); }
.akma-inbox-select-status { background-color:var(--akma-primary-bg); border-color:#bfdbfe; color:var(--akma-primary); font-weight:700; }
.akma-inbox-count { font-size:12px; color:var(--akma-text-3); font-weight:600; white-space:nowrap; margin-left:auto; }

/* ── MANAJEMEN KEGIATAN ──────────────────────────────────────────────────────
   Halaman ini punya TEPAT DUA mode kerja: "apa yang butuh saya?" (tindak lanjut)
   dan "bagaimana progres semuanya?" (pantau). Keduanya dipisah jadi segmented
   control — bukan dua kartu bertumpuk — supaya di layar hanya ada satu daftar
   pada satu waktu & titik-mulai selalu jelas. */
.akma-mk-tabs { display:inline-flex; gap:4px; padding:4px; background:var(--akma-surface-2);
    border:1px solid var(--akma-border); border-radius:var(--akma-radius-lg); margin:0 0 16px; flex-wrap:wrap; }
.akma-mk-tab { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; min-height:40px;
    border-radius:9px; font-size:13.5px; font-weight:700; color:var(--akma-text-2); text-decoration:none;
    transition:background .15s, color .15s, box-shadow .15s; }
.akma-mk-tab:hover { background:var(--akma-surface); color:var(--akma-text); }
.akma-mk-tab.active { background:var(--akma-surface); color:var(--akma-primary); box-shadow:var(--akma-shadow-sm); }
.akma-mk-tab .n { font-size:11.5px; font-weight:800; padding:1px 7px; border-radius:999px;
    background:var(--akma-border); color:var(--akma-text-2); }
.akma-mk-tab.active .n { background:var(--akma-primary); color:#fff; }
.akma-mk-tab.urgent .n { background:var(--akma-warning); color:#fff; }

/* Kolom baris kegiatan — grid TERPISAH dari .akma-inbox-head bawaan (yang dipakai
   dashboard Pembina/Staff) supaya penyesuaian di sini tak menggeser halaman lain. */
/* minmax(0,…) — BUKAN lebar tetap: track grid default ber-min-content, jadi satu teks
   panjang ber-nowrap (mis. rentang tanggal) bisa memaksa kolom melar & mendorong baris
   sampai halaman menggulir mendatar. minmax(0,…) mengizinkan track menyusut, lalu tiap
   sel memotong isinya sendiri dgn ellipsis. */
@media (min-width: 860px) {
    .akma-mk-list .akma-review-summary,
    .akma-inbox-head.akma-mk-head {
        grid-template-columns: minmax(0,1fr) minmax(0,150px) minmax(0,132px) minmax(0,150px) 16px; }
}
.akma-mk-list .akma-review-summary > * { min-width:0; }
.akma-mk-list .akma-review-summary-date { overflow:hidden; text-overflow:ellipsis; }
/* Tahapan ringkas: 4 titik (Pra→Saat→Pasca→Selesai) + label tahap berjalan. Rantai
   berlabel lengkap disimpan utk panel detail — di baris cukup sinyal sekali-lihat. */
.akma-mk-dots { display:flex; align-items:center; gap:4px; }
.akma-mk-dot { width:7px; height:7px; border-radius:50%; background:var(--akma-border); flex-shrink:0; }
.akma-mk-dot.done { background:var(--akma-success); }
.akma-mk-dot.now { background:var(--akma-primary); box-shadow:0 0 0 3px var(--akma-primary-bg); }
.akma-mk-stage-label { font-size:11px; font-weight:700; color:var(--akma-text-2); margin-top:5px; }
.akma-mk-progress { font-size:11px; color:var(--akma-text-3); font-weight:600; margin-top:2px; }

/* Panel detail: satu aksi utama, sisanya tautan tenang (hierarki aksi jelas). */
.akma-mk-act { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.akma-mk-act .akma-btn { width:100%; justify-content:center; min-height:44px; }
.akma-mk-secondary { display:flex; flex-wrap:wrap; gap:8px 16px; padding-top:12px;
    border-top:1px solid var(--akma-border); }
.akma-mk-secondary a, .akma-mk-secondary button { font-size:12.5px; font-weight:600; color:var(--akma-primary);
    background:none; border:none; padding:6px 0; cursor:pointer; text-decoration:none; }
.akma-mk-secondary a:hover, .akma-mk-secondary button:hover { text-decoration:underline; }
.akma-mk-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin:0 0 24px; }
.akma-mk-fact { background:var(--akma-surface-2); border:1px solid var(--akma-border); border-radius:10px; padding:8px 12px; }
.akma-mk-fact dt { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    color:var(--akma-text-2); margin:0 0 4px; }
.akma-mk-fact dd { margin:0; font-size:16px; font-weight:600; color:var(--akma-text); line-height:1.3; }

/* ── Daftar-cek berkas (pengganti "buka halaman kegiatan" utk sekadar memantau) ──
   60-30-10: 60% latar netral (surface-2), 30% teks/garis (border+text-2), 10% aksen
   warna HANYA pada ikon status — makna tak pernah bergantung ke warna sendirian krn
   teks status ("Disetujui"/"Menunggu"/dst) selalu menyertainya (color-not-only). */
.akma-mk-checklist { margin:0 0 24px; }
.akma-mk-checklist + .akma-mk-checklist { margin-top:-8px; }
.akma-mk-checklist-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    color:var(--akma-text-2); margin:0 0 8px; }
.akma-mk-checklist-list { list-style:none; margin:0; padding:0; border:1px solid var(--akma-border);
    border-radius:10px; overflow:hidden; background:var(--akma-surface-2); }
.akma-mk-ci { display:flex; align-items:center; gap:12px; padding:10px 12px; font-size:14px;
    border-bottom:1px solid var(--akma-border); }
.akma-mk-ci:last-child { border-bottom:none; }
.akma-mk-ci-ic { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; flex-shrink:0; background:var(--akma-border); color:var(--akma-text-2); }
.akma-mk-ci-done .akma-mk-ci-ic { background:var(--akma-success-bg); color:var(--akma-success); }
.akma-mk-ci-wait .akma-mk-ci-ic { background:var(--akma-warning-bg); color:var(--akma-warning); }
.akma-mk-ci-rev  .akma-mk-ci-ic { background:var(--akma-error-bg); color:var(--akma-error); }
.akma-mk-ci-label { flex:1; min-width:0; color:var(--akma-text); font-weight:500; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.akma-mk-ci-status { font-size:12px; font-weight:700; color:var(--akma-text-2); flex-shrink:0; }
.akma-mk-ci-done .akma-mk-ci-status { color:var(--akma-success); }
.akma-mk-ci-wait .akma-mk-ci-status { color:var(--akma-warning); }
.akma-mk-ci-rev  .akma-mk-ci-status { color:var(--akma-error); }

/* Riwayat lengkap — progressive disclosure: tersembunyi sampai diminta, supaya panel
   tak terasa penuh sesak sejak dibuka (Hukum Hick — sedikit pilihan/informasi terlihat
   sekaligus = lebih cepat dipahami). */
.akma-mk-history { margin:0 0 16px; border:1px solid var(--akma-border); border-radius:10px;
    background:var(--akma-surface-2); }
.akma-mk-history summary { padding:10px 12px; font-size:13px; font-weight:700; color:var(--akma-primary);
    cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; }
.akma-mk-history summary::-webkit-details-marker { display:none; }
.akma-mk-history summary::before { content:'▸'; transition:transform .15s; font-size:11px; }
.akma-mk-history[open] summary::before { transform:rotate(90deg); }
.akma-mk-history[open] summary { border-bottom:1px solid var(--akma-border); }
.akma-mk-history .akma-timeline { padding:12px; }

/* Header kolom + daftar baris dibaca sbg SATU kartu (border+shadow menyatu, tanpa celah di
   antara keduanya) — dua elemen sibling terpisah di markup, disatukan murni lewat CSS radius/
   border supaya tak perlu bungkus <div> tambahan di PHP. */
.akma-inbox-head { border:1px solid var(--akma-border); border-bottom:none; border-radius:var(--akma-radius-lg) var(--akma-radius-lg) 0 0; background:var(--akma-surface-2); }
.akma-dokumen-review-list { border:1px solid var(--akma-border); border-radius:0 0 var(--akma-radius-lg) var(--akma-radius-lg); overflow:hidden; box-shadow:var(--akma-shadow-sm); }
.akma-dokumen-review-list:first-child { border-radius:var(--akma-radius-lg); }

.akma-review-group { margin-bottom: 0; border: 1px solid transparent; border-bottom-color: var(--akma-border); border-radius: 0; overflow: hidden; background: var(--akma-surface); transition:border-color .15s; }
.akma-review-group:last-child { border-bottom-color:transparent; }
.akma-review-summary {
    display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:11px 14px; cursor:pointer; user-select:none;
    transition: background .12s, border-color .12s; border-left:3px solid transparent; position:relative; }
.akma-review-summary:hover { background: var(--akma-surface-2); border-left-color:var(--akma-border-h); }
.akma-review-group.open .akma-review-summary { background:var(--akma-primary-bg); border-left-color:var(--akma-primary); }
.akma-review-summary-unread { width:8px; height:8px; border-radius:50%; background:var(--akma-warning); flex-shrink:0;
    box-shadow:0 0 0 3px var(--akma-warning-bg); }
.akma-review-summary-logo { width:36px; height:36px; border-radius:8px; object-fit:contain; background:var(--akma-bg); flex-shrink:0; }
.akma-review-summary-logo-placeholder { display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:var(--akma-text-3); }
.akma-row-id { display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 260px; }
.akma-review-summary-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.akma-review-summary-main strong { font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.akma-row-ormawa { font-size:12px; font-weight:700; color:var(--akma-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.akma-row-ormawa .kode { font-size:10.5px; font-weight:600; color:var(--akma-text-3); display:block; }
.akma-review-summary-status { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; text-align:right; }
.akma-review-summary-date { font-size:11px; color:var(--akma-text-3); font-weight:600; white-space:nowrap; flex-shrink:0; }
.akma-review-summary-chevron { color:var(--akma-text-3); font-size:13px; transition: transform .15s; flex-shrink:0; }
.akma-review-group.open .akma-review-summary-chevron { transform: rotate(-90deg); }

/* ≥860px: baris ringkasan jadi TABEL sungguhan — kolom sejajar antar-baris (bukan flex-wrap
   bebas), meniru bentuk data-grid rancangan acuan. Header label (.akma-inbox-head) hanya
   tampil di lebar ini; di layar sempit kembali ke kartu flex-wrap yg sudah ada di atas. */
.akma-inbox-head { display:none; }
@media (min-width: 860px) {
    .akma-inbox-head {
        display:grid; grid-template-columns: 1fr 170px 130px 64px 16px; gap:14px;
        padding:7px 14px 7px 14px; margin-bottom:4px; font-size:10.5px; font-weight:800;
        text-transform:uppercase; letter-spacing:.05em; color:var(--akma-text-3); }
    .akma-review-summary { display:grid; grid-template-columns: 1fr 170px 130px 64px 16px; gap:14px; flex-wrap:nowrap; }
    .akma-row-ormawa { display:block; }
    .akma-review-summary-status { flex-direction:row; align-items:center; }
    .akma-review-summary-date { text-align:right; }
}

/* Backdrop tunggal dibagi semua drawer (satu elemen, bukan per-grup) */
#akma-drawer-overlay { position:fixed; inset:0; background:rgba(15,23,42,.35); backdrop-filter:blur(1px);
    z-index:495; opacity:0; visibility:hidden; transition:opacity .2s ease; }
#akma-drawer-overlay.is-open { opacity:1; visibility:visible; }
body.akma-drawer-locked { overflow:hidden; }

/* Panel drawer: SEMUA .akma-review-detail berbagi posisi fixed yg sama; hanya SATU yg is-open
   pada satu waktu (dijaga JS akmaToggleReview — lihat script halaman). display TETAP block agar
   transform bisa dianimasikan (display:none tak bisa di-transition). */
.akma-review-detail {
    position:fixed; top:0; right:0; height:100vh; width:min(680px, 100vw); z-index:500;
    background:var(--akma-bg); border-left:1px solid var(--akma-border); box-shadow:-14px 0 40px rgba(15,23,42,.18);
    transform:translateX(100%); transition:transform .28s cubic-bezier(.32,.72,0,1); pointer-events:none;
    display:flex; flex-direction:column; overflow-y:auto; padding:0; }
.akma-review-detail.is-open { transform:translateX(0); pointer-events:auto; }
.akma-drawer-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px;
    padding:14px 16px; background:var(--akma-surface); border-bottom:1px solid var(--akma-border); flex-shrink:0; }
.akma-drawer-head h3 { margin:0; font-size:15px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.akma-drawer-close { width:30px; height:30px; border-radius:50%; border:none; background:var(--akma-bg);
    color:var(--akma-text-2); font-size:16px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.akma-drawer-close:hover { background:var(--akma-border); }
.akma-drawer-body { flex:1; padding:16px; }
/* Ringkasan kegiatan di paling atas panel Tinjau & TTD — overview cepat sebelum baca detail surat */
.akma-keg-summary { background:var(--akma-surface-2); border:1px solid var(--akma-border); border-radius:10px;
    padding:12px 14px; margin-bottom:14px; }
.akma-keg-summary-title { font-weight:700; font-size:14px; color:var(--akma-text); margin-bottom:6px; }
.akma-keg-summary-meta { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.akma-keg-summary-ormawa { font-size:12px; font-weight:600; color:var(--akma-primary); }
.akma-keg-summary-chip { font-size:11.5px; color:var(--akma-text-2); background:var(--akma-bg);
    border:1px solid var(--akma-border); border-radius:999px; padding:2px 9px; }
/* Footer aksi (Setujui/Revisi/Isi Nomor) menempel di dasar drawer sambil body di atasnya scroll */
.akma-review-detail .akma-bdecide { position:sticky; bottom:0; margin:14px -16px -16px; padding:14px 16px;
    background:var(--akma-surface); border-top:1px solid var(--akma-border); box-shadow:0 -8px 20px rgba(15,23,42,.06); z-index:2; }

@media (max-width: 720px) {
    .akma-review-detail { width:100vw; }
}

/* ── TOAST (feedback aksi non-blocking) ── */
#akma-toast-stack { position:fixed; top:16px; right:16px; z-index:10100; display:flex; flex-direction:column; gap:8px;
    pointer-events:none; max-width:min(360px, calc(100vw - 32px)); }
.akma-toast { pointer-events:auto; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px;
    background:var(--akma-text); color:#fff; font-size:13px; font-weight:600; box-shadow:var(--akma-shadow-lg);
    transform:translateX(120%); transition:transform .25s ease; }
.akma-toast.is-shown { transform:translateX(0); }
.akma-toast.ok   { background:var(--akma-success); }
.akma-toast.err  { background:var(--akma-error); }
.akma-toast.warn { background:var(--akma-warning); }
.akma-toast .ic { font-size:15px; flex-shrink:0; }

/* Onboarding stepper bernomor (dashboard mahasiswa) */
.akma-onboard { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.akma-onboard li { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--akma-border); border-radius:var(--akma-radius); background:var(--akma-surface); }
.akma-onboard li.now { border-color:var(--akma-primary); background:var(--akma-primary-bg); }
.akma-onboard li.done { background:var(--akma-surface-2); }
.akma-onboard li.up { opacity:.7; }
.akma-onboard-n { flex-shrink:0; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; background:var(--akma-border); color:var(--akma-text-2); }
.akma-onboard li.now .akma-onboard-n { background:var(--akma-primary); color:#fff; }
.akma-onboard li.done .akma-onboard-n { background:var(--akma-success); color:#fff; }
.akma-onboard-body { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.akma-onboard-body strong { font-size:14px; }
.akma-onboard-body .akma-muted { font-size:12px; }
@media (max-width:560px){ .akma-onboard li { flex-wrap:wrap; } .akma-onboard-body { flex-basis:calc(100% - 42px); } .akma-onboard li > a, .akma-onboard li > .akma-badge { margin-left:42px; } }

/* ── Indikator field terisi-otomatis (Single Source of Truth) ── */
.akma-prefill-tag { display:inline-block; font-size:10px; font-weight:600; line-height:1; padding:3px 6px; border-radius:10px; background:#e0f2fe; color:#0369a1; vertical-align:middle; margin-left:4px; }
.akma-field-prefilled > input, .akma-field-prefilled > textarea, .akma-field-prefilled > select { background:#f0f9ff; border-color:#bae6fd; }

/* ── Indikator field wajib-isi yang belum lengkap (notifikasi validasi) ── */
.akma-field-missing > input, .akma-field-missing > textarea, .akma-field-missing > select,
.akma-field-missing .akma-multitext input, .akma-field-missing .akma-budget-table input,
.akma-field-missing .akma-risiko-table select { border-color: var(--akma-error) !important; background: var(--akma-error-bg); }
.akma-field-missing-msg { display:block; color: var(--akma-error); font-size:12px; font-weight:600; margin-top:5px; }

/* ── Timeline alur dokumen (mahasiswa) ── */
.akma-tl { display:flex; flex-direction:column; gap:0; margin:4px 0; }
.akma-tl-item { display:flex; gap:12px; position:relative; padding-bottom:16px; }
.akma-tl-item:not(:last-child)::before { content:''; position:absolute; left:13px; top:26px; bottom:0; width:2px; background:var(--akma-border); }
.akma-tl-dot { flex-shrink:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:var(--akma-bg); border:2px solid var(--akma-border); color:var(--akma-text-3); z-index:1; }
.akma-tl-item.done .akma-tl-dot { background:var(--akma-success,#16a34a); border-color:var(--akma-success,#16a34a); color:#fff; }
.akma-tl-item.now  .akma-tl-dot { background:var(--akma-primary); border-color:var(--akma-primary); color:#fff; animation:akma-pulse 1.6s infinite; }
.akma-tl-item.rej  .akma-tl-dot { background:#dc2626; border-color:#dc2626; color:#fff; }
@keyframes akma-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(0,174,239,.4);} 50%{ box-shadow:0 0 0 6px rgba(0,174,239,0);} }
.akma-tl-body { flex:1; min-width:0; padding-top:2px; }
.akma-tl-body strong { display:block; font-size:14px; }
.akma-tl-state { display:inline-block; font-size:12px; color:var(--akma-text-2); }
.akma-tl-item.now .akma-tl-state { color:var(--akma-primary); font-weight:600; }
.akma-tl-item.rej .akma-tl-state { color:#dc2626; font-weight:600; }
.akma-tl-meta { display:block; font-size:11px; color:var(--akma-text-3); margin-top:1px; }
.akma-tl-note { margin-top:5px; padding:6px 9px; background:#fef2f2; border-left:3px solid #dc2626; border-radius:4px; font-size:12px; color:#7f1d1d; }
.akma-explainer { margin:0 0 14px; }
.akma-explainer summary { cursor:pointer; font-weight:600; font-size:13px; color:var(--akma-primary); padding:10px 12px; background:var(--akma-primary-bg); border:1px solid #bfdbfe; border-radius:8px; list-style:none; }
.akma-explainer summary::-webkit-details-marker { display:none; }
.akma-explainer[open] summary { border-radius:8px 8px 0 0; }
.akma-explainer-body { padding:12px 14px; border:1px solid #bfdbfe; border-top:none; border-radius:0 0 8px 8px; background:var(--akma-surface); }
.akma-explainer-body ol { margin:0; padding-left:20px; }
.akma-explainer-body li { margin-bottom:6px; font-size:13px; line-height:1.5; }

/* ── Chain: panah antar-grup (alur paralel #5B) ── */
.akma-chain-arrow { color:var(--akma-text-3); font-weight:700; margin:0 2px; align-self:center; }

/* ── Field builder: kartu 2-baris (#5C) ── */
.akma-fld-card { background:var(--akma-bg); border:1px solid var(--akma-border); border-radius:8px; padding:10px; margin-bottom:8px; transition:border-color .15s; }
.akma-fld-card:hover { border-color:var(--akma-primary); }
.akma-fld-l1 { display:grid; grid-template-columns:auto 1fr 1.2fr 1fr auto auto; gap:8px; align-items:center; }
.akma-fld-l2 { display:grid; grid-template-columns:1fr 1fr 1.2fr 1.4fr; gap:8px; margin-top:8px; }
.akma-fld-card input[type=text], .akma-fld-card select, .akma-fld-card textarea { padding:6px 8px; border:1px solid var(--akma-border); border-radius:5px; font-size:12px; background:var(--akma-surface); width:100%; box-sizing:border-box; }
.akma-fld-card input:focus, .akma-fld-card select:focus, .akma-fld-card textarea:focus { outline:none; border-color:var(--akma-primary); box-shadow:0 0 0 2px var(--akma-primary-bg); }
.akma-fld-card .fr { font-size:11px; display:flex; align-items:center; gap:4px; white-space:nowrap; color:var(--akma-text-2); }
.akma-fld-card textarea { resize:vertical; min-height:32px; font-family:monospace; }
@media(max-width:760px){ .akma-fld-l1, .akma-fld-l2 { grid-template-columns:1fr 1fr; } }

.akma-tl-attach { margin-top:6px; padding:8px 10px; background:var(--akma-bg); border:1px solid var(--akma-border); border-radius:6px; }

/* ── Studio: picker semua surat per fase (#peta lengkap) ── */
.akma-letter-picker { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.akma-lp-group { display:flex; flex-direction:column; gap:6px; }
.akma-lp-fase { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--akma-text-3); }
.akma-lp-items { display:flex; flex-wrap:wrap; gap:6px; }
.akma-lp-item { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--akma-border); border-radius:999px; background:var(--akma-surface); color:var(--akma-text); font-size:12px; font-weight:600; text-decoration:none; transition:all .12s; }
.akma-lp-item:hover { border-color:var(--akma-primary); transform:translateY(-1px); }
.akma-lp-item.active { background:var(--akma-primary); border-color:var(--akma-primary); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.akma-lp-mode { font-size:9px; font-weight:700; padding:2px 6px; border-radius:8px; text-transform:uppercase; letter-spacing:.03em; }
.akma-lp-mode.gen { background:#dcfce7; color:#166534; }
.akma-lp-mode.up  { background:#fef3c7; color:#92400e; }
.akma-lp-mode.dl  { background:#e0e7ff; color:#3730a3; }
.akma-lp-item.active .akma-lp-mode { background:rgba(255,255,255,.25); color:#fff; }
.akma-studio-selbar { font-size:13px; margin:0 0 12px; padding:8px 12px; background:var(--akma-primary-bg); border:1px solid #bfdbfe; border-radius:8px; display:flex; align-items:center; gap:8px; }
.akma-label-edit { font-weight:700; font-size:13px; font-family:inherit; color:inherit; background:transparent; border:none; border-bottom:1px dashed transparent; padding:1px 2px; min-width:80px; width:auto; }
.akma-label-edit:hover { border-bottom-color:#93c5fd; cursor:text; }
.akma-label-edit:focus { outline:none; background:#fff; border-bottom:1px solid var(--akma-primary); border-radius:3px; }

/* ── Studio v2: rail + main (hemat tempat) ── */
.akma-studio2 { display:grid; grid-template-columns:230px minmax(0,1fr); gap:16px; align-items:start; }
.akma-studio-rail { position:sticky; top:12px; background:var(--akma-surface); border:1px solid var(--akma-border); border-radius:var(--akma-radius-lg); padding:10px; display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 90px); }
.akma-rail-search { width:100%; box-sizing:border-box; padding:7px 9px; border:1px solid var(--akma-border); border-radius:6px; font-size:12px; }
.akma-rail-list { overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:8px; padding-right:2px; }
.akma-rail-group { display:flex; flex-direction:column; gap:1px; }
.akma-rail-fase { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--akma-text-3); padding:2px 4px; }
.akma-rail-item { display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:6px; text-decoration:none; color:var(--akma-text); font-size:12.5px; }
.akma-rail-item:hover { background:var(--akma-bg); }
.akma-rail-item.active { background:var(--akma-primary); color:#fff; font-weight:600; }
.akma-rail-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.akma-rail-dot.gen { background:#16a34a; } .akma-rail-dot.up { background:#d97706; } .akma-rail-dot.dl { background:#4f46e5; }
.akma-rail-item.active .akma-rail-dot { box-shadow:0 0 0 2px rgba(255,255,255,.55); }
.akma-rail-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.akma-rail-tools { border-top:1px solid var(--akma-border); padding-top:8px; }
.akma-studio-main { min-width:0; background:var(--akma-surface); border:1px solid var(--akma-border); border-radius:var(--akma-radius-lg); padding:0; overflow:hidden; }
.akma-studio-main .akma-studio-selbar { margin:12px 14px 0; }
/* ── Workspace split-pane: config left + preview right ── */
.akma-studio-workspace { display:grid; grid-template-columns:minmax(0,1fr) 400px; border-top:1px solid var(--akma-border); }
.akma-studio-config { min-width:0; border-right:1px solid var(--akma-border); }
.akma-studio-config .akma-studio-tabs { border-bottom:1px solid var(--akma-border); background:var(--akma-bg); padding:8px 12px; gap:4px; flex-wrap:nowrap; overflow-x:auto; }
.akma-studio-config .akma-stud-tab { font-size:12px; padding:6px 11px; white-space:nowrap; }
/* Step badge in tab label */
.akma-tab-step { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; font-size:10px; font-weight:800; background:rgba(0,0,0,.12); color:inherit; margin-right:4px; flex-shrink:0; }
.akma-stud-tab.active .akma-tab-step { background:rgba(255,255,255,.28); color:#fff; }
/* Journey section dividers inside panes */
.akma-section { margin-bottom:18px; }
.akma-section-title { font-size:13px; font-weight:700; color:var(--akma-text); margin:0 0 8px; display:flex; align-items:center; gap:6px; }
.akma-section-title::after { content:''; flex:1; height:1px; background:var(--akma-border); margin-left:6px; }
/* Preview right column */
.akma-studio-preview-col { position:sticky; top:12px; max-height:calc(100vh - 80px); display:flex; flex-direction:column; overflow:hidden; background:#2e3035; border-bottom-right-radius:var(--akma-radius-lg); }
.akma-preview-header { display:flex; align-items:center; gap:8px; padding:9px 12px; background:#1e2127; flex-shrink:0; }
.akma-preview-title { font-size:12px; font-weight:700; color:#e2e8f0; }
.akma-preview-title::before { content:'👁'; margin-right:5px; }
#akma-prev-status { font-size:10px; color:#64748b; font-weight:500; flex:1; }
.akma-studio-preview-col .akma-preview-paper { background:#3a3d42; border-radius:0; padding:12px; flex:1; overflow:auto; margin:0; }
.akma-studio-preview-col #akma-preview-frame { width:100%; height:calc(100vh - 130px); border:none; background:#fff; border-radius:3px; box-shadow:0 4px 20px rgba(0,0,0,.4); }
/* ── Studio: mode layar penuh (toggle via tombol ⊡ Layar Penuh) ── */
.akma-wrap.akma-studio-fs { position:fixed!important; inset:0!important; z-index:99999!important; overflow:hidden!important; background:var(--akma-bg)!important; padding:0!important; margin:0!important; border-radius:0!important; }
/* Sembunyikan rail & header dalam fullscreen — fokus ke editor */
.akma-wrap.akma-studio-fs .akma-studio-rail { display:none!important; }
.akma-wrap.akma-studio-fs .akma-studio-header { display:none!important; }
/* Buat .akma-studio2 full-width tanpa grid (rail disembunyikan) */
.akma-wrap.akma-studio-fs .akma-studio2 { display:block!important; height:100vh; overflow:hidden; }
.akma-wrap.akma-studio-fs .akma-studio-main { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.akma-wrap.akma-studio-fs .akma-studio-selbar { flex-shrink:0; }
/* Workspace: config kiri + preview kanan, paksa split meski viewport sempit */
.akma-wrap.akma-studio-fs .akma-studio-workspace { display:grid!important; grid-template-columns:minmax(0,1fr) 360px!important; height:calc(100vh - 44px)!important; overflow:hidden!important; }
.akma-wrap.akma-studio-fs .akma-studio-config { overflow-y:auto; height:100%; }
.akma-wrap.akma-studio-fs .akma-studio-preview-col { max-height:100%!important; position:relative!important; top:auto!important; border-radius:0!important; }
.akma-wrap.akma-studio-fs .akma-studio-preview-col #akma-preview-frame { height:calc(100vh - 44px - 44px)!important; }
/* TinyMCE iframe expand dalam fullscreen */
.akma-wrap.akma-studio-fs .mce-tinymce { display:flex!important; flex-direction:column!important; }
.akma-wrap.akma-studio-fs .mce-tinymce .mce-edit-area { flex:1!important; }
.akma-wrap.akma-studio-fs .mce-tinymce .mce-edit-area iframe { height:100%!important; min-height:400px; }
/* Hide WP admin bar bila ada */
body:has(.akma-studio-fs) #wpadminbar { display:none!important; }
@media(max-width:1200px){
  .akma-studio-workspace { grid-template-columns:1fr 340px; }
}
@media(max-width:980px){
  .akma-studio-workspace { grid-template-columns:1fr; }
  .akma-studio-config { border-right:none; border-bottom:1px solid var(--akma-border); }
  .akma-studio-preview-col { position:static; max-height:70vh; border-radius:0 0 var(--akma-radius-lg) var(--akma-radius-lg); }
  .akma-studio-preview-col #akma-preview-frame { height:60vh; }
  .akma-studio2 { grid-template-columns:1fr; }
  .akma-studio-rail { position:static; max-height:none; }
}
/* Peta Relasi */
.akma-peta-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-height:70vh; overflow:auto; position:relative; }
.akma-peta-col { background:transparent; border-radius:8px; padding:4px; position:relative; z-index:2; }
.akma-peta-fase { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--akma-text-3); margin-bottom:6px; text-align:center; }
.akma-peta-node { background:var(--akma-surface); border:1px solid var(--akma-border); border-radius:6px; padding:8px; margin-bottom:8px; }
.akma-peta-node-head { font-size:12px; display:flex; justify-content:space-between; align-items:center; gap:4px; }
.akma-peta-chain { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:6px; }
.akma-peta-step { background:var(--akma-primary-bg); color:var(--akma-primary); border:1px solid #bfdbfe; border-radius:4px; padding:1px 5px; font-size:10px; }
.akma-peta-arrow { color:var(--akma-text-3); font-size:11px; font-weight:700; }
.akma-peta-lock { margin-top:6px; font-size:10px; color:#9a3412; background:#fff7ed; border:1px solid #fed7aa; border-radius:4px; padding:2px 6px; }
/* Kelola KOP */
.akma-kop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; max-height:62vh; overflow:auto; padding:2px; }
.akma-kop-cell { border:1px solid var(--akma-border); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:6px; }
.akma-kop-name { font-size:11px; font-weight:600; line-height:1.3; }
.akma-kop-preview { height:54px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px dashed var(--akma-border); border-radius:4px; overflow:hidden; }
.akma-kop-preview img { max-width:100%; max-height:100%; }
@media(max-width:980px){
  .akma-studio2 { grid-template-columns:1fr; }
  .akma-studio-rail { position:static; max-height:none; }
  .akma-peta-cols { grid-template-columns:1fr 1fr; }
}

/* ── Rail: badge jumlah & status nonaktif (#11,#4) ── */
.akma-rail-count { margin-left:auto; font-size:10px; background:var(--akma-border); color:var(--akma-text-2); border-radius:8px; padding:0 6px; line-height:16px; flex-shrink:0; }
.akma-rail-item.active .akma-rail-count { background:rgba(255,255,255,.28); color:#fff; }
.akma-rail-item.off { opacity:.55; }
.akma-rail-item.off .akma-rail-name { text-decoration:line-through; }
.akma-rail-off { font-size:11px; color:#dc2626; margin-left:4px; flex-shrink:0; }
.akma-rail-item.active .akma-rail-off { color:#fff; }

/* ── Rail: tombol urut ▲▼ (#5, muncul saat hover) ── */
.akma-rail-ord { display:none; flex-shrink:0; flex-direction:column; line-height:1; margin-left:2px; }
.akma-rail-item:hover .akma-rail-ord { display:flex; }
.akma-rail-ord button { border:none; background:transparent; cursor:pointer; font-size:8px; padding:0 2px; color:inherit; line-height:1; }
.akma-rail-ord button:hover { color:var(--akma-primary); }

/* ════════════════════════════════════════════════════════════════════
   UI/UX REFINEMENTS (audit 2026-07-05, UI/UX Pro Max pass) — tap target
   utk tombol aksi utama, cegah auto-zoom iOS pada form di ponsel.
   Appended (non-destructive overrides).
   ════════════════════════════════════════════════════════════════════ */

/* Tombol aksi utama (.akma-btn) sebelumnya ~31px tinggi (padding 9px + font 13.5px) —
   di bawah standar tap-target 44×44 (Apple HIG/Material). min-height memastikan area
   sentuh aman TANPA mengubah tampilan visual (padding & font tetap sama, konten
   otomatis center via align-items:center yg sudah ada). .akma-btn-sm SENGAJA tidak
   disertakan — dipakai di tabel admin padat (banyak tombol sebaris, mouse-driven),
   menaikkan tingginya di sana akan merusak densitas tabel tanpa menambah nilai. */
.akma-btn { min-height: 40px; }
.akma-btn-lg { min-height: 44px; }

/* Font input < 16px memicu auto-zoom Safari iOS saat fokus (perilaku browser, bukan
   bug tampilan) — dinaikkan ke 16px KHUSUS breakpoint mobile agar tak mengganggu
   kepadatan form di desktop/tablet (tempat mayoritas peran admin bekerja). */
@media (max-width: 640px) {
  .akma-field input[type=text],
  .akma-field input[type=url],
  .akma-field input[type=email],
  .akma-field input[type=number],
  .akma-field select,
  .akma-field textarea,
  .akma-filter-bar select,
  .akma-filter-bar input[type=text] {
    font-size: 16px;
  }
}

/* ═══ STUDIO SURAT — RESKIN MODERN (override; markup & JS tetap) ═══
   Tujuan: hierarki jelas (header identitas → langkah kerja → aksi), kartu ber-napas,
   tab gaya segmented-underline, tombol berjenjang — menghapus kesan "web jadul". */

/* Kanvas & grid */
.akma-studio2 { grid-template-columns:248px minmax(0,1fr); gap:18px; }

/* Rail kiri: panel navigasi surat */
.akma-studio-rail { border-radius:14px; padding:12px; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.akma-rail-group-label, .akma-studio-rail .akma-rail-fase { letter-spacing:.08em; }
.akma-rail-item { padding:7px 9px; border-radius:8px; font-size:12.5px; position:relative; transition:background .12s; }
.akma-rail-item.active { background:var(--akma-primary-bg); color:var(--akma-primary-d); font-weight:700; box-shadow:inset 3px 0 0 var(--akma-primary); }
.akma-rail-item.active .akma-rail-dot { box-shadow:0 0 0 2px rgba(var(--akma-primary-rgb),.35); }
.akma-rail-item.active .akma-rail-count { background:var(--akma-primary); color:#fff; }
.akma-rail-item.active .akma-rail-off { color:var(--akma-primary-d); }

/* Header workspace: identitas surat + aksi global */
.akma-selbar-v2 { display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:16px 18px 14px; background:var(--akma-surface); border-bottom:1px solid var(--akma-border); flex-wrap:wrap; }
.akma-selbar-id { display:flex; flex-direction:column; gap:7px; min-width:0; flex:1; }
.akma-selbar-v2 .akma-label-edit { font-size:19px; font-weight:800; color:var(--akma-text);
  border:1px solid transparent; border-radius:8px; padding:2px 8px; margin-left:-8px; background:transparent;
  width:100%; max-width:560px; transition:border-color .12s, background .12s; }
.akma-selbar-v2 .akma-label-edit:hover { border-color:var(--akma-border-h); background:var(--akma-surface-2); }
.akma-selbar-v2 .akma-label-edit:focus { border-color:var(--akma-primary); background:#fff; outline:none; box-shadow:0 0 0 3px rgba(var(--akma-primary-rgb),.12); }
.akma-selbar-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.akma-chip { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600;
  padding:3px 10px; border-radius:999px; background:var(--akma-surface-2); border:1px solid var(--akma-border); color:var(--akma-text-2); }
.akma-chip-ok  { background:var(--akma-success-bg); border-color:transparent; color:var(--akma-success); }
.akma-chip-off { background:var(--akma-warning-bg); border-color:transparent; color:var(--akma-warning); }
.akma-selbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:4px; }

/* Strip penuntun penyiapan surat baru */
.akma-setup-strip { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:10px 14px 0;
  padding:10px 14px; background:linear-gradient(90deg, var(--akma-primary-bg), transparent 85%);
  border:1px solid rgba(var(--akma-primary-rgb),.25); border-radius:10px; font-size:12.5px; }
.akma-setup-strip > strong { color:var(--akma-primary-d); font-size:12.5px; }
.akma-setup-step { display:inline-flex; align-items:center; gap:6px; color:var(--akma-text-2); font-weight:600; }
.akma-setup-step i { font-style:normal; width:19px; height:19px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:800;
  background:var(--akma-surface); border:1.5px solid var(--akma-border-h); color:var(--akma-text-2); }
.akma-setup-step.done { color:var(--akma-success); }
.akma-setup-step.done i { background:var(--akma-success-bg); border-color:var(--akma-success); color:var(--akma-success); }

/* Tab langkah kerja: segmented-underline (ganti pill biru) */
.akma-studio-config .akma-studio-tabs { background:var(--akma-surface); border-bottom:1px solid var(--akma-border); padding:0 10px; gap:2px; }
.akma-studio-config .akma-stud-tab { border-radius:0; border:none; border-bottom:2.5px solid transparent;
  padding:11px 13px; font-size:12.5px; color:var(--akma-text-2); background:transparent; }
.akma-studio-config .akma-stud-tab:hover { background:var(--akma-surface-2); color:var(--akma-text); }
.akma-studio-config .akma-stud-tab.active { background:transparent; color:var(--akma-primary); border-bottom-color:var(--akma-primary); box-shadow:none; font-weight:800; }
.akma-tab-step { width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; background:var(--akma-surface-2); border:1px solid var(--akma-border-h); color:var(--akma-text-2); }
.akma-stud-tab.active .akma-tab-step { background:var(--akma-primary); border-color:var(--akma-primary); color:#fff; }

/* Kartu seksi di dalam pane: pengelompokan jelas */
.akma-stud-pane { padding:16px 18px 18px; }
.akma-stud-pane .akma-section { background:var(--akma-surface-2); border:1px solid var(--akma-border);
  border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.akma-stud-pane .akma-section .akma-section-title::after { display:none; }
.akma-section-title { font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--akma-text-2); }

/* Baris aksi: pemisah + tombol pertama = aksi utama */
.akma-studio-actions { border-top:1px dashed var(--akma-border); padding-top:12px; margin-top:14px; }
.akma-studio-actions > .akma-btn:first-child:not(.akma-btn-ghost):not(.akma-btn-outline) {
  background:var(--akma-primary); color:#fff; border-color:var(--akma-primary);
  padding:8px 16px; font-weight:700; box-shadow:0 1px 3px rgba(var(--akma-primary-rgb),.35); }
.akma-studio-actions > .akma-btn:first-child:not(.akma-btn-ghost):not(.akma-btn-outline):hover { background:var(--akma-primary-h); }

/* Panel pratinjau */
.akma-preview-header { border-radius:12px 12px 0 0; gap:10px; }
.akma-pv-keg { max-width:190px; font-size:11.5px; padding:4px 8px; border-radius:7px;
  background:rgba(255,255,255,.08); color:#e2e8f0; border:1px solid rgba(255,255,255,.18); }
.akma-pv-keg option { color:#1E293B; background:#fff; }

/* Modal studio: radius & bayangan modern */
.akma-modal-box { border-radius:14px; box-shadow:0 20px 50px rgba(15,23,42,.25); }

/* ═══ STUDIO SURAT v3 — MODE DOKUMEN (document-first, tanpa pratinjau samping) ═══
   Kanvas editor = kertas F4 sesungguhnya (WYSIWYG akurat). Daftar surat & panel
   pengaturan menjadi panel geser; aksi utama menetap di topbar sticky. */

.akma-studio3 { display:block; }

/* Tombol primer generik (dipakai topbar Simpan) */
.akma-btn.akma-btn-primary { background:var(--akma-primary); color:#fff; border-color:var(--akma-primary); font-weight:700; }
.akma-btn.akma-btn-primary:hover { background:var(--akma-primary-h); }
.akma-btn.akma-btn-primary[disabled] { opacity:.5; cursor:not-allowed; }

/* Overlay bersama (rail kiri & panel kanan) */
.akma-panel-ov { position:fixed; inset:0; background:rgba(15,23,42,.45); opacity:0; pointer-events:none;
  transition:opacity .18s; z-index:99960; }
.akma-panel-ov.show { opacity:1; pointer-events:auto; }

/* Rail daftar surat → panel geser KIRI */
.akma-studio3 .akma-studio-rail { position:fixed; top:0; left:0; bottom:0; width:290px; max-width:92vw;
  z-index:99970; border-radius:0 16px 16px 0; transform:translateX(-105%); transition:transform .22s ease;
  max-height:none; box-shadow:8px 0 30px rgba(15,23,42,.18); overflow-y:auto; }
.akma-studio3 .akma-studio-rail.open { transform:translateX(0); }

/* Topbar dokumen (sticky) */
.akma-doc-topbar { position:sticky; top:0; z-index:9950; display:flex; align-items:center; gap:12px;
  padding:10px 16px; background:var(--akma-surface); border:1px solid var(--akma-border);
  border-radius:14px 14px 0 0; box-shadow:0 2px 10px rgba(15,23,42,.06); flex-wrap:wrap; }
.akma-doc-id { display:flex; align-items:center; gap:8px; min-width:0; flex:1; flex-wrap:wrap; }
.akma-doc-id .akma-label-edit { font-size:16.5px; font-weight:800; color:var(--akma-text);
  border:1px solid transparent; border-radius:8px; padding:3px 8px; background:transparent;
  min-width:180px; max-width:420px; flex:1; transition:border-color .12s, background .12s; }
.akma-doc-id .akma-label-edit:hover { border-color:var(--akma-border-h); background:var(--akma-surface-2); }
.akma-doc-id .akma-label-edit:focus { border-color:var(--akma-primary); background:#fff; outline:none;
  box-shadow:0 0 0 3px rgba(var(--akma-primary-rgb),.12); }
.akma-doc-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.akma-pv-src { font-size:12px; padding:6px 8px; border-radius:8px; border:1px solid var(--akma-border-h);
  background:var(--akma-surface-2); color:var(--akma-text); max-width:200px; }

/* Subbar panel pengaturan */
.akma-doc-subbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 16px;
  background:var(--akma-surface-2); border:1px solid var(--akma-border); border-top:none; }
.akma-subbar-label { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--akma-text-3); }
.akma-panel-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--akma-border-h); background:var(--akma-surface); font-size:12.5px; font-weight:600;
  color:var(--akma-text-2); cursor:pointer; transition:all .12s; }
.akma-panel-btn:hover { border-color:var(--akma-primary); color:var(--akma-primary); background:var(--akma-primary-bg); }
.akma-panel-btn b { background:var(--akma-primary-bg); color:var(--akma-primary-d); border-radius:999px;
  padding:1px 7px; font-size:11px; }
.akma-subbar-hint { margin-left:auto; font-size:11px; color:var(--akma-text-3); }

/* Workspace → kanvas tunggal */
.akma-studio3 .akma-studio-workspace { display:block; }
.akma-studio3 .akma-studio-config { background:transparent; border:none; box-shadow:none; border-radius:0; }
.akma-studio3 #stud-template.akma-stud-pane { padding:14px 0 24px; background:transparent; }
/* Baris utilitas di atas kertas: sejajarkan dgn lebar kertas F4 */
.akma-studio3 #stud-template > .akma-insert-bar,
.akma-studio3 #stud-template > p.akma-muted,
.akma-studio3 #stud-template > #akma-ttd-mismatch,
.akma-studio3 #stud-template > .akma-studio-actions,
.akma-studio3 #stud-template > .akma-notice,
.akma-studio3 #stud-template > div[style*="akma-bg"] { max-width:calc(215.9mm + 4px); margin-left:auto !important; margin-right:auto !important; }
.akma-studio3 .akma-studio-actions { border-top:none; }
/* Editor TinyMCE menyatu dgn latar (iframe menggambar backdrop abu + kertas sendiri) */
.akma-studio3 .mce-tinymce, .akma-studio3 .mce-container, .akma-studio3 .mce-panel { border:none !important; box-shadow:none !important; }
.akma-studio3 .mce-toolbar-grp { background:var(--akma-surface) !important; border:1px solid var(--akma-border) !important;
  border-radius:10px !important; margin:0 auto 8px !important; max-width:calc(215.9mm + 4px); }
.akma-studio3 .mce-edit-area { background:#525659 !important; border-radius:12px; overflow:hidden; }

/* Pita KOP di atas kertas (bagian surat non-template) */
.akma-kop-band { position:relative; width:215.9mm; max-width:100%; margin:6px auto 8px; background:#fff;
  border-radius:10px; box-shadow:0 2px 14px rgba(0,0,0,.35); cursor:pointer; box-sizing:border-box; z-index:2; }
.akma-kop-band:hover { outline:2px solid rgba(var(--akma-primary-rgb),.5); }
.akma-kop-band-tag { position:absolute; top:6px; right:8px; font-size:10px; font-weight:700; letter-spacing:.03em;
  background:rgba(var(--akma-primary-rgb),.92); color:#fff; border-radius:999px; padding:2px 9px; opacity:0; transition:opacity .12s; }
.akma-kop-band:hover .akma-kop-band-tag { opacity:1; }

/* Pane pengaturan → panel geser KANAN */
.akma-studio3 .akma-stud-pane.akma-drawer { position:fixed; top:0; right:0; bottom:0; width:600px; max-width:96vw;
  z-index:99970; background:var(--akma-surface); box-shadow:-10px 0 34px rgba(15,23,42,.22);
  border-radius:16px 0 0 16px; overflow-y:auto; padding:0 20px 24px;
  transform:translateX(105%); transition:transform .22s ease; }
.akma-studio3 .akma-stud-pane.akma-drawer.open { transform:translateX(0); }
.akma-drawer-head { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  background:var(--akma-surface); padding:16px 0 10px; margin:0 0 12px; border-bottom:1px solid var(--akma-border); }
.akma-drawer-head strong { font-size:15px; color:var(--akma-text); }
.akma-drawer-close { border:none; background:var(--akma-surface-2); width:30px; height:30px; border-radius:8px;
  cursor:pointer; font-size:14px; color:var(--akma-text-2); }
.akma-drawer-close:hover { background:var(--akma-error-bg); color:var(--akma-error); }

/* Setup strip menyatu dgn subbar */
.akma-studio3 .akma-setup-strip { margin:10px 0 0; }

@media (max-width: 900px) {
  .akma-studio3 .akma-stud-pane.akma-drawer { width:100vw; border-radius:0; }
  .akma-subbar-hint { display:none; }
  .akma-kop-band { display:none; } /* layar sempit: fokus isi */
}

/* Offset admin-bar WP utk panel geser (drawer) Studio */
body.admin-bar .akma-studio3 .akma-stud-pane.akma-drawer,
body.admin-bar .akma-studio3 .akma-studio-rail { top:32px; }
@media (max-width:782px){ body.admin-bar .akma-studio3 .akma-stud-pane.akma-drawer,
  body.admin-bar .akma-studio3 .akma-studio-rail { top:46px; } }

/* ── Inspektur Blok TTD (klik blok TTD di kertas → panel properti melayang) ── */
.akma-ttd-insp { position:fixed; z-index:99975; width:300px; background:var(--akma-surface);
  border:1px solid var(--akma-border); border-radius:14px; box-shadow:0 18px 44px rgba(15,23,42,.28);
  padding:12px 14px 14px; font-size:12.5px; }
.akma-ttd-insp .ti-head { display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--akma-border); padding-bottom:8px; margin-bottom:10px; }
.akma-ttd-insp .ti-head code { background:var(--akma-primary-bg); color:var(--akma-primary-d);
  border-radius:6px; padding:1px 7px; font-size:11.5px; }
.akma-ttd-insp .ti-row { display:flex; flex-direction:column; gap:4px; margin-bottom:9px;
  font-weight:600; color:var(--akma-text-2); }
.akma-ttd-insp .ti-row em { font-style:normal; color:var(--akma-primary); }
.akma-ttd-insp input[type="text"], .akma-ttd-insp input[type="number"], .akma-ttd-insp select {
  width:100%; padding:6px 8px; border:1px solid var(--akma-border-h); border-radius:8px; font-size:12.5px; box-sizing:border-box; }
.akma-ttd-insp input[type="range"] { width:100%; accent-color:var(--akma-primary); }
.akma-ttd-insp .ti-seg { display:inline-flex; border:1px solid var(--akma-border-h); border-radius:8px; overflow:hidden; }
.akma-ttd-insp .ti-seg button { border:none; background:var(--akma-surface); padding:5px 12px; font-size:12px;
  font-weight:600; color:var(--akma-text-2); cursor:pointer; }
.akma-ttd-insp .ti-seg button + button { border-left:1px solid var(--akma-border); }
.akma-ttd-insp .ti-seg button.on { background:var(--akma-primary); color:#fff; }
.akma-ttd-insp .ti-checks { flex-direction:row; gap:10px; flex-wrap:wrap; }
.akma-ttd-insp .ti-checks label { display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:12px; }
.akma-ttd-insp .ti-2col { flex-direction:row; gap:8px; }
.akma-ttd-insp .ti-2col label { flex:1; display:flex; flex-direction:column; gap:4px; }
.akma-ttd-insp .ti-actions { display:flex; gap:8px; margin-top:4px; padding-top:10px; border-top:1px dashed var(--akma-border); }
.akma-ttd-insp .ti-hint { margin:8px 0 0; font-size:10.5px; color:var(--akma-text-3); font-weight:400; }

/* ═══ GRID TTD v2 — 1 kartu = 1 baris surat; sel = miniatur blok TTD berdampingan ═══ */
.tg-connector { text-align:center; font-size:11px; font-weight:700; color:var(--akma-primary);
  margin:2px 0 8px; letter-spacing:.02em; }
.akma-ttd-row.tg-row { background:var(--akma-surface); border:1.5px solid var(--akma-border-h);
  border-radius:12px; padding:12px 14px; margin-bottom:6px; }
.tg-row-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.tg-row-num { width:24px; height:24px; border-radius:50%; background:var(--akma-primary); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.tg-row-title { font-size:13px; font-weight:800; color:var(--akma-text); }
.tg-row-title small { font-weight:600; color:var(--akma-text-3); }
.tg-row-head .akma-row-ord { margin-left:auto; display:flex; gap:2px; }
.tg-row-head .akma-row-ord button { border:1px solid var(--akma-border-h); background:var(--akma-surface-2);
  border-radius:6px; width:24px; height:22px; cursor:pointer; font-size:10px; color:var(--akma-text-2); }
.tg-row-del { border:none; background:none; color:var(--akma-error); font-size:11.5px; font-weight:700; cursor:pointer; }
.tg-row-prefix { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.tg-row-prefix label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--akma-text-3); white-space:nowrap; }
.tg-row-prefix input { flex:1; font-size:12px; padding:5px 9px; border:1px solid var(--akma-border-h); border-radius:7px; }
/* Sel berdampingan — flex row TANPA wrap = selalu terlihat "satu baris" */
.tg-cells { display:flex; gap:8px; align-items:stretch; overflow-x:auto; padding-bottom:2px; }
.tg-cell { flex:1 1 0; min-width:132px; max-width:220px; background:#fff; border:1px solid var(--akma-border-h);
  border-radius:8px; padding:8px 8px 6px; box-shadow:0 1px 3px rgba(15,23,42,.07);
  display:flex; flex-direction:column; gap:3px; position:relative; }
.tg-cell input.tg-pfx { border:none; border-bottom:1px dashed var(--akma-border); border-radius:0;
  font-size:11px; font-style:italic; padding:2px 2px; text-align:inherit; background:transparent; }
.tg-cell input.tg-jab { border:none; border-bottom:1px dashed var(--akma-border); border-radius:0;
  font-size:12px; font-weight:700; padding:2px 2px; text-align:inherit; background:transparent; }
.tg-cell input:focus { outline:none; border-bottom-color:var(--akma-primary); background:var(--akma-primary-bg); }
.tg-qr { width:30px; height:30px; border:1px dashed #bbb; color:#bbb; font-size:8px; display:flex;
  align-items:center; justify-content:center; margin:5px auto 4px;
  margin-left:inherit; }
.tg-cell[style*="text-align:left"] .tg-qr { margin-left:0; }
.tg-cell[style*="text-align:right"] .tg-qr { margin-left:auto; margin-right:0; }
.tg-nama { font-size:11px; color:var(--akma-text); line-height:1.25; }
.tg-nip { font-size:10px; color:var(--akma-text-3); }
.tg-cell-foot { margin-top:auto; padding-top:6px; border-top:1px solid var(--akma-border);
  display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.tg-cell-foot select { font-size:10.5px; padding:3px 4px; border:1px solid var(--akma-border); border-radius:5px; max-width:100%; }
.tg-cell-foot .tg-src { flex:1 1 100%; }
.tg-cell-move { margin-left:auto; display:inline-flex; gap:2px; }
.tg-cell-move button { border:1px solid var(--akma-border); background:var(--akma-surface-2); border-radius:5px;
  width:20px; height:19px; font-size:9px; cursor:pointer; color:var(--akma-text-2); padding:0; }
.tg-cell-move .tg-cell-del { color:var(--akma-error); font-weight:800; }
.tg-cell-blank { justify-content:center; align-items:center; text-align:center; font-size:11px; color:var(--akma-text-3);
  background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f5f9 6px,#f1f5f9 12px); border-style:dashed; }
.tg-cell-addwrap { flex:0 0 auto; min-width:96px; max-width:110px; border-style:dashed; background:var(--akma-surface-2);
  justify-content:center; gap:6px; box-shadow:none; }
.tg-cell-addwrap button { border:none; background:none; color:var(--akma-primary); font-size:11.5px; font-weight:800;
  cursor:pointer; line-height:1.25; }
.tg-cell-addwrap button small { font-weight:600; color:var(--akma-text-3); }
.tg-cell-addwrap .tg-add-blank { font-size:10px; font-weight:600; color:var(--akma-text-3); }
.tg-cell-addwrap .tg-add-blank:hover, .tg-cell-addwrap button:hover { color:var(--akma-primary-h); }

/* ── Grid TTD: drag & drop ── */
.tg-grip { cursor:grab; color:var(--akma-text-3); font-size:15px; letter-spacing:-1px; padding:0 3px;
  user-select:none; border-radius:5px; }
.tg-grip:hover { background:var(--akma-primary-bg); color:var(--akma-primary); }
.tg-grip:active { cursor:grabbing; }
.tg-cell[draggable="true"] { cursor:grab; }
.tg-cell[draggable="true"]:active { cursor:grabbing; }
.tg-dragging { opacity:.35; }
/* Indikator posisi jatuh — garis biru tebal di sisi tujuan */
.tg-cell.tg-drop-before { box-shadow:-4px 0 0 0 var(--akma-primary), 0 1px 3px rgba(15,23,42,.07); }
.tg-cell.tg-drop-after  { box-shadow:4px 0 0 0 var(--akma-primary), 0 1px 3px rgba(15,23,42,.07); }
.tg-row.tg-drop-top     { box-shadow:0 -4px 0 0 var(--akma-primary); }
.tg-row.tg-drop-bottom  { box-shadow:0 4px 0 0 var(--akma-primary); }

/* Grid TTD: select perataan judul & posisi baris di kepala kartu */
.tg-row-prefix select { font-size:10.5px; padding:4px 5px; border:1px solid var(--akma-border-h);
  border-radius:6px; color:var(--akma-text-2); background:var(--akma-surface); max-width:130px; }

/* ── Pita TTD di kanvas: CERMINAN terkunci susunan tanda tangan (pasangan pita KOP).
     Surat utuh = KOP (pita atas) + isi (kanvas, editable) + TTD (pita bawah, klik → panel). ── */
.akma-ttd-band { position:relative; width:215.9mm; max-width:100%; margin:-4px auto 8px; background:#fff;
  border-radius:0 0 10px 10px; box-shadow:0 2px 14px rgba(0,0,0,.35); cursor:pointer; box-sizing:border-box;
  border-top:2px dashed #cbd5e1; }
.akma-ttd-band:hover { outline:2px solid rgba(var(--akma-primary-rgb),.5); }
.akma-ttd-band:hover .akma-kop-band-tag { opacity:1; }
.akma-ttd-band-inner { pointer-events:none; font-family:'Times New Roman', Times, serif; font-size:11pt; color:#111; }
.akma-ttd-band-note { display:block; padding:6px 0 2px; font-size:10.5px; color:#94a3b8; text-align:center; }
/* Badge urutan TTD pada dok yang baris cetaknya ≠ urutan persetujuan.
   Inline (bukan absolute top negatif) — dulu keluar dari tepi atas kartu & terpotong
   container, kini mengalir sbg baris pertama isi kartu sehingga selalu terlihat utuh. */
.tg-tier { display:inline-block; background:#1d4ed8; color:#fff;
  font-size:9px; font-weight:800; letter-spacing:.02em; border-radius:999px; padding:1px 7px;
  margin:0 0 3px; box-shadow:0 1px 3px rgba(15,23,42,.25); white-space:nowrap; }
/* Pihak PROSES SAJA (noprint): tetap langkah persetujuan, TTD tak dicetak di surat */
.tg-tier-np { background:#64748b; }
.tg-cell.tg-noprint { border-style:dashed; background:repeating-linear-gradient(135deg,#fff,#fff 8px,#f8fafc 8px,#f8fafc 16px); }
.tg-cell.tg-noprint .tg-qr, .tg-cell.tg-noprint .tg-nama, .tg-cell.tg-noprint .tg-nip,
.tg-cell.tg-noprint .tg-pfx, .tg-cell.tg-noprint .tg-jab { opacity:.45; }
.tg-np-toggle { display:inline-flex; align-items:center; gap:3px; font-size:10px; color:var(--akma-text-2);
  white-space:nowrap; cursor:pointer; }
.tg-np-toggle input { margin:0; }

/* ── Tinjau & TTD v2: PDF-gabungan-first ─────────────────────────────────────
   Alur baca reviewer: (1) HERO baca berkas gabungan → (2) dua tombol keputusan →
   (3) rincian per-surat dilipat (baris ramping, tautan teks — tanpa hutan tombol). */
.akma-bhero { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--akma-primary-bg, #eff6ff), #fff);
  border:1.5px solid rgba(var(--akma-primary-rgb),.35); border-radius:12px;
  padding:12px 14px; margin:2px 0 10px; }
.akma-bhero-btn { display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--akma-primary); color:#fff; border:none; border-radius:10px;
  padding:12px 18px; cursor:pointer; box-shadow:0 2px 8px rgba(var(--akma-primary-rgb),.35);
  transition:transform .08s, box-shadow .12s; }
.akma-bhero-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(var(--akma-primary-rgb),.45); }
.akma-bhero-ic { font-size:26px; line-height:1; }
.akma-bhero-txt { display:flex; flex-direction:column; gap:2px; }
.akma-bhero-txt strong { font-size:15px; letter-spacing:.01em; }
.akma-bhero-txt small { font-size:11.5px; opacity:.85; font-weight:400; }
.akma-bhero-meta { flex:1 1 220px; font-size:12px; color:var(--akma-text-2); line-height:1.6; }
.akma-bdecide { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 12px; }
.akma-bdecide-ok { font-size:14px; padding:10px 18px; }
/* Rincian per surat — dilipat */
.akma-bdetails { border:1px solid var(--akma-border); border-radius:10px; margin-top:6px;
  background:var(--akma-surface-2, #fafbfc); }
.akma-bdetails > summary { cursor:pointer; padding:9px 14px; font-size:12.5px; font-weight:700;
  color:var(--akma-text-2); user-select:none; list-style:none; }
.akma-bdetails > summary::before { content:'▸ '; }
.akma-bdetails[open] > summary::before { content:'▾ '; }
.akma-bdetails > summary::-webkit-details-marker { display:none; }
.akma-brows { padding:2px 10px 8px; }
.akma-brow { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px;
  font-size:13px; border-bottom:1px dashed var(--akma-border); }
.akma-brow:last-of-type { border-bottom:none; }
.akma-brow-ic { width:20px; text-align:center; flex:0 0 20px; }
.akma-brow-ok  .akma-brow-ic { color:var(--akma-success, #16a34a); }
.akma-brow-act { background:#fffbeb; }
.akma-brow-act .akma-brow-ic { color:#d97706; }
.akma-brow-no  .akma-brow-ic { color:var(--akma-error, #dc2626); }
.akma-brow-rev .akma-brow-ic { color:#d97706; }
.akma-brow-name { flex:1 1 auto; min-width:0; }
.akma-brow-tag { display:inline-block; font-style:normal; font-size:10.5px; font-weight:800;
  color:#92400e; background:#fef3c7; border-radius:999px; padding:1px 8px; margin-left:6px; }
.akma-brow-tag-mute { color:var(--akma-text-3); background:var(--akma-bg); font-weight:600; }
.akma-brow-links { display:inline-flex; gap:12px; flex:0 0 auto; align-items:center; flex-wrap:wrap; }
.akma-brow-links a { font-size:12px; font-weight:700; color:var(--akma-primary); text-decoration:none;
  border-bottom:1px dotted rgba(var(--akma-primary-rgb),.5); }
.akma-brow-links a:hover { border-bottom-style:solid; }
.akma-brow-data { margin:0 8px 8px 37px; }
.akma-bfoot { padding:4px 12px 10px; text-align:right; }

/* ── Kunci "Ubah Susunan" TTD: read-only sampai admin sengaja mengedit ───────── */
.akma-ttd-lockbar, .akma-ttd-editbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; border-radius:9px; font-size:12.5px; line-height:1.45; margin:4px 0 12px; }
.akma-ttd-lockbar { background:var(--akma-bg); border:1px solid var(--akma-border); color:var(--akma-text-2); }
.akma-ttd-editbar { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; }
.akma-ttd-lockbar > span, .akma-ttd-editbar > span { flex:1 1 220px; }
/* Zona edit terkunci: tak bisa diklik, diredupkan supaya jelas "sedang terkunci" */
.akma-ttd-locked { position:relative; opacity:.55; filter:grayscale(.4);
  pointer-events:none; user-select:none; }
.akma-ttd-locked::after { content:""; position:absolute; inset:0; z-index:2;
  background:repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(148,163,184,.06) 10px, rgba(148,163,184,.06) 20px); }