/* Final public UI layer — kompatibel dengan Bootstrap 4/5 dan halaman CSS mandiri. */
:root {
    --pub-bg: #f6f8f7;
    --pub-surface: #ffffff;
    --pub-surface-soft: #f5fbfa;
    --pub-text: #17262f;
    --pub-muted: #667780;
    --pub-line: #dce8e6;
    --pub-primary: #087f73;
    --pub-primary-dark: #05675e;
    --pub-primary-soft: #e7f7f4;
    --pub-gold: #e4a514;
    --pub-danger: #d9364f;
    --pub-success: #168a58;
    --pub-radius: 16px;
    --pub-radius-lg: 24px;
    --pub-shadow: 0 12px 32px rgba(23, 38, 47, .085);
    --pub-focus: 0 0 0 .2rem rgba(8,127,115,.2);
}
html { scroll-behavior: smooth; }
body.public-ui-final,
body.public-ui-final * { box-sizing: border-box; }
body.public-ui-final {
    color: var(--pub-text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 15px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
body.public-ui-final img { max-width: 100%; }
body.public-ui-final a { text-underline-offset: 3px; }
body.public-ui-final h1,
body.public-ui-final h2,
body.public-ui-final h3,
body.public-ui-final h4,
body.public-ui-final h5 { letter-spacing: -.025em; }
body.public-ui-final .container,
body.public-ui-final .container-fluid { --bs-gutter-x: 1.5rem; }

/* Navigasi dan hero */
body.public-ui-final .navbar {
    min-height: 68px;
    box-shadow: 0 4px 18px rgba(23,38,47,.09);
}
body.public-ui-final .navbar-brand { font-weight: 850; letter-spacing: -.025em; }
body.public-ui-final .navbar .nav-link { min-height: 42px; display: inline-flex; align-items: center; font-weight: 650; border-radius: 10px; }
body.public-ui-final .hero,
body.public-ui-final .hero-section,
body.public-ui-final .page-hero { border-radius: var(--pub-radius-lg) !important; }

/* Card */
body.public-ui-final .card,
body.public-ui-final .card-soft {
    border: 1px solid var(--pub-line) !important;
    border-radius: var(--pub-radius) !important;
    box-shadow: var(--pub-shadow) !important;
    overflow: hidden;
}
body.public-ui-final .card-header,
body.public-ui-final .card-soft .card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--pub-line) !important;
}
body.public-ui-final .card-body { padding: 18px; }
body.public-ui-final .card-footer { padding: 13px 18px; border-top: 1px solid var(--pub-line); background: var(--pub-surface-soft); }

/* Form */
body.public-ui-final label,
body.public-ui-final .form-label { color: var(--pub-text); font-size: .86rem; font-weight: 750; margin-bottom: .42rem; }
body.public-ui-final label.ui-required-label::after { content: " *"; color: var(--pub-danger); font-weight: 900; }
body.public-ui-final label.ui-required-label .text-danger { display: none; }
body.public-ui-final .form-control,
body.public-ui-final .form-select,
body.public-ui-final .custom-select,
body.public-ui-final .input-group-text {
    min-height: 46px;
    border: 1px solid #cfdcda !important;
    border-radius: 11px !important;
    color: var(--pub-text);
    font-size: .92rem;
    box-shadow: none !important;
}
body.public-ui-final textarea.form-control { min-height: 104px; resize: vertical; }
body.public-ui-final .form-control-sm,
body.public-ui-final .form-select-sm,
body.public-ui-final .custom-select-sm { min-height: 38px !important; height: auto !important; font-size: .84rem; }
body.public-ui-final .form-control:focus,
body.public-ui-final .form-select:focus,
body.public-ui-final .custom-select:focus {
    border-color: var(--pub-primary) !important;
    box-shadow: var(--pub-focus) !important;
}
body.public-ui-final .input-group > .form-control:not(:last-child),
body.public-ui-final .input-group > .form-select:not(:last-child),
body.public-ui-final .input-group > .custom-select:not(:last-child) { border-radius: 11px 0 0 11px !important; }
body.public-ui-final .input-group > .input-group-append .btn,
body.public-ui-final .input-group > .input-group-prepend .btn,
body.public-ui-final .input-group-text { border-radius: 0 11px 11px 0 !important; }
body.public-ui-final .form-text,
body.public-ui-final small.text-muted { font-size: .79rem; line-height: 1.45; }
body.public-ui-final .invalid-feedback { font-size: .8rem; font-weight: 650; }

/* Tombol */
body.public-ui-final .btn {
    min-height: 42px;
    padding: .54rem .9rem;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    font-weight: 750;
    line-height: 1.25;
    white-space: normal;
    box-shadow: none !important;
}
body.public-ui-final .btn-sm { min-height: 36px; padding: .4rem .66rem; font-size: .8rem; }
body.public-ui-final .btn-lg { min-height: 49px; }
body.public-ui-final .btn-primary { background: var(--pub-primary); border-color: var(--pub-primary); }
body.public-ui-final .btn-primary:hover,
body.public-ui-final .btn-primary:focus { background: var(--pub-primary-dark); border-color: var(--pub-primary-dark); }
body.public-ui-final .btn-success { background: var(--pub-success); border-color: var(--pub-success); }
body.public-ui-final .ui-icon-only { width: 42px; padding-left: 0; padding-right: 0; }
body.public-ui-final .ui-submit-busy { pointer-events: none; opacity: .78; }
body.public-ui-final .ui-submit-busy::after {
    content: "";
    width: 14px;
    height: 14px;
    margin-left: 7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: public-ui-spin .7s linear infinite;
}
@keyframes public-ui-spin { to { transform: rotate(360deg); } }

/* Tabel */
body.public-ui-final .table-responsive {
    border-radius: 13px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #aac4c0 transparent;
}
body.public-ui-final .table-responsive:focus-visible { outline: 3px solid rgba(8,127,115,.25); outline-offset: 2px; }
body.public-ui-final .table { margin-bottom: 0; color: var(--pub-text); }
body.public-ui-final .table thead th {
    padding: .78rem .72rem;
    background: var(--pub-surface-soft) !important;
    color: var(--pub-text) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--pub-line) !important;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .025em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 3;
}
body.public-ui-final .table td {
    padding: .72rem;
    border-top-color: var(--pub-line);
    color: var(--pub-text);
    font-size: .86rem;
    vertical-align: middle;
}
body.public-ui-final .table-hover tbody tr:hover td { background: rgba(8,127,115,.045); }
body.public-ui-final .score-input { min-width: 90px; text-align: center; font-weight: 750; }

/* Modal, alert, badge, pagination */
body.public-ui-final .modal-content { border: 1px solid var(--pub-line); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.24); overflow: hidden; }
body.public-ui-final .modal-header { background: var(--pub-surface-soft); border-bottom-color: var(--pub-line); }
body.public-ui-final .modal-body { max-height: calc(100vh - 190px); overflow-y: auto; }
body.public-ui-final .modal-footer { position: sticky; bottom: 0; z-index: 4; background: #fff; border-top-color: var(--pub-line); box-shadow: 0 -7px 18px rgba(23,38,47,.06); }
body.public-ui-final .alert { border-radius: 13px; font-size: .88rem; }
body.public-ui-final .badge { border-radius: 999px; padding: .42em .68em; font-weight: 750; }
body.public-ui-final .pagination { flex-wrap: wrap; gap: 4px; }
body.public-ui-final .page-link { min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px !important; }

/* Aksesibilitas */
body.public-ui-final a,
body.public-ui-final button,
body.public-ui-final input,
body.public-ui-final select,
body.public-ui-final textarea { -webkit-tap-highlight-color: transparent; }
body.public-ui-final :focus { outline: none; }
body.public-ui-final :focus-visible { outline: 3px solid rgba(8,127,115,.35) !important; outline-offset: 2px !important; }
body.public-ui-final .form-control:focus-visible,
body.public-ui-final .form-select:focus-visible,
body.public-ui-final .custom-select:focus-visible { outline: 0 !important; }

/* Responsif */
@media (max-width: 767.98px) {
    body.public-ui-final { font-size: 14px; }
    body.public-ui-final .container,
    body.public-ui-final .container-fluid { --bs-gutter-x: 1rem; }
    body.public-ui-final .navbar { min-height: 60px; }
    body.public-ui-final .card,
    body.public-ui-final .card-soft { border-radius: 14px !important; }
    body.public-ui-final .card-header { padding: 12px 14px; }
    body.public-ui-final .card-body { padding: 14px; }
    body.public-ui-final .btn:not(.ui-icon-only) { min-height: 44px; }
    body.public-ui-final .table-responsive { border: 1px solid var(--pub-line); }
    body.public-ui-final .table { min-width: 660px; }
    body.public-ui-final .table thead th { position: static; }
    body.public-ui-final .modal-dialog { margin: .6rem; }
    body.public-ui-final .modal-body { max-height: calc(100vh - 150px); padding: 14px; }
    body.public-ui-final .modal-footer { flex-wrap: wrap; padding: 10px 14px; }
    body.public-ui-final .modal-footer .btn { flex: 1 1 130px; }
    body.public-ui-final .hero,
    body.public-ui-final .hero-section,
    body.public-ui-final .page-hero { border-radius: 18px !important; }
}
@media (max-width: 420px) {
    body.public-ui-final .row { --bs-gutter-x: .75rem; }
    body.public-ui-final h1 { font-size: clamp(1.55rem, 9vw, 2.15rem); }
    body.public-ui-final .card-header .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.public-ui-final *,
    body.public-ui-final *::before,
    body.public-ui-final *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
@media print {
    body.public-ui-final .navbar,
    body.public-ui-final .btn,
    body.public-ui-final .pagination,
    body.public-ui-final .app-pagination-controls { display: none !important; }
    body.public-ui-final .card,
    body.public-ui-final .card-soft { box-shadow: none !important; break-inside: avoid; }
    body.public-ui-final .table-responsive { overflow: visible !important; }
    body.public-ui-final .table { min-width: 0 !important; }
}
body.public-ui-final .btn.rounded-pill,
body.public-ui-final .rounded-pill.btn,
body.public-ui-final .btn-pramuka,
body.public-ui-final .search-input { border-radius: 999px !important; }