:root {
  --gelarku-navy: #0f3b82;
  --gelarku-navy-dark: #0b2f69;
  --gelarku-blue: #4a7ddb;
  --gelarku-blue-hover: #3b6fc9;
  --gelarku-gold: #f59e0b;
  --gelarku-bg: #eaf3fb;
  --gelarku-bg-strong: #dcecf9;
  --gelarku-text: #1f2937;
  --gelarku-muted: #64748b;
  --gelarku-border: #d6e2ee;
  --gelarku-white: #ffffff;
  --gelarku-shadow: 0 18px 45px rgba(15, 59, 130, 0.10);
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-editorial: "Manrope", var(--font-ui);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--gelarku-text);
  background: var(--gelarku-bg);
}

button,
a,
input {
  font: inherit;
}

.app-shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 82% 42%, rgba(74, 125, 219, 0.10), transparent 31%),
    linear-gradient(180deg, var(--gelarku-bg) 0%, #f3f8fc 100%);
}

.site-header {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--gelarku-navy) 0%, var(--gelarku-navy-dark) 100%);
  color: var(--gelarku-white);
  box-shadow: 0 6px 18px rgba(15, 59, 130, 0.10);
}

.header-inner {
  min-height: 70px;
  padding: 9px clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.gold-line {
  height: 4px;
  background: linear-gradient(90deg, var(--gelarku-gold), #f7bf4d 60%, var(--gelarku-gold));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
}

.brand-logo {
  width: 47px;
  height: 47px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}

.brand-title {
  font-weight: 800;
  font-size: 1.31rem;
  letter-spacing: 0.11em;
}

.brand-subtitle {
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}

.cover-header-actions {
  display:flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
  white-space:nowrap;
}

.cover-utility-link {
  appearance:none;
  border:0;
  padding:4px 1px;
  background:transparent;
  color:rgba(255,255,255,.84);
  font:inherit;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.2;
  cursor:pointer;
  transition:color .16s ease, text-decoration-color .16s ease;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:4px;
}

.cover-utility-link:hover,
.cover-utility-link:focus-visible {
  color:#f9c44f;
  text-decoration-color:rgba(249,196,79,.72);
  outline:none;
}

.cover-utility-separator {
  color:rgba(255,255,255,.34);
  font-size:.78rem;
  font-weight:400;
  user-select:none;
}

.template-modal-dialog { max-width: 620px; }
.template-modal-content { overflow: hidden; }
.template-info-card {
  display:flex; gap:14px; align-items:flex-start; padding:16px 17px;
  border:1px solid #dce7f1; border-radius:16px; background:#f8fbfe;
}
.template-info-icon {
  width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center;
  border-radius:13px; color:var(--gelarku-navy); background:#e8f1fb;
  font-size:1.05rem;
}
.template-info-card strong { color:var(--gelarku-navy); font-size:.9rem; }
.template-info-card p { margin:5px 0 0; color:#607a92; font-size:.82rem; line-height:1.55; }
.template-note {
  display:flex; gap:10px; align-items:flex-start; margin-top:13px; padding:12px 14px;
  border-radius:13px; color:#667f95; background:#fff9ed; border:1px solid #fde4ad;
  font-size:.76rem; line-height:1.5;
}
.template-note i { color:var(--gelarku-gold); margin-top:2px; }
.template-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.template-open-btn { min-width:190px; }

.hero-section {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.hero-container {
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 0;
}

.hero-row {
  flex: 1;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(28px, 4.3vh, 58px) clamp(24px, 7vw, 110px);
}

.hero-copy-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.hero-copy {
  max-width: 720px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  margin-bottom: clamp(12px, 2vh, 17px);
  border-radius: 999px;
  background: rgba(15, 59, 130, 0.08);
  color: var(--gelarku-navy);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.hero-copy h1 {
  margin: 0 0 clamp(13px, 2vh, 18px);
  color: var(--gelarku-navy);
  font-size: clamp(3.35rem, 6.8vw, 6.25rem);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.hero-description {
  max-width: 760px;
  margin: 0;
  color: #2b4763;
  font-family: var(--font-editorial);
  font-size: clamp(1.02rem, 1.42vw, 1.30rem);
  font-weight: 500;
  line-height: 1.68;
  letter-spacing: -0.012em;
}

.hero-description strong {
  color: var(--gelarku-navy);
  font-weight: 700;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: clamp(22px, 3.5vh, 30px);
}

.btn-primary-app {
  min-height: 45px;
  padding: 10px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gelarku-blue), #3f70c8);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(74, 125, 219, 0.23);
  transition: .2s ease;
}

.btn-primary-app:hover,
.btn-primary-app:focus {
  color: #fff;
  background: linear-gradient(135deg, var(--gelarku-blue-hover), #3463b4);
  transform: translateY(-1px);
  box-shadow: 0 15px 34px rgba(74, 125, 219, 0.28);
}

.register-link {
  padding: 6px 0;
  color: #52677b;
  text-decoration: none;
  font-weight: 500;
}

.register-link span {
  color: var(--gelarku-navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.register-link:hover {
  color: var(--gelarku-navy);
}

/* Hero visual: oversized cap intentionally clipped by the right edge. */
.hero-visual-col {
  position: relative;
  min-height: 100%;
}

.hero-visual-glow {
  position: absolute;
  width: min(37vw, 540px);
  aspect-ratio: 1;
  right: -5vw;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 125, 219, .14) 0%, rgba(74, 125, 219, .055) 42%, transparent 70%);
  filter: blur(2px);
}

.hero-illustration {
  position: absolute;
  right: clamp(-12rem, -8vw, -5rem);
  top: 50%;
  transform: translateY(-49%);
  color: var(--gelarku-navy);
  opacity: .115;
  pointer-events: none;
  user-select: none;
}

.hero-illustration > i {
  display: block;
  font-size: clamp(22rem, 38vw, 35rem);
  transform: rotate(-8deg);
  filter: drop-shadow(0 26px 50px rgba(15, 59, 130, .18));
}

.site-footer {
  min-height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(15, 59, 130, 0.08);
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(8px);
}

.footer-inner {
  padding: 10px clamp(20px, 4vw, 64px);
  text-align: center;
  color: var(--gelarku-muted);
  font-size: .80rem;
}

.app-modal {
  border: 0;
  border-radius: 20px;
  box-shadow: var(--gelarku-shadow);
  overflow: hidden;
}

.app-modal .modal-header,
.app-modal .modal-body {
  padding-left: 28px;
  padding-right: 28px;
}

.app-modal .modal-header {
  padding-top: 28px;
}

.app-modal .modal-body {
  padding-bottom: 30px;
}

.modal-kicker {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--gelarku-gold);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.app-modal .modal-title {
  color: var(--gelarku-navy);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .015em;
}

.modal-description,
.form-note {
  color: var(--gelarku-muted);
  font-size: .9rem;
}

.form-label {
  color: #334155;
  font-size: .9rem;
  font-weight: 700;
}

.app-control {
  min-height: 46px;
  border: 1px solid var(--gelarku-border);
  border-radius: 11px;
  padding: 10px 13px;
  box-shadow: none !important;
}

.app-control:focus {
  border-color: var(--gelarku-blue);
}

.login-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: #edf4fb;
}

.login-tab {
  border: 0;
  border-radius: 9px;
  padding: 10px 12px;
  background: transparent;
  color: var(--gelarku-muted);
  font-weight: 700;
  transition: .2s ease;
}

.login-tab.active {
  background: #fff;
  color: var(--gelarku-navy);
  box-shadow: 0 5px 15px rgba(15, 59, 130, .09);
}

.login-panel {
  display: none;
}

.login-panel.active {
  display: block;
}

/* Desktop/laptop: keep the cover inside one viewport. */
@media (min-width: 992px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }
}

/* Short laptop screens (e.g. 1366×768): compress vertical rhythm, not content. */
@media (min-width: 992px) and (max-height: 800px) {
  .header-inner {
    min-height: 64px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .brand-logo {
    width: 43px;
    height: 43px;
  }

  .brand-title {
    font-size: 1.20rem;
  }

  .brand-subtitle {
    font-size: .71rem;
  }

  .hero-row {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .eyebrow {
    margin-bottom: 11px;
  }

  .hero-copy h1 {
    font-size: clamp(3.25rem, 6.2vw, 5.35rem);
    margin-bottom: 13px;
  }

  .hero-description {
    font-size: clamp(.98rem, 1.30vw, 1.16rem);
    line-height: 1.60;
  }

  .hero-actions {
    margin-top: 21px;
  }

  .site-footer {
    min-height: 40px;
  }

  .footer-inner {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .hero-illustration > i {
    font-size: clamp(20rem, 35vw, 31rem);
  }
}


@media (max-width: 575.98px) {
  .header-inner { gap: 12px; }
  .cover-header-actions { gap: 7px; }
  .cover-utility-link { font-size:.76rem; padding:4px 0; }
  .cover-utility-separator { font-size:.72rem; }
  .template-modal-actions { flex-direction:column-reverse; }
  .template-modal-actions .btn { width:100%; }
}

@media (max-width: 991.98px) {
  .hero-section {
    overflow: visible;
  }

  .hero-row {
    min-height: auto;
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .hero-copy {
    max-width: 760px;
  }
}

@media (max-width: 575.98px) {
  .header-inner {
    min-height: 66px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .brand {
    gap: 10px;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
  }

  .brand-title {
    font-size: 1.06rem;
    letter-spacing: .095em;
  }

  .brand-subtitle {
    display: none;
  }

  .cover-utility-link { font-size:.75rem; }

  .hero-row {
    padding: 46px 20px 50px;
  }

  .eyebrow {
    font-size: .72rem;
    margin-bottom: 14px;
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 18vw, 4.45rem);
    letter-spacing: .055em;
  }

  .hero-description {
    font-size: 1rem;
    line-height: 1.64;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  .btn-primary-app {
    width: 100%;
  }

  .register-link {
    width: 100%;
    text-align: center;
  }

  .app-modal .modal-header,
  .app-modal .modal-body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =========================
   TAHAP 2A — PANEL PETUGAS
   ========================= */
.app-alert {
  margin-bottom: 16px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: .86rem;
  font-weight: 600;
}

.app-alert-danger {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.app-alert-warning {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.internal-app {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: #f4f8fc;
}

.internal-header {
  position: relative;
  z-index: 50;
  min-height: 74px;
  padding: 9px clamp(18px, 3vw, 42px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--gelarku-navy) 0%, var(--gelarku-navy-dark) 100%);
  box-shadow: 0 6px 18px rgba(15, 59, 130, .10);
}

.internal-gold-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
}

.internal-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.internal-brand-logo {
  width: 45px;
  height: 45px;
}

.sidebar-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 11px;
  color: #fff;
  background: rgba(255,255,255,.08);
}

.staff-profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  color: #fff;
  background: transparent;
  text-align: left;
}

.staff-profile-btn::after {
  margin-left: 6px;
}

.staff-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.23);
}

.staff-profile-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.staff-profile-copy strong {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .88rem;
}

.staff-profile-copy small {
  max-width: 300px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.72);
  font-size: .68rem;
}

.staff-dropdown {
  min-width: 230px;
  border: 0;
  border-radius: 13px;
  box-shadow: 0 14px 35px rgba(15, 59, 130, .18);
}

.internal-body {
  height: calc(100dvh - 78px);
  display: flex;
  overflow: hidden;
}

.staff-sidebar {
  width: 235px;
  flex: 0 0 235px;
  display: flex;
  flex-direction: column;
  padding: 24px 15px 16px;
  background: #fff;
  border-right: 1px solid #e2ebf3;
  box-shadow: 8px 0 25px rgba(15,59,130,.025);
  overflow: hidden;
  transition: width .24s ease, flex-basis .24s ease, padding .24s ease, opacity .18s ease, border-color .18s ease;
}

.staff-menu {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.staff-menu-item {
  width: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border: 0;
  border-radius: 11px;
  color: #52677b;
  background: transparent;
  font-size: .87rem;
  font-weight: 650;
  text-align: left;
  transition: .18s ease;
}

.staff-menu-item i {
  width: 20px;
  color: #7b91a7;
  text-align: center;
}

.staff-menu-item:hover {
  color: var(--gelarku-navy);
  background: #f1f6fb;
}

.staff-menu-item.active {
  color: var(--gelarku-navy);
  background: #eaf2fb;
  box-shadow: inset 3px 0 0 var(--gelarku-gold);
}

.staff-menu-item.active i {
  color: var(--gelarku-navy);
}

.sidebar-footnote {
  margin-top: auto;
  padding: 14px 8px 0;
  border-top: 1px solid #eef3f7;
  color: #9aa9b7;
  font-size: .69rem;
  text-align: center;
}

.staff-main {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: clamp(26px, 4vw, 48px);
  background:
    radial-gradient(circle at 88% 10%, rgba(74,125,219,.08), transparent 26%),
    #f4f8fc;
}

.staff-page-head {
  max-width: 1150px;
  margin: 0 auto 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.staff-eyebrow {
  margin-bottom: 10px;
}

.staff-page-head h1 {
  margin: 0;
  color: var(--gelarku-navy);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 800;
  letter-spacing: -.025em;
}

.staff-page-head p {
  margin: 7px 0 0;
  color: var(--gelarku-muted);
  font-family: var(--font-editorial);
  font-size: .96rem;
}

.role-badge {
  flex-shrink: 0;
  margin-top: 7px;
  padding: 8px 12px;
  border: 1px solid #d9e6f2;
  border-radius: 999px;
  color: var(--gelarku-navy);
  background: #fff;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .025em;
}

.welcome-panel,
.stage-card {
  max-width: 1150px;
  margin: 0 auto;
  border: 1px solid #e0eaf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 13px 32px rgba(15,59,130,.055);
}

.welcome-panel {
  position: relative;
  min-height: 190px;
  padding: clamp(27px, 4vw, 42px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.welcome-panel h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: var(--gelarku-navy);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 800;
}

.welcome-panel p {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0;
  color: var(--gelarku-muted);
  line-height: 1.7;
}

.welcome-icon {
  position: absolute;
  right: -42px;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  color: var(--gelarku-navy);
  opacity: .055;
  font-size: 13rem;
}

.stage-card {
  margin-top: 20px;
  padding: 23px 26px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.stage-card-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--gelarku-navy);
  background: #eaf2fb;
}

.stage-label {
  color: var(--gelarku-gold);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.stage-card h3 {
  margin: 3px 0 7px;
  color: #263b50;
  font-size: 1rem;
  font-weight: 800;
}

.stage-card p {
  margin: 0;
  color: var(--gelarku-muted);
  font-size: .88rem;
}

/* Sidebar petugas desktop dapat disembunyikan untuk memperluas area kerja.
   Berlaku untuk Admin Unor, Verifikator, dan Super Admin. */
.desktop-sidebar-control {
  display: none;
  max-width: 1280px;
  margin: 0 auto 12px;
}

.content-sidebar-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #d8e5f0;
  border-radius: 11px;
  color: var(--gelarku-navy);
  background: #fff;
  box-shadow: 0 7px 18px rgba(15,59,130,.065);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.content-sidebar-toggle:hover {
  transform: translateY(-1px);
  border-color: #bfd3e5;
  background: #f6faff;
  box-shadow: 0 10px 22px rgba(15,59,130,.09);
}

.content-sidebar-toggle:focus-visible {
  outline: 3px solid rgba(37,99,235,.16);
  outline-offset: 2px;
}

@media (min-width: 992px) {
  .internal-app.sidebar-collapsible .desktop-sidebar-control {
    display: block !important;
  }

  .internal-app.sidebar-collapsed .staff-sidebar {
    width: 0;
    flex-basis: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    border-right-color: transparent;
    box-shadow: none;
    pointer-events: none;
  }
}

.sidebar-backdrop {
  display: none;
}

body.internal-mode {
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .internal-header {
    min-height: 70px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .sidebar-toggle {
    display: grid;
    place-items: center;
  }

  .internal-brand .brand-subtitle {
    display: none;
  }

  .staff-profile-copy {
    display: none;
  }

  .internal-body {
    height: calc(100dvh - 74px);
  }

  .staff-sidebar {
    position: fixed;
    z-index: 45;
    left: 0;
    top: 74px;
    bottom: 0;
    transform: translateX(-102%);
    transition: transform .22s ease;
  }

  .staff-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    z-index: 40;
    inset: 74px 0 0;
    background: rgba(15, 33, 55, .30);
  }

  .sidebar-backdrop.show {
    display: block;
  }

  .staff-main {
    width: 100%;
    padding: 28px 20px 40px;
  }
}

@media (max-width: 575.98px) {
  .internal-brand-logo {
    width: 38px;
    height: 38px;
  }

  .internal-brand .brand-title {
    font-size: 1rem;
  }

  .staff-page-head {
    flex-direction: column;
    gap: 10px;
  }

  .role-badge {
    margin-top: 0;
  }

  .welcome-panel {
    min-height: 170px;
    padding: 25px 22px;
  }

  .welcome-icon {
    right: -58px;
    font-size: 10rem;
  }

  .stage-card {
    padding: 20px;
  }
}

/* =========================
   TAHAP 2B — FINAL INTERNAL SHELL + SETTINGS
   ========================= */
.brand-button { border: 0; padding: 0; background: transparent; color: inherit; text-align: left; }
.internal-header-actions { display: flex; align-items: center; gap: 8px; }
.header-icon-btn { width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.23); border-radius: 11px; color: #fff; background: rgba(255,255,255,.07); transition: .18s ease; }
.header-icon-btn:hover { background: rgba(255,255,255,.14); }
.dropdown-profile-name { color: #25384b; font-size: .86rem; font-weight: 800; }
.dropdown-profile-email { margin-top: 2px; color: #7b8da0; font-size: .72rem; word-break: break-all; }
.sidebar-role-card { margin: 0 2px 19px; padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #e4edf5; border-radius: 13px; background: linear-gradient(145deg,#f8fbfe,#eef5fb); }
.sidebar-role-icon { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border-radius: 10px; color: var(--gelarku-navy); background: #fff; box-shadow: 0 5px 15px rgba(15,59,130,.07); }
.sidebar-role-card small { display: block; color: #91a0af; font-size: .63rem; }
.sidebar-role-card strong { display: block; margin-top: 2px; color: #31485e; font-size: .76rem; }
.staff-menu-section { margin: 18px 12px 3px; color: #9aa9b7; font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.staff-content-wrap { max-width: 1280px; margin: 0 auto; }
.staff-page-head { max-width: none; }
.staff-page-content { min-height: 300px; }
.staff-breadcrumb { margin-bottom: 9px; color: #91a1b1; font-size: .72rem; font-weight: 650; }
.final-welcome-panel { max-width: none; }
.welcome-kicker { display: block; margin-bottom: 7px; color: var(--gelarku-gold); font-size: .69rem; font-weight: 800; letter-spacing: .08em; }
.dashboard-placeholder-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.mini-dashboard-card { min-height: 105px; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #e0eaf3; border-radius: 16px; background: #fff; box-shadow: 0 10px 25px rgba(15,59,130,.045); }
.mini-card-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 13px; color: var(--gelarku-navy); background: #edf4fb; }
.mini-dashboard-card small { display: block; color: #708399; font-size: .75rem; font-weight: 650; }
.mini-dashboard-card strong { display: block; margin-top: 5px; color: var(--gelarku-navy); font-size: 1.45rem; }
.content-card { padding: 24px; border: 1px solid #e0eaf3; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(15,59,130,.05); }
.content-card p { color: #697d91; line-height: 1.7; font-size: .88rem; }
.content-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.content-card-head h3 { margin: 3px 0 0; color: #273c51; font-size: 1.08rem; font-weight: 800; }
.content-card-head p { margin: 6px 0 0; }
.content-kicker { color: var(--gelarku-gold); font-size: .67rem; font-weight: 800; letter-spacing: .08em; }
.soft-badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; color: var(--gelarku-navy); background: #edf4fb; font-size: .68rem; font-weight: 800; }
.empty-state-card { min-height: 370px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 35px; border: 1px dashed #cdddea; border-radius: 18px; background: rgba(255,255,255,.72); text-align: center; }
.empty-state-icon { width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 20px; color: var(--gelarku-navy); background: #eaf2fb; font-size: 1.45rem; }
.empty-state-icon.compact { width: 52px; height: 52px; margin-bottom: 13px; border-radius: 15px; font-size: 1.05rem; }
.empty-state-card h2,.settings-placeholder h3 { color: #293f54; font-weight: 800; }
.empty-state-card h2 { font-size: 1.25rem; }
.empty-state-card p,.settings-placeholder p { max-width: 600px; color: #728498; line-height: 1.7; font-size: .88rem; }
.settings-layout { display: grid; grid-template-columns: 235px minmax(0,1fr); gap: 20px; align-items: start; }
.settings-nav-card { position: sticky; top: 0; padding: 14px; border: 1px solid #e0eaf3; border-radius: 17px; background: #fff; box-shadow: 0 10px 26px rgba(15,59,130,.045); }
.settings-nav-title { display: block; padding: 8px 10px 12px; color: #8ca0b4; font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.settings-nav-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 10px; border: 0; border-radius: 10px; color: #60758a; background: transparent; text-align: left; font-size: .8rem; font-weight: 700; }
.settings-nav-item i { width: 18px; color: #8ca0b4; text-align: center; }
.settings-nav-item:hover { color: var(--gelarku-navy); background: #f4f8fc; }
.settings-nav-item.active { color: var(--gelarku-navy); background: #eaf2fb; }
.settings-nav-item.active i { color: var(--gelarku-navy); }
.settings-content { min-width: 0; }
.admin-management-card { padding: 0; overflow: hidden; }
.admin-management-card > .content-card-head { margin: 0; padding: 23px 24px 18px; border-bottom: 1px solid #edf2f7; }
.admin-head-stack p { margin-bottom: 0; }
.btn-sm-app { min-height: 40px; padding: 8px 15px; font-size: .78rem; }
.admin-toolbar { padding: 16px 24px; display: grid; grid-template-columns: minmax(240px,1fr) 190px 170px; gap: 10px; border-bottom: 1px solid #edf2f7; background: #fbfdff; }
.search-control-wrap { position: relative; }
.search-control-wrap i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #9aabba; font-size: .78rem; }
.search-control-wrap input { width: 100%; height: 40px; padding: 8px 12px 8px 37px; border: 1px solid #dce7f0; border-radius: 10px; outline: none; color: #334a60; background: #fff; font-size: .78rem; }
.search-control-wrap input:focus { border-color: #9cbbe5; box-shadow: 0 0 0 3px rgba(74,125,219,.09); }
.compact-select { height: 40px; min-height: 40px; padding-top: 7px; padding-bottom: 7px; border-color: #dce7f0; border-radius: 10px; color: #546b80; font-size: .76rem; }
.admin-table-wrap { width: 100%; overflow-x: auto; }
.admin-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.admin-table th { padding: 12px 16px; border-bottom: 1px solid #e7eef5; color: #8496a8; background: #f8fbfd; font-size: .67rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.admin-table td { padding: 14px 16px; border-bottom: 1px solid #edf2f6; color: #425a70; font-size: .78rem; vertical-align: middle; }
.admin-table tbody tr:hover { background: #fbfdff; }
.person-cell { display: flex; align-items: center; gap: 11px; min-width: 230px; }
.person-avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 50%; color: var(--gelarku-navy); background: #eaf2fb; font-size: .76rem; font-weight: 800; }
.person-cell strong { display: block; color: #30475d; font-size: .79rem; }
.person-cell small { display: block; margin-top: 3px; color: #8799aa; font-size: .68rem; }
.role-chip,.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.role-admin_unor { color: #1e5f93; background: #e9f4fb; }
.role-verifikator { color: #6d4b9c; background: #f1ebf8; }
.role-super_admin { color: #8a5a00; background: #fff4d6; }
.role-unknown { color: #586879; background: #eef2f5; }
.status-active { color: #18794e; background: #e9f8f1; }
.status-inactive { color: #9a3a3a; background: #fdeeee; }
.unor-cell { color: #526a80; font-weight: 650; }
.table-action-btn { border: 1px solid #d7e4ef; border-radius: 9px; padding: 7px 10px; color: var(--gelarku-navy); background: #fff; font-size: .7rem; font-weight: 750; }
.table-action-btn:hover { background: #edf4fb; }
.admin-table-footer { padding: 12px 24px; color: #8a9bac; background: #fbfdff; font-size: .7rem; }
.loading-state,.table-empty { min-height: 190px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #8295a8; font-size: .8rem; }
.table-empty { flex-direction: column; gap: 6px; }
.table-empty i { margin-bottom: 5px; color: #a8b8c7; font-size: 1.6rem; }
.table-empty strong { color: #526a80; }
.setup-notice { display: flex; gap: 12px; padding: 13px 14px; border: 1px solid #f6d88f; border-radius: 12px; color: #7c5b14; background: #fff9e9; font-size: .78rem; line-height: 1.55; }
.setup-notice i { margin-top: 2px; color: var(--gelarku-gold); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; }
.app-secondary-btn { min-height: 43px; padding: 9px 18px; border: 1px solid #dce6ee; border-radius: 11px; color: #607286; background: #fff; font-weight: 700; }
.profile-summary-card { display: flex; flex-direction: column; align-items: center; padding: 9px 0 22px; text-align: center; }
.profile-big-avatar { width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; color: var(--gelarku-navy); background: #eaf2fb; font-size: 1.35rem; }
.profile-summary-card h3 { margin: 0; color: #2f475d; font-size: 1.08rem; font-weight: 800; }
.profile-summary-card p { margin: 5px 0 10px; color: #8092a5; font-size: .78rem; }
.profile-detail-list { margin: 0; border-top: 1px solid #edf2f6; }
.profile-detail-list > div { padding: 12px 2px; display: grid; grid-template-columns: 110px 1fr; gap: 15px; border-bottom: 1px solid #edf2f6; }
.profile-detail-list dt { color: #8799aa; font-size: .72rem; font-weight: 700; }
.profile-detail-list dd { margin: 0; color: #40586d; font-size: .76rem; font-weight: 650; }
.uid-text { word-break: break-all; }
.settings-placeholder { min-height: 320px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }

@media (max-width: 1100px) {
  .dashboard-placeholder-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-layout { grid-template-columns: 210px minmax(0,1fr); }
  .admin-toolbar { grid-template-columns: 1fr 1fr; }
  .search-control-wrap { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .dashboard-placeholder-grid { grid-template-columns: 1fr 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav-card { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .settings-nav-title { grid-column: 1 / -1; }
  .settings-nav-item { min-height: 43px; }
  .admin-management-card > .content-card-head { flex-direction: column; }
  .admin-toolbar { grid-template-columns: 1fr; }
  .search-control-wrap { grid-column: auto; }
}

@media (max-width: 575.98px) {
  .dashboard-placeholder-grid { grid-template-columns: 1fr; }
  .settings-nav-card { grid-template-columns: 1fr; }
  .settings-nav-title { grid-column: auto; }
  .content-card { padding: 20px; }
  .admin-management-card { padding: 0; }
  .admin-toolbar { padding-left: 16px; padding-right: 16px; }
  .admin-management-card > .content-card-head { padding-left: 16px; padding-right: 16px; }
  .admin-table-footer { padding-left: 16px; padding-right: 16px; }
}

/* TAHAP 2C — backend admin management */
.app-alert-success {
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.admin-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-modal-spacer {
  flex: 1 1 auto;
}

#adminEmailInput[readonly] {
  background: #f8fafc;
  color: #64748b;
}

#adminUnorHelp.text-danger {
  font-weight: 600;
}

/* =========================
   TAHAP 3A — PENGUSUL AUTH
   ========================= */
.role-pengusul { color: #176b55; background: #e8f7f1; }

.registration-person-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dbe7f1;
  border-radius: 15px;
  background: #f8fbfe;
}
.registration-person-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--gelarku-navy);
  background: #eaf2fb;
  font-size: 1.15rem;
}
.registration-person-card small { display: block; color: #8b9bad; font-size: .7rem; font-weight: 700; }
.registration-person-card h3 { margin: 3px 0 4px; color: #2e465d; font-size: 1.02rem; font-weight: 800; }
.registration-person-card p { color: #687e92; font-size: .77rem; }

.token-success-card { text-align: center; }
.token-success-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 18px;
  color: #18794e;
  background: #e9f8f1;
  font-size: 1.35rem;
}
.token-success-card h3 { margin: 5px 0 7px; color: #2c445a; font-size: 1.15rem; font-weight: 800; }
.token-success-card > p { margin: 0 auto 16px; max-width: 410px; color: #718599; font-size: .8rem; line-height: 1.6; }
.token-display-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #cfddea;
  border-radius: 13px;
  background: #f7fafc;
}
.token-display-wrap code {
  flex: 1;
  overflow-wrap: anywhere;
  color: var(--gelarku-navy);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .035em;
}
.token-copy-btn { width: 42px; height: 42px; flex: 0 0 42px; padding: 0; border: 1px solid #d9e5ef; border-radius: 10px; }
.token-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 11px 12px; border-radius: 11px; color: #845f12; background: #fff8e5; font-size: .72rem; line-height: 1.5; text-align: left; }
.token-warning i { margin-top: 2px; color: var(--gelarku-gold); }

.applicant-dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.applicant-profile-card,.applicant-service-card { min-height: 210px; }
.applicant-basic-data { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.applicant-basic-data > div { padding: 12px; border-radius: 12px; background: #f6f9fc; }
.applicant-basic-data small { display: block; color: #8799ab; font-size: .68rem; }
.applicant-basic-data strong { display: block; margin-top: 4px; color: #334c63; font-size: .8rem; }
.service-access-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid #edf2f6; color: #526a80; font-size: .76rem; }
.service-access-row:last-child { border-bottom: 0; }
.service-access-row span { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; }
.service-access-row i { width: 18px; color: var(--gelarku-navy); text-align: center; }
.service-access-row strong { color: #60758a; font-size: .69rem; text-align: right; }
.empty-applicant-state { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.empty-applicant-state h3 { margin: 0 0 4px; color: #334b61; font-size: .98rem; font-weight: 800; }
.empty-applicant-state p { color: #7a8da0; font-size: .76rem; }

/* Penyederhanaan dashboard: role hanya ditonjolkan di header user dan sidebar. */
.staff-page-head { justify-content: flex-start; }

@media (max-width: 767.98px) {
  .applicant-dashboard-grid { grid-template-columns: 1fr; }
  .applicant-basic-data { grid-template-columns: 1fr; }
}

/* =========================
   TAHAP 3B — PROFIL PENGUSUL + TOKEN 8 KARAKTER
   ========================= */
.token-display-short code,
#generatedApplicantToken {
  font-size: 1.08rem;
  letter-spacing: .12em;
}

.profile-complete-badge {
  color: #166534;
  background: #ecfdf3;
  border-color: #bbf7d0;
}

.profile-dashboard-summary {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.profile-dashboard-summary > div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 12px;
  background: #f7fafc;
}
.profile-dashboard-summary i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--gelarku-navy);
  background: #eaf2fb;
  font-size: .78rem;
}
.profile-dashboard-summary small {
  display: block;
  margin-bottom: 2px;
  color: #8a9bad;
  font-size: .66rem;
  font-weight: 700;
}
.profile-dashboard-summary strong {
  display: block;
  color: #3c556c;
  font-size: .76rem;
  line-height: 1.45;
}

.applicant-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.compact-dashboard-card {
  min-height: 120px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.compact-dashboard-card small {
  color: #8798aa;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.compact-dashboard-card h3 {
  margin: 4px 0 7px;
  color: #344e65;
  font-size: .91rem;
  font-weight: 800;
}
.text-action-btn {
  padding: 0;
  border: 0;
  color: var(--gelarku-blue);
  background: transparent;
  font-size: .72rem;
  font-weight: 750;
}
.text-action-btn i { margin-left: 4px; font-size: .62rem; }

.profile-form-card,
.profile-review-card {
  max-width: 1050px;
  margin: 0 auto;
}
.profile-form-head p,
.profile-review-head p {
  max-width: 760px;
  margin: 5px 0 0;
  color: #7b8ea1;
  font-size: .78rem;
  line-height: 1.6;
}
.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.profile-field-wide { grid-column: 1 / -1; }
.profile-field .form-text {
  margin-top: 6px;
  color: #8a9bad;
  font-size: .67rem;
}
.profile-field input[readonly] {
  background: #f6f8fa;
  color: #64778a;
}
.profile-form-actions,
.profile-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #e8eef4;
}

.profile-review-card {
  padding: 26px;
  border: 1px solid #dbe6ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15,59,130,.05);
}
.profile-review-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
.profile-review-head h2 {
  margin: 4px 0 0;
  color: #2f485f;
  font-size: 1.2rem;
  font-weight: 800;
}
.profile-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.profile-review-grid > div {
  padding: 13px 14px;
  border: 1px solid #e6edf3;
  border-radius: 12px;
  background: #f9fbfd;
}
.profile-review-grid small {
  display: block;
  margin-bottom: 4px;
  color: #8a9aac;
  font-size: .66rem;
  font-weight: 700;
}
.profile-review-grid strong {
  display: block;
  color: #3d566d;
  font-size: .78rem;
  line-height: 1.5;
}
.profile-review-wide { grid-column: 1 / -1; }

@media (max-width: 767.98px) {
  .applicant-bottom-grid,
  .profile-form-grid,
  .profile-review-grid {
    grid-template-columns: 1fr;
  }
  .profile-field-wide,
  .profile-review-wide { grid-column: auto; }
  .profile-review-head { flex-direction: column; }
  .profile-form-actions,
  .profile-review-actions { flex-direction: column-reverse; }
  .profile-form-actions .btn,
  .profile-review-actions .btn { width: 100%; }
}


/* ===== TAHAP 4A — USULAN PENGUSUL ===== */
.status-draft { background: #fff7df; color: #9b6a00; border-color: #f3d98c; }
.active-service-icon,
.service-choice-icon {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eaf2ff; color: #285dab; font-size: 1.35rem;
}
.active-usulan-title-row { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.active-usulan-title-row h3 { margin: 5px 0 0; color: #334f68; font-size: .95rem; font-weight: 800; }
.active-usulan-id { margin: 4px 0 4px; color: #8a9bab; font-size: .72rem; font-weight: 700; }
.service-code-chip {
  display: inline-flex; align-items: center; min-height: 23px; padding: 3px 9px;
  border-radius: 999px; background: #edf3fb; color: #476987; font-size: .64rem; font-weight: 800; letter-spacing: .08em;
}
.usulan-intro-card { padding: 26px; }
.service-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.service-choice-card {
  position: relative; padding: 21px; border: 1px solid #dfe8f0; border-radius: 17px; background: #fff;
  box-shadow: 0 8px 25px rgba(15,59,130,.045); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-choice-card:not(.disabled):hover { transform: translateY(-2px); border-color: #bfd2e6; box-shadow: 0 13px 30px rgba(15,59,130,.08); }
.service-choice-card .service-choice-icon { margin-bottom: 15px; }
.service-choice-card h3 { margin: 8px 0 8px; color: #2e4b65; font-size: .94rem; font-weight: 800; }
.service-choice-card p { min-height: 52px; color: #7b8fa2; font-size: .72rem; line-height: 1.6; }
.service-choice-card.disabled { background: #f8fafc; opacity: .72; }
.service-unavailable { color: #8294a5; font-size: .68rem; font-weight: 700; }
.usulan-steps { display: flex; align-items: center; max-width: 690px; margin: 0 auto 16px; }
.usulan-step { display: flex; align-items: center; gap: 10px; color: #91a2b2; min-width: 180px; }
.usulan-step > span { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #d6e0e8; background: #fff; font-size: .72rem; font-weight: 800; }
.usulan-step strong { display: block; color: #8295a6; font-size: .73rem; }
.usulan-step small { display: block; font-size: .61rem; margin-top: 2px; }
.usulan-step.active > span { border-color: #1c65b9; background: #1c65b9; color: #fff; }
.usulan-step.active strong { color: #315675; }
.usulan-step-line { flex: 1; height: 2px; margin: 0 15px; background: #dce5ed; }
.usulan-step-line.active { background: #5b8fd0; }
.usulan-form-card { padding: 26px; }
.usulan-form-head p, .usulan-intro-card .content-card-head p { max-width: 780px; margin: 6px 0 0; color: #7f91a3; font-size: .72rem; line-height: 1.6; }
.required-mark { color: #d95656; }
.form-section-divider { padding: 6px 0 2px; border-bottom: 1px solid #e7edf3; }
.form-section-divider span { display: inline-block; padding-bottom: 8px; color: #607e99; font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
.usulan-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid #e8eef4; }
.usulan-action-spacer { flex: 1; }
.danger-outline-btn { color: #b94b4b; border: 1px solid #efcccc; background: #fff; }
.danger-outline-btn:hover { color: #9f3838; background: #fff5f5; border-color: #e8b6b6; }
.document-stage-card { padding: 28px; }
.document-stage-success { display: flex; gap: 16px; align-items: center; }
.document-stage-success > span { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: #e9f8ef; color: #278653; font-size: 1.35rem; }
.document-stage-success h3 { margin: 4px 0 2px; color: #31506a; font-size: 1.02rem; font-weight: 800; }
.document-stage-success p { margin: 0; color: #8999a9; font-size: .72rem; font-weight: 700; }
.stage-info-box { display: flex; gap: 14px; margin-top: 22px; padding: 17px; border: 1px solid #dce8f3; border-radius: 14px; background: #f5f9fd; color: #54718b; }
.stage-info-box > i { color: #3975bd; font-size: 1.25rem; margin-top: 2px; }
.stage-info-box strong { display: block; margin-bottom: 4px; color: #3d607e; font-size: .78rem; }
.stage-info-box p { color: #7c90a2; font-size: .7rem; line-height: 1.55; }

@media (max-width: 900px) {
  .service-choice-grid { grid-template-columns: 1fr; }
  .service-choice-card p { min-height: auto; }
}
@media (max-width: 767.98px) {
  .usulan-steps { align-items: flex-start; }
  .usulan-step { min-width: 0; flex: 1; align-items: flex-start; }
  .usulan-step small { display: none; }
  .usulan-step-line { margin: 16px 8px 0; }
  .usulan-form-actions { flex-direction: column-reverse; align-items: stretch; }
  .usulan-action-spacer { display: none; }
  .usulan-form-actions .btn { width: 100%; }
  .active-usulan-title-row { flex-direction: column; }
}

/* ===== Tahap 4B: Dokumen Persyaratan / Cloudflare R2 ===== */
.document-slots { display: grid; gap: 14px; margin-top: 22px; }
.document-slot-card { border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px; background: #fff; box-shadow: 0 8px 24px rgba(15, 59, 130, .045); }
.document-slot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.document-slot-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.document-slot-card h4 { margin: 0; color: #263f5a; font-size: .95rem; font-weight: 800; }
.document-slot-card p { margin: 6px 0 0; color: #75879a; font-size: .78rem; line-height: 1.55; }
.doc-requirement { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 9px; border-radius: 999px; font-size: .67rem; font-weight: 800; letter-spacing: .01em; }
.doc-requirement.required { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.doc-requirement.later { background: #fff8e6; color: #a16207; border: 1px solid #fde68a; }
.doc-requirement.optional { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.document-file-list { margin-top: 14px; display: grid; gap: 8px; }
.doc-empty { min-height: 54px; border: 1px dashed #d6deea; border-radius: 12px; display: flex; align-items: center; gap: 10px; padding: 11px 13px; color: #94a3b8; font-size: .78rem; background: #fbfdff; }
.doc-empty i { color: #ef4444; font-size: 1.15rem; }
.document-file-row { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 12px; border: 1px solid #e8edf4; border-radius: 12px; background: #fafdff; }
.pdf-file-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: #fff1f2; color: #dc2626; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.document-file-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.document-file-copy strong { color: #314b65; font-size: .78rem; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-file-copy small { color: #8a9aaa; font-size: .67rem; }
.document-file-actions { display: flex; align-items: center; gap: 5px; }
.icon-action-btn { width: 34px; height: 34px; border: 0; border-radius: 9px; background: #eef4fb; color: #315d92; display: inline-flex; align-items: center; justify-content: center; transition: .18s ease; }
.icon-action-btn:hover { background: #dfeafb; transform: translateY(-1px); }
.icon-action-btn.danger { color: #c2414d; background: #fff1f2; }
.icon-action-btn.danger:hover { background: #ffe4e6; }
.submit-usulan-panel { margin-top: 20px; border-radius: 15px; padding: 17px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.submit-usulan-panel.ready { background: #ecfdf3; border: 1px solid #bbf7d0; }
.submit-usulan-panel.incomplete { background: #fffaf0; border: 1px solid #fde7b0; }
.submit-usulan-panel strong { display: block; color: #30475f; font-size: .84rem; }
.submit-usulan-panel p { margin-top: 4px !important; color: #718096; font-size: .73rem; line-height: 1.5; }

.swal2-popup { font-family: "Plus Jakarta Sans", sans-serif !important; border-radius: 18px !important; }
.swal2-title { color: #244361 !important; font-size: 1.15rem !important; font-weight: 800 !important; }
.swal2-html-container { color: #687b8e !important; font-family: "Manrope", sans-serif !important; font-size: .88rem !important; line-height: 1.6 !important; }
.swal2-confirm, .swal2-cancel { border-radius: 10px !important; font-size: .78rem !important; font-weight: 750 !important; padding: 9px 16px !important; }

@media (max-width: 767.98px) {
  .document-slot-head { flex-direction: column; }
  .document-slot-head .btn { width: 100%; }
  .document-file-row { align-items: flex-start; flex-wrap: wrap; }
  .document-file-actions { width: 100%; justify-content: flex-end; }
  .submit-usulan-panel { flex-direction: column; align-items: stretch; }
  .submit-usulan-panel .btn { width: 100%; }
}
.status-process { background: #eaf2ff; color: #245ea8; border-color: #cfe0fb; }

/* =========================
   TAHAP 5A — DASHBOARD + REKAP ADMIN UNOR
   ========================= */
.admin-unor-welcome { position: relative; overflow: hidden; }
.admin-unor-welcome::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -90px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,125,219,.12), rgba(74,125,219,0) 68%);
  pointer-events: none;
}
.admin-unor-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.admin-unor-stat-card {
  position: relative;
  min-height: 116px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 20px;
  align-items: center;
  gap: 13px;
  padding: 18px;
  border: 1px solid #dfe9f2;
  border-radius: 17px;
  background: #fff;
  text-align: left;
  box-shadow: 0 10px 26px rgba(15,59,130,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.admin-unor-stat-card:hover { transform: translateY(-2px); border-color: #c9d9e8; box-shadow: 0 16px 34px rgba(15,59,130,.08); }
.admin-unor-stat-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--gelarku-navy);
  background: #edf4fb;
}
.admin-unor-stat-card small { display: block; color: #71859a; font-size: .71rem; font-weight: 700; line-height: 1.35; }
.admin-unor-stat-card strong { display: block; margin-top: 6px; color: #203d59; font-size: 1.55rem; font-weight: 800; }
.stat-card-arrow { color: #b0becc; font-size: .72rem; }
.admin-unor-stat-card.stat-warning .admin-unor-stat-icon { color: #9a6700; background: #fff6dc; }
.admin-unor-stat-card.stat-danger .admin-unor-stat-icon { color: #a33c3c; background: #fdeeee; }
.admin-unor-stat-card.stat-success .admin-unor-stat-icon { color: #18794e; background: #eaf8f1; }
.admin-unor-stat-card.stat-info .admin-unor-stat-icon { color: #225e93; background: #eaf4fb; }
.admin-unor-stat-card.stat-message .admin-unor-stat-icon { color: #6b4aa2; background: #f2ecfa; }
.admin-unor-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.admin-unor-service-card {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid #e0eaf3;
  border-radius: 14px;
  color: #354f67;
  background: #f9fbfd;
  text-align: left;
  transition: .18s ease;
}
.admin-unor-service-card:hover { border-color: #c6d9ea; background: #f2f7fc; }
.admin-unor-service-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--gelarku-navy); background: #eaf2fb; }
.admin-unor-service-card strong { display: block; color: var(--gelarku-navy); font-size: .8rem; }
.admin-unor-service-card small { display: block; margin-top: 2px; color: #8295a7; font-size: .66rem; line-height: 1.35; }
.admin-unor-service-card b { color: #2c4964; font-size: 1.25rem; }
.admin-unor-table { min-width: 880px; }

/* Tabel operasional: tidak ada kolom yang dibekukan secara horizontal.
   Header tetap sticky agar judul kolom mudah diikuti saat daftar panjang. */
.operational-table { border-collapse: separate; border-spacing: 0; }
.operational-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fbfd;
}
.operational-action-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}
.admin-unor-table .admin-unor-empty-cell {
  position: static !important;
  min-width: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}
.service-table-cell { min-width: 120px; }
.service-table-cell small, .table-subline { display: block; margin-top: 5px; color: #8ea0b0; font-size: .64rem; }
.table-date-main { color: #51687e; font-weight: 650; white-space: nowrap; }
.status-waiting { color: #175b91; background: #e9f4fb; }
.status-bts { color: #926000; background: #fff5d9; }
.status-tms { color: #a33c3c; background: #fdeeee; }
.status-done { color: #18794e; background: #e9f8f1; }
.status-forwarded { color: #526a80; background: #eef3f7; }
.status-bkn { color: #6542a0; background: #f2ecfa; }
.message-count-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #d9e5ee;
  border-radius: 999px;
  color: #6c7f91;
  background: #fff;
  font-size: .66rem;
  font-weight: 750;
}
.message-count-btn.has-unread { color: #6542a0; border-color: #ddcff0; background: #f7f2fc; }
.message-count-empty { display: inline-flex; align-items: center; gap: 6px; color: #a0afbc; font-size: .7rem; }
.primary-table-action { color: #fff; border-color: var(--gelarku-blue); background: var(--gelarku-blue); }
.primary-table-action:hover { color: #fff; background: var(--gelarku-blue-hover); }
.admin-unor-priority-card, .admin-unor-rekap-card { padding: 0; overflow: hidden; }
.admin-unor-priority-card > .content-card-head, .admin-unor-rekap-card > .content-card-head { margin: 0; padding: 22px 24px 17px; border-bottom: 1px solid #edf2f7; }
.admin-unor-priority-card .admin-table-wrap, .admin-unor-rekap-card .admin-table-wrap { margin: 0; }
.admin-unor-rekap-toolbar {
  display: grid;
  grid-template-columns: minmax(250px,1.45fr) 150px 190px 135px auto;
  gap: 10px;
  padding: 15px 24px;
  border-bottom: 1px solid #edf2f7;
  background: #fbfdff;
}
.filter-reset-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #dce7f0;
  border-radius: 10px;
  color: #60758a;
  background: #fff;
  font-size: .72rem;
  font-weight: 750;
}
.filter-reset-btn:hover { background: #f2f7fb; }
.admin-unor-rekap-footer {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 11px 24px;
  border-top: 1px solid #edf2f7;
  background: #fbfdff;
  color: #788b9e;
  font-size: .7rem;
}
.rekap-page-size { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.rekap-page-size .compact-select { width: 76px; }
.rekap-range { text-align: center; }
.rekap-pagination { display: flex; align-items: center; gap: 8px; }
.rekap-pagination button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #dae6ef;
  border-radius: 9px;
  color: var(--gelarku-navy);
  background: #fff;
  font-size: .68rem;
  font-weight: 700;
}
.rekap-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.rekap-pagination span { padding: 0 4px; color: #5c7287; font-weight: 700; white-space: nowrap; }
.admin-unor-mobile-list { display: none; }
.quick-usulan-view { display: grid; gap: 12px; text-align: left; }
.quick-usulan-view > div { padding: 12px 13px; border-radius: 12px; background: #f7fafc; }
.quick-usulan-view span { display: block; margin-bottom: 3px; color: #8799aa; font-size: .68rem; font-weight: 700; }
.quick-usulan-view strong { color: #334e66; font-size: .86rem; }
.quick-usulan-view small { display: block; margin-top: 3px; color: #8092a4; }
.quick-usulan-view p { margin: 2px 0 0; padding: 11px 12px; border-radius: 10px; color: #526d84; background: #edf5fb; font-size: .72rem; line-height: 1.55; }

@media (max-width: 1180px) {
  .admin-unor-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-unor-rekap-toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .admin-unor-rekap-toolbar .search-control-wrap { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .admin-unor-stat-grid { grid-template-columns: 1fr 1fr; }
  .admin-unor-service-grid { grid-template-columns: 1fr; }
  .admin-unor-rekap-toolbar { grid-template-columns: 1fr; padding: 14px 16px; }
  .admin-unor-rekap-toolbar .search-control-wrap { grid-column: auto; }
  .rekap-card-head { flex-direction: column; }
  .admin-unor-priority-card > .content-card-head, .admin-unor-rekap-card > .content-card-head { padding-left: 16px; padding-right: 16px; }
  .admin-unor-desktop-table { display: none; }
  .admin-unor-mobile-list { display: grid; gap: 11px; padding: 14px 16px; }
  .admin-unor-mobile-card { padding: 14px; border: 1px solid #e0eaf3; border-radius: 14px; background: #fff; box-shadow: 0 7px 18px rgba(15,59,130,.035); }
  .admin-unor-mobile-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .admin-unor-mobile-card-head strong { display: block; color: #334e66; font-size: .8rem; }
  .admin-unor-mobile-card-head small { display: block; margin-top: 2px; color: #8799aa; font-size: .67rem; }
  .admin-unor-mobile-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 11px; color: #8496a8; font-size: .65rem; }
  .admin-unor-mobile-meta span { display: inline-flex; align-items: center; gap: 5px; }
  .admin-unor-mobile-status { margin-top: 10px; }
  .admin-unor-mobile-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
  .admin-unor-mobile-empty { padding: 28px 10px; color: #8799aa; text-align: center; font-size: .75rem; }
  .admin-unor-rekap-footer { grid-template-columns: 1fr; gap: 10px; padding: 13px 16px; }
  .rekap-range { text-align: left; }
  .rekap-pagination { justify-content: space-between; }
}

@media (max-width: 520px) {
  .admin-unor-stat-grid { grid-template-columns: 1fr; }
  .admin-unor-stat-card { min-height: 96px; }
}

/* =========================================================
   Tahap 5B — Detail & Verifikasi Admin Unor
   ========================================================= */
.detail-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.back-link-btn { display:inline-flex; align-items:center; gap:8px; border:0; padding:0; color:#526f89; background:transparent; font-size:.78rem; font-weight:750; }
.back-link-btn:hover { color:var(--gelarku-blue); }
.detail-hero-card { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 24px; border:1px solid #dce7f1; border-radius:18px; background:linear-gradient(135deg,#fff 0%,#f7fbff 100%); box-shadow:0 10px 28px rgba(15,59,130,.05); }
.detail-hero-card h2 { margin:3px 0 5px; color:var(--gelarku-navy); font-size:1.15rem; font-weight:800; }
.detail-hero-card p { margin:0; color:#7890a5; font-size:.73rem; }
.detail-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.detail-summary-card { min-height:92px; padding:17px 18px; }
.detail-summary-card span { display:block; color:#8396a9; font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.035em; }
.detail-summary-card strong { display:block; margin-top:7px; color:#36536d; font-size:.82rem; line-height:1.35; }
.detail-section-card { overflow:hidden; }
.detail-section-card > .content-card-head { margin:0; padding-bottom:17px; border-bottom:1px solid #edf2f7; }
.detail-data-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; padding:6px 24px 18px; }
.detail-data-item { padding:13px 0; border-bottom:1px solid #edf2f6; min-width:0; }
.detail-data-item.wide, .detail-section-divider.wide { grid-column:1 / -1; }
.detail-data-item span { display:block; margin-bottom:4px; color:#8a9cad; font-size:.69rem; font-weight:700; }
.detail-data-item strong { display:block; color:#405a72; font-size:.78rem; font-weight:700; line-height:1.45; overflow-wrap:anywhere; }
.detail-section-divider { margin:15px 0 2px; padding:10px 0 5px; color:var(--gelarku-navy); font-size:.68rem; font-weight:850; letter-spacing:.045em; }
.admin-detail-documents { padding:18px 24px 24px; }
.admin-detail-file-row .document-file-copy small { line-height:1.45; }
.detail-empty-note { margin:18px 24px 24px; padding:16px 18px; border:1px dashed #d9e5ef; border-radius:12px; color:#7b8fa2; background:#fbfdff; font-size:.76rem; }
.decision-note { display:flex; align-items:flex-start; gap:12px; margin:18px 24px 24px; padding:15px 17px; border:1px solid #dce8f1; border-radius:13px; background:#f8fbfe; }
.decision-note > i { margin-top:2px; font-size:1rem; }
.decision-note strong { display:block; color:#3b566f; font-size:.78rem; }
.decision-note p { margin:4px 0 0; color:#61788e; font-size:.74rem; line-height:1.55; white-space:pre-line; }
.decision-note.warning { border-color:#f1dba4; background:#fff9e9; }
.decision-note.warning > i { color:#b97b00; }
.decision-note.danger { border-color:#efd0d0; background:#fff4f4; }
.decision-note.danger > i { color:#bd4242; }
.decision-note.success { border-color:#cce8da; background:#f0fbf5; }
.decision-note.success > i { color:#24805b; }
.process-timeline { padding:20px 24px 25px; }
.process-timeline-item { position:relative; display:grid; grid-template-columns:18px 1fr; gap:12px; padding-bottom:19px; }
.process-timeline-item:not(:last-child)::before { content:""; position:absolute; left:7px; top:15px; bottom:0; width:2px; background:#e2ebf3; }
.timeline-dot { position:relative; z-index:1; width:15px; height:15px; margin-top:2px; border:4px solid #dbe8f5; border-radius:50%; background:var(--gelarku-blue); }
.process-timeline-item strong { display:block; color:#405a72; font-size:.76rem; }
.process-timeline-item small { display:block; margin-top:2px; color:#91a1b1; font-size:.65rem; }
.process-timeline-item p { margin:6px 0 0; color:#657c90; font-size:.72rem; line-height:1.5; white-space:pre-line; }
.verification-fab { position:fixed; right:28px; bottom:26px; z-index:1040; display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:8px 17px 8px 8px; border:1px solid rgba(245,158,11,.55); border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--gelarku-navy),#2457a1); box-shadow:0 14px 30px rgba(8,43,96,.24),0 0 0 5px rgba(245,158,11,.09); font-size:.75rem; font-weight:800; transition:.2s ease; }
.verification-fab:hover,.verification-fab.active { transform:translateY(-2px); box-shadow:0 17px 34px rgba(8,43,96,.3),0 0 0 6px rgba(245,158,11,.13); }
.verification-fab > span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--gelarku-navy); background:#f6b52b; }
.verification-fab-panel { position:fixed; right:28px; bottom:88px; z-index:1039; width:min(390px,calc(100vw - 32px)); padding:19px; border:1px solid #d7e3ed; border-radius:18px; background:#fff; box-shadow:0 22px 52px rgba(15,59,130,.2); }
.verification-fab-panel[hidden] { display:none !important; }
.verification-fab-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.verification-fab-head h3 { margin:2px 0 0; color:var(--gelarku-navy); font-size:.94rem; font-weight:800; }
.verification-fab-panel > p { margin:12px 0 16px; color:#71869a; font-size:.72rem; line-height:1.55; }
.verification-fab-close { width:32px; height:32px; display:grid; place-items:center; flex:none; border:0; border-radius:9px; color:#708599; background:#f2f6f9; }
.verification-action-buttons { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.verification-action-buttons .btn:last-child { grid-column:1 / -1; }
.btn-warning-soft { color:#8c6300; border:1px solid #efd69a; background:#fff8e3; font-size:.76rem; font-weight:750; }
.btn-warning-soft:hover { color:#765300; border-color:#e6c66f; background:#fff2ca; }
.btn-danger-soft { color:#a33e3e; border:1px solid #ebcaca; background:#fff3f3; font-size:.76rem; font-weight:750; }
.btn-danger-soft:hover { color:#8c3030; border-color:#dfadad; background:#ffe8e8; }
.gelarku-form-swal { max-width:calc(100vw - 28px) !important; border-radius:20px !important; padding:22px 26px 24px !important; overflow-x:hidden !important; }
.gelarku-form-swal .swal2-icon { width:3.45em; height:3.45em; margin:4px auto 13px; font-size:.78rem; }
.gelarku-form-swal .swal2-title { padding:0; color:#284863; font-size:1.16rem; }
.gelarku-form-html { margin:14px 0 0 !important; overflow:visible !important; }
.swal-form-stack { width:100%; display:grid; gap:9px; text-align:left; }
.swal-helper { margin:0 0 4px; color:#71879b; font-size:.76rem; line-height:1.55; text-align:center; }
.swal-field-label { margin-top:3px; color:#47647d; font-size:.72rem; font-weight:800; }
.swal-form-control { width:100%; min-width:0; margin:0; padding:11px 12px; border:1px solid #cedae4; border-radius:10px; color:#405a72; background:#fff; font:inherit; font-size:.78rem; outline:none; }
.swal-form-control:focus { border-color:#7ca7d7; box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.swal-form-textarea { min-height:132px; resize:vertical; line-height:1.55; }
.swal-confirm-check { display:flex; align-items:flex-start; gap:9px; margin:7px 0 0; color:#64788b; font-size:.74rem; line-height:1.45; text-align:left; }
.swal-confirm-check input { width:17px; height:17px; margin-top:1px; flex:none; }
.gelarku-form-actions { margin-top:18px !important; gap:9px; }
.gelarku-form-actions .swal2-styled { min-width:120px; border-radius:10px !important; font-size:.76rem !important; font-weight:800 !important; }
.active-usulan-actions { display:flex; gap:8px; flex-wrap:wrap; }
.app-message-attention { color:#895f00 !important; border-color:#ecd28f !important; background:#fff7df !important; }
.tanggapan-swal { max-width:calc(100vw - 26px) !important; border-radius:20px !important; }
.tanggapan-swal .swal2-title { color:#294a66; font-size:1.12rem; }
.tanggapan-swal-html { margin:10px 0 0 !important; }
.tanggapan-modal-wrap { width:100%; text-align:left; }
.tanggapan-usulan-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:11px; background:#f5f9fc; color:#668096; font-size:.68rem; }
.tanggapan-usulan-head strong { color:#3f5b73; font-size:.69rem; text-align:right; }
.tanggapan-thread { max-height:340px; overflow-y:auto; display:grid; gap:9px; padding:14px 3px 10px; }
.tanggapan-row { display:flex; }
.tanggapan-row.mine { justify-content:flex-end; }
.tanggapan-row.other { justify-content:flex-start; }
.tanggapan-bubble { max-width:82%; padding:10px 12px; border:1px solid #dbe6ef; border-radius:14px 14px 14px 4px; background:#f7fafc; box-shadow:0 4px 12px rgba(15,59,130,.035); }
.tanggapan-row.mine .tanggapan-bubble { border-color:#cbdff5; border-radius:14px 14px 4px 14px; background:#edf5ff; }
.tanggapan-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tanggapan-meta strong { color:#36536c; font-size:.7rem; }
.tanggapan-meta span { padding:2px 6px; border-radius:999px; color:#6e8193; background:#e9eff4; font-size:.58rem; font-weight:750; }
.tanggapan-bubble p { margin:6px 0 5px; color:#4e667b; font-size:.75rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.tanggapan-bubble small { display:block; color:#91a2b0; font-size:.59rem; text-align:right; }
.tanggapan-empty { min-height:145px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#889bab; text-align:center; }
.tanggapan-empty i { font-size:1.4rem; color:#9bb2c5; }
.tanggapan-empty strong { color:#62798d; font-size:.78rem; }
.tanggapan-empty span { font-size:.67rem; }
.tanggapan-composer { margin-top:7px; padding-top:13px; border-top:1px solid #e6edf3; }
.tanggapan-composer label { display:block; margin-bottom:6px; color:#48657e; font-size:.7rem; font-weight:800; }
.tanggapan-composer textarea { width:100%; min-height:88px; padding:10px 11px; border:1px solid #cfdae4; border-radius:11px; color:#445f76; background:#fff; font-size:.75rem; line-height:1.5; resize:vertical; outline:none; }
.tanggapan-composer textarea:focus { border-color:#80a9d5; box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.tanggapan-composer-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.tanggapan-composer-footer span { color:#93a3b2; font-size:.62rem; }
.tanggapan-readonly { margin-top:10px; padding:10px 12px; border-radius:10px; color:#6f8192; background:#f1f5f8; font-size:.7rem; text-align:center; }

@media (max-width: 992px) {
  .detail-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .detail-topbar { align-items:flex-start; }
  .detail-hero-card { align-items:flex-start; flex-direction:column; padding:18px; }
  .detail-summary-grid { grid-template-columns:1fr; }
  .detail-data-grid { grid-template-columns:1fr; padding-left:16px; padding-right:16px; }
  .detail-data-item.wide, .detail-section-divider.wide { grid-column:auto; }
  .admin-detail-documents, .process-timeline { padding-left:16px; padding-right:16px; }
  .decision-note, .detail-empty-note { margin-left:16px; margin-right:16px; }
  .verification-fab { right:16px; bottom:16px; min-height:48px; padding-right:14px; }
  .verification-fab-panel { left:12px; right:12px; bottom:77px; width:auto; max-height:72vh; overflow-y:auto; border-radius:18px; }
  .verification-action-buttons { grid-template-columns:1fr; }
  .verification-action-buttons .btn:last-child { grid-column:auto; }
  .verification-action-buttons .btn { width:100%; }
  .tanggapan-bubble { max-width:91%; }
  .tanggapan-usulan-head { align-items:flex-start; flex-direction:column; }
  .tanggapan-usulan-head strong { text-align:left; }
}

/* ============================================================
   Tahap 5C — Pengelolaan Pengusul & Reset Token GELARKU
   ============================================================ */
.applicant-management-card {
  overflow: hidden;
}

.applicant-management-head {
  align-items: flex-start;
  gap: 20px;
}

.applicant-management-head p {
  max-width: 760px;
}

.security-note-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1554a3;
  border: 1px solid #cfe1f6;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}

.security-note-chip.global {
  background: #fff7e6;
  color: #9a6500;
  border-color: #f4d89b;
}

.applicant-management-toolbar .grow {
  flex: 1 1 420px;
}

.applicant-management-table {
  margin-top: 4px;
}

.applicant-management-table .admin-table {
  min-width: 1120px;
}

.employment-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 55px;
  padding: 5px 9px;
  border-radius: 9px;
  background: #eff5ff;
  color: #164e96;
  font-weight: 800;
  font-size: .78rem;
}

.table-main-text,
.table-subtext {
  display: block;
}

.table-main-text {
  color: #1e3a5f;
  font-size: .86rem;
  margin-bottom: 3px;
}

.table-subtext {
  color: #7890a9;
  font-size: .75rem;
  max-width: 230px;
  line-height: 1.35;
}

.active-usulan-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 9px;
  background: #f2f6fb;
  border: 1px solid #dce6f0;
  color: #31587d;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}

.wa-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #43617f;
  font-size: .82rem;
  white-space: nowrap;
}

.wa-cell i {
  color: #22a75a;
  font-size: 1rem;
}

.muted-dash {
  color: #9aaabd;
}

.applicant-list-footer {
  gap: 18px;
  flex-wrap: wrap;
}

.simple-pager {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #69819b;
  font-size: .82rem;
  font-weight: 700;
}

.pager-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid #d6e2ee;
  background: #fff;
  color: #174a89;
  transition: .18s ease;
}

.pager-btn:hover:not(:disabled) {
  background: #eef5fd;
  border-color: #b7cce3;
}

.pager-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.token-reset-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 14px 15px;
  border-radius: 14px;
  background: #f4f8fc;
  border: 1px solid #dce7f1;
  margin-bottom: 14px;
}

.token-reset-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #e7f0fb;
  color: #174f91;
  font-size: 1.15rem;
}

.token-reset-summary strong,
.token-reset-summary small {
  display: block;
}

.token-reset-summary strong {
  color: #183b60;
  font-size: .96rem;
  margin-bottom: 2px;
}

.token-reset-summary small {
  color: #758aa0;
  font-size: .78rem;
  line-height: 1.45;
}

.swal-form-textarea.compact {
  min-height: 105px;
}

.token-result-card {
  padding: 4px 4px 2px;
  text-align: center;
}

.token-result-card > span {
  display: block;
  color: #7d91a6;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

.token-result-card > strong {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 12px 20px;
  border-radius: 13px;
  background: #0f3b82;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: .16em;
  font-family: "Manrope", sans-serif;
  box-shadow: 0 8px 20px rgba(15, 59, 130, .18);
}

.token-result-card p {
  max-width: 430px;
  margin: 16px auto 0;
  color: #6f8499;
  font-size: .83rem;
  line-height: 1.55;
}

@media (max-width: 850px) {
  .applicant-management-head {
    flex-direction: column;
  }
  .applicant-management-toolbar {
    align-items: stretch;
  }
  .applicant-management-toolbar .compact-select {
    width: 100%;
  }
  .applicant-list-footer {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .token-result-card > strong {
    font-size: 1.4rem;
    letter-spacing: .12em;
  }
}

/* Tahap 5C Revisi 1 — umpan balik salin token */
#copyResetApplicantTokenStatus {
  min-height: 1.25rem;
  color: #15803d;
  font-size: .82rem;
  font-weight: 700;
}

/* =========================================================
   TAHAP 6A — DASHBOARD + REKAP VERIFIKATOR / SUPER ADMIN
   ========================================================= */
.verifier-welcome::after {
  content: "";
  position: absolute;
  right: -52px;
  bottom: -95px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.11), rgba(245,158,11,0) 68%);
  pointer-events: none;
}
.verifier-stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.verifier-dashboard-split {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(310px,.7fr);
  gap: 15px;
}
.verifier-dashboard-split > .content-card { margin: 0; }
.verifier-aging-card .content-card-head { margin-bottom: 12px; }
.verifier-aging-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.verifier-aging-item {
  min-height: 86px;
  padding: 13px 10px;
  border: 1px solid #e0e9f1;
  border-radius: 13px;
  background: #f9fbfd;
  text-align: center;
  transition: .16s ease;
}
.verifier-aging-grid small { display: block; color: #7e91a3; font-size: .67rem; font-weight: 750; }
.verifier-aging-grid strong { display: block; margin-top: 8px; color: var(--gelarku-navy); font-size: 1.35rem; font-weight: 800; }
.verifier-unor-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.verifier-unor-item {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid #e1eaf2;
  border-radius: 13px;
  background: #fbfdff;
  text-align: left;
  transition: .16s ease;
}
.verifier-unor-item:hover { border-color: #c6d9e8; background: #f3f8fc; transform: translateY(-1px); }
.verifier-unor-item > span:first-child { min-width: 0; }
.verifier-unor-item strong { display: block; color: #344f68; font-size: .76rem; font-weight: 800; }
.verifier-unor-item small { display: block; margin-top: 3px; color: #8496a7; font-size: .62rem; line-height: 1.35; }
.verifier-unor-item > span:last-child { flex: 0 0 auto; text-align: right; }
.verifier-unor-item b { display: block; color: var(--gelarku-navy); font-size: 1.15rem; }
.verifier-table { min-width: 1180px; }
.unor-table-cell { min-width: 165px; max-width: 225px; }
.unor-table-cell strong { display: block; color: #415b72; font-size: .72rem; font-weight: 800; }
.unor-table-cell small { display: block; margin-top: 4px; color: #8b9cab; font-size: .61rem; line-height: 1.35; white-space: normal; }
.internal-note-preview {
  display: block;
  max-width: 185px;
  overflow: hidden;
  color: #61778c;
  font-size: .68rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.internal-note-empty { color: #b0bdc8; }
.verifier-rekap-toolbar {
  grid-template-columns: minmax(250px,1.45fr) minmax(180px,.9fr) 135px minmax(195px,1fr) 125px auto;
}
.verifier-mobile-unor { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #62788d; font-size: .68rem; font-weight: 700; }
.verifier-mobile-note { margin-top: 10px; padding: 10px 11px; border-radius: 10px; background: #f5f8fb; }
.verifier-mobile-note small { display: block; color: #8496a7; font-size: .61rem; font-weight: 750; }
.verifier-mobile-note span { display: block; margin-top: 3px; color: #536c82; font-size: .69rem; line-height: 1.45; }
.verifier-quick-view .status-pill { margin-top: 3px; }
.verifier-quick-hint { display: flex; align-items: flex-start; gap: 8px; color: #72869a !important; background: #f5f8fb !important; }

@media (max-width: 1280px) {
  .verifier-rekap-toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .verifier-rekap-toolbar .search-control-wrap { grid-column: 1 / -1; }
  .verifier-dashboard-split { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) {
  .verifier-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .verifier-unor-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
  .verifier-rekap-toolbar { grid-template-columns: 1fr; }
  .verifier-rekap-toolbar .search-control-wrap { grid-column: auto; }
  .verifier-unor-grid { grid-template-columns: 1fr; }
  .verifier-aging-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .verifier-stat-grid { grid-template-columns: 1fr; }
  .verifier-aging-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   TAHAP 6B — DETAIL & VERIFIKASI BKPSDM
   ========================================================= */
.verifier-internal-note-card .content-card-head p {
  margin: 5px 0 0;
  color: #7b8fa2;
  font-size: .72rem;
  line-height: 1.5;
}
.verifier-internal-note-body {
  padding: 18px 24px 22px;
}
.verifier-internal-note-body textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid #d7e3ed;
  border-radius: 12px;
  outline: none;
  color: #405a72;
  background: #fbfdff;
  font: inherit;
  font-size: .77rem;
  line-height: 1.55;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.verifier-internal-note-body textarea:focus {
  border-color: #93b4dd;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
}
.verifier-internal-note-body textarea:disabled {
  color: #8093a5;
  background: #f4f7fa;
  cursor: not-allowed;
}
.verifier-internal-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.verifier-internal-note-footer > span {
  color: #8a9cad;
  font-size: .68rem;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .verifier-internal-note-body { padding: 16px; }
  .verifier-internal-note-footer { align-items: stretch; flex-direction: column; }
  .verifier-internal-note-footer .btn { width: 100%; }
}

/* Tahap 6B Revisi 1 — jangkar visual tabel rekap.
   Hanya kolom Pengusul yang dibekukan; kolom lain tetap mendapat ruang penuh. */
@media (min-width: 769px) {
  .operational-table th.sticky-pengusul,
  .operational-table td.sticky-pengusul {
    position: sticky;
    left: 0;
    min-width: 250px;
    background: #fff;
    box-shadow: 10px 0 16px -16px rgba(30, 58, 95, .62);
  }
  .operational-table td.sticky-pengusul { z-index: 2; }
  .operational-table thead th.sticky-pengusul {
    top: 0;
    z-index: 6;
    background: #f8fbfd;
  }
  .operational-table tbody tr:hover td.sticky-pengusul { background: #fbfdff; }
}


/* Tahap 6C — Proses BKN + Penerbitan Surat */
.btn-success-soft { background:#ecfdf3; color:#067647; border:1px solid #abefc6; font-weight:700; }
.btn-success-soft:hover { background:#dcfae6; color:#05603a; }
.btn-success-app { background:linear-gradient(135deg,#17965f,#087a49); color:#fff; border:0; border-radius:12px; padding:10px 20px; font-weight:700; box-shadow:0 10px 24px rgba(8,122,73,.18); }
.btn-success-app:hover { color:#fff; transform:translateY(-1px); }
.bkn-fab { background:linear-gradient(135deg,#243b6b,#0f3b82); }
.result-file-card { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--gelarku-border); border-radius:14px; background:#fff; }
.result-file-card.final-result { border-color:#b7e4cc; background:#f4fbf7; }
.result-file-card > div:nth-child(2) { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.result-file-card strong { color:#243b53; overflow-wrap:anywhere; }
.result-file-card small { color:var(--gelarku-muted); }
.result-file-card a { color:var(--gelarku-navy); font-size:.82rem; font-weight:700; text-decoration:none; }
.surat-form-grid .surat-textarea, .surat-textarea { min-height:120px; resize:vertical; }
.surat-complete-card { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.surat-complete-card h3 { margin:.2rem 0 .35rem; }
.result-list { display:grid; gap:12px; }
.result-document-card { display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid var(--gelarku-border); border-radius:16px; padding:16px 18px; background:#fff; }
.result-document-card h4 { margin:8px 0 4px; color:var(--gelarku-navy); font-size:1rem; }
.result-document-card p { margin:0; color:#40566d; }
.result-document-card small { color:var(--gelarku-muted); }
.result-document-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.settings-form-card .profile-form-grid { margin-top:4px; }
.decision-note.info { background:#eff6ff; border-color:#bfdbfe; color:#1e4d8f; }
@media (max-width: 767.98px) {
  .surat-complete-card, .result-document-card { align-items:stretch; flex-direction:column; }
  .result-document-actions { justify-content:flex-start; }
}


/* Tahap 6C Revisi 2 — Standardisasi UI & Petunjuk */
.person-cell-compact{min-width:205px;gap:0}.person-cell-compact strong{font-size:.79rem}.person-nip-line{display:flex!important;align-items:center;gap:7px;flex-wrap:wrap}.employment-inline-badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:2px 6px;border-radius:999px;border:1px solid #d8e5f1;background:#f3f7fb;color:#587087;font-size:.56rem;line-height:1.2;font-weight:850;letter-spacing:.02em}.employment-inline-badge.employment-pns{color:#1554a3;border-color:#cfe1f6;background:#eef6ff}.employment-inline-badge.employment-pppk{color:#7a5612;border-color:#ead9ad;background:#fff8e8}.table-date-main{white-space:nowrap}.icon-page-btn{width:34px;min-width:34px!important;height:34px;padding:0!important;display:inline-grid;place-items:center}.rekap-pagination{justify-content:flex-end}.rekap-pagination span{margin-right:2px}.applicant-management-table .admin-table{min-width:780px}.applicant-management-table .applicant-unit-main{font-size:.74rem;font-weight:850;margin-bottom:3px}.applicant-management-table .table-subtext{font-size:.70rem}.single-search-toolbar{grid-template-columns:minmax(260px,1fr)}.applicant-list-footer{display:grid;grid-template-columns:auto 1fr auto;align-items:center}.verifier-rekap-toolbar{grid-template-columns:minmax(280px,1.45fr) minmax(150px,.8fr) minmax(130px,.65fr)}.surat-queue-toolbar{grid-template-columns:minmax(280px,1.6fr) 150px 125px}.surat-queue-table{min-width:980px}.guide-pdf-swal{padding-bottom:14px!important}.guide-pdf-html{margin:10px 8px 0!important;padding:0!important;overflow:hidden!important}.guide-pdf-frame{width:100%;height:min(76vh,820px);border:1px solid #dce7f1;border-radius:14px;overflow:hidden;background:#f4f7fa}.guide-pdf-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff}
@media(max-width:991.98px){.verifier-rekap-toolbar{grid-template-columns:1fr 1fr}.verifier-rekap-toolbar .search-control-wrap{grid-column:1/-1}.surat-queue-toolbar{grid-template-columns:1fr 1fr}.surat-queue-toolbar .search-control-wrap{grid-column:1/-1}}
@media(max-width:767.98px){.verifier-rekap-toolbar,.surat-queue-toolbar{grid-template-columns:1fr}.verifier-rekap-toolbar .search-control-wrap,.surat-queue-toolbar .search-control-wrap{grid-column:auto}.applicant-list-footer{grid-template-columns:1fr}.rekap-pagination{justify-content:flex-start}.guide-pdf-frame{height:72vh}}

/* 6C R2 — pastikan layout filter Verifikator tetap 2 x 3 pada desktop, termasuk viewport 1280px. */
@media (min-width: 992px) {
  .verifier-rekap-toolbar .search-control-wrap { grid-column: auto; }
}


/* Tahap 6E-1 — Pengaturan enam template Manual/TTE */
.template-settings-head { align-items:flex-start; gap:18px; }
.template-status-stack { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.template-config-grid { display:grid; gap:16px; margin-top:4px; }
.template-service-card { border:1px solid #e5e9f2; border-radius:16px; background:#fbfcff; padding:18px; }
.template-service-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.template-service-head strong { display:block; color:#172554; font-size:1rem; }
.template-service-head small { display:block; color:#667085; margin-top:2px; line-height:1.45; }
.template-service-icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#eef3ff; color:#1e3a8a; flex:0 0 auto; }
.template-pair-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.template-output-grid { margin-top:18px !important; }
.template-stage-note { display:flex; gap:12px; align-items:flex-start; margin-top:16px; border:1px solid #dbe7ff; background:#f7faff; border-radius:14px; padding:13px 15px; color:#344054; }
.template-stage-note > i { color:#1e3a8a; margin-top:3px; }
.template-stage-note strong,.template-stage-note span { display:block; }
.template-stage-note strong { color:#172554; margin-bottom:2px; }
.template-stage-note span { font-size:.88rem; line-height:1.55; }
.required-mark { color:#b42318; }
@media (max-width: 820px) {
  .template-pair-grid { grid-template-columns:1fr; }
  .template-settings-head { flex-direction:column; }
  .template-status-stack { justify-content:flex-start; }
}


/* Tahap 6E-2 — Pilihan jenis penandatanganan Manual/TTE */
.surat-signing-field{margin-bottom:.15rem}.surat-signing-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.surat-signing-option{position:relative;display:flex;align-items:flex-start;gap:.8rem;min-height:92px;padding:1rem;border:1px solid #d9e0ea;border-radius:14px;background:#fff;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.surat-signing-option:hover{border-color:#9aabc3;box-shadow:0 5px 15px rgba(30,58,138,.06)}.surat-signing-option.is-selected{border-color:#1e3a8a;background:#f7f9ff;box-shadow:0 0 0 2px rgba(30,58,138,.08)}.surat-signing-option.is-disabled{opacity:.58;cursor:not-allowed;box-shadow:none}.surat-signing-option input{position:absolute;top:.85rem;right:.85rem;width:17px;height:17px;accent-color:#1e3a8a}.surat-signing-option .signing-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:#eef2ff;color:#1e3a8a}.surat-signing-option strong{display:block;color:#17233b;margin-bottom:.22rem}.surat-signing-option small{display:block;padding-right:1rem;color:#667085;line-height:1.45}.signing-type-inline{font-weight:700;color:#1e3a8a}@media(max-width:720px){.surat-signing-options{grid-template-columns:1fr}}


/* Tahap 6E-3 — Alur Final TTE */
.tte-workflow-card{margin-top:1.5rem;padding:1.15rem 1.2rem;border:1px solid #cfdaf0;border-radius:16px;background:linear-gradient(180deg,#f8faff 0%,#fff 100%);box-shadow:0 8px 24px rgba(30,58,138,.05)}.tte-workflow-card[hidden]{display:none!important}.tte-workflow-head{display:flex;align-items:flex-start;gap:.9rem}.tte-workflow-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#e9efff;color:#1e3a8a;font-size:1.05rem}.tte-workflow-head h3{margin:.12rem 0 .25rem;color:#17233b;font-size:1rem}.tte-workflow-head p{margin:0;color:#667085;font-size:.84rem;line-height:1.5}.tte-workflow-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1rem}.tte-workflow-step{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem;border:1px solid #e1e7f0;border-radius:13px;background:#fff}.tte-step-number{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:999px;background:#eef2f7;color:#667085;font-size:.76rem;font-weight:850}.tte-workflow-step strong{display:block;color:#344054;font-size:.79rem;line-height:1.35}.tte-workflow-step small{display:block;margin-top:.22rem;color:#7a8696;font-size:.71rem;line-height:1.42}.tte-workflow-step.is-active{border-color:#e7c66b;background:#fffaf0}.tte-workflow-step.is-active .tte-step-number{background:#f59e0b;color:#fff}.tte-workflow-step.is-done{border-color:#b8ddcb;background:#f5fbf8}.tte-workflow-step.is-done .tte-step-number{background:#198754;color:#fff}.tte-workflow-note{display:flex;gap:.55rem;align-items:flex-start;margin-top:.85rem;padding:.65rem .75rem;border-radius:10px;background:#f2f5f9;color:#5f6c7b;font-size:.72rem;line-height:1.45}.tte-workflow-note i{color:#1e3a8a;margin-top:.15rem}.tte-verified-label{display:inline-flex;align-items:center;gap:.22rem;color:#167647;font-weight:750}@media(max-width:860px){.tte-workflow-steps{grid-template-columns:1fr}}

/* Tahap 6F-1 — Struktur versi surat */
.surat-version-list{display:grid;gap:.75rem}.surat-version-card{position:relative;padding-left:4.8rem}.surat-version-card.is-active-version{border-color:#b8ddcb;background:#f7fcf9}.surat-version-number{position:absolute;left:1rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:12px;background:#eef2ff;color:#1e3a8a;font-weight:900;letter-spacing:.02em}.surat-version-card.is-active-version .surat-version-number{background:#e7f7ee;color:#167647}.surat-version-archive .service-code-chip{white-space:nowrap}.surat-form-grid input:disabled,.surat-form-grid textarea:disabled,.surat-form-grid select:disabled{background:#f5f7fa;color:#475467;opacity:1;cursor:not-allowed}@media(max-width:640px){.surat-version-card{padding-left:1rem;padding-top:4.4rem}.surat-version-number{left:1rem;top:1rem;transform:none}}

/* 6F-3 — Riwayat versi & tampilan Pengusul */
.applicant-result-list { gap: 16px; }
.result-document-shell { display: grid; gap: 0; }
.applicant-active-result-card { position: relative; z-index: 1; }
.applicant-result-copy { min-width: 0; flex: 1; }
.applicant-result-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.active-version-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: #eaf8f0; color: #167647; font-size: .7rem; font-weight: 800; }
.applicant-revision-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px solid #dbe8f5; border-radius: 10px; background: #f7fbff; color: #526c83; font-size: .72rem; line-height: 1.45; }
.applicant-revision-note i { margin-top: 2px; color: var(--gelarku-blue); }
.applicant-result-actions { align-items: center; }
.applicant-history-btn { white-space: nowrap; }
.history-count-badge { display: inline-grid; place-items: center; min-width: 21px; height: 21px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #edf2f7; color: #425b72; font-size: .68rem; font-weight: 900; }
.applicant-version-panel { margin: -2px 10px 0; padding: 18px; border: 1px solid #dbe5ee; border-top: 0; border-radius: 0 0 16px 16px; background: #f8fafc; }
.applicant-version-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.applicant-version-panel-head h5 { margin: 3px 0 3px; color: var(--gelarku-navy); font-size: .95rem; font-weight: 800; }
.applicant-version-panel-head p { margin: 0; color: var(--gelarku-muted); font-size: .75rem; line-height: 1.5; }
.applicant-version-list .surat-version-card { background: #fff; }
.applicant-version-reason { color: #51687d; font-size: .75rem; line-height: 1.45; }
.applicant-version-error { margin: 0; }
.compact-loading-state { min-height: 70px; }
@media(max-width: 760px) {
  .applicant-version-panel { margin-left: 5px; margin-right: 5px; padding: 14px 10px; }
  .applicant-version-panel-head { flex-direction: column; }
  .applicant-result-actions { width: 100%; justify-content: flex-start; }
}

/* =========================================================
   TAHAP 7A — UNDUH REKAP EXCEL FLEKSIBEL
   ========================================================= */
.rekap-export-choice {
  display: grid;
  gap: 12px;
  text-align: left;
}

.rekap-export-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.rekap-export-option:hover {
  border-color: #93b4e8;
  background: #f3f7fd;
  box-shadow: 0 4px 14px rgba(15, 42, 82, .07);
}

.rekap-export-option input {
  margin-top: 4px;
  flex: 0 0 auto;
}

.rekap-export-option span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.rekap-export-option strong {
  color: #17365d;
  font-size: .96rem;
}

.rekap-export-option small {
  color: #64748b;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Tahap 7B — Arsip & Retensi R2 */
.retention-hard-guard{display:flex;gap:12px;align-items:flex-start;margin:14px 0 18px}.retention-hard-guard i{font-size:1.15rem;margin-top:2px}.retention-hard-guard div{display:flex;flex-direction:column;gap:2px}.retention-policy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.retention-policy-card{border:1px solid #dbe5f0;border-radius:14px;padding:16px;background:#fbfdff}.retention-policy-card small{display:block;color:#667085;margin-top:8px;line-height:1.45}.retention-policy-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.retention-policy-head strong{font-size:.88rem;color:#344054;text-align:right}.retention-service-chip{display:inline-flex;padding:5px 10px;border-radius:999px;background:#e8f0ff;color:#1e3a8a;font-weight:800;font-size:.78rem}.retention-code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.retention-check{display:flex;gap:7px;align-items:center;font-size:.84rem;color:#344054}.retention-auto-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding:14px 16px;border:1px solid #e4e7ec;border-radius:14px;background:#f8fafc}.retention-switch{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.retention-switch>span{display:flex;flex-direction:column}.retention-switch small{color:#667085}.retention-batch-field{width:150px}.retention-actions{margin-top:16px}.retention-status{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:.75rem;font-weight:700;background:#eef2f6;color:#475467}.retention-completed{background:#e9f8ef;color:#16794a}.retention-failed,.retention-blocked{background:#fff1f0;color:#b42318}.retention-backing_up,.retention-verified{background:#eef4ff;color:#3538cd}.retention-queue-table td small{display:block;color:#667085;margin-top:3px}.retention-dryrun{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.retention-dryrun>div{border:1px solid #e4e7ec;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:3px;background:#f8fafc}.retention-dryrun strong{font-size:1.15rem}.retention-dryrun span{font-size:.76rem;color:#667085}.retention-cleaned-badge{gap:5px;white-space:nowrap}@media(max-width:980px){.retention-policy-grid{grid-template-columns:1fr}.retention-auto-row{align-items:stretch;flex-direction:column}.retention-batch-field{width:100%}}@media(max-width:600px){.retention-dryrun{grid-template-columns:repeat(2,minmax(0,1fr))}.retention-actions{gap:8px;flex-wrap:wrap}.retention-actions .usulan-action-spacer{display:none}}


/* Tahap 7B R2 — Aktivitas Retensi lebih ringkas */
.retention-queue-table{font-size:.82rem;line-height:1.35}
.retention-queue-table th{font-size:.78rem;padding:10px 12px;white-space:nowrap}
.retention-queue-table td{font-size:.82rem;line-height:1.35;padding:10px 12px;vertical-align:top}
.retention-queue-table td strong{font-size:.86rem;line-height:1.25}
.retention-queue-table td small{font-size:.72rem;line-height:1.35;margin-top:2px}
.retention-queue-table td:nth-child(2){max-width:460px;overflow-wrap:anywhere;word-break:break-word}
.retention-queue-table td:nth-child(3){min-width:145px}
.retention-queue-table td:nth-child(4){min-width:110px;width:125px}
.retention-queue-table .retention-status{font-size:.7rem;padding:3px 7px}
@media(max-width:700px){.retention-queue-table{font-size:.78rem}.retention-queue-table th,.retention-queue-table td{padding:8px 9px}.retention-queue-table td strong{font-size:.81rem}}


/* Tahap 7C — Konfigurasi Sistem */
.system-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:.25rem}.system-config-panel{border:1px solid #e1e8f2;border-radius:16px;padding:1.1rem;background:#fbfdff}.system-config-panel-head{display:flex;align-items:center;gap:.85rem}.system-config-panel-head>div{display:flex;flex-direction:column;gap:.16rem}.system-config-panel-head strong{font-weight:800;color:#17345f}.system-config-panel-head small{color:#6b7f99}.system-config-icon{width:42px;height:42px;border-radius:12px;background:#eaf2ff;color:#0f3b82;display:grid;place-items:center;font-size:1.05rem;flex:0 0 auto}.maintenance-config-panel.maintenance-enabled{border-color:#f2c96b;background:#fffaf0}.maintenance-system-switch{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem;border:1px solid #e0e7f1;border-radius:13px;background:#fff;cursor:pointer}.maintenance-system-switch input{margin-top:.25rem;width:1.05rem;height:1.05rem}.maintenance-system-switch span{display:flex;flex-direction:column;gap:.16rem}.maintenance-system-switch strong{color:#17345f}.maintenance-system-switch small{color:#667a94;line-height:1.45}.status-badge-warning{background:#fff2cf!important;color:#8a5a00!important;border-color:#f5d47c!important}.maintenance-view{position:fixed;inset:0;z-index:2000;background:linear-gradient(145deg,#f4f8ff 0%,#fffaf0 100%);display:grid;place-items:center;padding:24px}.maintenance-card{width:min(620px,100%);background:#fff;border:1px solid #dfe7f2;border-radius:24px;box-shadow:0 24px 70px rgba(20,54,105,.15);padding:2.2rem;text-align:center}.maintenance-logo{width:64px;height:64px;object-fit:contain;margin-bottom:.65rem}.maintenance-kicker{display:block;font-size:.78rem;letter-spacing:.16em;font-weight:800;color:#b77900;margin-bottom:1rem}.maintenance-icon{width:72px;height:72px;border-radius:22px;background:#fff4d6;color:#b77900;display:grid;place-items:center;font-size:1.65rem;margin:0 auto 1rem}.maintenance-card h1{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;color:#18365f;font-size:clamp(1.55rem,3vw,2.05rem);margin-bottom:.7rem}.maintenance-card>p{color:#5e728d;line-height:1.7;margin:0 auto 1rem;max-width:500px}.maintenance-note{display:flex;align-items:flex-start;gap:.65rem;text-align:left;background:#f6f9fd;border:1px solid #e2e9f3;border-radius:13px;padding:.8rem .9rem;color:#5d718b;font-size:.88rem}.maintenance-note i{color:#0f3b82;margin-top:.15rem}@media(max-width:780px){.system-config-grid{grid-template-columns:1fr}.maintenance-card{padding:1.6rem 1.25rem}}

.app-alert-info{color:#174a7c;background:#eff6ff;border:1px solid #bfdbfe}.system-config-panel .app-alert{display:flex;align-items:flex-start;gap:.65rem}.system-config-panel .app-alert i{margin-top:.12rem}


/* Tahap 8A R1 — Riwayat Pengusul: badge status + alasan TMS */
.applicant-history-list{display:grid;gap:.85rem}.applicant-history-item{display:grid;grid-template-columns:14px minmax(0,1fr);gap:.8rem;align-items:flex-start;padding:.95rem 1rem;border:1px solid #e5ebf3;border-radius:14px;background:#fff}.applicant-history-item .history-dot{width:10px;height:10px;margin-top:.42rem;border-radius:999px;background:#9eacba;box-shadow:0 0 0 4px #f1f4f7}.applicant-history-item .history-dot.is-done{background:#1d8b5b;box-shadow:0 0 0 4px #e9f8f1}.applicant-history-item .history-dot.is-tms{background:#c94848;box-shadow:0 0 0 4px #fdeeee}.applicant-history-content{min-width:0}.applicant-history-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.applicant-history-heading>strong{color:#17345f;font-weight:800}.applicant-history-status{font-size:.68rem}.applicant-history-meta{margin:.42rem 0 .25rem;color:#60758c;font-size:.83rem}.applicant-history-content>small{display:block;margin-top:.45rem;color:#8797a8;font-size:.74rem}.applicant-tms-reason{margin:.65rem 0 .25rem;padding:.7rem .8rem;border:1px solid #f2cccc;border-radius:11px;background:#fff7f7}.applicant-tms-reason-title{display:flex;align-items:center;gap:.45rem;color:#a33c3c;font-size:.78rem;margin-bottom:.3rem}.applicant-tms-reason p{margin:0;color:#6e4a4a;font-size:.82rem;line-height:1.5;white-space:pre-wrap}@media(max-width:640px){.applicant-history-item{padding:.85rem}.applicant-history-heading{align-items:flex-start}.applicant-history-status{white-space:normal;text-align:left}}