/* ============================================================
   Penyesuaian bentuk UI di atas Metronic demo13.
   Dimuat SETELAH style.bundle.css (layouts app & guest).

   1. Sudut membulat — demo13 mematok semua radius ke 0 (token
      --bs-*-radius dan banyak aturan `border-radius:0` langsung),
      jadi token dikembalikan lalu aturan yang di-hardcode ditimpa.
   2. Penanda urut kolom tabel (public/assets/js/table-sort.js).
   ============================================================ */

/* ---------- 1. Sudut membulat ---------- */
:root,
[data-bs-theme] {
    --bs-border-radius: .475rem;
    --bs-border-radius-sm: .425rem;
    --bs-border-radius-lg: .625rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
}

.btn,
.btn-group-sm > .btn,
.btn-sm {
    --bs-btn-border-radius: var(--bs-border-radius);
}

.btn-group-lg > .btn,
.btn-lg {
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.card {
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
}

.card-rounded {
    border-radius: var(--bs-border-radius-lg);
}

.form-control,
.form-select,
.input-group-text {
    border-radius: var(--bs-border-radius);
}

.form-check-input[type=checkbox] {
    border-radius: .35em;
}

.form-switch .form-check-input {
    border-radius: 2em;
}

.dropdown-menu {
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - 1px);
}

.menu-sub-dropdown,
.select2-container--bootstrap5 .select2-dropdown {
    border-radius: var(--bs-border-radius);
}

.badge {
    --bs-badge-border-radius: var(--bs-border-radius-sm);
}

.modal {
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
}

.modal-rounded {
    border-radius: var(--bs-border-radius-lg) !important;
}

.accordion {
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - 1px);
}

.popover {
    --bs-popover-border-radius: var(--bs-border-radius);
    --bs-popover-inner-border-radius: calc(var(--bs-border-radius) - 1px);
}

.tooltip {
    --bs-tooltip-border-radius: var(--bs-border-radius-sm);
}

.pagination {
    --bs-pagination-border-radius: var(--bs-border-radius);
}

.page-item .page-link {
    border-radius: var(--bs-border-radius);
}

.rounded,
.rounded-2 {
    border-radius: var(--bs-border-radius) !important;
}

.rounded-1 {
    border-radius: var(--bs-border-radius-sm) !important;
}

.rounded-3 {
    border-radius: var(--bs-border-radius-lg) !important;
}

/* demo13 dikompilasi tanpa properti border-radius sama sekali di komponen ini (hanya
   variabelnya yang tersisa), jadi mengubah variabel saja tidak cukup — propertinya
   dipasang lagi. Varian khusus (.btn-circle, .btn-flush, .btn-link, .badge-circle,
   .symbol-circle, .symbol-square) selektornya lebih spesifik, jadi tetap menang. */
.btn {
    border-radius: var(--bs-btn-border-radius);
}

.badge {
    border-radius: var(--bs-badge-border-radius);
}

.card {
    border-radius: var(--bs-card-border-radius);
}

.card > .card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card > .card-footer:last-child {
    border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

.dropdown-menu {
    border-radius: var(--bs-dropdown-border-radius);
}

.modal-content {
    border-radius: var(--bs-modal-border-radius);
}

.modal-header {
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.modal-footer {
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
}

.popover {
    border-radius: var(--bs-popover-border-radius);
}

.tooltip-inner {
    border-radius: var(--bs-tooltip-border-radius);
}

.accordion-item:first-of-type {
    border-top-left-radius: var(--bs-accordion-border-radius);
    border-top-right-radius: var(--bs-accordion-border-radius);
}

.accordion-item:last-of-type {
    border-bottom-left-radius: var(--bs-accordion-border-radius);
    border-bottom-right-radius: var(--bs-accordion-border-radius);
}

.list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.list-group-item:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.symbol > img,
.symbol .symbol-label,
.image-input .image-input-wrapper {
    border-radius: var(--bs-border-radius);
}

.menu-sub-dropdown .menu-link {
    border-radius: var(--bs-border-radius-sm);
}

/* Sambungan input-group & btn-group: aturan ini dibuang demo13 karena
   radiusnya 0. Tanpanya sudut di tengah gabungan ikut membulat. */
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn.dropdown-toggle-split:first-child,
.btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:nth-child(n+3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ---------- 2. Urut kolom tabel ---------- */
th[data-sort-col] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th[data-sort-col]:hover,
th[data-sort-col][aria-sort=ascending],
th[data-sort-col][aria-sort=descending] {
    color: var(--bs-primary) !important;
}

th[data-sort-col]::after {
    content: "";
    display: inline-block;
    width: .55rem;
    height: .8rem;
    margin-left: .35rem;
    vertical-align: -.1rem;
    background-color: currentColor;
    opacity: .35;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3e%3cpath d='M4 0l4 5H0zM4 12L0 7h8z'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3e%3cpath d='M4 0l4 5H0zM4 12L0 7h8z'/%3e%3c/svg%3e") center / contain no-repeat;
}

th[data-sort-col][aria-sort=ascending]::after {
    opacity: 1;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3e%3cpath d='M4 0l4 5H0z'/%3e%3cpath d='M4 12L0 7h8z' opacity='.3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3e%3cpath d='M4 0l4 5H0z'/%3e%3cpath d='M4 12L0 7h8z' opacity='.3'/%3e%3c/svg%3e");
}

th[data-sort-col][aria-sort=descending]::after {
    opacity: 1;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3e%3cpath d='M4 0l4 5H0z' opacity='.3'/%3e%3cpath d='M4 12L0 7h8z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3e%3cpath d='M4 0l4 5H0z' opacity='.3'/%3e%3cpath d='M4 12L0 7h8z'/%3e%3c/svg%3e");
}

th[data-sort-col]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* ---------------------------------------------------------------- Jejak Angka (PRD Jejak Angka K2)
   Angka hitungan yang bisa diklik: garis bawah putus-putus tipis, warna angka tidak berubah. */
a.trace-num {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--bs-gray-500);
    cursor: pointer;
}

a.trace-num:hover,
a.trace-num:focus-visible {
    color: var(--bs-primary);
    text-decoration-style: solid;
    text-decoration-color: var(--bs-primary);
}

.trace-offcanvas {
    --bs-offcanvas-width: min(560px, 100vw);
}

@media print {
    a.trace-num {
        text-decoration: none;
    }
}

/* ============================================================
   Pusat Panduan (resources/panduan → GuideLibrary::render): Markdown polos tanpa kelas,
   jadi tipografinya diatur dari pembungkus .guide-content.
   ============================================================ */
.guide-offcanvas {
    --bs-offcanvas-width: min(620px, 100vw);
}

.guide-content {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--bs-gray-800);
}

.guide-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bs-gray-900);
    margin: 2rem 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-gray-200);
    scroll-margin-top: 130px;
}

.guide-content h2:first-child {
    margin-top: 0;
}

.guide-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bs-gray-900);
    margin: 1.5rem 0 0.6rem;
}

.guide-content p,
.guide-content ul,
.guide-content ol {
    margin-bottom: 0.9rem;
}

.guide-content li {
    margin-bottom: 0.35rem;
}

.guide-content li > ul,
.guide-content li > ol {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.guide-content strong {
    color: var(--bs-gray-900);
}

.guide-content blockquote {
    margin: 1rem 0;
    padding: 0.85rem 1.1rem;
    border-left: 4px solid var(--bs-primary);
    background: var(--bs-primary-light);
    border-radius: 0.5rem;
}

.guide-content blockquote p:last-child {
    margin-bottom: 0;
}

.guide-content code {
    font-size: 0.95em;
}

.guide-content table th {
    font-weight: 700;
    color: var(--bs-gray-700);
}

.guide-snippet mark {
    padding: 0 0.15em;
    background: var(--bs-warning-light);
    color: inherit;
}

@media print {
    .guide-permissions {
        display: none;
    }
}