/* ============================================================ FunnelPro — custom overrides Pengalihan navigasi vertikal <-> horizontal TANPA reload. Kedua navbar selalu ada di DOM; kita tampilkan sesuai atribut . ============================================================ */ /* --- MODE VERTIKAL (default / vertical): sembunyikan top horizontal bar --- */ #navbarTop { display: none; } /* --- MODE HORIZONTAL --- */ [data-navigation-type="horizontal"] .navbar-vertical, [data-navigation-type="horizontal"] #navbarDefault { display: none !important; } [data-navigation-type="horizontal"] #navbarTop { display: flex !important; } .navbar .nav-link, .navbar .dropdown-item, .navbar .nav-link-text, .navbar .nav-link-text-wrapper, .navbar .dropdown-item-wrapper, .navbar .logo-text { white-space: nowrap; } .navbar-nav-top { flex-wrap: nowrap; } .navbar-nav-icons { flex-wrap: nowrap; } .navbar-nav-top .nav-link, .navbar-nav-top .dropdown-toggle { display: inline-flex; align-items: center; } .navbar-nav-top .dropdown-menu { min-width: max-content; } [data-navigation-type="horizontal"] .content { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: auto !important; padding-left: 2rem !important; padding-right: 2rem !important; box-sizing: border-box; } html.navbar-vertical-collapsed[data-navigation-type="horizontal"] .content, html.navbar-vertical-collapsed[data-navigation-type="horizontal"] .navbar-vertical + .navbar.navbar-top ~ .content, html.navbar-vertical-collapsed[data-navigation-type="horizontal"] .navbar-vertical.navbar-expand-lg + .navbar.navbar-top ~ .content { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: auto !important; padding-left: 2rem !important; padding-right: 2rem !important; box-sizing: border-box; } /* Monitor Pengadaan */ .content { max-width: none !important; box-sizing: border-box; } .procurement-monitor { width: 100%; } .procurement-monitor .form-label { font-size: .68rem; font-weight: 700; margin-bottom: .25rem; } .procurement-filter-card .card-body { padding: 1rem 1.25rem; } .procurement-filter-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .75rem 1rem; align-items: end; } .procurement-filter-keyword { grid-column: span 3; } .procurement-filter-year { grid-column: span 1; } .procurement-filter-type, .procurement-filter-tender-type, .procurement-filter-lpse, .procurement-filter-tender-status, .procurement-filter-min, .procurement-filter-max, .procurement-filter-action { grid-column: span 2; } .procurement-filter-klpd, .procurement-filter-method { grid-column: span 3; } .procurement-filter-sources { grid-column: span 2; } .procurement-filter-detail { grid-column: span 2; } .procurement-filter-action { grid-column: 12 / 13; display: flex !important; align-items: end; justify-content: flex-end; align-self: end; justify-self: end; } .procurement-submit-icon-btn { width: 34px; height: 34px; } .procurement-submit-icon-btn.procurement-icon-btn { width: 34px; height: 34px; } .procurement-submit-svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .procurement-submit-spinner { width: .95rem; height: .95rem; border-width: .12rem; } .procurement-filter-card .form-control, .procurement-filter-card .form-select { min-height: 34px; padding-top: .35rem; padding-bottom: .35rem; } .inaproc-native-filter-stack { display: grid; gap: .75rem; } .inaproc-filter-row { display: grid; gap: .75rem; align-items: end; } .inaproc-filter-row-geo { grid-template-columns: minmax(86px, .55fr) minmax(170px, 1.05fr) minmax(220px, 1.45fr) minmax(150px, .95fr) minmax(220px, 1.45fr); } .inaproc-filter-row-payment { grid-template-columns: minmax(78px, .45fr) minmax(160px, .95fr) minmax(215px, 1.35fr) minmax(145px, .9fr) minmax(215px, 1.35fr) 34px; } .inaproc-filter-row-rup { grid-template-columns: minmax(132px, .75fr) minmax(190px, 1.05fr) minmax(150px, .85fr) minmax(260px, 1.55fr) 34px; } .inaproc-filter-row-realisasi { grid-template-columns: minmax(126px, .75fr) minmax(175px, 1.05fr) minmax(155px, .95fr) minmax(150px, .95fr) minmax(210px, 1.35fr) minmax(132px, .8fr) 34px; } .inaproc-filter-action { display: flex !important; justify-content: flex-end; } .inaproc-filter-action .btn { min-height: 34px; } .procurement-switch, .procurement-detail-check { min-height: 34px; display: flex; align-items: center; } .procurement-detail-check { gap: .45rem; padding-left: 0; margin-bottom: 0; } .procurement-source-checks .form-check { display: inline-flex; align-items: center; gap: .45rem; padding-left: 0; margin-bottom: 0; } .procurement-source-checks .form-check-input, .procurement-detail-check .form-check-input { float: none; margin-left: 0; margin-top: 0; flex: 0 0 auto; } .procurement-detail-check .form-check-label { white-space: nowrap; } .procurement-source-checks { min-height: 34px; } .procurement-metric-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .procurement-kpi-icon { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .procurement-multiselect { position: relative; } .procurement-multiselect-button { min-height: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 2rem; } .procurement-multiselect-menu { width: 100%; min-width: 320px; max-width: min(520px, calc(100vw - 2rem)); z-index: 1060; } .procurement-multiselect-options { max-height: 260px; overflow: auto; } .procurement-multiselect .dropdown-item { min-width: 0; } .procurement-multiselect .dropdown-item span { min-width: 0; } .procurement-table { width: max-content; min-width: 1680px; table-layout: auto; } .procurement-data-card > .table-responsive, .procurement-table-card > .table-responsive, .procurement-process-card > .table-responsive, .procurement-export-card > .table-responsive, .procurement-reference-card > .table-responsive, .procurement-source-card > .table-responsive { margin-left: 1rem; margin-right: 1rem; width: calc(100% - 2rem); } .procurement-data-card, .procurement-table-card, .procurement-process-card, .procurement-export-card, .procurement-reference-card, .procurement-source-card, .procurement-progress-panel { background-color: transparent !important; } .procurement-data-card .card-header, .procurement-table-card .card-header, .procurement-process-card .card-header, .procurement-export-card .card-header, .procurement-reference-card .card-header, .procurement-source-card .card-header, .procurement-progress-panel .card-header { background-color: transparent; } .procurement-table-load { max-width: 720px; } .procurement-table-title-progress { width: 128px; } .procurement-table-title-progress .progress { height: 4px; } .procurement-table th, .procurement-table td { vertical-align: middle; white-space: nowrap; font-size: .75rem; line-height: 1.25; padding: .42rem .55rem; } .procurement-table th { vertical-align: middle; } .procurement-table td { background-color: transparent !important; } .procurement-table tbody tr, .procurement-table tbody tr:hover, .procurement-process-table tbody tr, .procurement-process-table tbody tr:hover { background-color: transparent !important; --phoenix-table-bg: transparent; --phoenix-table-hover-bg: transparent; } .procurement-table th:nth-child(1), .procurement-table td:nth-child(1) { min-width: 118px; max-width: 118px; } .procurement-table th:nth-child(2), .procurement-table td:nth-child(2) { min-width: 112px; max-width: 112px; } .procurement-table th:nth-child(3), .procurement-table td:nth-child(3) { min-width: 330px; max-width: 330px; } .procurement-table th:nth-child(4), .procurement-table td:nth-child(4) { min-width: 230px; max-width: 230px; } .procurement-table th:nth-child(5), .procurement-table td:nth-child(5) { min-width: 220px; max-width: 220px; } .procurement-table th:nth-child(6), .procurement-table td:nth-child(6) { min-width: 118px; max-width: 118px; } .procurement-table th:nth-child(7), .procurement-table td:nth-child(7) { min-width: 150px; max-width: 150px; } .procurement-table th:nth-child(8), .procurement-table td:nth-child(8) { min-width: 145px; max-width: 145px; } .procurement-table th:nth-child(9), .procurement-table td:nth-child(9) { min-width: 145px; max-width: 145px; } .procurement-table th:nth-child(10), .procurement-table td:nth-child(10) { min-width: 150px; max-width: 150px; } .procurement-table th:nth-child(11), .procurement-table td:nth-child(11) { min-width: 155px; max-width: 155px; } .procurement-table th:nth-child(12), .procurement-table td:nth-child(12) { min-width: 90px; max-width: 90px; } .procurement-table td:nth-child(3), .procurement-table td:nth-child(4), .procurement-table td:nth-child(5), .procurement-table td:nth-child(7), .procurement-table td:nth-child(9), .procurement-table td:nth-child(10), .procurement-table td:nth-child(11) { overflow: hidden; text-overflow: ellipsis; } .procurement-table .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .procurement-inaproc-table { min-width: 1320px; } .procurement-inaproc-table th, .procurement-inaproc-table td { vertical-align: middle; white-space: nowrap; font-size: .75rem; line-height: 1.25; padding: .42rem .55rem; } .procurement-inaproc-table td { background-color: transparent !important; } .procurement-inaproc-table tbody tr, .procurement-inaproc-table tbody tr:hover { background-color: transparent !important; --phoenix-table-bg: transparent; --phoenix-table-hover-bg: transparent; } .procurement-inaproc-table th:nth-child(1), .procurement-inaproc-table td:nth-child(1) { min-width: 118px; max-width: 118px; } .procurement-inaproc-table th:nth-child(2), .procurement-inaproc-table td:nth-child(2) { min-width: 120px; max-width: 120px; } .procurement-inaproc-table th:nth-child(3), .procurement-inaproc-table td:nth-child(3) { min-width: 320px; max-width: 320px; } .procurement-inaproc-table th:nth-child(4), .procurement-inaproc-table td:nth-child(4) { min-width: 220px; max-width: 220px; } .procurement-inaproc-table th:nth-child(5), .procurement-inaproc-table td:nth-child(5) { min-width: 260px; max-width: 260px; } .procurement-inaproc-table th:nth-child(6), .procurement-inaproc-table td:nth-child(6) { min-width: 135px; max-width: 135px; } .procurement-inaproc-table th:nth-child(7), .procurement-inaproc-table td:nth-child(7) { min-width: 135px; max-width: 135px; } .procurement-inaproc-table th:nth-last-child(3), .procurement-inaproc-table td:nth-last-child(3) { min-width: 150px; max-width: 150px; } .procurement-inaproc-table th:nth-last-child(2), .procurement-inaproc-table td:nth-last-child(2) { min-width: 110px; max-width: 110px; } .procurement-inaproc-table th:last-child, .procurement-inaproc-table td:last-child { min-width: 64px; max-width: 64px; } .procurement-inaproc-table td:nth-child(1), .procurement-inaproc-table td:nth-child(2), .procurement-inaproc-table td:nth-child(3), .procurement-inaproc-table td:nth-child(4), .procurement-inaproc-table td:nth-child(5), .procurement-inaproc-table td:nth-child(6), .procurement-inaproc-table td:nth-child(7), .procurement-inaproc-table td:nth-last-child(2) { overflow: hidden; text-overflow: ellipsis; } .procurement-table-filters .form-control, .procurement-table-filters .form-select { min-height: 31px; } .procurement-table-filter-grid { display: grid; width: 100%; gap: .5rem; align-items: center; } .procurement-table-filter-grid-standard { grid-template-columns: minmax(260px, 2fr) repeat(5, minmax(132px, 1fr)) 32px; } .procurement-table-filter-grid-compact { grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(132px, 1fr)) 32px; } .procurement-table-filter-grid-search-only { grid-template-columns: minmax(260px, 1fr) 32px; } .procurement-table-filter-search { min-width: 0; } .procurement-table-filter-reset { display: flex; justify-content: flex-end; } .procurement-table-filter-reset .procurement-icon-btn { width: 32px; height: 31px; } .procurement-table-footer .form-select { min-width: 74px; } .procurement-process-table { min-width: 980px; } .procurement-process-table th, .procurement-process-table td { white-space: nowrap; vertical-align: middle; font-size: .75rem; line-height: 1.25; padding: .42rem .55rem; background-color: transparent !important; } .procurement-export-card .table th, .procurement-export-card .table td, .procurement-simple-table th, .procurement-simple-table td { font-size: .75rem; line-height: 1.25; padding: .42rem .55rem !important; background-color: transparent !important; } .procurement-simple-table th, .procurement-simple-table td { white-space: nowrap; vertical-align: middle; } .procurement-simple-table td:last-child, .procurement-simple-table th:last-child { white-space: normal; } .procurement-job-progress { min-width: 180px; } .procurement-action-buttons { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; white-space: nowrap; } .procurement-icon-btn { width: 1.75rem; height: 1.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .procurement-reference-list { max-height: 420px; overflow: auto; } .procurement-progress-panel .card-body { background-color: transparent; } .procurement-progress-item { padding: .35rem 0; } .procurement-page-mask { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(11, 17, 32, .52); backdrop-filter: blur(2px); } .procurement-page-mask-panel { width: min(420px, 100%); border: 1px solid var(--phoenix-border-color); border-radius: 8px; background: var(--phoenix-body-bg); box-shadow: var(--phoenix-box-shadow-lg); padding: 1rem; } .procurement-mask-progress-running { width: 38%; min-width: 38%; animation: procurement-mask-progress 1.05s ease-in-out infinite; } @keyframes procurement-mask-progress { 0% { transform: translateX(-110%); } 50% { transform: translateX(85%); } 100% { transform: translateX(265%); } } .procurement-detail-modal { z-index: 1080; } .procurement-detail-modal .modal-backdrop { z-index: 0; } .procurement-detail-modal .modal-dialog { position: relative; z-index: 1; } .procurement-detail-table th { width: 220px; color: var(--phoenix-secondary-color); vertical-align: top; } .procurement-detail-table td { white-space: normal; } .account-page .form-label { font-size: .68rem; font-weight: 700; margin-bottom: .25rem; } .account-card { background-color: transparent !important; } .account-card .card-header { background-color: transparent; } .settings-page { max-width: 100%; } .settings-page h2 { font-size: 1.35rem; font-weight: 800; } .settings-section { border-color: var(--phoenix-border-color); overflow: hidden; padding: 0; } .settings-section-header { min-height: 3rem; padding: .75rem 1rem; border-bottom: 1px solid var(--phoenix-border-color); } .settings-section-header h5 { font-size: .92rem; font-weight: 800; } .settings-section-icon { color: var(--phoenix-primary); display: inline-flex; width: 1.1rem; height: 1.1rem; align-items: center; justify-content: center; } .settings-section .card-body { padding-left: 1rem; padding-right: 1rem; } .settings-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 240px); gap: 1rem; align-items: center; min-height: 3.05rem; padding: .65rem 0; border-bottom: 1px dashed var(--phoenix-border-color); } .settings-row:last-child { border-bottom: 0; } .settings-row-main { min-width: 0; display: flex; align-items: center; gap: .5rem; } .settings-label { min-width: 0; color: var(--phoenix-body-color); font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-row-control, .settings-row-value { min-width: 0; display: flex; justify-content: flex-end; } .settings-control { max-width: 210px; width: 100%; } .settings-control.form-select, .settings-control .form-control, .settings-control .input-group-text { min-height: 2rem; font-size: .78rem; } .settings-badge { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .settings-save-btn { height: 34px; min-height: 2rem; min-width: 5.5rem; padding-top: .35rem; padding-bottom: .35rem; font-size: .78rem; } .settings-admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.25rem; } .settings-admin-grid .settings-row { grid-template-columns: minmax(0, 1fr) minmax(120px, 190px); } .account-avatar { width: 56px; height: 56px; font-weight: 700; } .account-notification-menu { width: min(360px, calc(100vw - 1.5rem)); } .account-notification-list { max-height: 360px; overflow: auto; } .account-notification-list .dropdown-item { white-space: normal; } @media (max-width: 991.98px) { .procurement-filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .procurement-filter-keyword, .procurement-filter-klpd, .procurement-filter-method, .procurement-filter-sources { grid-column: span 3; } .procurement-filter-year, .procurement-filter-type, .procurement-filter-tender-type, .procurement-filter-lpse, .procurement-filter-tender-status, .procurement-filter-min, .procurement-filter-max, .procurement-filter-detail, .procurement-filter-action { grid-column: span 2; } .procurement-filter-action { grid-column: 6 / 7; } .inaproc-filter-row-geo, .inaproc-filter-row-payment, .inaproc-filter-row-rup, .inaproc-filter-row-realisasi, .inaproc-filter-row-search { grid-template-columns: repeat(2, minmax(0, 1fr)); } .procurement-table-filter-grid-standard, .procurement-table-filter-grid-compact { grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(132px, 1fr)) 32px; } .procurement-table-filter-grid-search-only { grid-template-columns: minmax(220px, 1fr) 32px; } } @media (max-width: 767.98px) { [data-navigation-type="horizontal"] .content, .content { padding-left: 1rem !important; padding-right: 1rem !important; } .procurement-filter-grid { grid-template-columns: 1fr; } .procurement-filter-grid > * { grid-column: 1 / -1 !important; } .inaproc-filter-row-geo, .inaproc-filter-row-payment, .inaproc-filter-row-rup, .inaproc-filter-row-realisasi, .inaproc-filter-row-search { grid-template-columns: 1fr; } .inaproc-filter-row > * { grid-column: 1 / -1 !important; } .procurement-table-filter-grid, .procurement-table-filter-grid-standard, .procurement-table-filter-grid-compact, .procurement-table-filter-grid-search-only { grid-template-columns: 1fr; } .procurement-table-filter-reset { justify-content: stretch; } .procurement-table-filter-reset .procurement-icon-btn { width: 100%; } .procurement-data-card > .table-responsive, .procurement-table-card > .table-responsive, .procurement-process-card > .table-responsive, .procurement-export-card > .table-responsive, .procurement-reference-card > .table-responsive, .procurement-source-card > .table-responsive { margin-left: .75rem; margin-right: .75rem; width: calc(100% - 1.5rem); } .settings-row, .settings-admin-grid .settings-row { grid-template-columns: 1fr; gap: .5rem; } .settings-row-main, .settings-row-control, .settings-row-value { justify-content: flex-start; } .settings-admin-grid { grid-template-columns: 1fr; } .settings-control { max-width: 100%; } } /* ============================================================ ANTI-FLICKER saat pindah halaman Sidebar disuntik via JS, jadi tanpa ini .content "melompat" dari lebar penuh -> bergeser saat sidebar muncul. Kita PESAN ruangnya lebih dulu berdasarkan data-navigation-type di (sudah di-set config.js SEBELUM paint), sehingga konten langsung di posisi benar — navbar tinggal mengisi, tanpa geseran. ======================================== */