.ui-dialog { width: min(620px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; color: var(--navy); background: transparent; box-shadow: 0 24px 64px rgba(19,31,52,.24); }
.modal-backdrop { overflow-y: auto; overscroll-behavior: contain; align-items: start; padding: 24px 0; }
.modal { margin: auto; max-height: none; overflow: visible; }
.error-page { min-height:100vh; margin:0; background:linear-gradient(135deg,#fff9f4 0%,#f5f7fa 58%,#fff 100%); color:var(--navy); }
.admin-page .back-link { display:inline-flex; align-items:center; margin:0 0 17px; color:#657187; text-decoration:none; font-size:12px; font-weight:700; line-height:1.2; }
.admin-page .back-link:hover { color:var(--orange); }
.error-shell { width:min(760px,calc(100% - 40px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.error-brand { display:flex; align-items:center; gap:10px; color:var(--navy); text-decoration:none; margin-bottom:28px; }
.error-brand img { width:46px; height:46px; object-fit:contain; }.error-brand span{display:flex;flex-direction:column;text-align:left}.error-brand b{font:800 17px var(--font-heading)}.error-brand small{color:var(--muted);font-size:10px;margin-top:2px}
.error-card { width:min(580px,100%); box-sizing:border-box; padding:46px 42px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 18px 54px rgba(31,43,64,.10); }
.error-code { display:inline-flex; align-items:center; justify-content:center; min-width:78px; height:34px; border-radius:18px; background:var(--orange-soft); color:var(--orange); font:800 14px var(--font-heading); letter-spacing:.5px; }.error-card h1{margin:18px 0 9px;font:800 clamp(26px,4vw,34px) var(--font-heading);letter-spacing:-1px}.error-card p{max-width:410px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.65}.error-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:27px}.error-footer{margin:26px 0 0;color:var(--muted);font-size:10px}
@media(max-width:540px){.error-card{padding:34px 22px}.error-actions{flex-direction:column}.error-actions .btn{width:100%;box-sizing:border-box}}
.ui-dialog--wide { width: min(940px, calc(100vw - 32px)); }
.ui-dialog::backdrop { background: rgba(16,24,40,.48); backdrop-filter: blur(2px); }
.ui-dialog__surface { max-height: min(780px, calc(100vh - 32px)); overflow: auto; background: #fff; border-radius: inherit; }
.ui-dialog__surface--wide { width: min(940px, calc(100vw - 32px)); }
.ui-dialog__header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 23px 16px; border-bottom:1px solid var(--line); }
.ui-dialog__eyebrow { display:block; margin-bottom:5px; color:var(--orange); font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.ui-dialog__header h2 { margin:0; font:700 20px var(--font-heading); }
.ui-dialog__close { width:32px; height:32px; flex:none; padding:0; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--muted); font-size:22px; line-height:1; }
.ui-dialog__close:hover { color:var(--orange); border-color:var(--orange); }
.ui-dialog__body { padding:22px 23px; }
.ui-dialog__actions { display:flex; justify-content:flex-end; gap:10px; padding:15px 23px; border-top:1px solid var(--line); background:#fcfcfd; }
.design-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.design-form .form-field--wide,.design-form .form-note { grid-column:1 / -1; }
.form-field { min-width:0; display:flex; flex-direction:column; gap:7px; color:var(--navy); font-size:11px; font-weight:700; }
.field-label { display:inline-flex; align-items:center; gap:3px; }
.form-field input,.form-field textarea,.form-field select { width:100%; box-sizing:border-box; padding:10px 11px; border:1px solid var(--line); border-radius:8px; outline:0; color:var(--navy); font:400 12px var(--font-body); background:#fff; }
.form-field textarea { min-height:88px; resize:vertical; }
.form-field input:focus,.form-field textarea:focus,.form-field select:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(232,111,45,.12); }
.form-field small,.form-note { color:var(--muted); font-size:10px; font-weight:400; line-height:1.45; }
.ui-wizard { display:grid; grid-template-columns:185px minmax(0,1fr); gap:20px; }
.ui-wizard__steps { display:grid; align-content:start; gap:14px; margin:0; padding:0; list-style:none; }
.ui-wizard__steps li { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:10px; font-weight:700; }
.ui-wizard__steps b { width:26px; height:26px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:#fff; font-size:10px; }
.ui-wizard__steps .is-active { color:var(--orange); }.ui-wizard__steps .is-active b { border-color:var(--orange); background:var(--orange); color:#fff; }
.wizard-page-panel { padding:24px; max-width:1080px; }
.wizard-page-panel .ui-wizard { min-height:390px; }
.wizard-page-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; padding-top:17px; border-top:1px solid var(--line); }
@media(max-width:620px){.design-form{grid-template-columns:1fr}.ui-wizard{grid-template-columns:1fr}.ui-wizard__steps{grid-template-columns:repeat(3,1fr)}.ui-wizard__steps li{flex-direction:column;text-align:center}.ui-wizard__steps span{font-size:8px}.ui-dialog__header,.ui-dialog__body,.ui-dialog__actions{padding-left:16px;padding-right:16px}}

.notification {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #4f5868;
}

.notification svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-menu { position:relative; }
.notification-menu summary { position:relative; cursor:pointer; list-style:none; }
.notification-menu summary::-webkit-details-marker { display:none; }
.notification-menu .header-popover { width:min(390px,calc(100vw - 32px)); max-height:70vh; overflow:auto; right:0; top:48px; }
@media(max-width:720px) { .notification-menu .header-popover { position:fixed; top:62px; right:12px; } }
.notification-item { display:block; padding:12px; border-bottom:1px solid var(--line); color:var(--navy); text-decoration:none; font-size:14px; }
.notification-item.is-unread { background:var(--orange-soft); }
.notification-item small { display:block; margin-top:5px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
[data-notification-items] { padding:8px; font-size:14px; }
[data-notification-summary] { display:block; margin-top:4px; font-size:12px; }

.notification > b {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  right: -6px;
  top: -7px;
}

.service-table { min-width: 980px; }
.service-table th { white-space: nowrap; }
.service-table td { vertical-align: middle; }
.service-name { display: flex; align-items: center; gap: 11px; min-width: 225px; }
.service-name .service-icon { width: 36px; height: 36px; font-size: 15px; flex: none; }
.service-name b { display: flex; flex-direction: column; font-size: 11px; }
.service-name small { font-weight: 400; color: var(--muted); margin-top: 4px; }
.type-label { display: inline-flex; padding: 5px 9px; border-radius: 6px; font-size: 9px; font-weight: 700; }
.type-label.application { background: var(--orange-soft); color: var(--orange); }
.type-label.information { background: #e7f6ef; color: var(--green); }
.template-file { border: 0; background: transparent; color: #45516a; padding: 5px 0; font-size: 10px; text-align: left; }
.template-file:hover { color: var(--orange); text-decoration: underline; }
.no-template { color: #969ca6; font-size: 10px; }
.service-status-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.service-status-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.service-status-toggle span { width: 38px; height: 21px; border-radius: 999px; background: #dfe3e9; position: relative; transition: .18s; box-shadow: inset 0 0 0 1px #cfd5dd; }
.service-status-toggle span::after { content: ''; position: absolute; width: 17px; height: 17px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(22,31,47,.18); transition: .18s; }
.service-status-toggle input:checked + span { background: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.service-status-toggle input:checked + span::after { transform: translateX(17px); }
.service-status-toggle b { min-width: 48px; font-size: 9px; color: #7a8493; }
.service-status-toggle input:checked ~ b { color: var(--green); }
.service-status-toggle.is-disabled { cursor: not-allowed; }
.service-status-toggle input:disabled + span { opacity: .55; }

.table-action { position: relative; display: inline-flex; }
.kebab-button { width: 34px; height: 32px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #596170; font-weight: 800; letter-spacing: 1px; line-height: 1; }
.kebab-button:hover { border-color: var(--orange); color: var(--orange); background: #fffaf7; }
.action-dropdown { position: absolute; right: 0; top: 37px; min-width: 170px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 30px rgba(21,31,51,.16); z-index: 100; }
.action-dropdown button { width: 100%; border: 0; background: #fff; padding: 10px; border-radius: 6px; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--navy); font-size: 11px; }
.action-dropdown button:hover { background: #f6f7f9; }
.action-dropdown button.danger { color: #c74450; }
.action-dropdown.action-dropdown-portal{position:fixed!important;right:auto!important;z-index:5000!important;margin:0;max-height:none;overflow:visible;animation:actionPortalIn .14s ease-out}@keyframes actionPortalIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.survey-intro { display: flex; gap: 14px; padding: 16px; background: #fff8f2; border: 1px solid #f4d7c5; border-radius: 10px; margin-bottom: 16px; }
.survey-intro > span { width: 38px; height: 38px; border-radius: 9px; background: var(--orange); color: #fff; display: grid; place-items: center; flex: none; }
.survey-intro h3 { margin: 0 0 4px; font-size: 14px; }
.survey-intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.survey-questions { display: grid; gap: 13px; }
.survey-questions fieldset { border: 1px solid var(--line); border-radius: 9px; margin: 0; padding: 14px; }
.survey-questions legend { font-size: 12px; font-weight: 700; padding: 0 5px; }
.rating-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.rating-options label { border: 1px solid var(--line); border-radius: 7px; padding: 8px; flex-direction: row; align-items: center; cursor: pointer; }
.rating-options label:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); }
.rating-options small { color: var(--muted); margin-left: auto; font-size: 8px; }
.survey-note textarea { min-height: 65px; }
.survey-reference { color: var(--orange); font-size: 10px; font-weight: 700; justify-self: start; }

.detail-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.detail-page-head h1 { font: 700 27px var(--font-heading); margin: 5px 0; }
.detail-page-head p { color: var(--muted); margin: 0; font-size: 11px; }
.detail-page-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 17px; }
.detail-page-grid > div { display: grid; gap: 17px; }
.detail-page-grid aside { display: grid; gap: 17px; align-content: start; }
.detail-section h3 { font: 700 14px var(--font-heading); margin: 0 0 15px; }
.detail-section dl { margin: 0; }
.detail-section dl div { display: grid; grid-template-columns: 180px 1fr; padding: 11px 0; border-bottom: 1px solid #eff0f2; }
.detail-section dt { color: var(--muted); font-size: 11px; }
.detail-section dd { margin: 0; font-size: 11px; font-weight: 600; }
.detail-page-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 16px 0; margin-top: 17px; background: #f5f6f8; border-top: 1px solid var(--line); }
.status-history > div { display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 10px; min-height: 0; padding-bottom: 20px; position: relative; align-items: start; }
.status-history > div:last-child { padding-bottom: 0; }
.status-history > div:not(:last-child)::after { content: ''; position: absolute; width: 1px; top: 31px; bottom: 4px; background: #d9dde3; left: 13px; }
.status-history i { width: 27px; height: 27px; border: 1px solid #d5d9df; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9px; flex: 0 0 auto; }
.status-history .done i { color: #fff; background: var(--green); border-color: var(--green); }
.status-history .done b { color: var(--green); }
.status-history .active i{color:#fff;background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 4px #fff0e7}.status-history .active b{color:var(--orange)}.approve-page-action:disabled{background:#dfe3e8!important;border-color:#dfe3e8!important;color:#77808d!important;cursor:not-allowed}.process-confirmation{display:grid;grid-template-columns:42px 1fr;gap:13px;margin-top:18px;padding:16px;border:1px solid #f0d3c2;border-radius:10px;background:#fff9f5}.process-confirmation>span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#fff;font-weight:800}.process-confirmation small{color:var(--orange);font-size:8px;font-weight:800;letter-spacing:.7px}.process-confirmation h3{margin:3px 0 5px;font-size:15px}.process-confirmation p{margin:0;color:var(--muted);font-size:10px}.process-confirmation dl{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0 0}.process-confirmation dl div{display:flex;flex-direction:column;padding:8px;border-radius:7px;background:#fff}.process-confirmation dt{color:var(--muted);font-size:8px}.process-confirmation dd{margin:3px 0 0;font-size:9px;font-weight:700}.process-update-form{display:grid;gap:12px;margin-top:14px}.process-update-form label,.process-note-field{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:700}.process-update-form textarea,.process-note-field textarea{min-height:82px;border:1px solid var(--line);border-radius:8px;padding:11px;color:var(--navy);background:#fff}.process-update-form p,.wet-sign-step p{margin:6px 0 0;color:var(--muted);font-size:9px}.process-note-field{margin-top:14px}
.status-history-caption{margin:-8px 0 17px;color:var(--muted);font-size:9px;line-height:1.5}
.status-history .status-audit{display:flex;margin-top:8px;padding:8px 9px;border:1px solid #dbe5f2;border-radius:8px;background:#f7f9fc;gap:2px}
.status-history .status-audit::before{content:'Diproses oleh';color:#778397;font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.45px}
.status-history .status-audit.submitted::before{content:'Diajukan oleh'}
.status-history .status-audit strong{color:var(--navy);font-size:10px}
.status-history .status-audit em{color:var(--muted);font-size:8px;font-style:normal;line-height:1.45}
.status-history .rejected i{color:#fff;background:#c94444;border-color:#c94444}
.status-history .rejected b{color:#b93838}
.status-history span { min-width: 0; display: flex; flex-direction: column; font-size: 10px; }
.status-history small { color: var(--muted); margin-top: 4px; line-height: 1.45; overflow-wrap: anywhere; }
.process-document-actions { width: 100%; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.process-download-link { width: max-content; max-width: 100%; border: 1px solid #d9e1ec; border-radius: 8px; background: #fff; padding: 7px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--navy); font-size: 9px; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; }
.process-download-link:hover { border-color: var(--orange); color: var(--orange); }
.process-download-link.disabled { color: #9aa3b0; background: #f4f6f8; border-color: #e1e5ea; cursor: not-allowed; }
.process-confirmation dl { margin-bottom: 16px; }
.process-confirmation .process-download-link { margin-top: 0; }
.survey-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 17px; }
.survey-stats article { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; }
.survey-stats small { color: var(--muted); font-size: 10px; }
.survey-stats b { font: 700 24px var(--font-heading); margin: 4px 0; }
.survey-stats span { color: var(--muted); font-size: 9px; }
.survey-stats .positive { color: var(--green); }
.score { display: inline-grid; place-items: center; min-width: 42px; padding: 6px; border-radius: 6px; background: #e7f6ef; color: var(--green); font-weight: 700; }
.applicant-cell { display: flex; align-items: center; gap: 10px; min-width: 245px; }
.applicant-cell > span { width: 34px; height: 34px; border-radius: 8px; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; flex: none; font-size: 9px; font-weight: 800; }
.applicant-cell > b { display: flex; flex-direction: column; font-size: 11px; }
.applicant-cell small { color: var(--muted); font-weight: 400; margin-top: 4px; }
#submissions .pagination button:disabled { opacity: .4; cursor: not-allowed; }
.filter-row.search-only { justify-content: flex-end; }
.filter-row.search-only .search { margin-left: 0; width: min(320px,100%); }
.filter-row.search-only .search input { width: 100%; }
.services-page { min-height: calc(100vh - 124px); background: #fff; }
.services-page .content-section { padding-top: 62px; }
.public-header nav a { position: relative; padding: 31px 0; }
.public-header nav a.active { color: var(--orange); }
.public-header nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--orange); }

/* Sidebar admin mengikuti tema putih Inquest. */
.admin-app .sidebar {
  background: #fff;
  color: var(--navy);
  border-right: 1px solid var(--line);
  box-shadow: 4px 0 18px rgba(23,35,59,.04);
  height: 100vh;
  max-height: none;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.admin-app .admin-brand {
  color: var(--navy);
  border-bottom-color: var(--line);
}

.admin-app .admin-brand small { color: var(--muted); }
.admin-app .sidebar nav small { color: #a0a6b1; }
.admin-app .sidebar nav button,.admin-app .sidebar nav .sidebar-link { color: #596170; white-space: nowrap; }
.admin-app .sidebar nav .sidebar-link{width:100%;display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:7px;text-decoration:none;font-weight:600;font-size:13px;box-sizing:border-box}
.admin-app .sidebar nav button:hover,.admin-app .sidebar nav .sidebar-link:hover { background: #fff5ee; color: var(--orange); }
.admin-app .sidebar nav button.active,.admin-app .sidebar nav .sidebar-link.active { background: var(--orange); color: #fff; box-shadow: 0 7px 16px rgba(232,111,45,.18); }
.admin-app .sidebar nav button b,.admin-app .sidebar nav .sidebar-link>b { margin-left:auto;background:var(--orange-soft);color:var(--orange);border-radius:20px;padding:2px 7px;font-size:9px;flex:0 0 auto; }
.admin-app .sidebar nav button.active b,.admin-app .sidebar nav .sidebar-link.active>b { background: rgba(255,255,255,.22); color: #fff; }
.admin-app .sidebar-help { background: #f7f8fa; border: 1px solid var(--line); flex: 0 0 auto; margin-top: 18px; }
.admin-app .sidebar-help span { background: #fff; color: var(--orange); border: 1px solid var(--line); }
.admin-app .sidebar-help b { color: var(--navy); }
.admin-app .sidebar-help small { color: var(--muted); }
.admin-app .sidebar nav { flex: 0 0 auto; padding-bottom: 12px; }
.admin-app .sidebar::-webkit-scrollbar { width: 6px; }
.admin-app .sidebar::-webkit-scrollbar-thumb { background: #d8dde5; border-radius: 20px; }
.admin-app .sidebar::-webkit-scrollbar-track { background: transparent; }
.survey-section-title { display: flex; flex-direction: column; gap: 3px; margin: 22px 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .5px; }
.survey-section-title b { font-size: 11px; color: var(--orange); }
.survey-section-title small { text-transform: none; letter-spacing: 0; color: var(--muted); }
.survey-demographic { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.survey-demographic label { display: flex; flex-direction: column; gap: 7px; font-size: 11px; font-weight: 700; }
.survey-demographic label.wide { grid-column: 1/-1; }
.survey-demographic label small { color: var(--muted); font-weight: 400; }
.survey-demographic input,.survey-demographic select { border: 1px solid var(--line); border-radius: 8px; padding: 11px; background: #fff; }
.survey-choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.survey-choice-grid label { display: flex; flex-direction: row; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; font-size: 10px; }
.survey-choice-grid label:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); color: var(--orange); }
.survey-choice-grid input { accent-color: var(--orange); }
#surveys table { min-width: 1100px; }
@media(max-width:620px){.survey-demographic,.survey-choice-grid{grid-template-columns:1fr}}

/* Panel langkah wizard tetap terlihat saat form panjang digulir. */
.wizard-shell { overflow: visible; background: transparent; align-items: start; }
.wizard-side { position: sticky; top: 140px; align-self: start; max-height: calc(100vh - 160px); overflow-y: auto; border-radius: 17px 0 0 17px; }
.wizard-form { background: #fff; border-radius: 0 17px 17px 0; min-height: 100%; }
.wizard-side::-webkit-scrollbar { width: 4px; }
.wizard-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); border-radius: 10px; }

@media(max-width:720px){
  .wizard-shell { overflow: hidden; }
  .wizard-side { position: static; max-height: none; overflow: visible; border-radius: 0; }
  .wizard-form { border-radius: 0; }
}

/* Alur Pemohon Ringkas tidak memakai header publik versi utama. */
.public-app.compact-flow .public-header { display: none; }
.public-app.compact-flow #wizardPage .wizard-shell { min-height: calc(100vh - 42px); }
.public-app.compact-flow #wizardPage .wizard-side { top: 42px; min-height: calc(100vh - 42px); max-height: calc(100vh - 42px); }
.public-app.compact-flow #wizardPage .wizard-form { min-height: calc(100vh - 42px); }
.public-app.compact-flow #infoPage { min-height: calc(100vh - 42px); padding-top: 36px; }

@media(max-width:720px){
  .public-app.compact-flow #wizardPage .wizard-side { min-height: auto; max-height: none; }
  .public-app.compact-flow #wizardPage .wizard-form { min-height: auto; }
}

/* Alternatif homepage pemohon ringkas. */
.compact-app { min-height: calc(100vh - 42px); position: relative; overflow: hidden; background: linear-gradient(145deg,#fff9f4 0,#f8f5ef 48%,#f2eee8 100%); padding: 34px 20px; }
.compact-bg-shape { position: fixed; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.compact-bg-shape.one { width: 330px; height: 330px; right: -100px; top: 90px; background: rgba(232,111,45,.10); }
.compact-bg-shape.two { width: 260px; height: 260px; left: -100px; bottom: -60px; background: rgba(23,35,59,.06); }
.compact-shell { position: relative; width: min(760px,100%); min-height: calc(100vh - 110px); margin: auto; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.8); border-radius: 24px; box-shadow: 0 24px 80px rgba(35,37,43,.12); padding: 28px 34px 20px; display: flex; flex-direction: column; }
.compact-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.compact-brand { display: flex; align-items: center; gap: 11px; }
.compact-brand img { width: 47px; height: 47px; object-fit: contain; }
.compact-brand div { display: flex; flex-direction: column; }
.compact-brand b { font: 800 15px var(--font-heading); }
.compact-brand small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.compact-track { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 10px 13px; color: var(--navy); font-size: 10px; font-weight: 700; }
.compact-track:hover { color: var(--orange); border-color: var(--orange); }
.compact-intro { text-align: center; padding: 34px 0 23px; }
.compact-eyebrow { color: var(--orange); font-size: 9px; font-weight: 800; letter-spacing: 1.7px; }
.compact-intro h1 { font: 800 clamp(27px,4vw,38px) var(--font-heading); letter-spacing: -1.3px; margin: 9px 0 7px; }
.compact-intro > p { color: var(--muted); margin: 0; font-size: 13px; }
.compact-notice { width: min(570px,100%); margin: 22px auto 0; padding: 12px 15px; background: #fff7ed; border: 1px solid #fedbbd; border-radius: 10px; display: flex; gap: 11px; align-items: center; text-align: left; }
.compact-notice > span { color: var(--orange); font-size: 18px; }
.compact-notice div { display: flex; flex-direction: column; }
.compact-notice b { font-size: 10px; }
.compact-notice small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.compact-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(620px,100%); margin: 0 auto 28px; }
.compact-groups > button { border: 1px solid var(--line); background: #fff; border-radius: 13px; padding: 16px; display: grid; grid-template-columns: 43px 1fr 18px; align-items: center; gap: 11px; text-align: left; color: var(--navy); transition: .2s; }
.compact-groups > button:hover { transform: translateY(-2px); border-color: #f0b995; box-shadow: 0 10px 25px rgba(40,45,55,.08); }
.compact-group-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 10px; font-style: normal; font-size: 17px; }
.compact-groups div { display: flex; flex-direction: column; }
.compact-groups b { font: 700 12px var(--font-heading); }
.compact-groups small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.compact-groups i { color: #aeb3bc; font-style: normal; }
.compact-service-panel { width: min(620px,100%); margin: 0 auto 25px; }
.compact-back { border: 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; padding: 0; margin-bottom: 17px; }
.compact-panel-head { display: flex; gap: 12px; align-items: center; margin-bottom: 15px; }
.compact-panel-head h2 { font: 700 20px var(--font-heading); margin: 0; }
.compact-panel-head p { color: var(--muted); font-size: 10px; margin: 3px 0 0; }
.compact-service-list { display: grid; gap: 8px; }
.compact-service-list > button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 12px 13px; display: grid; grid-template-columns: 31px 1fr auto 14px; align-items: center; gap: 10px; text-align: left; color: var(--navy); }
.compact-service-list > button:hover { border-color: var(--orange); background: #fffaf7; }
.compact-service-symbol { width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; }
.compact-service-symbol.apply { background: var(--orange-soft); color: var(--orange); }
.compact-service-symbol.info { background: #e7f6ef; color: var(--green); }
.compact-service-list div { display: flex; flex-direction: column; }
.compact-service-list b { font-size: 11px; }
.compact-service-list small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.compact-service-list em { border-radius: 20px; padding: 4px 7px; background: #f4f5f7; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 700; }
.compact-service-list i { color: #aeb3bc; font-style: normal; }
.compact-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 8px; }
.compact-footer button { border: 0; background: transparent; color: var(--orange); font-size: 9px; font-weight: 700; }

@media(max-width:700px){
  .compact-app { padding: 0; }
  .compact-shell { min-height: calc(100vh - 42px); border-radius: 0; padding: 20px 16px; }
  .compact-groups { grid-template-columns: 1fr; }
  .compact-header { align-items: flex-start; }
  .compact-brand small { max-width: 170px; }
  .compact-track { font-size: 0; }
  .compact-track::first-letter { font-size: 15px; }
  .compact-footer { flex-direction: column; gap: 8px; text-align: center; }
}

/* Langkah status setelah pengajuan dikirim. */
.verification-card { max-width: 610px; margin: 5px auto 0; text-align: center; }
.verification-animation { width: 76px; height: 76px; margin: 0 auto 18px; position: relative; display: grid; place-items: center; }
.verification-animation span { position: relative; z-index: 2; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #e5f6ee; color: var(--green); font-size: 25px; font-weight: 800; }
.verification-animation i { position: absolute; inset: 0; border: 1px solid #bde7d3; border-radius: 50%; animation: verifyPulse 2s infinite; }
@keyframes verifyPulse { 0%{transform:scale(.72);opacity:1} 100%{transform:scale(1.15);opacity:0} }
.verification-card > h2 { font: 700 25px var(--font-heading); margin: 12px 0 8px; }
.verification-card > p { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: 12px; line-height: 1.65; }
.verification-code { margin: 23px auto; max-width: 390px; padding: 15px 18px; border: 1px dashed #efb58f; border-radius: 10px; background: #fff8f3; display: grid; grid-template-columns: 1fr 32px; }
.verification-code small { grid-column: 1/-1; color: var(--muted); font-size: 8px; letter-spacing: 1px; }
.verification-code b { font: 700 22px var(--font-heading); }
.verification-code button { border: 0; background: transparent; color: var(--orange); }
.verification-timeline { display: flex; align-items: flex-start; justify-content: flex-start; max-width: 100%; margin: 30px 0 35px; padding: 0 4px 14px; overflow-x: auto; overflow-y: hidden; scrollbar-gutter: stable; overscroll-behavior-inline: contain; }
.verification-timeline > div { width: 150px; min-width: 150px; flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; }
.verification-timeline > div > b { position: relative; z-index: 2; width: 31px; height: 31px; border: 2px solid #d7dbe1; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #a3a9b3; font-size: 10px; }
.verification-timeline > div > b .ui-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.verification-timeline > div.done > b { background: var(--green); border-color: var(--green); color: #fff; }
.verification-timeline > div.active > b { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 0 0 5px var(--orange-soft); }
.verification-timeline span { display: flex; flex-direction: column; margin-top: 9px; }
.verification-timeline strong { font-size: 12px; line-height: 1.35; }
.verification-timeline small { color: var(--muted); font-size: 10px; line-height: 1.45; margin-top: 5px; max-width: 145px; }
.verification-timeline > i { position: relative; z-index: 1; flex: 0 0 118px; height: 3px; background: #dfe2e6; border-radius: 999px; margin: 15px -50px 0; transition: background .25s ease; }
.verification-timeline > div.done + i { background: var(--green); }
.verification-timeline > div.active + i { background: linear-gradient(90deg,var(--orange) 0 38%,#dfe2e6 38% 100%); }
.verification-timeline > div.active.success + i { background: linear-gradient(90deg,var(--green) 0 38%,#dfe2e6 38% 100%); }
.verification-timeline::-webkit-scrollbar { height: 7px; }
.verification-timeline::-webkit-scrollbar-track { border-radius: 999px; background: #edf1f5; }
.verification-timeline::-webkit-scrollbar-thumb { border-radius: 999px; background: #b5bfcc; }
.verification-timeline::-webkit-scrollbar-thumb:hover { background: #8e9bab; }
.verification-timeline:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.verification-actions { display: flex; justify-content: center; gap: 10px; }
.approved-demo-hint { display: flex; align-items: center; gap: 9px; margin-top: 22px; padding: 11px 13px; border-radius: 8px; background: #f4f6f9; text-align: left; }
.approved-demo-hint > span { color: var(--blue); }
.approved-demo-hint p { margin: 0; color: var(--muted); font-size: 9px; }
.approved-demo-hint button,.tracking-demo-code button { border: 0; background: transparent; color: var(--orange); font-weight: 800; padding: 0; }
.tracking-demo-code { display: block; color: var(--muted); margin-top: 7px; font-size: 9px; }
.tracking-approved-box { margin-top: 42px; padding: 12px; border: 1px solid #cfe8dc; border-radius: 9px; background: #f4fbf8; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 9px; text-align: left; }
.tracking-approved-box > div { display: flex; flex-direction: column; }
.tracking-approved-box b { font-size: 10px; }
.tracking-approved-box small { color: var(--muted); font-size: 8px; margin-top: 3px; }
.tracking-approved-box .btn { font-size: 9px; padding: 9px 10px; }
.mini-steps.approved i { background: var(--green); }
.tracking-wait-note { margin: 42px 0 0!important; padding: 9px; border-radius: 7px; background: #fff8ee; color: #a36a16!important; font-size: 9px!important; }
@media(max-width:620px){.verification-timeline small{display:none}.tracking-approved-box{grid-template-columns:31px 1fr}.tracking-approved-box .btn{grid-column:1/-1}}

/* Sidebar wizard menyatu dengan header dan dasar viewport. */
#wizardPage { position: relative; padding: 0 6vw 0; }
#wizardPage .wizard-shell { max-width: 1120px; min-height: calc(100vh - 124px); }
#wizardPage .wizard-side { top: 124px; min-height: calc(100vh - 124px); max-height: calc(100vh - 124px); border-radius: 0; padding-top: 38px; }
#wizardPage .wizard-form { min-height: calc(100vh - 124px); border-radius: 0; padding-top: 70px; }
#wizardPage > .back-link { position: absolute; z-index: 5; top: 24px; left: calc(6vw + 380px); margin: 0; }

@media(max-width:720px){
  #wizardPage { padding: 0; }
  #wizardPage .wizard-shell { min-height: auto; }
  #wizardPage .wizard-side { min-height: auto; max-height: none; padding-top: 25px; }
  #wizardPage .wizard-form { min-height: auto; padding-top: 65px; }
  #wizardPage > .back-link { top: 22px; left: 20px; }
}
.survey-detail-list { display: grid; gap: 0; margin-top: 18px; }
.survey-detail-list div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.survey-detail-list span { color: var(--muted); }
.survey-detail-modal { width: min(860px,94vw)!important; max-height: 92vh; overflow: auto; }
.survey-detail-wizard { display: grid; grid-template-columns: 245px minmax(0,1fr); gap: 18px; margin-top: 18px; }
.survey-detail-steps { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #fafbfc; }
.survey-detail-steps button { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; text-align: left; color: var(--muted); padding: 4px 0; }
.survey-detail-steps button b { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 10px; }
.survey-detail-steps button span { display: flex; flex-direction: column; }
.survey-detail-steps button strong { color: var(--navy); font-size: 11px; }
.survey-detail-steps button small { margin-top: 3px; font-size: 9px; }
.survey-detail-steps button.active b,.survey-detail-steps button.complete b { background: var(--orange); border-color: var(--orange); color: #fff; }
.survey-detail-steps > i { display: block; width: 1px; height: 28px; margin: 2px 0 2px 15px; background: var(--line); }
.survey-detail-content { border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.survey-detail-pane h3 { margin: 7px 0 16px; font: 700 18px var(--font-heading); }
.survey-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.survey-detail-grid label,.survey-suggestion { display: flex; flex-direction: column; gap: 7px; font-size: 10px; font-weight: 700; }
.survey-detail-grid input,.survey-suggestion textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #f5f6f8; padding: 11px; color: var(--navy); opacity: 1; }
.survey-score-list { display: grid; gap: 10px; }
.survey-score-list div { display: grid; grid-template-columns: 1.35fr .75fr .9fr; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfc; font-size: 10px; }
.survey-score-list span { color: var(--muted); }
.survey-score-list b { color: var(--navy); }
.survey-score-list small { color: var(--green); font-weight: 700; }
.survey-suggestion { margin-top: 14px; }

@media (max-width: 900px) {
  .detail-page-grid { grid-template-columns: 1fr; }
  .survey-stats { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .rating-options { grid-template-columns: repeat(2,1fr); }
}

/* Builder template surat pada Master Jenis Layanan. */
.service-builder { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 18px; align-items: start; }
.builder-steps { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; position: sticky; top: 88px; }
.builder-steps button { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left; color: var(--muted); padding: 5px 0; }
.builder-steps button b { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; }
.builder-steps button span { display: flex; flex-direction: column; }
.builder-steps button strong { color: var(--navy); font-size: 11px; }
.builder-steps button small { font-size: 9px; margin-top: 3px; }
.builder-steps button.active b,.builder-steps button.complete b { background: var(--orange); border-color: var(--orange); color: #fff; }
.builder-steps > i { display: block; width: 1px; height: 28px; background: var(--line); margin: 2px 0 2px 16px; }
.builder-content { padding: 28px; min-height: 590px; }
.builder-content h2 { font: 700 21px var(--font-heading); margin: 8px 0 5px; }
.builder-lead { color: var(--muted); font-size: 11px; margin: 0 0 24px; }
.builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.builder-grid label,.builder-field { display: flex; flex-direction: column; gap: 7px; font-size: 11px; font-weight: 700; }
.builder-grid input,.builder-grid select,.builder-field select { height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: #fff; color: var(--navy); }
.builder-field { margin-top: 18px; }
.builder-field small { color: var(--muted); font-weight: 400; }
.demo-form textarea { min-height: 82px; resize: vertical; border: 1px solid var(--line); padding: 11px; border-radius: 8px; font: inherit; }
.variable-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.variable-picker button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 11px; text-align: left; color: var(--navy); font-size: 10px; font-weight: 700; }
.variable-picker button:hover { border-color: var(--orange); color: var(--orange); background: #fff8f3; }
.layout-choice { border: 0; padding: 0; margin: 25px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.layout-choice legend { font-size: 11px; font-weight: 700; margin-bottom: 10px; }
.layout-choice label { border: 1px solid var(--line); border-radius: 9px; padding: 14px; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.layout-choice label:has(input:checked) { border-color: var(--orange); background: #fff8f3; }
.layout-choice span { display: flex; flex-direction: column; }
.layout-choice b { font-size: 11px; }
.layout-choice small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.body-preset { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 10px; font-size: 10px; font-weight: 700; }
.body-preset select { min-width: 270px; height: 38px; border: 1px solid var(--line); border-radius: 7px; padding: 0 10px; background: #fff; color: var(--navy); }
.body-tools { display: flex; flex-wrap: wrap; gap: 7px; border: 1px solid var(--line); border-bottom: 0; border-radius: 9px 9px 0 0; padding: 8px; background: #f8f9fa; }
.body-tools button { border: 1px solid var(--line); background: #fff; border-radius: 5px; min-width: 31px; height: 30px; color: var(--navy); }
.body-tools > span { width: 1px; height: 24px; background: var(--line); margin: 3px 2px; }
.body-tools [data-format="justifyCenter"] { text-align: center; }
.body-tools [data-format="justifyRight"] { text-align: right; }
.body-tools .align-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.body-tools button:hover .align-icon { color: var(--orange); }
.body-tools [data-insert-letter-block] { width: auto; padding: 0 9px; font-size: 9px; font-weight: 700; }
.body-tools button:last-child { margin-left: auto; padding: 0 11px; color: var(--orange); font-size: 10px; font-weight: 700; }
.body-editor { min-height: 285px; border: 1px solid var(--line); border-radius: 0 0 9px 9px; padding: 28px 38px; background: #fff; font-family: var(--font-document); font-size: 12px; line-height: 1.7; outline: none; }
.body-editor:focus { border-color: var(--orange); }
.body-editor h2,.body-editor h3 { text-align: center; text-decoration: underline; margin-top: 0; font-size: 15px; }
.body-editor table { width: auto; margin: 15px 0; font-family: var(--font-document); }
.body-editor td { border: 0; padding: 2px 20px 2px 0; }
.body-editor .document-number,.letter-preview .document-number { text-align: center; margin-top: -8px; }
.body-editor .letter-date,.letter-preview .letter-date { text-align: right; margin: 24px 0 10px auto; }
.body-editor .letter-recipient,.letter-preview .letter-recipient { text-align: left; margin: 20px 0; line-height: 1.55; }
.body-editor .letter-paragraph,.letter-preview .letter-paragraph { text-align: justify; text-indent: 34px; }
.body-editor .identity-table,.body-editor .letter-meta,.letter-preview .identity-table,.letter-preview .letter-meta { width: 100%; margin: 14px 0; }
.body-editor .identity-table td:first-child,.body-editor .letter-meta td:first-child,.letter-preview .identity-table td:first-child,.letter-preview .letter-meta td:first-child { width: 145px; }
.signature-settings { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.signature-settings h3 { font-size: 12px; margin: 0 0 13px; }
.signature-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.signature-heading h3 { margin: 0 0 3px; }
.signature-heading p { margin: 0; color: var(--muted); font-size: 9px; }
.signature-heading .btn { padding: 9px 11px; font-size: 9px; }
#signerList { display: grid; gap: 9px; }
.signer-row { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr 32px; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfc; }
.signer-row label { display: flex; flex-direction: column; gap: 6px; font-size: 10px; font-weight: 700; }
.signer-row input,.signer-row select { width:100%;height: 38px; border: 1px solid var(--line); border-radius: 7px; padding: 0 10px; background: #fff; color: var(--navy); }
.remove-signer { width: 32px; height: 38px; border: 1px solid #f0c9cc; border-radius: 7px; background: #fff; color: #c74450; font-size: 17px; }
.remove-signer:disabled,[data-add-signer]:disabled { opacity: .4; cursor: not-allowed; }
.signer-counter { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; }
.process-builder-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.process-builder-head>div{display:flex;flex-direction:column}.process-builder-head b{font-size:12px}.process-builder-head small{color:var(--muted);font-size:9px;margin-top:3px}.process-builder-head .btn{padding:9px 11px;font-size:9px}.process-column-labels,.process-step-row{display:grid;grid-template-columns:32px 1fr 1.45fr 1fr .75fr 32px;gap:9px;align-items:center}.process-column-labels{padding:0 11px 6px;color:var(--muted);font-size:8px;font-weight:700}.process-step-row{padding:11px;border:1px solid var(--line);border-radius:9px;background:#fafbfc;margin-bottom:9px;transition:.18s}.process-step-row.dragging{opacity:.5;border-style:dashed;border-color:var(--orange)}.process-step-row label{margin:0}.process-step-row input,.process-step-row select{width:100%;height:38px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:0 9px;color:var(--navy);font-size:9px;box-sizing:border-box}.process-drag{cursor:grab;display:flex;flex-direction:column;align-items:center;color:#9da5b2}.process-drag b{width:23px;height:23px;border-radius:50%;background:#fff0e7;color:var(--orange);display:grid;place-items:center;font-size:9px}.process-drag i{font-style:normal;font-size:9px}.process-step-row [data-remove-process-step]{width:32px;height:38px;border:1px solid #f0c9cc;border-radius:7px;background:#fff;color:#c74450;font-size:16px}.process-preview{margin-top:22px;padding:16px;border:1px solid #dbe5f2;border-radius:10px;background:#f7faff}.process-preview>span{display:block;color:#60718a;font-size:8px;font-weight:800;letter-spacing:.6px;margin-bottom:14px}.process-preview #processPreviewTimeline{display:flex;align-items:flex-start}.process-preview-step{display:flex;flex:1;gap:8px;min-width:0}.process-preview-step>b{width:27px;height:27px;flex:0 0 27px;border:1px solid #cdd5df;border-radius:50%;display:grid;place-items:center;background:#fff;color:#7d8795;font-size:9px}.process-preview-step.active>b{background:var(--orange);border-color:var(--orange);color:#fff}.process-preview-step span{display:flex;min-width:0;flex-direction:column}.process-preview-step strong{font-size:9px}.process-preview-step small{margin-top:3px;color:var(--muted);font-size:8px;line-height:1.35}.process-preview #processPreviewTimeline>i{height:1px;flex:0 0 22px;background:#cdd5df;margin:13px 7px 0}
.builder-actions { display: flex; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.builder-actions span { flex: 1; }
.letter-preview { width: min(650px,100%); min-height: 720px; margin: 20px auto; padding: 42px 50px 52px; border: 1px solid #d9dce1; box-shadow: 0 12px 35px rgba(25,34,51,.08); background: #fff; font-family: var(--font-document); position: relative; }
.letter-preview > header { display: flex; gap: 15px; align-items: center; text-align: center; border-bottom: 3px double #17233a; padding-bottom: 10px; }
.letter-preview > header img { width: 58px; }
.letter-preview > header div { flex: 1; display: flex; flex-direction: column; }
.letter-preview > header b { font-size: 14px; }
.letter-preview > header strong { font-size: 16px; }
.letter-preview > header small { font-size: 9px; margin-top: 4px; }
.letter-preview main { font-size: 11px; line-height: 1.65; padding-top: 22px; }
.letter-preview main h3 { text-align: center; text-decoration: underline; }
.letter-preview main h2 { text-align: center; text-decoration: underline; font-size: 14px; }
.letter-preview main table { width: auto; font-family: var(--font-document); }
.letter-preview main td { border: 0; padding: 2px 18px 2px 0; }
.letter-preview > footer { display: flex; justify-content: flex-end; margin-top: 38px; font-size: 11px; line-height: 1.7; }
#previewSignature { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 45px; }
.preview-signer { min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; }
.preview-signer small { color: var(--muted); font-family: var(--font-body); font-size: 8px; margin-bottom: 38px; }
.preview-signer b { font-weight: 700; text-decoration: underline; }
.preview-signer em { font-style: normal; }
.preview-signer .empty-nip{visibility:hidden}
.letter-footer { position: absolute; left: 50px; right: 50px; bottom: 25px; padding-top: 7px; border-top: 1px solid #17233a; text-align: center; font-size: 8px; }
.letter-layout-preview-modal{width:min(900px,94vw)!important;max-height:92vh;padding:24px 28px!important;overflow:auto}.letter-layout-preview-modal #genericContent>h2{margin-bottom:4px}.letter-layout-preview-shell{margin-top:16px;padding:13px 18px 22px;border-radius:11px;background:#eef1f5}.letter-layout-preview-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#536176}.letter-layout-preview-toolbar span{font-size:10px;font-weight:800}.letter-layout-preview-toolbar small{font-size:8px}.letter-layout-modal-page{width:min(590px,100%);min-height:680px;margin:auto;padding:36px 44px 48px;background:#fff;border:1px solid #d4d8de;box-shadow:0 12px 28px rgba(25,34,51,.12);font-family:var(--font-document);box-sizing:border-box;position:relative}.letter-layout-modal-page header{display:flex;align-items:center;gap:14px;padding-bottom:10px;border-bottom:3px double #17233a;text-align:center}.letter-layout-modal-page header img{width:55px}.letter-layout-modal-page header div{display:flex;flex:1;flex-direction:column}.letter-layout-modal-page header b{font-size:13px}.letter-layout-modal-page header strong{font-size:15px}.letter-layout-modal-page header small{margin-top:4px;font-size:8px}.letter-layout-modal-page main{padding-top:28px;font-size:10px;line-height:1.7}.letter-layout-modal-page main h3{text-align:center;text-decoration:underline;margin:0}.letter-layout-modal-page .preview-number{text-align:center;margin:3px 0 30px}.letter-layout-modal-page .preview-placeholder{display:grid;gap:8px;margin:22px 0}.letter-layout-modal-page .preview-placeholder span{height:6px;border-radius:4px;background:#edf0f3}.letter-layout-modal-page .preview-placeholder span:nth-child(2){width:84%}.letter-layout-modal-page .preview-placeholder span:nth-child(3){width:92%}.letter-layout-modal-page .preview-placeholder span:nth-child(4){width:66%}.letter-layout-modal-page .preview-signature{width:210px;margin:40px 0 0 auto;text-align:center}.letter-layout-modal-page .preview-signature b{text-decoration:underline}.letter-layout-modal-page>footer{position:absolute;left:44px;right:44px;bottom:27px;padding-top:7px;border-top:1px solid #17233a;text-align:center;font-size:8px}.letter-layout-preview-modal .generic-actions{margin-top:14px}
.letter-layout-form-modal{width:min(880px,94vw)!important;max-height:92vh;padding:25px 28px!important;overflow:auto}.letter-layout-form-modal #genericContent>h2{margin-bottom:16px}.letter-wizard-progress{display:flex;align-items:center;margin-bottom:25px;padding:13px 16px;border-radius:10px;background:#f7f8fa}.letter-wizard-progress button{border:0;background:transparent;display:flex;align-items:center;gap:7px;color:#8a93a1;font-size:9px;font-weight:700}.letter-wizard-progress button b{width:27px;height:27px;border:1px solid #d8dde4;border-radius:50%;display:grid;place-items:center;background:#fff}.letter-wizard-progress button.active,.letter-wizard-progress button.complete{color:var(--navy)}.letter-wizard-progress button.active b,.letter-wizard-progress button.complete b{border-color:var(--orange);background:var(--orange);color:#fff}.letter-wizard-progress>i{height:1px;flex:1;background:#d8dde4;margin:0 7px}.letter-wizard-pane>h3{font:700 17px var(--font-heading);margin:7px 0 4px}.letter-wizard-pane>p{margin:0 0 18px;color:var(--muted);font-size:10px}.letter-logo-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.letter-logo-grid>label{font-size:10px;font-weight:700}.letter-logo-upload{height:105px;margin-top:7px;border:1px dashed #ef9f70;border-radius:9px;background:#fff8f3;position:relative;display:grid;grid-template-columns:55px 1fr;grid-template-rows:1fr 1fr;align-items:end;column-gap:12px;padding:13px;box-sizing:border-box;cursor:pointer}.letter-logo-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.letter-logo-upload img{grid-row:1/3;width:52px;height:52px;object-fit:contain;align-self:center}.letter-logo-upload.empty img{display:none}.letter-logo-upload.empty:before{content:'＋';grid-row:1/3;width:52px;height:52px;border-radius:8px;background:#fff;color:var(--orange);display:grid;place-items:center;font-size:19px;align-self:center}.letter-logo-upload b{font-size:10px}.letter-logo-upload small{align-self:start;color:var(--muted);font-size:8px}.letter-logo-grid>label>em{display:flex;align-items:center;gap:6px;margin-top:7px;font-style:normal;font-size:9px;font-weight:500;color:#657084}.letter-wizard-field{display:flex;flex-direction:column;gap:7px;margin-top:16px;font-size:10px;font-weight:700}.letter-wizard-field textarea{min-height:86px;border:1px solid var(--line);border-radius:8px;padding:11px;font:inherit;resize:vertical}.letter-layout-form-modal .generic-actions{align-items:center}.letter-action-spacer{flex:1}.letter-wizard-preview{padding:15px;border-radius:10px;background:#eef1f5}.letter-wizard-page{width:min(500px,100%);min-height:570px;margin:auto;padding:30px 36px 42px;background:#fff;border:1px solid #d5dae1;box-shadow:0 10px 25px rgba(22,31,47,.1);box-sizing:border-box;position:relative;font-family:var(--font-document)}.letter-wizard-page header{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:10px;padding-bottom:9px;border-bottom:3px double #17233a;text-align:center}.letter-wizard-page header.has-no-header-left{grid-template-columns:1fr 52px}.letter-wizard-page header.has-no-header-left div{grid-column:1}.letter-wizard-page header.has-no-header-left img:last-child{grid-column:2}.letter-wizard-page header.has-no-header-right{grid-template-columns:52px 1fr}.letter-wizard-page header.has-no-header-right div{grid-column:2}.letter-wizard-page header.has-no-header-left.has-no-header-right{grid-template-columns:1fr}.letter-wizard-page header.has-no-header-left.has-no-header-right div{grid-column:1}.letter-wizard-page header img{width:50px;height:50px;object-fit:contain}.letter-wizard-page header div{grid-column:2;display:flex;flex-direction:column}.letter-wizard-page header img:last-child{grid-column:3}.letter-wizard-page header b{font-size:11px}.letter-wizard-page header strong{font-size:13px}.letter-wizard-page header small{font-size:7px;margin-top:3px}.letter-wizard-page main{text-align:center;padding-top:28px;font-size:9px}.letter-wizard-page main h4{font-size:12px;text-decoration:underline;margin:0}.letter-wizard-page main>div{display:grid;gap:8px;margin-top:35px}.letter-wizard-page main i{height:5px;border-radius:4px;background:#edf0f3}.letter-wizard-page main i:nth-child(2){width:88%}.letter-wizard-page main i:nth-child(3){width:95%}.letter-wizard-page main i:nth-child(4){width:72%}.letter-wizard-page footer{position:absolute;left:36px;right:36px;bottom:24px;min-height:37px;border-top:1px solid #17233a;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;text-align:center;font-size:7px}.letter-wizard-page footer img{width:36px;height:30px;object-fit:contain}.letter-wizard-page footer span{grid-column:2}.letter-wizard-page footer img:last-child{grid-column:3}
.letter-layout-page-builder{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}.letter-layout-page-builder>.letter-wizard-progress{position:sticky;top:130px;margin:0;padding:20px;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:12px}.letter-layout-page-builder>.letter-wizard-progress button{width:100%;padding:5px 0;text-align:left}.letter-layout-page-builder>.letter-wizard-progress button b{width:32px;height:32px}.letter-layout-page-builder>.letter-wizard-progress>i{width:1px;height:28px;flex:none;margin:2px 0 2px 16px}.letter-layout-form-shell{min-height:590px;padding:28px}.letter-layout-form-shell .generic-actions{display:flex;align-items:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.letter-contact-groups{display:grid;gap:16px;margin-top:20px}.letter-contact-group{padding-top:16px;border-top:1px solid var(--line)}.letter-contact-group-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.letter-contact-group-head h4{margin:0;color:var(--navy);font-size:var(--text-body)}.letter-contact-group-head p{margin:3px 0 0!important;font-size:var(--text-small)!important}.letter-contact-group-head .letter-contact-limit{color:var(--orange);font-weight:700}.letter-contact-group-head .btn{min-height:36px;padding:7px 10px;font-size:var(--text-small)}.letter-contact-group [data-letter-contact-list]{display:grid;gap:8px;margin-top:10px}.letter-contact-row{grid-template-columns:48px minmax(0,1fr) 52px}.letter-contact-row .repeater-row-order{align-self:end;cursor:grab}.letter-contact-row input:focus{border-color:var(--orange);outline:0;box-shadow:0 0 0 3px rgba(232,111,45,.12)}.letter-contact-row .repeater-row-actions{height:44px}.letter-contact-row .repeater-row-remove{width:44px;height:44px;padding:0;display:grid;place-items:center;border-color:#f0c9cc;color:#c74450}.letter-contact-row .repeater-row-remove:hover{border-color:#df8f96;background:#fff4f5}.letter-contact-row .repeater-row-remove .ui-icon{width:19px;height:19px;stroke-width:1.8}.letter-wizard-page header strong[data-letter-preview-title]{font-size:13px;line-height:1.2;white-space:pre-line}.letter-wizard-page header small[data-letter-preview-contact]{font-size:6px;line-height:1.25}
.letter-readonly-badge{align-self:center;padding:7px 11px}.letter-layout-readonly input:disabled,.letter-layout-readonly textarea:disabled,.letter-layout-readonly select:disabled{opacity:1;background:#f5f6f8!important;color:#566174;cursor:not-allowed}.letter-layout-readonly .letter-logo-upload{border-color:#d9dde4;background:#f5f6f8;cursor:default}.letter-layout-readonly .letter-logo-upload input{cursor:not-allowed}.letter-layout-readonly .letter-logo-grid>label>em{color:#8b94a2}.letter-layout-readonly .letter-wizard-pane>p:after{content:' Seluruh data ditampilkan dalam mode baca saja.';color:#8b5e42}
@media(max-width:1050px){.process-column-labels{display:none}.process-step-row{grid-template-columns:28px 1fr 1fr 32px}.process-step-row label:nth-of-type(3),.process-step-row label:nth-of-type(4){grid-column:2/3}.process-step-row [data-remove-process-step]{grid-column:4;grid-row:1/3}.process-preview #processPreviewTimeline{overflow:auto;padding-bottom:5px}.process-preview-step{min-width:145px}}
@media(max-width:900px){.service-builder{grid-template-columns:1fr}.builder-steps{position:static;display:flex}.builder-steps>i{width:20px;height:1px;margin:20px 2px}.builder-steps button span{display:none}}
@media(max-width:900px){.letter-layout-page-builder{grid-template-columns:1fr}.letter-layout-page-builder>.letter-wizard-progress{position:static;flex-direction:row;align-items:center}.letter-layout-page-builder>.letter-wizard-progress>i{width:auto;height:1px;flex:1;margin:0 4px}.letter-layout-page-builder>.letter-wizard-progress button{width:auto}.letter-layout-page-builder>.letter-wizard-progress button span{display:none}}
@media(max-width:620px){.builder-grid,.layout-choice{grid-template-columns:1fr}.builder-content{padding:18px}.letter-preview{padding:25px 20px 45px}.letter-footer{left:20px;right:20px}.signature-heading{align-items:flex-start;gap:10px}.signer-row{grid-template-columns:1fr 32px}.signer-row label:nth-child(2){grid-column:1}.signer-row .remove-signer{grid-column:2;grid-row:1/3}#previewSignature{grid-template-columns:1fr}.body-preset{align-items:flex-start;flex-direction:column}.body-preset select{width:100%;min-width:0}.body-tools button:last-child{margin-left:0}.letter-layout-preview-modal{padding:20px 12px!important}.letter-layout-preview-toolbar{align-items:flex-start;flex-direction:column;gap:3px}.letter-layout-modal-page{min-height:610px;padding:25px 20px 45px}.letter-layout-modal-page header img{width:42px}.letter-layout-modal-page header strong{font-size:11px}.letter-layout-modal-page>footer{left:20px;right:20px}}
@media(max-width:620px){.letter-layout-form-modal{padding:20px 12px!important}.letter-wizard-progress button span{display:none}.letter-wizard-progress>i{margin:0 3px}.letter-logo-grid{grid-template-columns:1fr}.letter-wizard-page{min-height:500px;padding:22px 15px 40px}.letter-wizard-page footer{left:15px;right:15px}}

/* Footer profesional khusus Tampilan Pemohon utama. */
.public-footer { background: #101d35; color: #fff; padding: 0 7vw; }
.footer-main { max-width: 1180px; margin: auto; padding: 60px 0 48px; display: grid; grid-template-columns: 1.4fr .85fr 1fr; gap: 76px; }
.footer-identity > p { max-width: 430px; margin: 22px 0; color: #aeb8c9; font-size: 14px; line-height: 1.75; }
.footer-brand { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.footer-brand img { width: 54px; }
.footer-brand span { display: flex; flex-direction: column; }
.footer-brand b { font: 700 18px var(--font-heading); }
.footer-brand small { color: #aeb8c9; font-size: 12px; margin-top: 3px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; text-decoration: none; overflow: hidden; transition: .2s; }
.footer-social a[hidden] { display: none!important; }
.footer-social a:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-2px); }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.footer-column h3 { margin: 3px 0 12px; color: #fff; font: 700 16px var(--font-heading); }
.footer-column a,.footer-column button { border: 0; padding: 0; background: transparent; color: #aeb8c9; font: 500 13px/1.5 var(--font-body); text-align: left; text-decoration: none; }
.footer-column a:hover,.footer-column button:hover { color: #fff; }
.footer-contact p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; color: #aeb8c9; font-size: 13px; line-height: 1.6; }
.footer-contact p b { color: #fff; }
.footer-bottom { max-width: 1180px; margin: auto; min-height: 72px; border-top: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: space-between; color: #9aa5b7; font-size: 11px; }
.footer-bottom div { display: flex; gap: 26px; }
.footer-bottom a { color: #aeb8c9; text-decoration: none; }
.footer-brand:hover,.footer-brand:focus-visible,.footer-column a:hover,.footer-column a:focus-visible,.footer-bottom a:hover,.footer-bottom a:focus-visible { text-decoration: none; }
.footer-brand:focus-visible,.footer-column a:focus-visible,.footer-column button:focus-visible,.footer-bottom a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 3px; }
.public-app.compact-flow .public-footer { display: none; }
.footer-manager-layout { display: grid; gap: 18px; align-items: start; }
.footer-manager-preview h3 { margin: 0 0 14px; font: 700 14px var(--font-heading); }
.footer-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.footer-section-head.is-divided { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.footer-section-head > div { min-width: 0; }
.footer-section-head h3 { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--navy); font: 700 16px var(--font-heading); }
.footer-section-head h3::before { content: ''; width: 4px; height: 20px; flex: none; border-radius: 4px; background: var(--orange); }
.footer-section-head p { max-width: 680px; margin: 6px 0 0; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.55; }
.footer-section-head .btn { min-height: 40px; flex: none; padding: 10px 14px; font-size: 13px; }
.footer-manager-form .builder-grid { margin-bottom: 0; }
.footer-manager-form .builder-grid > .wide { grid-column: 1/-1; }
.footer-manager-form textarea { min-height: 96px; }
.footer-description-field { padding: 16px; border: 1px solid #dfe5ed; border-radius: 11px; background: #f8fafc; }
.footer-description-field > .field-label { color: var(--navy); font-size: 13px; }
.footer-description-field textarea { width: 100%; min-height: 124px; box-sizing: border-box; resize: vertical; border: 1px solid #cfd6e1; border-radius: 9px; background: #fff; padding: 12px 14px; color: var(--navy); font: 400 14px/1.6 var(--font-body); outline: 0; transition: border-color .18s,box-shadow .18s; }
.footer-description-field textarea::placeholder { color: #919aaa; }
.footer-description-field textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,111,45,.12); }
.footer-manager-form .footer-description-field > small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
.footer-contact-fields { padding: 18px; border: 1px solid #dfe5ed; border-radius: 11px; background: #f8fafc; }
.footer-contact-fields label { color: var(--navy); font-size: 12px; }
.footer-contact-fields input,.footer-contact-fields textarea { width: 100%; box-sizing: border-box; border: 1px solid #cfd6e1; border-radius: 9px; background: #fff; color: var(--navy); font: 400 13px/1.55 var(--font-body); outline: 0; transition: border-color .18s,box-shadow .18s; }
.footer-contact-fields input { height: 44px; padding: 0 12px; }
.footer-contact-fields textarea { min-height: 112px; padding: 12px 14px; resize: vertical; }
.footer-contact-fields input:focus,.footer-contact-fields textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,111,45,.12); }
.footer-dynamic-row,.repeater-row { display: grid; gap: 9px; align-items: center; }
.footer-social-row { grid-template-columns: 32px 72px 1fr; }
.footer-link-row { grid-template-columns: 48px 1fr 1.8fr 52px; }
.footer-dynamic-row,.repeater-row { margin-bottom: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfc; transition: .18s; }
.footer-dynamic-row.dragging,.repeater-row.dragging { opacity: .5; border-style: dashed; border-color: var(--orange); background: #fff6f0; }
.footer-dynamic-row label,.repeater-row label { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-dynamic-row .field-label,.repeater-row .field-label { font-size: 13px; }
.footer-dynamic-row input:not([type="file"]),.repeater-row input:not([type="file"]) { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 0 11px; color: var(--navy); font-size: 13px; }
.footer-drag,.repeater-row-order { min-width: 44px; min-height: 54px; border: 0; border-radius: 8px; background: transparent; padding: 4px; cursor: grab; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #778294; }
.footer-drag:hover,.repeater-row-order:hover { background: #fff4ec; color: var(--orange); }.footer-drag:focus-visible,.repeater-row-order:focus-visible { outline: 3px solid rgba(232,111,45,.28); outline-offset: 2px; }.footer-drag:active,.repeater-row-order:active { cursor: grabbing; }
.footer-drag b,.repeater-row-order b { width: 26px; height: 26px; border-radius: 50%; background: #fff0e7; color: var(--orange); display: grid; place-items: center; font-size: 12px; }
.footer-drag i,.repeater-row-order i { width: 20px; height: 20px; display: grid; place-items: center; pointer-events: none; }
.footer-drag-icon { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.table-sort { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; cursor: pointer; }
.table-sort:hover, .table-sort.is-active { color: var(--orange); }
.table-sort:focus-visible { outline: 3px solid rgba(232,111,45,.28); outline-offset: 3px; border-radius: 4px; }
.table-sort__icon { display: inline-grid; place-items: center; opacity: .45; }
.table-sort.is-active .table-sort__icon, .table-sort:hover .table-sort__icon { opacity: 1; }
.table-sort__icon svg { width: 13px; height: 13px; }
.letter-logo-field { font-size: 10px; font-weight: 700; }
.letter-logo-upload:focus-within { outline: 3px solid rgba(232,111,45,.28); outline-offset: 2px; }
.letter-logo-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 9px; font-weight: 500; color: #657084; }
.letter-logo-actions label { display: flex; align-items: center; gap: 6px; }
.letter-logo-actions .btn { min-height: 30px; padding: 4px 10px; font-size: 9px; }
.letter-layout-name small, .letter-layout-header small { display: block; margin-top: 3px; color: var(--muted); font-weight: 400; white-space: pre-line; }
.table-row-number { width: 56px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.footer-logo-input button { width: 54px; height: 38px; border: 1px dashed #ef9f70; border-radius: 8px; background: #fff8f3; color: var(--orange); font-weight: 800; overflow: hidden; }
.footer-logo-input img { width: 100%; height: 100%; object-fit: contain; display: block; }
.footer-dynamic-row [data-remove-footer-social],.footer-dynamic-row [data-remove-footer-link] { width: 32px; height: 38px; border: 1px solid #f0c9cc; border-radius: 7px; background: #fff; color: #c74450; font-size: 16px; }
.footer-link-actions,.repeater-row-actions { align-self: end; display: flex; justify-content: flex-end; }
.footer-link-actions button,.repeater-row-actions button { min-height: 40px; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 0 13px; color: var(--navy); font-size: 12px; font-weight: 700; }
/* Tombol icon hapus bersama (`ui.iconButton({ variant: 'danger' })` dan hapus baris repeater) di luar `.repeater-row-actions`. */
.ui-icon-button.is-danger { width: 40px; height: 40px; min-height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid #f0c9cc; border-radius: 7px; background: #fff; color: #c74450; cursor: pointer; }
.ui-icon-button.is-danger:hover { border-color: #df8f96; background: #fff4f5; }
.ui-icon-button.is-danger:focus-visible { outline: 3px solid rgba(199, 68, 80, .2); outline-offset: 2px; }
.ui-icon-button.is-danger:disabled { opacity: .45; cursor: not-allowed; }
.footer-link-actions [data-remove-footer-link] { width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; border-color: #f0c9cc; padding: 0; color: #c74450; }
.footer-link-actions [data-remove-footer-link]:hover { border-color: #df8f96; background: #fff4f5; }
.footer-link-actions [data-remove-footer-link]:focus-visible { outline: 3px solid rgba(199,68,80,.16); outline-offset: 2px; }
.footer-delete-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-form-actions { display: flex; justify-content: flex-end; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.footer-form-actions .btn { min-height: 44px; padding: 11px 18px; font-size: 13px; }
.footer-load-state,.footer-load-error { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 12px 14px; color: var(--muted); font-size: 10px; }
.footer-load-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-color: #efc2c6; background: #fff4f5; color: #b73743; }
.managed-footer-preview-card { background: #101d35; color: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 35px rgba(16,29,53,.18); }
.managed-footer-main { padding: 48px 50px 40px; display: grid; grid-template-columns: 1.4fr .85fr 1fr; gap: 56px; }
.managed-footer-identity a { display: inline-flex; align-items: center; gap: 14px; color: #fff; }
.managed-footer-identity img { width: 50px; }
.managed-footer-identity span { display: flex; flex-direction: column; }
.managed-footer-identity b { font: 700 17px var(--font-heading); }
.managed-footer-identity small,.managed-footer-identity p,.managed-footer-column span,.managed-footer-column p,.managed-footer-bottom { color: #aeb8c9; font-size: 12px; line-height: 1.7; }
.managed-footer-identity p { max-width: 390px; margin: 20px 0; }
.managed-footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.managed-footer-column h4 { margin: 3px 0 11px; color: #fff; font: 700 15px var(--font-heading); }
.managed-footer-column p { display: flex; flex-direction: column; gap: 5px; margin: 0 0 9px; }
.managed-footer-column p b { color: #fff; }
.managed-footer-bottom { min-height: 68px; margin: 0 50px; border-top: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: space-between; color: #9aa5b7; }
.managed-footer-bottom div { display: flex; gap: 24px; }
.footer-social a img { display: block; width: auto; height: auto; max-width: 24px; max-height: 24px; object-fit: contain; margin: auto; flex: 0 0 auto; }
@media(max-width:760px){.footer-main{grid-template-columns:1fr;gap:38px;padding:46px 0 36px}.footer-bottom{padding:18px 0;flex-direction:column;justify-content:center;gap:12px;text-align:center}}
@media(max-width:900px){.managed-footer-main{grid-template-columns:1fr;gap:32px;padding:34px 28px}.managed-footer-bottom{margin:0 28px;padding:15px 0;flex-direction:column;justify-content:center;gap:9px;text-align:center}}
@media(max-width:900px){.footer-social-row{grid-template-columns:28px 72px 1fr}.footer-link-row{grid-template-columns:44px minmax(0,1fr) 44px}.footer-link-row>.footer-drag{grid-column:1;grid-row:1/3;align-self:center}.footer-link-row>label{grid-column:2/-1}.footer-link-row>label:nth-of-type(2){grid-column:2}.footer-link-actions{grid-column:3;grid-row:2}.footer-dynamic-row [data-remove-footer-link]{grid-column:auto;grid-row:auto}}
@media(max-width:620px){.footer-section-head{align-items:flex-start;flex-direction:column;gap:12px}.footer-section-head .btn{width:100%}.footer-contact-fields{padding:14px}.footer-form-actions .btn{width:100%}}

@media(max-width:760px){.survey-detail-wizard{grid-template-columns:1fr}.survey-detail-steps{display:flex;align-items:center}.survey-detail-steps>i{width:auto;height:1px;flex:1;margin:0 4px}.survey-detail-steps button span{display:none}.survey-detail-grid,.survey-score-list div{grid-template-columns:1fr}}

/* Kelompok layanan Homepage 1. */
#servicesPage .filter-row { display: grid; grid-template-columns: 1fr 245px; align-items: stretch; gap: 14px; }
.public-category-buttons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.public-category-buttons button { min-height: 58px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 8px 10px; display: grid; grid-template-columns: 34px 1fr 12px; gap: 8px; align-items: center; text-align: left; color: var(--navy); }
.public-category-buttons .compact-group-icon { width: 34px; height: 34px; font-size: 13px; }
.public-category-buttons b { font-size: 10px; line-height: 1.3; }
.public-category-buttons i { color: #aeb3bc; font-style: normal; }
.public-category-buttons button.active { border-color: var(--orange); background: #fff8f3; box-shadow: 0 6px 16px rgba(232,111,45,.1); }
#servicesPage .public-group-search { width: 100%; margin: 0; }
@media(max-width:1000px){#servicesPage .filter-row{grid-template-columns:1fr}.public-category-buttons{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.public-category-buttons{grid-template-columns:1fr}}

/* Builder field input pemohon pada wizard Jenis Layanan. */
.field-builder-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.field-builder-head > div { display: flex; flex-direction: column; }
.field-builder-head b { font-size: 12px; }
.field-builder-head small,.field-builder-note { color: var(--muted); font-size: 9px; margin-top: 3px; }
.field-builder-head .btn { padding: 9px 11px; font-size: 9px; }
#serviceFieldList { display: grid; gap: 9px; }
.field-builder-group{padding:14px;border:1px solid var(--line);border-radius:11px;background:#fff}
.field-builder-group[data-field-group="identity"]{border-color:#d9e5f4;background:#f8fbff}
.field-builder-group[data-field-group="detail"]{border-color:#f0ddcf;background:#fffaf7}
.field-builder-group .field-builder-head{margin-bottom:11px}
.field-builder-group .field-builder-head b{font-size:13px}
.service-field-list{display:grid;gap:9px}
.service-field-row { display: grid; grid-template-columns: 22px 1.2fr 1fr 1fr 72px 32px; gap: 9px; align-items: end; border: 1px solid var(--line); border-radius: 9px; padding: 12px; background: #fafbfc; }
.service-field-row label { display: flex; flex-direction: column; gap: 6px; font-size: 9px; font-weight: 700; }
.service-field-row input:not([type="checkbox"]),.service-field-row select { width: 100%; height: 37px; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 0 9px; color: var(--navy); }
.service-field-row .service-field-key { background: #f1f3f6!important; color: var(--muted); }
.field-drag { align-self: center; width: 22px; min-height: 38px; color: #aeb3bc; cursor: grab; display: flex; flex-direction: column; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; -webkit-user-drag: element; touch-action: none; }
.field-drag * { pointer-events: none; user-select: none; -webkit-user-select: none; }
.field-drag:active { cursor: grabbing; }
.field-drag b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #eef1f5; color: var(--navy); font-size: 8px; }
.field-drag i { font-style: normal; font-size: 10px; line-height: 10px; }
.service-field-row.field-dragging { opacity: .48; border: 1px dashed var(--orange); background: #fff3eb; box-shadow: 0 10px 25px rgba(32,41,58,.1); }
.field-required { height: 37px; flex-direction: row!important; align-items: center; }
.service-field-row [data-remove-service-field] { width: 32px; height: 37px; border: 1px solid #f0c9cc; border-radius: 7px; background: #fff; color: #c74450; font-size: 16px; }
.service-field-row.field-duplicate,.service-field-row.field-empty { border-color: #df5c66; background: #fff7f7; box-shadow: 0 0 0 2px rgba(199,68,80,.06); }
.service-field-row.field-duplicate .service-field-label,.service-field-row.field-duplicate .service-field-key,.service-field-row.field-empty .service-field-label,.service-field-row.field-empty .service-field-key { border-color: #df5c66!important; }
.document-upload-config{grid-column:2/-1;display:grid;grid-template-columns:minmax(260px,1fr) minmax(210px,auto);align-items:end;gap:10px;margin-top:2px;padding:11px;border:1px dashed #efaf86;border-radius:8px;background:#fff8f3}
.document-upload-config label{color:var(--navy)}
.document-upload-config input[type="file"]{padding:6px 8px!important;background:#fff!important;font-size:9px}
.document-upload-config input[type="file"]::file-selector-button{height:25px;margin-right:9px;border:0;border-radius:5px;padding:0 10px;background:var(--orange);color:#fff;font-size:8px;font-weight:700;cursor:pointer}
.document-upload-config small{align-self:center;color:var(--muted);font-size:8px;line-height:1.45}
.document-upload-config small.error{color:#c74450;font-weight:700}
.unique-field-warning { margin-top: 10px; padding: 11px 13px; border: 1px solid #efc2c6; border-radius: 8px; background: #fff4f5; color: #b73743; display: flex; align-items: flex-start; gap: 10px; }
.unique-field-warning > span { width: 22px; height: 22px; border-radius: 50%; background: #c74450; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.unique-field-warning p { margin: 0; display: flex; flex-direction: column; }
.unique-field-warning b { font-size: 10px; }
.unique-field-warning small { margin-top: 3px; color: #a94b54; font-size: 9px; }
.field-builder-note { display: block; margin-top: 11px; }
@media(max-width:980px){.service-field-row{grid-template-columns:22px 1fr 1fr 32px}.service-field-row label:nth-of-type(3){grid-column:2}.field-required{grid-column:3}.service-field-row [data-remove-service-field]{grid-column:4;grid-row:1/3}}
@media(max-width:620px){.field-builder-head{align-items:flex-start;gap:10px}.service-field-row{grid-template-columns:18px 1fr 32px}.service-field-row label{grid-column:2}.service-field-row label:nth-of-type(3),.field-required{grid-column:2}.service-field-row [data-remove-service-field]{grid-column:3;grid-row:1/5}.document-upload-config{grid-column:2/-1;grid-template-columns:1fr}.document-upload-config label{grid-column:auto}}

/* Modal finalisasi dokumen dengan tanda tangan dan cap basah. */
.wet-sign-flow { margin-top: 18px; padding: 4px 0; }
.wet-sign-step { display: grid; grid-template-columns: 32px 1fr; gap: 11px; align-items: flex-start; }
.wet-sign-step > b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); font-size: 11px; }
.wet-sign-step > div { display: flex; flex-direction: column; align-items: flex-start; }
.wet-sign-step strong { font-size: 11px; }
.wet-sign-step small { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 4px 0 10px; }
.wet-sign-step .btn { font-size: 9px; padding: 9px 11px; }
.wet-sign-line { width: 1px; height: 23px; background: var(--line); margin: 4px 0 4px 15px; }
.wet-sign-upload { width: 100%; min-height: 62px; border: 1px dashed #efaf86; border-radius: 8px; background: #fff8f3; display: flex; align-items: center; gap: 9px; padding: 12px; color: var(--orange); }
.wet-sign-upload span { font-size: 18px; }
.wet-sign-upload em { font-style: normal; font-size: 9px; font-weight: 700; }
#wetSignFileName { margin: 8px 0 0; padding: 8px 10px; border-radius: 7px; background: #eef8f3; color: var(--green); font-size: 9px; }

/* Filter rentang laporan Survei Kepuasan. */
.survey-report-actions { display: flex; align-items: center; gap: 9px; }
.survey-report-actions .btn { white-space: nowrap; }
.survey-report-actions [data-survey-filter] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.survey-report-actions [data-survey-filter] svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.survey-filter-summary { align-self: center; padding: 7px 10px; border-radius: 7px; background: #f4f6f9; color: var(--muted); font-size: 9px; }
.survey-range-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 17px; }
.survey-range-form label { display: flex; flex-direction: column; gap: 7px; font-size: 10px; font-weight: 700; }
.survey-range-form label.wide { grid-column: 1/-1; }
.survey-range-form input,.survey-range-form select { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: #fff; color: var(--navy); }
.export-range-note{min-height:42px;padding:10px 12px;border:1px solid #d9e7fb;border-radius:8px;background:#f2f7ff;display:flex!important;flex-direction:row!important;align-items:center;gap:9px!important;color:#52647d}.export-range-note span{font-size:14px}.export-range-note small{font-size:9px;font-weight:500;line-height:1.45}
.survey-stats article { transition: transform .2s,box-shadow .2s,border-color .2s; }
.survey-stats article:hover { transform: translateY(-2px); border-color: #efb38c; box-shadow: 0 10px 24px rgba(28,38,55,.08); }
.survey-stats article b { transition: color .2s; }
.survey-stats article:hover b { color: var(--orange); }
.survey-pagination { margin-top: 0; min-width: 920px; }
.survey-pagination button:disabled { opacity: .4; cursor: not-allowed; }
.survey-empty { padding: 38px!important; text-align: center; color: var(--muted); }
@media(max-width:720px){#surveys>.page-title{gap:12px;flex-direction:column}.survey-report-actions{width:100%}.survey-report-actions .btn{flex:1;font-size:9px}.survey-range-form{grid-template-columns:1fr}.survey-range-form label.wide{grid-column:auto}}
.admin-app.operational-admin .superadmin-only{display:none!important}
.admin-app.service-admin .sidebar nav>*{display:none!important}
.admin-app.service-admin .sidebar nav .service-menu-group,
.admin-app.service-admin .sidebar nav [data-admin-page="dashboard"],
.admin-app.service-admin .sidebar nav [data-admin-page="submissions"],
.admin-app.service-admin .sidebar nav [data-admin-page="surveys"]{display:flex!important}
.admin-app.service-admin #dashboard>.page-title .btn-primary{display:none!important}
.admin-scope-banner{display:none!important}
.admin-scope-banner b{color:#ef6c2c;white-space:nowrap}
#users td b small{display:block;margin-top:4px;color:#98a0b3;font-weight:400}
#users .badge{white-space:nowrap}
.field-disabled{opacity:.55}
@media(max-width:900px){.admin-scope-banner{margin:16px 16px 0;align-items:flex-start;flex-direction:column;gap:4px}}
.service-category-label{display:inline-block;max-width:150px;color:#465066;font-size:12px;font-weight:700;line-height:1.35}
.builder-grid label>small{color:var(--muted);font-size:8px;font-weight:500;line-height:1.45}
.estimate-number-field{display:flex;align-items:stretch}.estimate-number-field input{min-width:0;border-radius:8px 0 0 8px!important}.estimate-number-field span{display:flex;align-items:center;padding:0 14px;border:1px solid var(--line);border-left:0;border-radius:0 8px 8px 0;background:#f6f7f9;color:#5c6677;font-size:10px;font-weight:700;white-space:nowrap}
.process-column-labels,.process-step-row{grid-template-columns:32px minmax(125px,1fr) minmax(175px,1.45fr) minmax(130px,1fr) minmax(155px,1.1fr) 32px}
.process-step-row{align-items:start}.process-step-row>.process-drag{margin-top:3px}.process-step-row>[data-remove-process-step]{margin-top:0}
.process-estimate{display:grid;grid-template-columns:1fr;align-items:start;gap:7px}.process-estimate input,.process-estimate select{min-width:0}
.process-processor{display:flex;min-width:0;flex-direction:column;gap:5px}.process-processor small{color:var(--muted);font-size:8px;font-weight:500;line-height:1.35}.process-assignee{display:block;margin-top:5px;color:#68758a;font-size:8px;font-style:normal;font-weight:700}.approve-page-action:disabled,.reject-page-action:disabled{opacity:.48;cursor:not-allowed}
.process-range-inputs{display:grid;grid-template-columns:minmax(0,5fr) minmax(74px,2fr);align-items:center;gap:0}.process-range-inputs b{height:38px;display:flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid #dfe3e9;border-left:0;border-radius:0 7px 7px 0;background:#eef2f6;color:#536176;font-size:8px;white-space:nowrap}.process-range-inputs input{padding:0 8px;text-align:left;border-radius:7px 0 0 7px!important}
.process-preview #processPreviewTimeline{max-width:100%;overflow-x:auto;overflow-y:hidden;padding:0 2px 12px;scrollbar-gutter:stable}.process-preview-step{flex:0 0 155px;min-width:155px}.process-preview #processPreviewTimeline>i{flex:0 0 28px}.process-preview #processPreviewTimeline::-webkit-scrollbar{height:7px}.process-preview #processPreviewTimeline::-webkit-scrollbar-track{border-radius:20px;background:#e8edf4}.process-preview #processPreviewTimeline::-webkit-scrollbar-thumb{border-radius:20px;background:#aeb9c8}.process-preview #processPreviewTimeline::-webkit-scrollbar-thumb:hover{background:#8795a8}
@media(max-width:1050px){.process-step-row{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 32px}.process-step-row label:nth-of-type(3){grid-column:2}.process-step-row label:nth-of-type(4){grid-column:3}.process-step-row [data-remove-process-step]{grid-column:4;grid-row:1/3}.process-estimate{grid-template-columns:1fr}}
@media(max-width:620px){.process-estimate{grid-template-columns:1fr}.process-range-inputs{grid-template-columns:minmax(70px,1fr) auto}}
.service-field-row.system-field{border-color:#d9e5f4;background:#f7faff}.service-field-row.system-field input:read-only,.service-field-row.system-field select:disabled{opacity:1;background:#eef3f8!important;color:#536176;cursor:not-allowed}.service-field-row.system-field .field-drag{cursor:default;-webkit-user-drag:none}.system-field-badge{height:37px;display:grid;place-items:center;border-radius:7px;background:#e8f6ef;color:var(--green);font-size:9px;font-weight:800}
.service-field-row{align-items:start}.service-field-row>.field-drag{margin-top:18px}.service-field-row>.field-required,.service-field-row>[data-remove-service-field],.service-field-row>.system-field-badge{margin-top:21px}
.footer-social-row.fixed-social-row{grid-template-columns:68px 120px minmax(0,1fr)}.fixed-social-row{cursor:default}.fixed-social-icon{width:42px;height:38px;display:grid;place-items:center;border:1px solid #263958;border-radius:8px;background:#11203b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.social-brand-logo{display:block;width:25px;height:25px;flex:0 0 25px}.footer-social a .social-brand-logo{width:24px;height:24px}.fixed-social-row>b{font-size:13px}.fixed-social-row label{grid-column:auto!important}
.footer-social .footer-outline-logo,.fixed-social-icon .footer-outline-logo{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.footer-social .footer-outline-logo .footer-logo-dot,.fixed-social-icon .footer-outline-logo .footer-logo-dot{fill:#fff;stroke:none}
@media(max-width:620px){.service-field-row.system-field{grid-template-columns:18px 1fr 58px}.service-field-row.system-field .system-field-badge{grid-column:3;grid-row:1/5}.footer-social-row.fixed-social-row{grid-template-columns:48px 1fr}.fixed-social-row label{grid-column:1/-1!important}}
@media(max-width:620px){.signer-row{grid-template-columns:1fr 32px}.signer-row label{grid-column:1!important}.signer-row .remove-signer{grid-column:2;grid-row:1/4}}
.public-field-label{display:inline-flex;align-items:center;align-self:flex-start;gap:5px;line-height:1.2}.public-field-label>span{display:inline}.public-field-label small{color:var(--muted);font-size:9px;font-weight:500}.required-mark{color:#ef2b2d;font-size:14px;font-weight:800;line-height:1}
.public-document-field{display:flex;flex-direction:column;gap:7px!important}.public-document-example{align-self:flex-start;max-width:100%;display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid #cfdcec;border-radius:8px;background:#f4f8fd;color:#315f96;text-decoration:none;font-size:9px;font-weight:800}.public-document-example:hover{border-color:#94b6dd;background:#edf5ff}.public-document-example small{max-width:260px;overflow:hidden;text-overflow:ellipsis;color:#71849a;font-weight:500;white-space:nowrap}.public-document-upload{position:relative;min-height:108px;display:grid!important;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px!important;padding:18px;border:1.5px dashed #ef9d6d;border-radius:12px;background:linear-gradient(135deg,#fffaf7,#fff4ec);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}.public-document-upload:hover{border-color:var(--orange);box-shadow:0 8px 22px rgba(232,111,45,.1);transform:translateY(-1px)}.public-document-upload:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}.public-document-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:11px;background:var(--orange);color:#fff;font-size:23px;box-shadow:0 7px 16px rgba(232,111,45,.2)}.public-document-copy{min-width:0;display:flex;flex-direction:column;gap:5px}.public-document-copy b{font-size:12px;color:var(--navy)}.public-document-copy small{font-size:9px;font-weight:500;line-height:1.5;color:var(--muted)}.public-document-button{padding:9px 12px;border:1px solid #efc0a5;border-radius:8px;background:#fff;color:var(--orange);font-size:9px;font-weight:800;white-space:nowrap}.public-document-input{position:absolute!important;inset:0;width:100%!important;height:100%!important;padding:0!important;opacity:0;cursor:pointer}.public-document-selected{padding-left:3px;color:var(--muted);font-size:9px;font-weight:500}.public-document-selected.has-file{color:var(--green);font-weight:700}
.form-step[data-step="2"]>.form-grid:not(:empty){margin-bottom:22px}.form-step[data-step="2"] .upload-box{margin-top:4px}
@media(max-width:620px){.public-document-upload{grid-template-columns:42px 1fr;padding:15px}.public-document-icon{width:40px;height:40px}.public-document-button{grid-column:1/-1;width:100%;text-align:center}}

/* Ikon sidebar seragam dengan simbol berbeda untuk setiap fungsi. */
.sidebar nav button i,.sidebar nav .sidebar-link i,.sidebar-hotline-menu summary i{width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px}.sidebar nav button i svg,.sidebar nav .sidebar-link i svg,.sidebar-hotline-menu summary i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.sidebar nav button.active i svg,.sidebar nav .sidebar-link.active i svg{stroke-width:2}

.admin-body{background:#f5f6f8}.account-menu{position:relative}.account-menu>summary{list-style:none;cursor:pointer}.account-menu>summary::-webkit-details-marker{display:none}.account-menu .header-popover{top:48px;right:0}.profile-menu-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.header-popover .profile-menu-link,.header-popover button.logout{white-space:nowrap}.header-popover .profile-menu-link>span,.header-popover button.logout>span{width:auto!important;text-align:left!important;white-space:nowrap}
@media(max-width:720px){.sidebar nav .sidebar-link{justify-content:center}.sidebar nav .sidebar-link>span,.sidebar nav .sidebar-link>b,.sidebar-hotline-menu summary>span,.sidebar-hotline-menu summary>b,.sidebar-hotline-items{display:none}.account-menu .header-popover{position:fixed;top:62px;right:12px;left:auto;width:min(285px,calc(100vw - 24px))}}

/* Master kalender libur akademik dan tren pengajuan berbasis hari kerja. */
.holiday-stat-grid{display:grid;grid-template-columns:230px 230px 1fr;gap:14px;margin-bottom:17px}.holiday-stat-grid article,.holiday-stat-grid aside{background:#fff;border:1px solid var(--line);border-radius:11px;padding:16px;display:flex;align-items:center;gap:12px}.holiday-stat-grid article>span{width:38px;height:38px;border-radius:9px;background:#fff0e7;color:var(--orange);display:grid;place-items:center;font-size:18px}.holiday-stat-grid article div{display:flex;flex-direction:column;gap:3px}.holiday-stat-grid small{color:var(--muted);font-size:9px}.holiday-stat-grid b{font:700 15px var(--font-heading)}.holiday-stat-grid aside{background:#f2f7ff;border-color:#d9e7fb;color:#52647d;font-size:10px;line-height:1.6}.holiday-type{display:inline-block;padding:5px 8px;border-radius:6px;background:#f2f4f7;color:#536076;font-size:9px;font-weight:700}.holiday-empty{text-align:center!important;padding:35px!important;color:var(--muted)}.holiday-form>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.holiday-form>small{padding:10px;border-radius:7px;background:#fff7f2;color:#9b5a34;font-size:9px}.holiday-form input,.holiday-form select{width:100%;box-sizing:border-box}
.submission-trend-panel{min-width:0;overflow:visible!important}.trend-head{align-items:flex-start;gap:12px}.trend-filter{display:flex;padding:3px;background:#f2f3f5;border-radius:8px;white-space:nowrap}.trend-filter button{border:0;background:transparent;color:#727b89;border-radius:6px;padding:7px 9px;font-size:8px;font-weight:700}.trend-filter button.active{background:#fff;color:var(--orange);box-shadow:0 2px 7px rgba(30,40,60,.1)}.trend-summary{display:flex;align-items:center;justify-content:space-between;margin-top:13px;padding:9px 11px;border:1px solid #f1dfd4;border-radius:8px;background:#fffaf7}.trend-summary span{display:flex;align-items:baseline;gap:8px}.trend-summary small{color:var(--muted);font-size:9px}.trend-summary b{font:700 19px var(--font-heading);color:var(--orange)}.trend-summary em{font-style:normal;color:#916548;font-size:8px}.trend-chart{margin-top:12px}.trend-chart .line{stroke-linecap:round;stroke-linejoin:round}.trend-point circle{fill:#fff;stroke:var(--orange);stroke-width:3;vector-effect:non-scaling-stroke}.trend-point text{font:700 10px var(--font-body);fill:#273348;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:3px}.trend-chart .x-axis{gap:2px}.trend-chart .x-axis span{flex:1;text-align:center;min-width:0}.trend-chart .area{opacity:.8}
@media(max-width:1100px){.trend-head{flex-direction:column}.trend-filter{width:100%;overflow:auto}.trend-filter button{flex:1}.holiday-stat-grid{grid-template-columns:1fr 1fr}.holiday-stat-grid aside{grid-column:1/-1}}@media(max-width:620px){.holiday-stat-grid{grid-template-columns:1fr}.holiday-stat-grid aside{grid-column:auto}.holiday-form>div{grid-template-columns:1fr}.trend-summary{align-items:flex-start;flex-direction:column;gap:3px}.trend-point text{display:none}}
/* Hotline homepage and master data. */
.hotline-trigger{font:inherit;color:inherit;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;min-height:44px}
.hotline-trigger::after{content:'';display:block;flex:none;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.public-header nav .hotline-trigger{padding:31px 0;font-size:14px;font-weight:600;color:#4b5260;gap:9px;white-space:nowrap}
.hotline-trigger[aria-expanded="true"]::after{transform:translateY(2px) rotate(225deg)}
.public-header nav .hotline-trigger[aria-expanded="true"]{color:var(--orange)}
.hotline-trigger[aria-expanded="true"]{color:var(--orange)}
.hotline-dropdown{position:fixed;inset:auto;margin:0;width:min(380px,calc(100vw - 24px));box-sizing:border-box;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--navy);box-shadow:0 12px 28px rgba(11,20,38,.12);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cbd2da transparent;opacity:0;transform:translateY(-6px) scale(.985);transition:opacity .18s ease,transform .18s ease,display .18s allow-discrete,overlay .18s allow-discrete}
.hotline-dropdown:popover-open{opacity:1;transform:translateY(0) scale(1)}
@starting-style{.hotline-dropdown:popover-open{opacity:0;transform:translateY(-6px) scale(.985)}}
@media(prefers-reduced-motion:reduce){.hotline-dropdown{transition:none}}
.hotline-dropdown.is-compact{width:min(360px,calc(100vw - 24px))}
.hotline-empty{display:flex;align-items:flex-start;gap:14px;padding:8px 6px}
.hotline-empty-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:#fff1e7;color:var(--orange)}
.hotline-empty-icon .ui-icon{width:22px;height:22px}
.hotline-empty>div{min-width:0}
.hotline-empty .badge{font-size:10px}
.hotline-empty h3{margin:9px 0 5px;font:700 15px/1.4 var(--font-heading)}
.hotline-empty p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.hotline-option{display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--navy);font-size:13px;line-height:1.5}
.hotline-option:hover,.hotline-option:focus-visible{background:#edf8f1;color:#146c43}
.header-popover a{display:flex;width:100%;padding:11px;border-radius:7px;color:var(--navy);font-size:13px;text-align:left;text-decoration:none}.header-popover a:hover,.header-popover a:focus-visible{background:#f7f8fa;color:var(--orange);outline:none}
.hotline-option svg{width:19px;height:19px;flex:none;color:#168b50}
.hotline-option span{min-width:0;overflow-wrap:anywhere}
.hotline-dropdown-attached{border-top:0;border-radius:0 0 14px 14px}
.hotline-group{margin:0 0 12px}
.hotline-group:last-child{margin-bottom:0}
.hotline-group-title{margin:0 0 4px;padding:6px 10px;border-bottom:1px solid var(--line);color:#596477;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.hotline-number{display:inline-flex;align-items:center;min-height:44px;color:#146c43;font-weight:600;overflow-wrap:anywhere}
.hotline-editor{padding:20px;margin-bottom:20px}
.hotline-editor h2{font-size:18px;margin:0 0 18px}
.hotline-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.hotline-fields label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:13px}
.hotline-fields input,.hotline-fields select{width:100%;min-width:0;min-height:44px;box-sizing:border-box}
.input-prefix{width:100%;min-height:42px;display:flex;align-items:stretch;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#fff}
.input-prefix:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,111,45,.12)}
.input-prefix:has(input.is-invalid){border-color:#e64047;background:#fffafb}
.input-prefix__label{display:flex;align-items:center;padding:0 12px;border-right:1px solid var(--line);background:#f7f8fa;color:var(--navy);font-size:12px;font-weight:700;white-space:nowrap}
.input-prefix__label[hidden]{display:none}
.demo-form .input-prefix input{flex:1;min-width:0;border:0;border-radius:0;background:transparent;outline:0}
.hotline-fields small{line-height:1.5;color:var(--muted)}
.hotline-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
#hotlineContacts .btn{min-height:44px}
#hotlineContacts .table-wrap{overflow-x:auto}
#hotlineContacts table{min-width:580px}
#hotlineContacts .page-title{flex-wrap:wrap;gap:16px}
.sidebar-hotline-menu{margin:2px 0 6px;border-radius:7px;overflow:hidden}.sidebar-hotline-menu .sidebar-hotline-trigger{position:relative;border-radius:7px}.admin-app .sidebar .sidebar-hotline-menu.is-current{background:var(--orange);box-shadow:0 7px 16px rgba(232,111,45,.18)}.admin-app .sidebar .sidebar-hotline-menu.is-current .sidebar-hotline-trigger{background:transparent;color:#fff;box-shadow:none}.admin-app .sidebar .sidebar-hotline-menu.is-current .sidebar-hotline-trigger:hover{background:rgba(255,255,255,.1);color:#fff}.sidebar-hotline-menu .sidebar-hotline-trigger>span{margin-left:auto;font-size:14px;transition:transform .2s}.sidebar-hotline-menu.collapsed .sidebar-hotline-trigger>span{transform:rotate(-90deg)}.sidebar-hotline-items{display:grid;gap:3px;margin:0;padding:3px 8px 8px 38px}.sidebar-hotline-menu.collapsed .sidebar-hotline-items{display:none}.sidebar-hotline-items button{min-height:34px;padding:8px 12px!important;border-radius:6px!important;color:#596170!important;font-size:12px!important;font-weight:500!important}.admin-app .sidebar .sidebar-hotline-items button:hover{background:#fff5ee;color:var(--orange)!important}.admin-app .sidebar .sidebar-hotline-menu.is-current .sidebar-hotline-items button{color:rgba(255,255,255,.86)!important}.admin-app .sidebar .sidebar-hotline-menu.is-current .sidebar-hotline-items button:hover{background:rgba(255,255,255,.14);color:#fff!important}.admin-app .sidebar .sidebar-hotline-items button.active,.admin-app .sidebar .sidebar-hotline-menu.is-current .sidebar-hotline-items button.active{background:#fff1e7!important;color:var(--orange)!important;box-shadow:none!important;font-weight:700!important}
.hotline-dropdown :focus-visible,.hotline-trigger:focus-visible,#hotlineContacts :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
#hotlineContacts .table-toolbar .search input:focus-visible{outline:0}
@media(min-width:640px){.hotline-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Navigation publik tetap tersedia pada tablet dan ponsel. */
.public-menu-toggle,.mobile-track-link{display:none}
@media(max-width:1000px){
  html,body{width:100%;max-width:100%;overflow-x:clip}
  body{padding-top:0}
  .admin-app,.admin-shell,.admin-page{min-width:0;max-width:100%}
  .admin-shell{overflow-x:hidden;padding-top:68px}
  .admin-page>*{max-width:100%}
  .panel,.data-panel{min-width:0}
  .data-panel{overflow-x:auto}
  .footer-manager-layout,.footer-manager-form,.footer-manager-preview,.footer-dynamic-row{min-width:0}
  .public-app:not(.compact-flow){padding-top:82px}
  .public-header{position:fixed;top:0;right:0;left:0;padding:0 28px}
  .admin-header{position:fixed;top:0;right:0;left:252px}
  .admin-app.sidebar-collapsed .admin-header{left:0}
  .public-menu-toggle{display:inline-grid;place-content:center;gap:4px;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy)}
  .public-menu-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
  .public-header.menu-open .public-menu-toggle span:first-child{transform:translateY(6px) rotate(45deg)}
  .public-header.menu-open .public-menu-toggle span:nth-child(2){opacity:0}
  .public-header.menu-open .public-menu-toggle span:last-child{transform:translateY(-6px) rotate(-45deg)}
  .public-header nav{display:none;position:absolute;z-index:80;top:100%;right:20px;left:20px;margin:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 32px rgba(11,20,38,.14)}
  .public-header.menu-open nav{display:grid}
  .public-header nav a,.public-header nav .hotline-trigger{justify-content:flex-start;width:100%;min-height:44px;padding:10px 12px!important;border-radius:7px;font-size:14px;text-align:left}
  .public-header nav a.active,.public-header nav a:hover,.public-header nav .hotline-trigger:hover{background:#fff5ee;color:var(--orange)}
  .public-header nav a.active::after{display:none}
  .mobile-track-link{display:block;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:7px;background:var(--orange);color:#fff;font-weight:700;text-align:left}
  .hotline-dropdown-attached{border-top:1px solid var(--line);border-radius:12px}
}
@media(max-width:720px){
  .public-app:not(.compact-flow){padding-top:72px}
  .public-header{position:fixed;top:0;min-height:72px;padding:0 16px;gap:12px;justify-content:space-between}
  .public-header .brand img{width:38px;height:38px}
  .public-header .brand small{max-width:155px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .public-header .public-menu-toggle{margin-left:auto;flex:0 0 44px}
  .public-header nav{right:12px;left:12px}
  .public-header>.btn{display:none}
  .hotline-dropdown{width:calc(100vw - 24px)!important}
  .toast-box{right:12px;left:12px;top:54px}.toast{min-width:0}
  .admin-header .header-popover{position:fixed!important;top:114px!important;right:12px!important;left:12px!important;width:auto;max-height:calc(100vh - 126px);max-height:calc(100dvh - 126px);overflow-y:auto}
  .admin-header .header-popover button{min-height:52px;white-space:normal;overflow-wrap:anywhere}
}

/* Penyempurnaan responsif seluruh halaman publik dan panel admin. */
@media(max-width:720px){
  body{overflow-x:clip}
  .hero{min-height:auto;padding:46px 20px 52px}
  .hero h1{font-size:clamp(34px,11vw,44px);letter-spacing:-2px}
  .hero-copy>p{font-size:15px}
  .hero-actions{width:100%;flex-direction:column;align-items:stretch;gap:10px}
  .hero-actions .btn{width:100%;min-height:48px;white-space:nowrap}
  .trust-row{align-items:flex-start}
  .section-head{align-items:flex-start;flex-direction:column;gap:12px}
  .content-section,.steps-section{padding:46px 18px}
  .section-head h2,.steps-section h2{font-size:28px}
  .filter-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:7px}
  .filter-row .chip{flex:0 0 auto;white-space:nowrap}
  .filter-row .search{flex:0 0 100%;margin:0}
  .service-card p{height:auto;min-height:0}
  .info-main,.contact-card{padding:22px 18px}
  .info-main h1{font-size:29px}
  .wizard-form{padding:65px 18px 28px}
  .form-head{align-items:flex-start;gap:10px}
  .form-head h2{font-size:20px}
  .form-actions,.generic-actions,.detail-page-actions,.contact-options{flex-direction:column-reverse}
  .form-actions .btn,.generic-actions .btn,.detail-page-actions .btn,.contact-options .btn{width:100%;min-height:44px}
  .review-box{padding:16px}
  .review-box dl div,.drawer dl div{grid-template-columns:1fr;gap:4px}
  .modal{width:calc(100vw - 24px);max-height:calc(100vh - 24px);padding:25px 18px;overflow-y:auto}
  .drawer{width:100vw;padding:22px 18px}

  .admin-app{min-width:0}
  .admin-app .admin-shell,.admin-app.sidebar-collapsed .admin-shell{width:100%;margin-left:0;padding-top:64px}
  .admin-header,.admin-app.sidebar-collapsed .admin-header{top:0;right:0;left:0;height:64px;padding:0 14px;z-index:30}
  .admin-header .header-popover{position:fixed!important;top:72px!important;right:12px!important;left:12px!important;width:auto;max-height:calc(100vh - 84px);overflow-y:auto}
  .admin-header .header-popover button{white-space:normal;overflow-wrap:anywhere}
  .menu-button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:#fff}
  .admin-actions{gap:8px}
  .notification{width:42px;height:42px}
  .profile{min-height:42px;padding:5px}
  .profile>span:first-child{width:30px;height:30px}
  .admin-app .sidebar,.admin-app.sidebar-collapsed .sidebar{top:64px;bottom:0;left:0;width:100vw;max-height:calc(100vh - 64px);padding:20px 16px;transform:translateX(-105%);z-index:25;box-shadow:10px 18px 35px rgba(23,35,59,.16)}
  .admin-app.sidebar-mobile-open .sidebar{transform:translateX(0)}
  .admin-app .admin-brand{padding:0 8px 18px}
  .admin-app .admin-brand img{width:42px;height:42px}
  .admin-app .admin-brand span{display:flex}
  .admin-app .sidebar nav{margin-top:12px}
  .admin-app .sidebar nav small{display:block;font-size:9px}
  .admin-app .sidebar nav button,.admin-app .sidebar nav button:not(.active){justify-content:flex-start;min-height:44px;font-size:13px!important;padding:11px 14px}
  .admin-app .sidebar nav button i{font-size:16px}
  .admin-app .sidebar-help{display:grid;margin-top:16px}
  .admin-page{width:100%;min-width:0;padding:20px 14px}
  .page-title{align-items:stretch;flex-direction:column;gap:14px;margin-bottom:20px}
  .page-title h1{font-size:23px;line-height:1.2}
  .page-title .btn{width:100%;min-height:44px;font-size:12px!important;white-space:nowrap}
  .panel{min-width:0;padding:16px;overflow-x:auto}
  .data-panel{padding:0 14px 14px}
  .table-toolbar{align-items:stretch}
  .table-toolbar>div{display:flex;gap:8px;overflow-x:auto}
  .table-toolbar select{min-height:42px;margin-left:0;flex:1}
  .data-panel table,.recent table{min-width:700px}
  .pagination{align-items:flex-start;flex-direction:column;gap:12px}
  .panel-head{align-items:flex-start;gap:10px;flex-direction:column}
  .panel-head select{width:100%}
  .chart{min-width:520px}
  .detail-page-head{align-items:flex-start;flex-direction:column;gap:10px}
  .detail-section{padding:16px}
  .service-builder,.letter-layout-page-builder{gap:12px}
  .builder-steps,.letter-layout-page-builder>.letter-wizard-progress{max-width:100%;overflow-x:auto;padding:12px}
  .builder-steps button,.letter-layout-page-builder>.letter-wizard-progress button{flex:0 0 42px}
  .builder-content,.letter-layout-form-shell{min-height:0;padding:18px 14px}
  .process-step-row{grid-template-columns:22px minmax(0,1fr) 32px;align-items:start}
  .process-step-row label,.process-step-row label:nth-of-type(3),.process-estimate{grid-column:2!important}
  .process-step-row [data-remove-process-step]{grid-column:3;grid-row:1/5}
  .footer-social-row.fixed-social-row{grid-template-columns:42px minmax(0,1fr)}
  .fixed-social-row label{min-width:0}
  .survey-report-actions{flex-wrap:wrap}
  .survey-detail-content{padding:16px}
  .verification-card{max-width:100%}
}

@media(min-width:901px){.letter-layout-page-builder>.letter-wizard-progress{top:88px}}

/* Sidebar mobile adalah panel navigasi penuh, bukan sidebar ringkas desktop. */
@media(max-width:720px){
  .admin-app.sidebar-mobile-open .sidebar nav .sidebar-link{justify-content:flex-start;gap:13px;min-height:44px;padding:11px 14px}
  .admin-app.sidebar-mobile-open .sidebar nav .sidebar-link>span{display:inline!important;width:auto!important;font-size:13px!important;text-align:left!important;white-space:normal}
  .admin-app.sidebar-mobile-open .sidebar nav .sidebar-link>b{display:inline-flex!important;margin-left:auto;font-size:9px!important}
  .admin-app.sidebar-mobile-open .sidebar-hotline-menu summary>span{display:inline!important;width:auto!important;font-size:13px!important;text-align:left!important}
  .admin-app.sidebar-mobile-open .sidebar-hotline-menu summary>b{display:inline-flex!important;margin-left:auto;font-size:14px!important}
  .admin-app.sidebar-mobile-open .sidebar-hotline-items{display:grid!important}
}

/* Pagination konsisten untuk seluruh tabel panel admin. */
.admin-page table tbody tr[hidden]{display:none!important}
.admin-page .table-toolbar{align-items:center;flex-wrap:wrap;gap:12px}
.admin-page .table-toolbar .search{display:flex;align-items:center;flex:1 1 260px;width:min(390px,100%);max-width:390px;min-width:0;min-height:46px;gap:10px;margin:0;padding:0 14px;border:1px solid #dfe3ea;border-radius:10px;background:#fff;transition:border-color .18s,box-shadow .18s}
.admin-page .table-toolbar .search:hover{border-color:#c7ced9}
.admin-page .table-toolbar .search:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.admin-page .table-toolbar .search input{flex:1;min-width:0;width:100%;min-height:44px;padding:0;color:var(--navy);font-size:13px}
.admin-page .table-toolbar .search input::placeholder{color:#818b9a;opacity:1}
.table-search__icon{display:grid;place-items:center;flex:none;color:#7b8798}
.table-search__icon .ui-icon{width:18px;height:18px}
.admin-page .table-toolbar>div:not(.table-pagination__size){display:flex;align-items:center;flex-wrap:wrap;gap:8px;overflow:visible}
.admin-page .table-toolbar>div .searchable-select{flex:0 1 170px;min-width:145px;max-width:230px}
.admin-page .table-toolbar .searchable-select__trigger{min-height:46px;padding:11px 36px 11px 14px;border-color:#dfe3ea;border-radius:10px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-page .table-toolbar .searchable-select__trigger:hover{border-color:#c7ced9}
.admin-page .table-toolbar .searchable-select__option{font-size:13px}
.table-pagination{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:16px 0 4px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.survey-pagination.table-pagination{min-width:0;margin-top:0}
.table-pagination__summary{min-width:0}
.table-toolbar--pagination-only{justify-content:flex-end}
.table-toolbar>.table-pagination__size{margin-left:auto}
.table-pagination__size{display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--muted);font-size:11px;font-weight:500}
.table-pagination__size .searchable-select{width:90px}
.admin-page .table-toolbar .table-pagination__size .searchable-select__trigger{min-height:40px;padding:8px 30px 8px 10px;font-size:12px}
.table-pagination__size .searchable-select__menu{white-space:normal}
.table-pagination__size .searchable-select__options{max-height:none;overflow:visible}
.admin-page .table-toolbar .table-pagination__size .searchable-select__option{font-size:12px}
.table-pagination__pages{display:flex;align-items:center;gap:5px}
.table-pagination__pages button{min-width:34px;min-height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy);font-size:12px;font-weight:600}
.table-pagination__pages button:not(.active):hover:not(:disabled){border-color:var(--orange);color:var(--orange)}
.table-pagination__pages button.active{border-color:var(--orange);background:var(--orange);color:#fff}
.table-pagination__pages button:disabled{opacity:.45;cursor:not-allowed}
.table-pagination__pages button:focus-visible{outline:3px solid var(--orange-soft);outline-offset:1px}
.admin-page table [data-table-empty] td{color:var(--muted)}
@media(max-width:720px){
  .admin-page .panel:has(.table-pagination){overflow:visible}
  .admin-page .table-toolbar .search{flex:1 1 100%;max-width:none;width:100%}
  .admin-page .table-toolbar>div:not(.table-pagination__size){width:100%}
  .admin-page .table-toolbar>div .searchable-select{flex:1 1 145px;max-width:none}
  .table-toolbar>.table-pagination__size{align-self:flex-end}
  .table-pagination{grid-template-columns:minmax(0,1fr);gap:12px}
  .table-pagination__pages{overflow-x:auto}
}

/* Skala teks panel admin. Lihat docs/architecture/ui-components.md bagian "Ukuran teks".
   Standar web: isian 16px, teks umum 14px, keterangan minimal 12px. Blok ini dipasang di akhir
   dan diberi cakupan #adminApp / body.admin-body agar menang atas ukuran kecil warisan prototipe. */
:root { --text-caption: 12px; --text-small: 13px; --text-body: 14px; --text-nav: 15px; --text-control: 16px; --text-step-title: 22px; --text-page-title: 28px; }
#adminApp { font-size: var(--text-body); }
#adminApp .sidebar nav .sidebar-link, #adminApp .sidebar nav button, #adminApp .sidebar-hotline-menu summary, #adminApp .sidebar-hotline-items a { font-size: var(--text-nav); }
#adminApp .sidebar-link > span { font-size: var(--text-nav) !important; }
#adminApp .sidebar nav small { font-size: var(--text-caption); }
#adminApp .sidebar-link > b, #adminApp .sidebar nav button b, #adminApp .notification > b { font-size: 11px !important; }
#adminApp .sidebar-help b, #adminApp .profile b { font-size: var(--text-body); }
#adminApp .sidebar-help small, #adminApp .profile small, #adminApp .header-popover .menu-title b { font-size: var(--text-caption); }
#adminApp .header-popover a, #adminApp .header-popover button { font-size: var(--text-body); }
#adminApp .page-title h1 { font-size: var(--text-page-title); }
#adminApp .page-title p, #adminApp .back-link { font-size: var(--text-nav); }
#adminApp .page-title span, #adminApp .eyebrow, #adminApp .ui-dialog__eyebrow { font-size: var(--text-caption); }
#adminApp .stat-grid small, #adminApp .holiday-stat-grid small, #adminApp .panel-head p, #adminApp .legend li, #adminApp .trend-filter button, #adminApp .trend-summary small { font-size: var(--text-small); }
#adminApp .stat-grid b, #adminApp .trend-summary b, #adminApp .donut b { font-size: 24px; }
#adminApp .holiday-stat-grid b { font-size: 20px; }
#adminApp .holiday-stat-grid { grid-template-columns: minmax(300px, auto) minmax(260px, auto) minmax(0, 1fr); }
#adminApp .holiday-stat-grid article small { white-space: nowrap; }
@media (max-width: 1100px) { #adminApp .holiday-stat-grid { grid-template-columns: 1fr 1fr; } #adminApp .holiday-stat-grid article small { white-space: normal; } }
@media (max-width: 620px) { #adminApp .holiday-stat-grid { grid-template-columns: 1fr; } }
#adminApp .holiday-stat-grid aside, #adminApp .panel-head select { font-size: var(--text-body); }
#adminApp .stat-grid em, #adminApp .trend-summary em, #adminApp .donut small { font-size: var(--text-caption); }
#adminApp .panel-head h3 { font-size: 17px; }
#adminApp .x-axis, #adminApp .y-axis { font-size: 11px; }
#adminApp table { font-size: var(--text-body); }
#adminApp th { font-size: var(--text-small); }
#adminApp td { font-size: var(--text-body); }
#adminApp td b small, #adminApp .letter-layout-name small, #adminApp .letter-layout-header small { font-size: var(--text-caption); }
#adminApp .badge, #adminApp .holiday-type, #adminApp .type-label, #adminApp .service-type, #adminApp .system-field-badge, #adminApp .service-status-toggle b { font-size: var(--text-caption); }
#adminApp .table-row-number { font-size: var(--text-small); }
#adminApp .pagination, #adminApp .table-pagination, #adminApp .table-pagination__size, #adminApp .table-pagination__summary, #adminApp .table-pagination__pages button { font-size: var(--text-small); }
#adminApp .table-pagination__size .searchable-select__trigger, #adminApp .table-pagination__size .searchable-select__option { font-size: var(--text-body); }
#adminApp .table-toolbar .search input, #adminApp .table-toolbar .searchable-select__trigger, #adminApp .table-toolbar .searchable-select__option { font-size: var(--text-nav); }
#adminApp form label, #adminApp .field-label, #adminApp .demo-form label, #adminApp .letter-wizard-field, #adminApp .letter-logo-field, #adminApp .builder-grid label, #adminApp .builder-field, #adminApp .layout-choice label { font-size: var(--text-body); }
#adminApp form :is(input, select, textarea), #adminApp form .searchable-select__trigger, #adminApp form .searchable-select__option, #adminApp form .searchable-select__menu input { font-size: var(--text-control); font-weight: 500; }
#adminApp form input[type="checkbox"], #adminApp form input[type="radio"] { width: 16px; height: 16px; }
/* Komponen field bersama `core/components/form_field.html` (.form-field): label, kontrol, error, dan bantuan. */
#adminApp :is(.form-field, .demo-form label) { gap: 8px; color: var(--navy); font-size: var(--text-body); font-weight: 600; }
#adminApp .demo-form :is(input, textarea):not(.input-prefix input):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#adminApp .form-field :is(input, textarea, select) { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #dfe3ea; border-radius: 10px; background: #fff; color: var(--navy); font: 500 var(--text-control)/1.5 var(--font-body); }
#adminApp :is(.form-field, .demo-form) textarea { min-height: 112px; resize: vertical; }
#adminApp form .searchable-select__trigger { min-height: 48px; padding: 11px 40px 11px 14px; border-color: #dfe3ea; border-radius: 10px; }
#adminApp .demo-form .input-prefix { min-height: 48px; border-color: #dfe3ea; border-radius: 10px; }
#adminApp .demo-form :is(input, textarea):not(.input-prefix input):focus,
#adminApp .form-field :is(input, textarea, select):focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); outline: 0; }
#adminApp .form-field small { font-size: var(--text-small); font-weight: 400; line-height: 1.45; }
#adminApp .form-field__help { color: var(--muted); }
#adminApp .form-field .input-prefix { min-height: 48px; border: 1px solid #dfe3ea; border-radius: 10px; background: #fff; }
#adminApp .form-field .input-prefix input { min-height: 46px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#adminApp .form-field .input-prefix:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
#adminApp .form-field .field-error { color: #d92d35; font-weight: 600; }
/* State error bersama untuk semua kontrol form: input, textarea, dropdown bersama, dan input berprefiks.
   Satu warna (--field-error) dan dipasang setelah aturan border normal agar tidak tertimpa. */
:root { --field-error: #e64047; --field-error-bg: #fffafb; --field-error-ring: rgba(230, 64, 71, .14); }
#adminApp :is(.form-field, .demo-form) :is(input, textarea).is-invalid:not(.input-prefix input),
#adminApp .searchable-select:has(.native-searchable-select.is-invalid) .searchable-select__trigger,
#adminApp .input-prefix:has(input.is-invalid) { border-color: var(--field-error); background: var(--field-error-bg); box-shadow: none; }
#adminApp :is(.form-field, .demo-form) :is(input, textarea).is-invalid:not(.input-prefix input):focus,
#adminApp .searchable-select:has(.native-searchable-select.is-invalid) .searchable-select__trigger:focus,
#adminApp .input-prefix:has(input.is-invalid):focus-within { border-color: var(--field-error); box-shadow: 0 0 0 3px var(--field-error-ring); }
#adminApp .form-field .field-error { color: var(--field-error); }
#adminApp .letter-logo-upload:has(img[hidden]) { grid-template-columns: 1fr; }
#adminApp .letter-logo-field > .field-error { margin-top: 8px; }
#adminApp .letter-logo-upload b { align-self: end; }
#adminApp .letter-wizard-pane > .form-field { margin-top: 20px; }
#adminApp .letter-wizard-pane > .letter-logo-grid { gap: 20px; margin-top: 20px; }
#adminApp .letter-wizard-pane > p { margin: 6px 0 4px; }
#adminApp .letter-layout-form-shell { padding: 32px 36px; }
/* Panel langkah wizard: nomor, judul, dan keterangan singkat per langkah. */
#adminApp .letter-layout-page-builder { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; }
#adminApp .letter-layout-page-builder > .letter-wizard-progress { padding: 24px; }
#adminApp .letter-layout-page-builder > .letter-wizard-progress button { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 6px 0; color: var(--muted); }
#adminApp .letter-layout-page-builder > .letter-wizard-progress button b { width: 36px; height: 36px; font-size: var(--text-body); }
#adminApp .letter-wizard-progress button span { display: flex; flex-direction: column; gap: 2px; }
#adminApp .letter-wizard-progress button strong { color: var(--muted); font-size: var(--text-nav); font-weight: 700; }
#adminApp .letter-wizard-progress button small { color: var(--muted); font-size: var(--text-small); font-weight: 400; line-height: 1.4; }
#adminApp .letter-wizard-progress button:is(.active, .complete) strong { color: var(--navy); }
#adminApp .letter-layout-page-builder > .letter-wizard-progress > i { height: 22px; margin: 2px 0 2px 18px; }
@media (max-width: 900px) {
  #adminApp .letter-layout-page-builder { grid-template-columns: 1fr; }
  #adminApp .letter-layout-page-builder > .letter-wizard-progress button { display: flex; }
  #adminApp .letter-wizard-progress button span { display: none; }
  #adminApp .letter-layout-page-builder > .letter-wizard-progress > i { height: 1px; margin: 0 4px; }
  #adminApp .letter-layout-form-shell { padding: 20px 16px; }
}
#adminApp .field-error, #adminApp form small, #adminApp .letter-logo-upload small, #adminApp .letter-logo-actions, #adminApp .letter-logo-actions .btn, #adminApp .builder-grid label > small, #adminApp .layout-choice small, #adminApp .builder-steps button small { font-size: var(--text-small); }
#adminApp .letter-logo-upload b { font-size: var(--text-body); }
#adminApp .letter-wizard-pane > p, #adminApp .builder-content > p, #adminApp .modal > p, #adminApp .ui-confirm-dialog p { font-size: var(--text-nav); }
#adminApp .letter-wizard-pane > h3, #adminApp .builder-content h2 { font-size: var(--text-step-title); }
#adminApp .letter-wizard-progress button, #adminApp .builder-steps button strong { font-size: var(--text-nav); }
#adminApp .modal h2 { font-size: 24px; }
#adminApp .btn { font-size: var(--text-nav); }
#adminApp .admin-page > p[role="status"], #adminApp .admin-page > p[role="alert"], #adminApp [data-letter-loading], #adminApp [data-letter-error] { font-size: var(--text-body); }
body.admin-body .action-dropdown button { font-size: var(--text-body); }
body.admin-body .ui-toast p { font-size: var(--text-body); }

/* Dialog detail bersama: kartu berisi daftar label–nilai dan riwayat aktivitas (contoh: Detail Admin). */
#adminApp .modal.modal--wide { width: min(680px, 94vw); max-height: 90vh; overflow: auto; }
#adminApp .detail-card { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
#adminApp .detail-card h3 { margin: 0 0 12px; font: 700 17px var(--font-heading); }
#adminApp .detail-card__note { margin: -6px 0 12px; color: var(--muted); font-size: var(--text-small); }
#adminApp .detail-list { display: grid; margin: 0; }
#adminApp .detail-list > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid #eff1f4; }
#adminApp .detail-list > div:first-child { padding-top: 0; border-top: 0; }
#adminApp .detail-list dt { color: var(--muted); font-size: var(--text-body); }
#adminApp .detail-list dd { margin: 0; font-size: var(--text-body); font-weight: 600; overflow-wrap: anywhere; }
#adminApp .activity-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
#adminApp .activity-list > li { padding: 12px 14px; border-left: 3px solid var(--orange); border-radius: 8px; background: #fffaf6; }
#adminApp .activity-list > li > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
#adminApp .activity-list b { font-size: var(--text-body); }
#adminApp .activity-list small { color: var(--muted); font-size: var(--text-small); }
#adminApp .activity-list ul { margin: 6px 0 0; padding-left: 18px; font-size: var(--text-body); }
#adminApp .activity-list > li.activity-list__empty { border-left-color: var(--line); background: #f7f8fa; color: var(--muted); }
#adminApp .admin-detail__state { margin: 18px 0 0; font-size: var(--text-body); }
@media (max-width: 620px) { #adminApp .detail-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* Satu sumber ukuran untuk informasi kontak pada kop dan footer pratinjau. */
.letter-wizard-page header small[data-letter-preview-contact],
.letter-wizard-page footer [data-letter-preview-footer] { font-size: 8px !important; line-height: 1.2; }

/* Toolbar dengan lebih dari satu filter: filter berjajar dalam satu baris pada desktop. */
.admin-page .table-toolbar > .admin-table-filters { flex: 0 1 auto; flex-wrap: nowrap; }
.admin-page .table-toolbar > .admin-table-filters .searchable-select { width: 170px; }
@media (max-width: 720px) {
  .admin-page .table-toolbar > .admin-table-filters { flex: 1 1 100%; }
  .admin-page .table-toolbar > .admin-table-filters .searchable-select { flex: 1 1 0; width: auto; max-width: none; }
}
/* Nama layanan pada tabel Jenis Layanan mengikuti skala teks panel admin. */
#adminApp .service-name b { font-size: var(--text-body); line-height: 1.4; }
#adminApp .service-name small { font-size: var(--text-small); line-height: 1.45; }
#adminApp .service-category-label { font-size: var(--text-small); }

/* Wizard halaman penuh (Kop & Footer Surat, Jenis Layanan): isian lebih ringkas daripada form modal
   agar banyak field per layar tetap rapi. Teks isian 14px, label 13px, tinggi kontrol 42px. */
#adminApp .letter-layout-page-builder .form-field { gap: 6px; font-size: var(--text-small); }
#adminApp .letter-layout-page-builder .form-field :is(input, textarea, select),
#adminApp .letter-layout-page-builder .repeater-row input:not([type="file"]):not([type="checkbox"]) { min-height: 42px; height: auto; padding: 8px 12px; border-radius: 8px; font-size: var(--text-body); }
#adminApp .letter-layout-page-builder .form-field textarea { min-height: 92px; }
#adminApp .letter-layout-page-builder form .searchable-select__trigger { min-height: 42px; padding: 8px 34px 8px 12px; border-radius: 8px; font-size: var(--text-body); }
#adminApp .letter-layout-page-builder form .searchable-select__option { font-size: var(--text-body); }
#adminApp .letter-layout-page-builder .form-field .input-prefix { min-height: 42px; border-radius: 8px; }
#adminApp .letter-layout-page-builder .form-field .input-prefix input { min-height: 40px; }
#adminApp .letter-layout-page-builder .field-label { font-size: var(--text-small); }

/* Komponen unggah berkas bersama (core/components/file_upload.html dan ui.fileUpload). Dipakai panel admin dan homepage. */
.file-upload-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.file-upload-field.wide { grid-column: 1 / -1; }
.file-upload-field__optional { color: var(--muted); font-size: 13px; font-weight: 500; }
.file-upload { position: relative; min-height: 96px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed #ef9d6d; border-radius: 12px; background: linear-gradient(135deg, #fffaf7, #fff4ec); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.file-upload:hover { border-color: var(--orange); box-shadow: 0 8px 22px rgba(232, 111, 45, .1); transform: translateY(-1px); }
.file-upload:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.file-upload__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 11px; background: var(--orange); color: #fff; box-shadow: 0 7px 16px rgba(232, 111, 45, .2); }
.file-upload__icon .ui-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.file-upload__copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.file-upload__copy b { color: var(--navy); font-size: 14px; font-weight: 700; }
.file-upload__copy small { color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.45; }
.file-upload__button { padding: 9px 14px; border: 1px solid #efc0a5; border-radius: 8px; background: #fff; color: var(--orange); font-size: 13px; font-weight: 800; white-space: nowrap; }
.file-upload__input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0; padding: 0 !important; border: 0 !important; opacity: 0; cursor: pointer; }
.file-upload__selected { padding-left: 2px; color: var(--muted); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.file-upload__selected.has-file { color: var(--green); font-weight: 700; }
.file-upload__example { align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #cfdcec; border-radius: 8px; background: #f4f8fd; color: #315f96; font-size: 13px; font-weight: 700; text-decoration: none; }
.file-upload__example:hover { border-color: #94b6dd; background: #edf5ff; }
.file-upload__example .ui-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.file-upload__example small { max-width: 260px; overflow: hidden; color: #71849a; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.file-upload__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.file-upload__actions .btn { min-height: 36px; padding: 7px 12px; font-size: 13px; }
.file-upload-field:has(.file-upload__input.is-invalid) .file-upload { border-color: var(--field-error, #e64047); background: var(--field-error-bg, #fffafb); box-shadow: 0 0 0 3px var(--field-error-ring, rgba(230, 64, 71, .14)); }
@media (max-width: 620px) {
  .file-upload { grid-template-columns: 40px minmax(0, 1fr); padding: 14px; }
  .file-upload__icon { width: 40px; height: 40px; }
  .file-upload__button { grid-column: 1 / -1; text-align: center; }
}

/* Isian hanya-baca (nilai dibuat sistem, mis. slug). */
#adminApp .form-field input[readonly] { background: #f4f6f9; color: var(--muted); cursor: default; }
#adminApp .form-field .input-prefix:has(input[readonly]) { background: #f4f6f9; }

/* Penghitung karakter form_field (field_counter). */
.form-field .field-counter { align-self: flex-end; color: var(--muted); font-size: var(--text-caption); font-weight: 500; }
.form-field .field-counter.is-near { color: #b9650e; }
.form-field .field-counter.is-full { color: var(--field-error, #e64047); font-weight: 700; }

/* Ringkasan panjang pada tabel Jenis Layanan cukup dua baris. */
#adminApp .service-name small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* Varian dropdown bersama dengan pemicu ikon (`data-select-icon` pada select): tombol persegi seukuran tombol toolbar, menu tetap lebar. */
#adminApp .searchable-select--icon .searchable-select__trigger, #adminApp form .searchable-select--icon .searchable-select__trigger { width: 38px; min-height: 38px; height: 38px; display: grid; place-items: center; padding: 0; border-color: transparent; border-radius: 9px; background: #f1f2f4; color: var(--navy); }
#adminApp .searchable-select--icon .searchable-select__trigger:hover, #adminApp .searchable-select--icon .searchable-select__trigger[aria-expanded="true"] { border-color: var(--orange); color: var(--orange); }
#adminApp .searchable-select--icon .searchable-select__trigger::after { content: none; }
#adminApp .searchable-select--icon .searchable-select__trigger .ui-icon { width: 18px; height: 18px; }
#adminApp .searchable-select--icon .searchable-select__menu { right: auto; width: max-content; min-width: 220px; }

/* Kartu alur proses bersama (`core/components/process_timeline.html`): pratinjau wizard admin dan formulir homepage.
   Varian `.verification-timeline.is-fluid` meratakan tahapan selebar kartu, teks di tengah, dan garis penghubung
   digambar dari tengah penanda ke penanda berikutnya; bila tahapan banyak, daftar tetap dapat digulir horizontal. */
.process-timeline-card { min-width: 0; padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: 14px; background: #f8f9fb; }
.process-timeline-card__head { display: grid; gap: 4px; margin-bottom: 22px; }
.process-timeline-card__eyebrow { color: var(--orange); font: 800 11px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.process-timeline-card__head h3 { margin: 0; color: var(--navy); font: 700 var(--text-body, 15px)/1.35 var(--font-heading); }
.verification-timeline.is-fluid { margin: 0; padding: 0 0 10px; }
.verification-timeline.is-fluid > i { display: none; }
.verification-timeline.is-fluid > div { position: relative; flex: 1 0 140px; width: auto; min-width: 140px; padding: 0 10px; box-sizing: border-box; }
.verification-timeline.is-fluid > div:not(:first-child)::before { content: ""; position: absolute; z-index: 1; top: 14px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 3px; border-radius: 999px; background: #dfe2e6; }
.verification-timeline.is-fluid > div.done + i + div::before { background: var(--green); }
.verification-timeline.is-fluid > div.active + i + div::before { background: linear-gradient(90deg, var(--orange) 0 50%, #dfe2e6 50% 100%); }
.verification-timeline.is-fluid > div.active.success + i + div::before { background: linear-gradient(90deg, var(--green) 0 50%, #dfe2e6 50% 100%); }
.verification-timeline.is-fluid span { align-items: center; margin-top: 12px; text-align: center; }
.verification-timeline.is-fluid strong { color: var(--navy); font-size: 13px; }
.verification-timeline.is-fluid small { max-width: 170px; margin-top: 4px; font-size: 12px; }
@media (max-width: 620px) { .process-timeline-card { padding: 18px 16px 14px; } .verification-timeline.is-fluid > div { flex-basis: 120px; min-width: 120px; } }

/* Opsi dropdown bersama dengan penanda (`data-option-marker` pada option): simbol di kolom kiri tetap, teks penjelasan di kanan. */
.searchable-select__option.has-marker { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; }
.searchable-select__marker { padding: 3px 8px; border-radius: 6px; background: #f1f2f4; color: var(--navy); font: 700 12px/1.4 var(--font-document); text-align: center; white-space: nowrap; }
.searchable-select__option.has-marker:hover .searchable-select__marker, .searchable-select__option.has-marker[aria-selected="true"] .searchable-select__marker { background: #fff; color: var(--orange); }
/* Dropdown ikon berisi daftar pendek: tampilkan semua opsi tanpa gulir dan sembunyikan opsi judul. */
#adminApp .searchable-select--icon .searchable-select__options { max-height: none; overflow: visible; }
#adminApp .searchable-select--icon .searchable-select__option[data-value=""]:disabled { display: none; }

/* Skala teks: Detail Pengajuan (desain awal prototipe dengan ukuran kecil) mengikuti token panel admin. */
#adminApp .detail-page-head p, #adminApp .status-history-caption { font-size: var(--text-body); }
#adminApp .detail-section h3 { font-size: 17px; }
#adminApp .detail-section dt, #adminApp .detail-section dd { font-size: var(--text-body); }
#adminApp .status-history span { font-size: var(--text-body); }
#adminApp .status-history b, #adminApp .status-history .status-audit strong { font-size: var(--text-body); }
#adminApp .status-history small, #adminApp .status-history .status-audit .status-audit__note { font-size: var(--text-small); }
#adminApp .status-history i, #adminApp .process-assignee, #adminApp .status-history .status-audit em, #adminApp .status-history .status-audit::before { font-size: var(--text-caption); }
#adminApp .status-history > div { grid-template-columns: 30px minmax(0, 1fr); }
#adminApp .status-history i { width: 30px; height: 30px; }
#adminApp .status-history > div:not(:last-child)::after { left: 15px; top: 34px; }
#adminApp .process-document-button { max-width: 100%; min-width: 0; min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: var(--text-body); line-height: 1.35; text-align: left; text-decoration: none; }
/* Nama dokumen panjang dipotong satu baris dengan elipsis; nama lengkap tersedia pada tooltip (title). */
#adminApp .process-document-button span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#adminApp .process-document-button .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Efek hover tombol utama bersama (sebelumnya belum ada); tombol nonaktif tidak berubah. */
.btn-primary:not(:disabled):not(.disabled):hover { background: #d95f20; box-shadow: 0 10px 22px rgba(232, 111, 45, .28); transform: translateY(-1px); }
.btn-primary { transition: background .2s, box-shadow .2s, transform .2s; }
#adminApp .process-document-button { color: #fff; }
/* Detail Pengajuan: panel Log Pemrosesan lebih lebar agar nama dokumen dan catatan tidak terlalu sempit. */
@media (min-width: 901px) {
  #adminApp [data-submission-detail] .detail-page-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Notifikasi: item bersama (popover header dan halaman /notifikasi/). */
.notification-item { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:12px; align-items:start; padding:11px 12px; border:0; border-radius:10px; background:#fff; color:var(--navy); text-decoration:none; transition:background .15s; }
.notification-item:hover, .notification-item:focus-visible { background:#f6f7f9; outline:0; }
.notification-item.is-unread { background:#fff7f1; }
.notification-item.is-unread:hover, .notification-item.is-unread:focus-visible { background:#ffefe3; }
.notification-item__icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--orange-soft); color:var(--orange); }
.notification-item__icon.is-service_created { background:#eaf1ff; color:#3b6fd1; }
.notification-item__icon.is-status_confirmed, .notification-item__icon.is-status_approved { background:#e5f6ec; color:#1f9d55; }
.notification-item__icon.is-status_rejected { background:#ffeef0; color:#c94444; }
.notification-item__icon .ui-icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; }
.notification-item__body { min-width:0; display:grid; gap:2px; }
.notification-item__body strong { font-size:var(--text-body); line-height:1.35; }
.notification-item__message { color:var(--muted); font-size:var(--text-small); line-height:1.4; overflow-wrap:anywhere; }
.notification-item time { color:#8a93a1; font-size:var(--text-caption); }
.notification-item__dot { width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--orange); }
.notification-list { display:grid; gap:2px; }
.notification-list__empty { margin:0; padding:22px 12px; color:var(--muted); font-size:var(--text-body); text-align:center; }

/* Popover header: ringkas, maksimal 10 item, tautan Lihat semua di bawah. */
.notification-menu .header-popover.notification-popover { width:min(380px, calc(100vw - 24px)); max-height:min(560px, 76vh); padding:0; display:flex; flex-direction:column; overflow:hidden; }
.notification-popover__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.notification-popover__head b { font:700 var(--text-nav) var(--font-heading); color:var(--navy); }
.notification-popover .notification-popover__count, .notification-popover [data-notification-summary] { display:inline-flex; margin:0; padding:3px 9px; border-radius:999px; background:#f1f2f4; color:var(--muted); font-size:var(--text-caption); font-weight:700; }
.notification-popover [data-notification-summary].is-unread { background:var(--orange-soft); color:var(--orange); }
.notification-list--compact, .notification-popover [data-notification-items] { flex:1; min-height:0; overflow:auto; padding:6px; }
.notification-list--compact .notification-item__body strong, .notification-list--compact .notification-item__message { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notification-popover__all { display:block; padding:13px 16px; border-top:1px solid var(--line); color:var(--orange); font-size:var(--text-body); font-weight:700; text-align:center; text-decoration:none; }
.notification-popover__all:hover, .notification-popover__all:focus-visible { background:#fff7f1; outline:0; }

/* Halaman Notifikasi. */
.notification-page { padding:18px; }
.notification-page__tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.notification-page__tabs button { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--navy); font:600 var(--text-body) var(--font-body); cursor:pointer; }
.notification-page__tabs button b { min-width:22px; padding:1px 7px; border-radius:999px; background:#f1f2f4; font-size:var(--text-caption); text-align:center; }
.notification-page__tabs button[aria-selected="true"] { border-color:var(--orange); background:var(--orange-soft); color:var(--orange); }
.notification-page__tabs button[aria-selected="true"] b { background:var(--orange); color:#fff; }
.notification-page__state { margin:0; padding:28px 12px; color:var(--muted); font-size:var(--text-body); text-align:center; }
.notification-page .notification-item { padding:14px 16px; }
.notification-page .notification-item + .notification-item { box-shadow:0 -1px 0 #f0f1f4; }
.notification-page__more { display:flex; justify-content:center; margin-top:14px; }
.notification-page__more .btn.hidden { display:none; }
/* Footer popover notifikasi: tombol utama "Lihat semua" selebar popover (menimpa gaya tautan menu .header-popover a). */
.notification-popover__footer { padding:10px 12px 12px; border-top:1px solid var(--line); background:#fff; }
#adminApp .notification-popover .notification-popover__all { width:100%; min-height:42px; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-top:0; border-radius:9px; background:var(--orange); color:#fff; font-size:var(--text-body); font-weight:700; text-align:center; }
#adminApp .notification-popover .notification-popover__all:hover, #adminApp .notification-popover .notification-popover__all:focus-visible { background:#d95f20; color:#fff; }
#adminApp .notification-popover .notification-popover__all .ui-icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .2s; }
#adminApp .notification-popover .notification-popover__all:hover .ui-icon { transform:translateX(3px); }
/* Item di popover: kunci grid (menimpa .header-popover a { display:flex }) agar ikon, judul, dan pesan sejajar. */
#adminApp .notification-popover a.notification-item { display:grid; grid-template-columns:34px minmax(0,1fr) 8px; gap:12px; align-items:start; width:auto; padding:11px 12px; text-align:left; }
#adminApp .notification-popover a.notification-item:hover, #adminApp .notification-popover a.notification-item:focus-visible { color:var(--navy); }
.notification-item__icon { flex:0 0 34px; }

/* Surat dokumen bersama (`letter_layouts/partials/letter_document.html` + `letterPreview.renderDocument`):
   pratinjau wizard Jenis Layanan dan surat otomatis pengajuan memakai aturan yang sama. */
.letter-document .letter-wizard-page { padding-bottom:80px; }
.letter-document .letter-wizard-page main { text-align:left; font-size:10px; line-height:1.55; }
.letter-document .letter-wizard-page main h3 { margin:0 0 4px; font-size:12px; text-align:center; text-decoration:underline; }
.letter-document .letter-wizard-page main table { width:auto; min-width:0; border-collapse:collapse; font:inherit; }
.letter-document .letter-wizard-page main td { padding:1px 8px 1px 0; border:0; background:transparent; color:inherit; font:inherit; vertical-align:top; }
.letter-document__signers { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px 28px; margin-top:26px; }
.letter-document__signer { display:flex; flex-direction:column; min-width:140px; text-align:center; font-size:9px; }
.letter-document__signer b { margin-top:34px; text-decoration:underline; }
.letter-document__signer em { font-style:normal; }

/* Tombol dengan menu bersama (`ui.enhanceMenuButtons`): memakai gaya menu aksi `.action-dropdown`.
   Bawaan terbuka ke bawah rata kanan; data-menu-placement="top" terbuka ke atas rata kiri. */
.menu-button { position:relative; display:inline-flex; }
.menu-button__caret { width:7px; height:7px; margin-left:2px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .16s ease; }
.menu-button [aria-expanded="true"] .menu-button__caret { transform:rotate(-135deg) translate(-2px,-1px); }
.menu-button .action-dropdown { top:calc(100% + 8px); right:0; left:auto; bottom:auto; width:max-content; min-width:240px; max-width:min(360px,90vw); transform-origin:top right; }
.menu-button[data-menu-placement="top"] .action-dropdown { top:auto; bottom:calc(100% + 8px); right:auto; left:0; min-width:300px; transform-origin:bottom left; }
.menu-button[data-menu-placement="top"] .menu-button__caret { transform:rotate(-135deg) translate(-2px,-1px); }
.menu-button[data-menu-placement="top"] [aria-expanded="true"] .menu-button__caret { transform:rotate(45deg) translate(-2px,-2px); }
.menu-button .action-dropdown a, .menu-button .action-dropdown button { width:100%; display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border:0; border-radius:6px; background:#fff; color:var(--navy); text-align:left; text-decoration:none; cursor:pointer; }
.menu-button .action-dropdown a:hover, .menu-button .action-dropdown a:focus-visible { background:#f6f7f9; outline:0; }
.menu-button .action-dropdown :is(a, button) > span { display:grid; gap:3px; }
.menu-button .action-dropdown b { font-size:var(--text-body,14px); }
.menu-button .action-dropdown small { color:var(--muted); font-size:var(--text-small,13px); font-weight:400; line-height:1.4; }
.menu-button .action-dropdown .ui-icon { width:18px; height:18px; flex:0 0 18px; margin-top:1px; fill:none; stroke:currentColor; stroke-width:1.8; }
.menu-button .action-dropdown:not(.hidden) { animation:menuButtonIn .16s ease-out; }
@keyframes menuButtonIn { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
.menu-button[data-menu-placement="top"] .action-dropdown:not(.hidden) { animation-name:menuButtonInUp; }
@keyframes menuButtonInUp { from { opacity:0; transform:translateY(6px) scale(.98); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .menu-button .action-dropdown:not(.hidden), .menu-button__caret { animation:none; transition:none; } }
@media (max-width:620px) { .menu-button[data-menu-placement="top"], .menu-button[data-menu-placement="top"] > .btn { width:100%; } .menu-button[data-menu-placement="top"] .action-dropdown { min-width:0; width:100%; } }