/* ============================================================
* TOSCA SKIN v5 — INNER PAGES PROFESSIONAL REDESIGN
* Targets: page-header, breadcrumb, forms, tables, buttons,
* modals, alerts, nav-tabs, select2, switches.
* Loads after v4-dark.css. May 2026.
* ============================================================ */
:root {
--z5-bg: #f6f9fc;
--z5-surface: #ffffff;
--z5-ink: #0f172a;
--z5-mute: #64748b;
--z5-line: #e6ecf2;
--z5-tosca: #0d9488;
--z5-tosca-2: #14b8a6;
--z5-tosca-soft: #ccfbf1;
--z5-tosca-tint: #f0fdfa;
--z5-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.04);
--z5-shadow-md: 0 4px 14px -4px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
--z5-shadow-lg: 0 18px 38px -16px rgba(15,23,42,.12), 0 6px 16px -8px rgba(15,23,42,.06);
--z5-radius: 14px;
--z5-radius-sm: 10px;
--z5-focus: 0 0 0 4px rgba(20,184,166,.18);
}
/* ----------------------------------------------------------
* Page background — soft tinted gradient
* ---------------------------------------------------------- */
body.app, .app-content {
background:
radial-gradient(1200px 320px at 70% -120px, rgba(20,184,166,.08), transparent 60%),
radial-gradient(900px 280px at -10% 110%, rgba(99,102,241,.06), transparent 70%),
var(--z5-bg) !important;
}
/* ----------------------------------------------------------
* PAGE HEADER — pro typography + chip breadcrumb
* ---------------------------------------------------------- */
.page-header {
padding: 26px 0 18px !important;
margin: 0 0 18px !important;
border: 0 !important;
background: transparent !important;
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 14px !important;
}
.page-header .page-leftheader { padding: 0 !important; }
.page-header .page-title {
font-size: 22px !important;
font-weight: 700 !important;
color: var(--z5-ink) !important;
letter-spacing: -.018em !important;
margin: 0 0 8px !important;
line-height: 1.2 !important;
position: relative !important;
padding-left: 12px !important;
}
.page-header .page-title::before {
content: "" !important;
position: absolute !important;
left: 0; top: 4px; bottom: 4px;
width: 4px !important;
background: linear-gradient(180deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
border-radius: 4px !important;
}
.page-header .breadcrumb {
background: transparent !important;
padding: 0 !important;
margin: 0 0 0 12px !important;
border: 0 !important;
font-size: 12.5px !important;
}
.page-header .breadcrumb-item a {
color: var(--z5-mute) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
transition: color .15s !important;
}
.page-header .breadcrumb-item a:hover { color: var(--z5-tosca) !important; }
.page-header .breadcrumb-item.active a,
.page-header .breadcrumb-item.active { color: var(--z5-ink) !important; font-weight: 600 !important; }
.page-header .breadcrumb-item + .breadcrumb-item::before {
content: "›" !important;
color: var(--z5-mute) !important;
padding: 0 8px !important;
opacity: .6 !important;
}
/* ----------------------------------------------------------
* CARD — refined inner card (chart/form/table)
* ---------------------------------------------------------- */
.card.v4-non-stat,
body.app .card:not(.v4-stat) {
background: var(--z5-surface) !important;
border: 1px solid var(--z5-line) !important;
border-radius: var(--z5-radius) !important;
box-shadow: var(--z5-shadow-md) !important;
overflow: hidden !important;
}
.card.v4-non-stat .card-header,
body.app .card:not(.v4-stat) > .card-header {
background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%) !important;
border-bottom: 1px solid var(--z5-line) !important;
padding: 18px 24px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
border-radius: 0 !important;
min-height: 64px !important;
}
.card.v4-non-stat .card-title,
body.app .card:not(.v4-stat) .card-title {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--z5-ink) !important;
margin: 0 !important;
letter-spacing: -.01em !important;
line-height: 1.3 !important;
}
.card.v4-non-stat .card-body,
body.app .card:not(.v4-stat) > .card-body { padding: 24px !important; }
.card.v4-non-stat .card-footer,
body.app .card:not(.v4-stat) > .card-footer {
background: #fbfdff !important;
border-top: 1px solid var(--z5-line) !important;
padding: 16px 24px !important;
}
/* Chip icon in card-header (existing tosca tile) */
.card .card-header .header-icon,
.card .card-header .feather,
.card .card-header > .icon-bg,
.card .card-header > i:first-child { flex-shrink: 0 !important; }
/* ----------------------------------------------------------
* FORMS — inputs, textareas, selects, labels
* ---------------------------------------------------------- */
.form-group, .mb-3 { margin-bottom: 18px !important; }
.form-group > label,
.form-label,
label.col-form-label,
label.form-label {
font-size: 13px !important;
font-weight: 600 !important;
color: #334155 !important;
margin-bottom: 8px !important;
letter-spacing: .005em !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.form-control,
.form-select,
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="search"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control {
background: #fbfdff !important;
border: 1px solid var(--z5-line) !important;
border-radius: var(--z5-radius-sm) !important;
height: 44px !important;
padding: 10px 14px !important;
font-size: 14px !important;
color: var(--z5-ink) !important;
box-shadow: none !important;
transition: border-color .15s, box-shadow .15s, background .15s !important;
}
textarea.form-control { height: auto !important; min-height: 110px !important; padding: 12px 14px !important; line-height: 1.55 !important; }
.form-control:hover { border-color: #cdd7e2 !important; }
.form-control:focus,
.form-select:focus {
border-color: var(--z5-tosca-2) !important;
background: #ffffff !important;
box-shadow: var(--z5-focus) !important;
outline: 0 !important;
}
.form-control::placeholder { color: #94a3b8 !important; opacity: 1 !important; }
.form-text, small.form-text, .form-helper {
font-size: 12px !important;
color: var(--z5-mute) !important;
margin-top: 6px !important;
}
/* Input group */
.input-group .input-group-text {
background: #f1f5f9 !important;
border: 1px solid var(--z5-line) !important;
color: var(--z5-mute) !important;
border-radius: var(--z5-radius-sm) !important;
font-size: 13px !important;
}
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group-prepend + .form-control,
.input-group > .input-group-prepend > .input-group-text { border-right: 0 !important; }
/* Custom file input */
.custom-file-label,
.form-control[type="file"] {
height: 44px !important;
border-radius: var(--z5-radius-sm) !important;
line-height: 24px !important;
padding: 10px 14px !important;
}
/* ----------------------------------------------------------
* SELECT2 — match form-control look
* ---------------------------------------------------------- */
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single,
.select2-container--bootstrap4 .select2-selection--single {
height: 44px !important;
border: 1px solid var(--z5-line) !important;
border-radius: var(--z5-radius-sm) !important;
background: #fbfdff !important;
padding: 6px 14px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
line-height: 30px !important;
color: var(--z5-ink) !important;
padding: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; right: 8px !important; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
border-color: var(--z5-tosca-2) !important;
box-shadow: var(--z5-focus) !important;
}
.select2-container .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
min-height: 44px !important;
border: 1px solid var(--z5-line) !important;
border-radius: var(--z5-radius-sm) !important;
background: #fbfdff !important;
padding: 4px 8px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background: var(--z5-tosca-tint) !important;
border: 1px solid var(--z5-tosca-soft) !important;
color: var(--z5-tosca) !important;
border-radius: 8px !important;
padding: 3px 10px !important;
font-size: 12.5px !important;
margin-top: 6px !important;
}
.select2-dropdown {
border: 1px solid var(--z5-line) !important;
border-radius: var(--z5-radius-sm) !important;
box-shadow: var(--z5-shadow-lg) !important;
overflow: hidden !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
background: var(--z5-tosca-tint) !important;
color: var(--z5-tosca) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
background: var(--z5-tosca-soft) !important;
color: var(--z5-tosca) !important;
font-weight: 600 !important;
}
/* ----------------------------------------------------------
* BUTTONS — softer, taller, refined
* ---------------------------------------------------------- */
.btn {
border-radius: var(--z5-radius-sm) !important;
font-weight: 600 !important;
font-size: 13.5px !important;
padding: 10px 18px !important;
letter-spacing: .005em !important;
line-height: 1.4 !important;
border: 1px solid transparent !important;
transition: transform .12s ease, box-shadow .15s ease, background .15s !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
box-shadow: var(--z5-shadow-sm) !important;
}
.btn:hover { transform: translateY(-1px) !important; box-shadow: var(--z5-shadow-md) !important; }
.btn:active, .btn:focus { transform: translateY(0) !important; outline: 0 !important; box-shadow: var(--z5-focus) !important; }
.btn-sm, .btn-xs { padding: 6px 12px !important; font-size: 12.5px !important; }
.btn-lg { padding: 13px 22px !important; font-size: 15px !important; }
.btn-primary, .btn-tosca {
background: linear-gradient(180deg, var(--z5-tosca-2) 0%, var(--z5-tosca) 100%) !important;
border-color: var(--z5-tosca) !important;
color: #ffffff !important;
}
.btn-primary:hover, .btn-tosca:hover {
background: linear-gradient(180deg, #16c5b3 0%, #0fa896 100%) !important;
color: #fff !important;
}
.btn-secondary { background: #f1f5f9 !important; color: #334155 !important; border-color: var(--z5-line) !important; }
.btn-secondary:hover { background: #e2e8f0 !important; color: #0f172a !important; }
.btn-success { background: linear-gradient(180deg, #22c55e, #16a34a) !important; color: #fff !important; border-color: #16a34a !important; }
.btn-info { background: linear-gradient(180deg, #38bdf8, #0ea5e9) !important; color: #fff !important; border-color: #0ea5e9 !important; }
.btn-warning { background: linear-gradient(180deg, #fbbf24, #f59e0b) !important; color: #fff !important; border-color: #f59e0b !important; }
.btn-danger { background: linear-gradient(180deg, #f87171, #ef4444) !important; color: #fff !important; border-color: #ef4444 !important; }
.btn-light, .btn-default { background: #ffffff !important; color: #334155 !important; border-color: var(--z5-line) !important; }
.btn-dark { background: #0f172a !important; color: #fff !important; border-color: #0f172a !important; }
.btn-outline-primary { background: #fff !important; color: var(--z5-tosca) !important; border-color: var(--z5-tosca) !important; }
.btn-outline-primary:hover { background: var(--z5-tosca) !important; color: #fff !important; }
/* Centered button group on top of card body — like "Baru/Reports" */
.card-body > .text-center > .btn,
.card-body > .text-center > .btn-list > .btn { margin: 0 4px !important; }
/* ----------------------------------------------------------
* TABLE — DataTables refinement
* ---------------------------------------------------------- */
.table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
font-size: 13.5px !important;
color: var(--z5-ink) !important;
}
.table thead th,
.dataTable thead th {
background: #f8fafc !important;
color: #475569 !important;
font-weight: 700 !important;
font-size: 11.5px !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
padding: 14px 16px !important;
border-top: 1px solid var(--z5-line) !important;
border-bottom: 1px solid var(--z5-line) !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
.table tbody td,
.dataTable tbody td {
padding: 14px 16px !important;
vertical-align: middle !important;
border-top: 1px solid var(--z5-line) !important;
border-bottom: 0 !important;
background: #ffffff !important;
}
.table tbody tr:hover td { background: var(--z5-tosca-tint) !important; }
.table tbody tr:last-child td { border-bottom: 1px solid var(--z5-line) !important; }
.table tbody tr td:first-child { padding-left: 24px !important; }
.table tbody tr td:last-child { padding-right: 24px !important; }
.table thead th:first-child { padding-left: 24px !important; }
.table thead th:last-child { padding-right: 24px !important; }
/* DataTables wrapper */
.dataTables_wrapper { padding: 8px 0 0 !important; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
padding: 0 24px 16px !important;
font-size: 13px !important;
color: var(--z5-mute) !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
border: 1px solid var(--z5-line) !important;
border-radius: 8px !important;
padding: 6px 12px !important;
height: 36px !important;
background: #fbfdff !important;
margin: 0 8px !important;
}
.dataTables_wrapper .dataTables_filter input { min-width: 240px !important; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
outline: 0 !important;
border-color: var(--z5-tosca-2) !important;
box-shadow: var(--z5-focus) !important;
}
.dataTables_wrapper .dataTables_info {
padding: 16px 24px !important;
font-size: 13px !important;
color: var(--z5-mute) !important;
}
.dataTables_wrapper .dataTables_paginate {
padding: 12px 24px !important;
text-align: right !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 6px 12px !important;
margin: 0 2px !important;
border-radius: 8px !important;
border: 1px solid var(--z5-line) !important;
background: #fff !important;
color: var(--z5-mute) !important;
font-size: 13px !important;
transition: all .15s !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--z5-tosca-tint) !important;
color: var(--z5-tosca) !important;
border-color: var(--z5-tosca-2) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--z5-tosca) !important;
color: #fff !important;
border-color: var(--z5-tosca) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4 !important; }
/* ----------------------------------------------------------
* NAV TABS — settings page side/top tabs
* ---------------------------------------------------------- */
.nav-tabs, .nav.panel-tabs {
border-bottom: 1px solid var(--z5-line) !important;
padding: 0 24px !important;
background: #fbfdff !important;
margin: 0 !important;
gap: 4px !important;
}
.nav-tabs .nav-link,
.nav.panel-tabs .nav-link {
border: 0 !important;
border-radius: 0 !important;
color: var(--z5-mute) !important;
font-size: 13.5px !important;
font-weight: 600 !important;
padding: 16px 18px !important;
position: relative !important;
transition: color .15s !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: transparent !important;
}
.nav-tabs .nav-link:hover,
.nav.panel-tabs .nav-link:hover { color: var(--z5-ink) !important; }
.nav-tabs .nav-link.active,
.nav.panel-tabs .nav-link.active {
color: var(--z5-tosca) !important;
background: transparent !important;
border: 0 !important;
}
.nav-tabs .nav-link.active::after,
.nav.panel-tabs .nav-link.active::after {
content: "" !important;
position: absolute !important;
left: 12px !important; right: 12px !important;
bottom: -1px !important;
height: 3px !important;
background: linear-gradient(90deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
border-radius: 3px 3px 0 0 !important;
}
/* Vertical tabs */
.nav.flex-column.nav-tabs,
.nav-tabs.flex-column {
border-bottom: 0 !important;
border-right: 1px solid var(--z5-line) !important;
padding: 12px 0 !important;
background: #fbfdff !important;
}
.nav-tabs.flex-column .nav-link {
padding: 12px 18px !important;
border-left: 3px solid transparent !important;
}
.nav-tabs.flex-column .nav-link.active {
background: var(--z5-tosca-tint) !important;
border-left-color: var(--z5-tosca) !important;
}
.nav-tabs.flex-column .nav-link.active::after { display: none !important; }
/* ----------------------------------------------------------
* MODAL — refined
* ---------------------------------------------------------- */
.modal-content {
border: 0 !important;
border-radius: var(--z5-radius) !important;
box-shadow: var(--z5-shadow-lg) !important;
overflow: hidden !important;
}
.modal-header {
border-bottom: 1px solid var(--z5-line) !important;
padding: 18px 24px !important;
background: linear-gradient(180deg, #fbfdff, #fff) !important;
}
.modal-title {
font-weight: 700 !important;
font-size: 16px !important;
color: var(--z5-ink) !important;
}
.modal-body { padding: 24px !important; font-size: 14px !important; color: #334155 !important; }
.modal-footer { border-top: 1px solid var(--z5-line) !important; padding: 16px 24px !important; gap: 8px !important; }
.modal-header .close, .modal-header button.close, .btn-close {
background: #f1f5f9 !important;
border-radius: 50% !important;
width: 36px !important; height: 36px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
opacity: 1 !important;
color: var(--z5-mute) !important;
border: 0 !important;
}
.modal-header .close:hover { background: var(--z5-tosca-tint) !important; color: var(--z5-tosca) !important; }
.modal-backdrop.show { opacity: .5 !important; background: #0b1220 !important; }
/* ----------------------------------------------------------
* ALERTS
* ---------------------------------------------------------- */
.alert {
border-radius: var(--z5-radius-sm) !important;
border: 1px solid transparent !important;
padding: 14px 18px !important;
font-size: 13.5px !important;
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
}
.alert-success { background: #ecfdf5 !important; color: #047857 !important; border-color: #a7f3d0 !important; }
.alert-info { background: var(--z5-tosca-tint) !important; color: var(--z5-tosca) !important; border-color: var(--z5-tosca-soft) !important; }
.alert-warning { background: #fffbeb !important; color: #b45309 !important; border-color: #fde68a !important; }
.alert-danger { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; }
/* ----------------------------------------------------------
* SWITCH / iCheck-style
* ---------------------------------------------------------- */
.custom-switch .custom-control-label::before {
height: 22px !important; width: 40px !important;
border-radius: 11px !important;
background: #cbd5e1 !important;
border: 0 !important;
}
.custom-switch .custom-control-label::after {
width: 16px !important; height: 16px !important;
left: calc(-2.25rem + 3px) !important;
top: calc(.25rem + 3px) !important;
background: #fff !important;
border-radius: 50% !important;
box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
background: var(--z5-tosca) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(18px) !important;
}
/* Form group horizontal — make label aligned cleanly */
.row > [class*="col-"] > .form-group { margin-bottom: 18px !important; }
/* ----------------------------------------------------------
* "BARU"/"REPORTS" Action Group on top of card body
* ---------------------------------------------------------- */
.card .card-body > .text-center:first-child {
background: linear-gradient(180deg, #fbfdff, #ffffff) !important;
margin: -24px -24px 20px !important;
padding: 16px 24px !important;
border-bottom: 1px solid var(--z5-line) !important;
text-align: left !important;
}
/* ----------------------------------------------------------
* BADGE / PILL
* ---------------------------------------------------------- */
.badge {
padding: 5px 10px !important;
border-radius: 8px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .03em !important;
text-transform: uppercase !important;
}
.badge-primary, .badge-tosca { background: var(--z5-tosca-tint) !important; color: var(--z5-tosca) !important; }
.badge-success { background: #ecfdf5 !important; color: #047857 !important; }
.badge-warning { background: #fffbeb !important; color: #b45309 !important; }
.badge-danger { background: #fef2f2 !important; color: #b91c1c !important; }
.badge-info { background: #eff6ff !important; color: #1d4ed8 !important; }
/* ----------------------------------------------------------
* Toast / SweetAlert
* ---------------------------------------------------------- */
.swal2-popup {
border-radius: var(--z5-radius) !important;
box-shadow: var(--z5-shadow-lg) !important;
}
.swal2-title { font-weight: 700 !important; color: var(--z5-ink) !important; }
.swal2-html-container { color: #475569 !important; }
.swal2-confirm.swal2-styled {
background: linear-gradient(180deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
border-radius: var(--z5-radius-sm) !important;
padding: 10px 22px !important;
font-weight: 600 !important;
}
.swal2-cancel.swal2-styled {
background: #f1f5f9 !important;
color: #334155 !important;
border-radius: var(--z5-radius-sm) !important;
}
/* ----------------------------------------------------------
* CODE BLOCK (API key page)
* ---------------------------------------------------------- */
pre, code, .highlight, kbd {
background: #0f172a !important;
color: #e2e8f0 !important;
border-radius: 10px !important;
padding: 12px 16px !important;
font-family: 'JetBrains Mono', 'Menlo', monospace !important;
font-size: 12.5px !important;
border: 0 !important;
}
:not(pre) > code { padding: 2px 6px !important; font-size: 12px !important; background: #f1f5f9 !important; color: #be185d !important; }
/* ----------------------------------------------------------
* POLISH PASS — modal close, wizard tab, vertical pill
* ---------------------------------------------------------- */
/* Modal header — neutralize big red close buttons (.btn-danger) */
.modal-header .btn,
.modal-header button.btn-danger,
.modal-header .close.btn-danger {
position: absolute !important;
top: 14px !important; right: 14px !important;
width: 36px !important; height: 36px !important;
padding: 0 !important;
border-radius: 50% !important;
background: #f1f5f9 !important;
color: var(--z5-mute) !important;
border: 0 !important;
box-shadow: none !important;
font-size: 0 !important;
overflow: hidden !important;
}
.modal-header .btn::before,
.modal-header button.btn-danger::before,
.modal-header .close.btn-danger::before {
content: "✕" !important;
font-size: 14px !important;
line-height: 36px !important;
display: block !important;
color: var(--z5-mute) !important;
font-weight: 600 !important;
}
.modal-header .btn:hover,
.modal-header button.btn-danger:hover {
background: #fee2e2 !important;
color: #b91c1c !important;
}
.modal-header .btn:hover::before { color: #b91c1c !important; }
/* Modal title — uppercase tracking */
.modal-header h6.modal-title,
.modal-title { text-transform: none !important; font-size: 16px !important; }
/* Modal body buttons spacing (Tutorial / Download APK) */
.modal-body .btn { margin: 6px 4px !important; }
.modal-body .btn-danger { background: linear-gradient(180deg, #fb7185, #e11d48) !important; border-color: #e11d48 !important; }
.modal-body .btn-success { background: linear-gradient(180deg, #34d399, #059669) !important; border-color: #059669 !important; }
/* Modal footer Close should NOT be the round X */
.modal-footer .btn { position: static !important; width: auto !important; height: auto !important; padding: 10px 18px !important; font-size: 13.5px !important; border-radius: var(--z5-radius-sm) !important; background: #f1f5f9 !important; color: #334155 !important; }
.modal-footer .btn::before { content: none !important; }
/* ----------------------------------------------------------
* Vertical wizard tabs (campaign/create left rail)
* ---------------------------------------------------------- */
.nav.flex-column .nav-link,
.list-group.wizard-steps .list-group-item,
.wizard-steps .list-group-item {
border: 1px solid var(--z5-line) !important;
border-radius: var(--z5-radius-sm) !important;
margin-bottom: 8px !important;
padding: 14px 16px !important;
background: #fff !important;
color: #334155 !important;
font-weight: 600 !important;
font-size: 13.5px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
transition: all .15s !important;
position: relative !important;
}
.nav.flex-column .nav-link:hover { background: var(--z5-tosca-tint) !important; border-color: var(--z5-tosca-soft) !important; color: var(--z5-tosca) !important; }
.nav.flex-column .nav-link.active {
background: linear-gradient(135deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
border-color: var(--z5-tosca) !important;
color: #fff !important;
box-shadow: 0 6px 18px -8px rgba(20,184,166,.45) !important;
}
.nav.flex-column .nav-link.active::after { display: none !important; }
/* Style any standalone .text-bg-light type wizard step (.btn-light used as label) */
.row > [class*="col-"] > .btn-light.btn-block,
.row > [class*="col-"] > .btn-secondary.btn-block {
text-align: left !important;
padding: 14px 16px !important;
margin-bottom: 8px !important;
border-radius: var(--z5-radius-sm) !important;
border: 1px solid var(--z5-line) !important;
box-shadow: var(--z5-shadow-sm) !important;
font-weight: 600 !important;
font-size: 13.5px !important;
}
/* "Lanjutkan" / next-step buttons (.btn-danger inside form footer) — keep red but refine */
.card-body .btn-danger,
.card-footer .btn-danger {
background: linear-gradient(180deg, #fb7185, #e11d48) !important;
border-color: #e11d48 !important;
box-shadow: 0 6px 18px -8px rgba(225,29,72,.45) !important;
}
/* ----------------------------------------------------------
* Time / Date picker icons alignment
* ---------------------------------------------------------- */
input[type="time"], input[type="date"], input[type="datetime-local"] {
padding-right: 14px !important;
}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6 !important; cursor: pointer !important; }
/* ----------------------------------------------------------
* Generic LIST GROUP (chat, contacts)
* ---------------------------------------------------------- */
.list-group {
border-radius: var(--z5-radius) !important;
overflow: hidden !important;
border: 1px solid var(--z5-line) !important;
}
.list-group-item {
border: 0 !important;
border-bottom: 1px solid var(--z5-line) !important;
padding: 14px 18px !important;
font-size: 13.5px !important;
}
.list-group-item:last-child { border-bottom: 0 !important; }
.list-group-item.active { background: var(--z5-tosca-tint) !important; color: var(--z5-tosca) !important; }
/* ----------------------------------------------------------
* Help "?" tooltip badge next to titles (Buat Broadcast Baru ?)
* ---------------------------------------------------------- */
.help-tip, .info-tip,
.card-header .badge-info,
.card-title + .badge {
width: 22px !important; height: 22px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--z5-tosca-tint) !important;
color: var(--z5-tosca) !important;
font-size: 11px !important;
font-weight: 700 !important;
margin-left: 8px !important;
}
/* ----------------------------------------------------------
* "TEMPLAT BARU" floating action button (settings template)
* ---------------------------------------------------------- */
.tab-content .text-right > .btn,
.tab-content .text-end > .btn,
.tab-pane > .text-right > .btn { margin: 12px 0 !important; }
/* ----------------------------------------------------------
* Campaign Wizard custom buttons (.campaign_side_bar)
* ---------------------------------------------------------- */
.btn.campaign_side_bar {
width: 100% !important;
text-align: left !important;
background: #ffffff !important;
border: 1px solid var(--z5-line) !important;
border-radius: var(--z5-radius-sm) !important;
padding: 14px 16px !important;
margin-bottom: 8px !important;
color: #334155 !important;
font-weight: 600 !important;
font-size: 13.5px !important;
box-shadow: var(--z5-shadow-sm) !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
position: relative !important;
transform: none !important;
}
.btn.campaign_side_bar::before {
content: "" !important;
width: 28px; height: 28px;
border-radius: 50% !important;
background: var(--z5-tosca-tint) !important;
color: var(--z5-tosca) !important;
font-size: 12px !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
border: 1px solid var(--z5-tosca-soft) !important;
}
.btn.campaign_side_bar[data-type="bulk_send"]::before { content: "1" !important; }
.btn.campaign_side_bar[data-type="content"]::before { content: "2" !important; }
.btn.campaign_side_bar[data-type="resource"]::before { content: "3" !important; }
.btn.campaign_side_bar[data-type="rate"]::before { content: "4" !important; }
.btn.campaign_side_bar:hover {
background: var(--z5-tosca-tint) !important;
border-color: var(--z5-tosca-soft) !important;
color: var(--z5-tosca) !important;
transform: translateX(2px) !important;
}
.btn.campaign_side_bar.active {
background: linear-gradient(135deg, var(--z5-tosca-2) 0%, var(--z5-tosca) 100%) !important;
border-color: var(--z5-tosca) !important;
color: #ffffff !important;
box-shadow: 0 8px 22px -8px rgba(20,184,166,.5) !important;
}
.btn.campaign_side_bar.active::before {
background: rgba(255,255,255,.25) !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.4) !important;
}
/* Wizard right pane heading "Masukkan Detail Kirim" / "Atur Kontak Pengiriman" */
.card-body h3 {
font-size: 18px !important;
font-weight: 700 !important;
color: var(--z5-ink) !important;
margin: 0 0 18px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid var(--z5-line) !important;
letter-spacing: -.01em !important;
}
/* Modal close button — use real glyph reliably */
.modal-header .btn-danger,
.modal-header button.btn-danger {
color: transparent !important;
text-shadow: none !important;
background-image:
linear-gradient(45deg, transparent 45%, var(--z5-mute) 45%, var(--z5-mute) 55%, transparent 55%),
linear-gradient(-45deg, transparent 45%, var(--z5-mute) 45%, var(--z5-mute) 55%, transparent 55%) !important;
background-size: 14px 14px !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: #f1f5f9 !important;
}
.modal-header .btn-danger::before { content: none !important; }
.modal-header .btn-danger:hover {
background-color: #fee2e2 !important;
background-image:
linear-gradient(45deg, transparent 45%, #b91c1c 45%, #b91c1c 55%, transparent 55%),
linear-gradient(-45deg, transparent 45%, #b91c1c 45%, #b91c1c 55%, transparent 55%) !important;
}
/* ==========================================================
* v5.1 — Card-header action buttons → top-right alignment
* Many list pages put title in col-6 + buttons in col-6 with
* float-end. Flex card-header was centering them. Force the
* action col to push right and align children to flex-end.
* ========================================================== */
body.app .card > .card-header {
flex-wrap: wrap !important;
justify-content: flex-start !important;
}
body.app .card > .card-header > [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: none !important;
}
body.app .card > .card-header > [class*="col-"]:first-child,
body.app .card > .card-header > .card-title {
flex: 1 1 auto !important;
width: auto !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
body.app .card > .card-header > [class*="col-"]:last-child:not(:first-child) {
margin-left: auto !important;
flex: 0 0 auto !important;
width: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
text-align: right !important;
}
/* Strip floats inside card-header (flex handles alignment) */
body.app .card > .card-header .float-end,
body.app .card > .card-header .float-right,
body.app .card > .card-header .pull-right {
float: none !important;
margin-bottom: 0 !important;
}
/* Buttons inside card-header — compact + no extra mb */
body.app .card > .card-header .btn {
margin-bottom: 0 !important;
margin-top: 0 !important;
height: 38px !important;
padding: 0 16px !important;
font-size: 12.5px !important;
}
body.app .card > .card-header .btn + .btn,
body.app .card > .card-header .btn-group + .btn,
body.app .card > .card-header .btn + .btn-group {
margin-left: 8px !important;
}
/* ==========================================================
* v5.1 — Chat / Inbound page (chat/index)
* ========================================================== */
.chat-box-tray.bg-send,
.chat-box-tray {
background: linear-gradient(180deg, #fbfdff 0%, #f1f5f9 100%) !important;
border-top: 1px solid var(--z5-line) !important;
border-radius: 0 0 var(--z5-radius) var(--z5-radius) !important;
padding: 14px 18px !important;
margin-top: 0 !important;
}
.chat-box-tray .send {
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(180deg, var(--z5-tosca-2) 0%, var(--z5-tosca) 100%) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(13,148,136,.25) !important;
margin-left: 8px !important;
flex-shrink: 0 !important;
}
.chat-box-tray .send i { color: #fff !important; font-size: 18px !important; }
.chat-box-tray .selectBox {
height: 40px !important;
border: 1px solid var(--z5-line) !important;
border-radius: 10px !important;
background: #fff !important;
padding: 0 10px !important;
color: var(--z5-ink) !important;
font-size: 13px !important;
}
.chat-box-tray .type_message_section { flex: 1 1 auto !important; min-width: 0 !important; }
.chat-box-tray textarea.type_message {
border: 1px solid var(--z5-line) !important;
border-radius: 12px !important;
background: #fff !important;
padding: 10px 14px !important;
font-size: 13px !important;
min-height: 44px !important;
resize: none !important;
}
.chat-box-tray > i.fa-envelope {
width: 40px !important;
height: 40px !important;
border-radius: 10px !important;
background: var(--z5-tosca-tint) !important;
color: var(--z5-tosca) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
flex-shrink: 0 !important;
}
.chat-bubble--right {
background: linear-gradient(180deg, var(--z5-tosca-2) 0%, var(--z5-tosca) 100%) !important;
color: #fff !important;
border-radius: 14px 14px 4px 14px !important;
padding: 10px 14px !important;
box-shadow: 0 2px 8px rgba(13,148,136,.18) !important;
}
.chat-bubble--left {
background: #f1f5f9 !important;
color: var(--z5-ink) !important;
border-radius: 14px 14px 14px 4px !important;
padding: 10px 14px !important;
border: 1px solid var(--z5-line) !important;
}
.chat-box-body {
background: #fafcff !important;
border-radius: 0 !important;
padding: 18px !important;
}
.settings-tray {
border-bottom: 1px solid var(--z5-line) !important;
padding: 12px 16px !important;
background: #fff !important;
border-radius: var(--z5-radius) var(--z5-radius) 0 0 !important;
}
.friend-drawer { background: transparent !important; }
.search-box, .search-section .input-group {
border-radius: 12px !important;
overflow: hidden !important;
}
.search-section input,
.search-section .input-group-text {
border-radius: 10px !important;
border: 1px solid var(--z5-line) !important;
background: #fff !important;
height: 40px !important;
}
.search-section .input-group-text {
background: var(--z5-tosca-tint) !important;
color: var(--z5-tosca) !important;
}
.card.number-section,
.card .number-section {
border-radius: 12px !important;
border: 1px solid var(--z5-line) !important;
box-shadow: var(--z5-shadow-sm) !important;
transition: all .18s ease !important;
}
.card.number-section:hover,
.card .number-section:hover {
border-color: var(--z5-tosca-2) !important;
box-shadow: 0 6px 18px rgba(13,148,136,.10) !important;
transform: translateY(-1px) !important;
}
.chat-number-section .date-section,
.chat-number-section .number-section {
background: var(--z5-tosca-tint) !important;
color: var(--z5-tosca) !important;
border-radius: 10px !important;
font-weight: 600 !important;
font-size: 12px !important;
}
#showResponse {
border: 1px solid var(--z5-line) !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(15,23,42,.10) !important;
}
.response_value:hover {
background: var(--z5-tosca-tint) !important;
color: var(--z5-tosca) !important;
}
/* ==========================================================
* v5.1 — Smsbox overview action button group (DELETE/FILTER/NEW)
* Already centered in markup. Keep them top-right via card-header rules above.
* Style the dropdown FILTER button + ensure NEW is not clipped.
* ========================================================== */
body.app .card > .card-header .btn-group .btn.dropdown-toggle::after {
margin-left: 8px !important;
border-top-color: currentColor !important;
}
body.app .card > .card-header .btn.btn-success,
body.app .card > .card-header .btn.btn-primary {
background: linear-gradient(180deg, var(--z5-tosca-2) 0%, var(--z5-tosca) 100%) !important;
border: 0 !important;
color: #fff !important;
}
/* ==========================================================
* v5.1 — Settings horizontal nav-tabs polish (Profile/Password/etc.)
* ========================================================== */
.nav-tabs.nav-tabs-bottom,
.nav.nav-tabs {
border-bottom: 1px solid var(--z5-line) !important;
margin-bottom: 24px !important;
gap: 4px !important;
padding: 0 4px !important;
}
.nav.nav-tabs .nav-link,
.nav-tabs .nav-link {
color: #64748b !important;
font-weight: 600 !important;
font-size: 13.5px !important;
padding: 12px 18px !important;
border: 0 !important;
border-radius: 10px 10px 0 0 !important;
position: relative !important;
background: transparent !important;
transition: color .15s ease, background .15s ease !important;
}
.nav.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:hover {
color: var(--z5-tosca) !important;
background: var(--z5-tosca-tint) !important;
}
.nav.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
color: var(--z5-tosca) !important;
background: var(--z5-tosca-tint) !important;
}
.nav.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link.active::after {
content: '' !important;
position: absolute !important;
left: 12px !important;
right: 12px !important;
bottom: -1px !important;
height: 3px !important;
background: linear-gradient(90deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
border-radius: 3px 3px 0 0 !important;
}
/* ==========================================================
* v5.1 — Avatar / profile circles in topbar / cards
* ========================================================== */
.app-header .nav-link img,
.app-header .header-link img,
.app-header img.user-avatar,
.app-header .avatar {
border-radius: 50% !important;
object-fit: cover !important;
}
/* Hide the stray '<' breadcrumb scroll-indicator at the bottom */
body.app::after { display: none !important; }
/* ==========================================================
* v5.2 — Billing / Plan / Auth / Settings — world-class polish
* ========================================================== */
/* Respect Bootstrap d-none everywhere (v5 btn rules were forcing display) */
body.app .d-none,
body.app .btn.d-none { display: none !important; }
/* ---------------------------------------------------------- */
/* PRICING / PLAN CARDS — billing/change */
/* ---------------------------------------------------------- */
.price-card,
.card.price-card {
background: #ffffff !important;
border: 1px solid var(--z5-line) !important;
border-radius: 18px !important;
box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
padding: 28px 24px !important;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
position: relative !important;
overflow: hidden !important;
}
.price-card::before {
content: "" !important;
position: absolute !important;
inset: 0 0 auto 0 !important;
height: 6px !important;
background: linear-gradient(90deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
opacity: .35 !important;
transition: opacity .22s ease !important;
}
.price-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 18px 36px rgba(13, 148, 136, .14) !important;
border-color: var(--z5-tosca-2) !important;
}
.price-card:hover::before { opacity: 1 !important; }
.price-card .plan-title {
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #475569 !important;
text-transform: uppercase !important;
letter-spacing: .12em !important;
margin: 8px 0 4px !important;
text-align: center !important;
}
.price-card .plan-title-current {
display: inline-block !important;
margin-left: 6px !important;
padding: 2px 10px !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
color: #fff !important;
background: linear-gradient(180deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
border-radius: 999px !important;
vertical-align: middle !important;
text-transform: uppercase !important;
}
.price-card .plan-cost {
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
font-size: 38px !important;
font-weight: 800 !important;
color: var(--z5-ink) !important;
margin: 6px 0 18px !important;
letter-spacing: -.02em !important;
text-align: center !important;
line-height: 1.1 !important;
}
.price-card .action-button { margin: 0 0 22px !important; text-align: center !important; }
.price-card .action-button .btn,
.price-card .action-button .btn.choose-btn,
.price-card .action-button .btn-primary {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 180px !important;
height: 44px !important;
padding: 0 24px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: #fff !important;
background: linear-gradient(180deg, var(--z5-tosca-2) 0%, var(--z5-tosca) 100%) !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: 0 6px 14px rgba(13, 148, 136, .25) !important;
transition: transform .15s ease, box-shadow .15s ease !important;
}
.price-card .action-button .btn:hover { transform: translateY(-1px) !important; box-shadow: 0 10px 22px rgba(13, 148, 136, .35) !important; }
.price-card .action-button .btn.disabled,
.price-card .action-button .btn[disabled] {
background: #e2e8f0 !important;
color: #64748b !important;
box-shadow: none !important;
cursor: not-allowed !important;
}
/* Feature list — replace empty FA glyph with green check via pseudo */
.price-card ul,
.price-card .plan ul {
list-style: none !important;
padding: 0 !important;
margin: 18px 0 0 !important;
border-top: 1px dashed var(--z5-line) !important;
padding-top: 18px !important;
}
.price-card ul li,
.price-card .plan ul li {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 0 !important;
font-size: 13.5px !important;
color: #334155 !important;
text-align: left !important;
border-bottom: 1px solid #f1f5f9 !important;
}
.price-card ul li:last-child,
.price-card .plan ul li:last-child { border-bottom: 0 !important; }
.price-card ul li i,
.price-card ul li .fa,
.price-card ul li .fas,
.price-card ul li .fa-solid,
.price-card ul li .fa-circle-small {
display: none !important;
}
.price-card ul li::before {
content: "" !important;
flex-shrink: 0 !important;
width: 20px !important;
height: 20px !important;
border-radius: 50% !important;
background:
url("data:image/svg+xml;utf8,") center / 12px 12px no-repeat,
linear-gradient(180deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
box-shadow: 0 2px 6px rgba(13, 148, 136, .25) !important;
}
/* Wrapper alignment */
.tab-pane#monthly_plans .row.justify-content-md-center { gap: 0 !important; }
.prices-responsive { padding-top: 0 !important; }
/* ---------------------------------------------------------- */
/* BILLING INDEX — Tagihan (limits + plan summary) */
/* ---------------------------------------------------------- */
.billing-card {
background: #ffffff !important;
border: 1px solid var(--z5-line) !important;
border-radius: 12px !important;
box-shadow: var(--z5-shadow-sm) !important;
padding: 16px 20px !important;
transition: box-shadow .15s ease, transform .15s ease !important;
}
.billing-card:hover {
transform: translateY(-1px) !important;
box-shadow: 0 8px 18px rgba(15,23,42,.07) !important;
}
.billing-data {
font-size: 13px !important;
color: #334155 !important;
font-weight: 500 !important;
}
.billing-row > .col-lg-12 > .row.mb-2 .billing-data {
font-size: 11px !important;
font-weight: 700 !important;
color: #64748b !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
}
/* Daily limit summary card (left tosca block) */
.card-body > .col-lg-6:first-child > .card,
.card-body > .col-lg-6:first-child > .card.card-body {
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
border: 0 !important;
border-radius: 16px !important;
color: #fff !important;
box-shadow: 0 10px 24px rgba(13, 148, 136, .22) !important;
padding: 22px !important;
min-height: 160px !important;
}
.card-body > .col-lg-6:first-child > .card .content-title {
color: rgba(255, 255, 255, .85) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
margin-bottom: 4px !important;
}
.card-body > .col-lg-6:first-child > .card .use-limit {
color: #fff !important;
font-size: 22px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.card-body > .col-lg-6:first-child > .card .limit {
color: rgba(255, 255, 255, .65) !important;
font-size: 14px !important;
font-weight: 600 !important;
}
/* Right: Your Plan card — switch from violet to deep slate-tosca */
.card-body > .col-lg-6:nth-of-type(2) > .card,
.card-body > .col-lg-6:nth-of-type(2) > .card.card-body {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
border: 0 !important;
border-radius: 16px !important;
color: #fff !important;
box-shadow: 0 10px 24px rgba(15, 23, 42, .25) !important;
padding: 22px !important;
min-height: 160px !important;
position: relative !important;
overflow: hidden !important;
}
.card-body > .col-lg-6:nth-of-type(2) > .card::after {
content: "" !important;
position: absolute !important;
right: -40px !important;
top: -40px !important;
width: 160px !important;
height: 160px !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(45, 212, 191, .25) 0%, transparent 70%) !important;
pointer-events: none !important;
}
.card-body > .col-lg-6:nth-of-type(2) > .card .plan-header {
color: rgba(255,255,255,.7) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
.card-body > .col-lg-6:nth-of-type(2) > .card .plan-title {
color: #fff !important;
font-size: 32px !important;
font-weight: 800 !important;
margin: 6px 0 !important;
letter-spacing: -.01em !important;
font-family: 'Plus Jakarta Sans','Inter',sans-serif !important;
}
.card-body > .col-lg-6:nth-of-type(2) > .card .content-title {
color: rgba(255,255,255,.7) !important;
font-size: 12.5px !important;
}
.card-body > .col-lg-6:nth-of-type(2) > .card .btn-info,
.card-body > .col-lg-6:nth-of-type(2) > .card .btn {
background: linear-gradient(180deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
height: 38px !important;
padding: 0 18px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
box-shadow: 0 6px 14px rgba(13, 148, 136, .35) !important;
}
/* Billing-data row tabular look */
.billing-row .row.mb-2 {
background: #f8fafc !important;
border: 1px solid var(--z5-line) !important;
border-radius: 10px !important;
padding: 10px 16px !important;
margin: 0 0 10px !important;
}
.billing-row .row.custom-row { margin-bottom: 8px !important; }
/* ---------------------------------------------------------- */
/* BILLING ORDER — empty state */
/* ---------------------------------------------------------- */
.alert.alert-success,
.card-body .alert-success {
background: #f0fdfa !important;
color: #0f766e !important;
border: 1px dashed #5eead4 !important;
border-radius: 12px !important;
padding: 18px 22px !important;
font-size: 14px !important;
font-weight: 600 !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------- */
/* AUTHORIZATION TOKEN — Developer / API page */
/* ---------------------------------------------------------- */
#apiForm { width: 100% !important; max-width: 720px !important; margin: 8px auto 0 !important; }
#apiForm .form-group > label {
font-size: 12px !important;
font-weight: 700 !important;
color: #64748b !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
margin-bottom: 8px !important;
}
#apiForm .input-group {
border: 1px solid var(--z5-line) !important;
border-radius: 12px !important;
overflow: hidden !important;
background: #fff !important;
box-shadow: var(--z5-shadow-sm) !important;
height: 52px !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
}
#apiForm .input-group:focus-within {
border-color: var(--z5-tosca-2) !important;
box-shadow: var(--z5-focus) !important;
}
#apiForm .input-group input.form-control,
#apiForm input#accessKey {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
height: 100% !important;
font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', monospace !important;
font-size: 13.5px !important;
color: #0f172a !important;
padding: 0 16px !important;
letter-spacing: .02em !important;
}
#apiForm .input-group .input-group-append {
margin: 0 !important;
display: flex !important;
}
#apiForm .input-group .input-group-text {
background: #f8fafc !important;
border: 0 !important;
border-left: 1px solid var(--z5-line) !important;
border-radius: 0 !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
height: 100% !important;
}
#apiForm .input-group .input-group-text i {
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--z5-tosca) !important;
background: var(--z5-tosca-tint) !important;
cursor: pointer !important;
font-size: 13px !important;
transition: background .15s ease, color .15s ease !important;
margin: 0 !important;
}
#apiForm .input-group .input-group-text i:hover {
background: linear-gradient(180deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
color: #fff !important;
}
/* API DOCUMENTATION button — keep top-right */
.card-body a.btn.btn-primary[target="_blank"][href*="postman"],
.card-body a.btn.btn-primary[target="_blank"] {
background: linear-gradient(180deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
border: 0 !important;
color: #fff !important;
border-radius: 10px !important;
padding: 10px 18px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
font-size: 12.5px !important;
box-shadow: 0 6px 14px rgba(13, 148, 136, .25) !important;
}
/* ---------------------------------------------------------- */
/* SETTINGS / Profile form polish */
/* ---------------------------------------------------------- */
.form-control[type="file"],
input[type="file"].form-control,
.custom-file-input {
height: 48px !important;
padding: 10px 14px !important;
font-size: 13px !important;
cursor: pointer !important;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
background: linear-gradient(180deg, var(--z5-tosca-2), var(--z5-tosca)) !important;
color: #fff !important;
border: 0 !important;
padding: 8px 16px !important;
border-radius: 8px !important;
margin-right: 14px !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: .04em !important;
cursor: pointer !important;
}
/* Settings form: KIRIM submit button */
.tab-content form .btn-primary[type="submit"],
.tab-pane form button[type="submit"] {
margin-top: 8px !important;
min-width: 180px !important;
height: 44px !important;
padding: 0 28px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
border-radius: 10px !important;
font-size: 12.5px !important;
}
/* ---------------------------------------------------------- */
/* Topbar polish — colored icon pills + crisp avatar */
/* ---------------------------------------------------------- */
.app-header .nav-link.icon .header-icon {
color: #475569 !important;
font-size: 16px !important;
}
.app-header .nav-link.icon:hover .header-icon { color: var(--z5-tosca) !important; }
.app-header .header-text { color: #334155 !important; font-weight: 600 !important; }
.app-header .app-sidebar__toggle .header-icon { color: var(--z5-tosca) !important; }
.app-header .dropdown { display: inline-flex !important; align-items: center !important; }
.app-header .nav-link.icon {
width: 42px !important; height: 42px !important;
border-radius: 12px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
background: rgba(20, 184, 166, .06) !important;
margin: 0 4px !important;
transition: background .15s ease, transform .15s ease !important;
}
.app-header .nav-link.icon:hover {
background: rgba(20, 184, 166, .14) !important;
transform: translateY(-1px) !important;
}
.app-header .header-locale .nav-link.icon { width: auto !important; padding: 0 12px !important; gap: 6px !important; }
.app-header .profile-dropdown .nav-link {
width: 48px !important; height: 48px !important;
border-radius: 50% !important;
padding: 0 !important;
background: transparent !important;
margin-left: 8px !important;
}
.app-header .profile-dropdown .nav-link img {
width: 42px !important; height: 42px !important;
border-radius: 50% !important;
border: 2px solid var(--z5-tosca-2) !important;
box-shadow: 0 0 0 3px rgba(20, 184, 166, .15) !important;
object-fit: cover !important;
}
/* ---------------------------------------------------------- */
/* Sidebar logo top — ensure dark consistent */
/* ---------------------------------------------------------- */
.app-sidebar > .app-sidebar__logo,
.app-sidebar .header-brand {
background: linear-gradient(180deg, #0d1b2a 0%, #14253a 100%) !important;
}
/* ---------------------------------------------------------- */
/* Nav-tabs: ensure inactive tabs show clearly */
/* ---------------------------------------------------------- */
.nav-tabs .nav-link { white-space: nowrap !important; }
.nav-tabs { padding-bottom: 0 !important; }
.tab-content > .tab-pane { padding-top: 8px !important; }
/* v5.2.1 — beat v4 high-specificity rule that wraps any in plan cards into 44x44 chip */
body.app .price-card ul li i,
body.app .price-card ul li .fa,
body.app .price-card ul li .fas,
body.app .price-card ul li .fa-solid,
body.app .price-card ul li [class*="fa-"],
body.app .price-card .plan ul li i,
body.app .price-card .plan ul li [class*="fa-"] {
display: none !important;
background: none !important;
width: 0 !important;
height: 0 !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* v5.2.2 — empty-state billing-card (single col-lg-12 child = "No plan request available") */
body.app .billing-card:has(> .row > .col-lg-12:only-child) {
background: rgba(45, 212, 191, 0.04) !important;
border: 1.5px dashed rgba(45, 212, 191, 0.35) !important;
box-shadow: none !important;
color: #475569 !important;
padding: 32px 24px !important;
text-align: center !important;
}
body.app .billing-card:has(> .row > .col-lg-12:only-child) .billing-data {
color: #64748b !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-align: center !important;
background: none !important;
}
body.app .billing-card:has(> .row > .col-lg-12:only-child) .billing-data::before {
content: "" !important;
display: block !important;
width: 56px !important;
height: 56px !important;
margin: 0 auto 14px !important;
border-radius: 16px !important;
background: linear-gradient(135deg, rgba(45,212,191,0.15), rgba(20,184,166,0.08)) !important;
border: 1px solid rgba(45,212,191,0.3) !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 28px 28px !important;
}
/* v5.2.3 — fix sidebar: only expand the active/clicked submenu */
body.app .app-sidebar .slide-menu {
display: none !important;
}
body.app .app-sidebar .slide.is-expanded > .slide-menu,
body.app .app-sidebar .slide.active > .slide-menu,
body.app .app-sidebar .slide.open > .slide-menu {
display: block !important;
}
/* v5.2.4 — fully hide sidebar scrollbar (perfect-scrollbar + native) */
body.app .app-sidebar,
body.app .app-sidebar .side-menu,
body.app .app-sidebar3 {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
body.app .app-sidebar::-webkit-scrollbar,
body.app .app-sidebar .side-menu::-webkit-scrollbar,
body.app .app-sidebar *::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
background: transparent !important;
}
body.app .app-sidebar .ps__rail-x,
body.app .app-sidebar .ps__rail-y,
body.app .app-sidebar .ps__thumb-x,
body.app .app-sidebar .ps__thumb-y,
body.app .app-sidebar .simplebar-track,
body.app .app-sidebar .simplebar-scrollbar {
display: none !important;
opacity: 0 !important;
width: 0 !important;
background: transparent !important;
}
/* v5.3 — payment channel selection (world-class redesign) */
body.app .pay-channel,
body.app .pay-channel:focus {
outline: none !important;
}
/* Step indicator */
.pay-steps {
display: flex !important;
align-items: center !important;
gap: 0 !important;
padding: 18px 22px !important;
background: linear-gradient(135deg, #ffffff 0%, #f8fbfb 100%) !important;
border: 1px solid #e6f0ef !important;
border-radius: 16px !important;
margin-bottom: 22px !important;
box-shadow: 0 4px 14px -8px rgba(20,184,166,0.12) !important;
}
.pay-step {
display: flex !important;
align-items: center !important;
gap: 10px !important;
color: #94a3b8 !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
}
.pay-step .num {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
background: #f1f5f9 !important;
color: #94a3b8 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
font-weight: 700 !important;
border: 2px solid #e2e8f0 !important;
transition: all 0.2s !important;
}
.pay-step.done .num {
background: linear-gradient(135deg, #2dd4bf, #14b8a6) !important;
color: #ffffff !important;
border-color: #14b8a6 !important;
}
.pay-step.done .num::before {
content: "\f00c" !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
font-size: 11px !important;
}
.pay-step.done .num { font-size: 0 !important; }
.pay-step.current .num {
background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
color: #ffffff !important;
border-color: #0d9488 !important;
box-shadow: 0 0 0 4px rgba(20,184,166,0.18) !important;
}
.pay-step.current { color: #0f172a !important; }
.pay-step.done { color: #475569 !important; }
.pay-step-line {
flex: 1 !important;
height: 2px !important;
background: #e2e8f0 !important;
margin: 0 14px !important;
border-radius: 2px !important;
}
.pay-step-line.done {
background: linear-gradient(90deg, #14b8a6, #2dd4bf) !important;
}
/* Alert */
.pay-alert {
display: flex !important;
gap: 12px !important;
padding: 14px 18px !important;
border-radius: 12px !important;
margin-bottom: 18px !important;
font-size: 14px !important;
align-items: flex-start !important;
}
.pay-alert i { font-size: 22px !important; margin-top: 1px !important; }
.pay-alert-error {
background: linear-gradient(135deg, #fff1f2, #fee2e2) !important;
border: 1px solid #fecaca !important;
color: #991b1b !important;
}
/* Methods card + tabs */
.pay-methods-card {
border-radius: 16px !important;
border: 1px solid #e6f0ef !important;
box-shadow: 0 6px 24px -12px rgba(20,184,166,0.15) !important;
overflow: hidden !important;
}
.pay-method-tabs {
display: flex !important;
border-bottom: 1px solid #e6f0ef !important;
background: linear-gradient(135deg, #f8fbfb, #f1f9f8) !important;
padding: 0 12px !important;
gap: 6px !important;
}
.pay-method-tabs .nav-link {
background: transparent !important;
border: 0 !important;
border-bottom: 3px solid transparent !important;
border-radius: 0 !important;
color: #64748b !important;
font-weight: 600 !important;
padding: 16px 20px !important;
font-size: 14px !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
letter-spacing: 0.01em !important;
transition: all 0.2s !important;
}
.pay-method-tabs .nav-link i { font-size: 16px !important; }
.pay-method-tabs .nav-link:hover { color: #14b8a6 !important; }
.pay-method-tabs .nav-link.active {
color: #0d9488 !important;
border-bottom-color: #14b8a6 !important;
background: rgba(255,255,255,0.6) !important;
}
.pay-tab-body { padding: 24px !important; }
/* Group within tab */
.pay-group + .pay-group { margin-top: 26px !important; }
.pay-group-head {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 14px !important;
color: #0f172a !important;
font-weight: 700 !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.pay-group-head i {
width: 32px !important; height: 32px !important;
border-radius: 9px !important;
background: linear-gradient(135deg, rgba(45,212,191,0.18), rgba(20,184,166,0.08)) !important;
color: #0d9488 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
font-size: 14px !important;
border: 1px solid rgba(45,212,191,0.3) !important;
}
.pay-group-head small {
margin-left: auto !important;
color: #94a3b8 !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* Channel grid */
.pay-channel-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
gap: 12px !important;
}
.pay-channel {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
padding: 16px 10px 12px !important;
background: #ffffff !important;
border: 1.5px solid #e6f0ef !important;
border-radius: 12px !important;
cursor: pointer !important;
transition: all 0.18s ease !important;
min-height: 100px !important;
}
.pay-channel:hover {
border-color: #14b8a6 !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 18px -10px rgba(20,184,166,0.35) !important;
}
.pay-channel.active {
border-color: #14b8a6 !important;
background: linear-gradient(135deg, rgba(45,212,191,0.06), rgba(20,184,166,0.02)) !important;
box-shadow: 0 0 0 3px rgba(45,212,191,0.18), 0 8px 18px -10px rgba(20,184,166,0.35) !important;
}
.pay-channel-logo {
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.pay-channel-logo img {
max-height: 32px !important;
max-width: 90% !important;
object-fit: contain !important;
}
.pay-channel-name {
font-size: 12px !important;
font-weight: 600 !important;
color: #475569 !important;
text-align: center !important;
line-height: 1.3 !important;
}
.pay-channel-check {
position: absolute !important;
top: 8px !important;
right: 8px !important;
width: 22px !important; height: 22px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #2dd4bf, #14b8a6) !important;
color: #fff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 10px !important;
opacity: 0 !important;
transform: scale(0.5) !important;
transition: all 0.18s !important;
box-shadow: 0 4px 10px -3px rgba(20,184,166,0.5) !important;
}
.pay-channel.active .pay-channel-check { opacity: 1 !important; transform: scale(1) !important; }
.pay-note {
margin-top: 16px !important;
padding: 12px 14px !important;
background: rgba(45,212,191,0.06) !important;
border-left: 3px solid #14b8a6 !important;
border-radius: 8px !important;
font-size: 13px !important;
color: #475569 !important;
display: flex !important; align-items: flex-start !important; gap: 8px !important;
}
.pay-note i { color: #14b8a6 !important; margin-top: 2px !important; }
/* Order summary */
.pay-summary-card {
border-radius: 16px !important;
border: 1px solid #e6f0ef !important;
box-shadow: 0 6px 24px -12px rgba(20,184,166,0.15) !important;
position: sticky !important;
top: 100px !important;
overflow: hidden !important;
}
.pay-summary-head {
padding: 22px 22px 16px !important;
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
color: #fff !important;
position: relative !important;
}
.pay-summary-head::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient(circle at 90% 0%, rgba(255,255,255,0.18), transparent 60%) !important;
pointer-events: none !important;
}
.pay-summary-eyebrow {
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
opacity: 0.85 !important;
font-weight: 600 !important;
}
.pay-summary-title {
margin: 6px 0 0 !important;
font-size: 22px !important;
font-weight: 700 !important;
color: #fff !important;
letter-spacing: -0.01em !important;
}
.pay-summary-list { list-style: none !important; padding: 0 !important; margin: 0 0 18px !important; }
.pay-summary-list li {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 9px 0 !important;
border-bottom: 1px dashed #eef2f6 !important;
font-size: 13.5px !important;
color: #475569 !important;
}
.pay-summary-list li:last-child { border-bottom: 0 !important; }
.pay-summary-list li i {
width: 28px !important; height: 28px !important;
border-radius: 8px !important;
background: rgba(45,212,191,0.12) !important;
color: #0d9488 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
font-size: 12px !important;
}
.pay-summary-list li b { margin-left: auto !important; color: #0f172a !important; font-size: 14px !important; font-weight: 700 !important; }
.pay-summary-total {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 16px !important;
background: linear-gradient(135deg, #f8fbfb, #f1f9f8) !important;
border-radius: 12px !important;
border: 1px solid #e6f0ef !important;
margin-bottom: 14px !important;
}
.pay-summary-total span { color: #475569 !important; font-weight: 600 !important; font-size: 13px !important; }
.pay-summary-total strong {
background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.01em !important;
}
.pay-summary-selected {
padding: 12px 14px !important;
background: rgba(45,212,191,0.04) !important;
border: 1px dashed rgba(45,212,191,0.35) !important;
border-radius: 10px !important;
margin-bottom: 14px !important;
}
.pay-sel-eyebrow { display: block !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #94a3b8 !important; font-weight: 600 !important; }
.pay-sel-value { display: block !important; margin-top: 4px !important; color: #0f172a !important; font-weight: 600 !important; font-size: 13.5px !important; }
.pay-secure {
display: flex !important; align-items: center !important; gap: 8px !important;
color: #64748b !important; font-size: 12px !important;
}
.pay-secure i { color: #14b8a6 !important; font-size: 14px !important; }
/* Bottom action bar */
.pay-action-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 16px 22px !important;
background: #ffffff !important;
border: 1px solid #e6f0ef !important;
border-radius: 16px !important;
box-shadow: 0 8px 26px -14px rgba(20,184,166,0.2) !important;
margin-top: 22px !important;
}
.pay-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
height: 48px !important;
padding: 0 26px !important;
border-radius: 12px !important;
font-size: 14.5px !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
border: 0 !important;
cursor: pointer !important;
transition: all 0.2s !important;
text-decoration: none !important;
min-width: 160px !important;
}
.pay-btn-ghost {
background: #f8fbfb !important;
color: #475569 !important;
border: 1.5px solid #e6f0ef !important;
}
.pay-btn-ghost:hover {
background: #f1f5f9 !important;
color: #0f172a !important;
border-color: #cbd5e1 !important;
}
.pay-btn-primary {
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
color: #ffffff !important;
box-shadow: 0 8px 18px -6px rgba(20,184,166,0.55) !important;
}
.pay-btn-primary:hover:not(:disabled) {
transform: translateY(-2px) !important;
box-shadow: 0 12px 24px -8px rgba(20,184,166,0.7) !important;
color: #fff !important;
}
.pay-btn-primary:disabled {
background: #cbd5e1 !important;
color: #ffffff !important;
cursor: not-allowed !important;
box-shadow: none !important;
opacity: 0.7 !important;
}
@media (max-width: 768px) {
.pay-steps { padding: 14px 12px !important; }
.pay-step .lbl { display: none !important; }
.pay-action-bar { flex-direction: column !important; }
.pay-action-bar .pay-btn { width: 100% !important; }
.pay-channel-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; }
}
/* === v5.3.2 payment redesign: compact + tosca override (no FA touching) === */
body.app .pay-channel-page { padding-top: 8px !important; }
body.app .pay-channel-page .row { margin-left: -8px !important; margin-right: -8px !important; }
body.app .pay-channel-page .row > [class*="col-"] { padding-left: 8px !important; padding-right: 8px !important; }
body.app .pay-channel-page .pay-steps { margin: 0 0 12px !important; padding: 10px 14px !important; }
body.app .pay-channel-page .pay-steps .step { font-size: 12px !important; padding: 4px 10px !important; }
body.app .pay-channel-page .pay-method-tabs { margin: 0 0 10px !important; gap: 6px !important; }
body.app .pay-channel-page .pay-method-tabs .nav-link { padding: 8px 14px !important; font-size: 13px !important; }
body.app .pay-channel-page .pay-group { margin-bottom: 10px !important; }
body.app .pay-channel-page .pay-group-head { padding: 8px 12px !important; font-size: 12px !important; }
body.app .pay-channel-page .pay-channel-grid { gap: 8px !important; padding: 8px !important; }
body.app .pay-channel-page .pay-channel { padding: 10px 8px !important; min-height: 70px !important; }
body.app .pay-channel-page .pay-channel img { max-height: 28px !important; }
body.app .pay-channel-page .pay-channel .pay-name { font-size: 11px !important; margin-top: 4px !important; }
body.app .pay-channel-page .pay-action-bar { padding: 10px 14px !important; margin-top: 10px !important; }
body.app .pay-channel-page .pay-action-bar .btn { padding: 8px 16px !important; font-size: 13px !important; }
/* tosca summary card override (no purple) */
body.app .pay-channel-page .card.pay-summary-card,
body.app .pay-channel-page .pay-summary-card {
background: #fff !important;
border: 1px solid #e6f0ef !important;
box-shadow: 0 2px 8px rgba(15, 118, 110, 0.06) !important;
border-radius: 10px !important;
}
body.app .pay-channel-page .pay-summary-head {
background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
color: #fff !important;
padding: 10px 14px !important;
border-radius: 10px 10px 0 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
}
body.app .pay-channel-page .pay-summary-body { padding: 12px 14px !important; }
body.app .pay-channel-page .pay-summary-body .row { margin: 0 !important; }
body.app .pay-channel-page .pay-summary-body .row > div { padding: 4px 0 !important; font-size: 12px !important; }
body.app .pay-channel-page .pay-summary-total {
background: #f0fdfa !important;
border-top: 1px solid #e6f0ef !important;
padding: 10px 14px !important;
border-radius: 0 0 10px 10px !important;
font-weight: 700 !important;
color: #0f766e !important;
font-size: 14px !important;
}
/* === v5.3.3 force tosca summary card (defeat v4-tagger v4-stat) === */
body.app .pay-channel-page .card.pay-summary-card,
body.app .pay-channel-page .card.pay-summary-card.v4-stat,
body.app .pay-channel-page .card.pay-summary-card.v4-tagged,
body.app .card.pay-summary-card.v4-stat {
background: #ffffff !important;
color: #0f172a !important;
border: 1px solid #e6f0ef !important;
box-shadow: 0 4px 14px rgba(15, 118, 110, 0.08) !important;
border-radius: 12px !important;
overflow: hidden !important;
min-height: 0 !important;
}
body.app .pay-channel-page .card.pay-summary-card::after,
body.app .pay-channel-page .card.pay-summary-card.v4-stat::after {
content: none !important;
display: none !important;
}
body.app .pay-channel-page .card.pay-summary-card *,
body.app .pay-channel-page .card.pay-summary-card.v4-stat *,
body.app .pay-channel-page .card.pay-summary-card h1,
body.app .pay-channel-page .card.pay-summary-card h2,
body.app .pay-channel-page .card.pay-summary-card h3,
body.app .pay-channel-page .card.pay-summary-card h6,
body.app .pay-channel-page .card.pay-summary-card span,
body.app .pay-channel-page .card.pay-summary-card small,
body.app .pay-channel-page .card.pay-summary-card .text-uppercase,
body.app .pay-channel-page .card.pay-summary-card .text-muted {
color: inherit !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-head {
background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
color: #ffffff !important;
padding: 14px 16px !important;
border-radius: 12px 12px 0 0 !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-head *,
body.app .pay-channel-page .card.pay-summary-card .pay-summary-eyebrow,
body.app .pay-channel-page .card.pay-summary-card .pay-summary-title {
color: #ffffff !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-eyebrow {
font-size: 11px !important; letter-spacing: 0.6px !important; opacity: 0.85 !important; font-weight: 600 !important; text-transform: uppercase !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-title {
font-size: 18px !important; font-weight: 700 !important; margin: 4px 0 0 !important;
}
body.app .pay-channel-page .card.pay-summary-card .card-body {
padding: 14px 16px !important; color: #0f172a !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-list {
list-style: none !important; padding: 0 !important; margin: 0 0 12px !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-list li {
display: flex !important; align-items: center !important; gap: 8px !important;
padding: 6px 0 !important; font-size: 13px !important; color: #475569 !important;
border-bottom: 1px dashed #e6f0ef !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-list li:last-child { border-bottom: 0 !important; }
body.app .pay-channel-page .card.pay-summary-card .pay-summary-list li b {
margin-left: auto !important; color: #0f766e !important; font-weight: 700 !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-list li i {
color: #0f766e !important; width: 16px !important; text-align: center !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-total {
display: flex !important; justify-content: space-between !important; align-items: center !important;
background: #f0fdfa !important; border: 1px solid #ccfbf1 !important; border-radius: 8px !important;
padding: 10px 12px !important; margin: 8px 0 !important; font-weight: 600 !important; color: #0f766e !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-total strong { color: #0f766e !important; font-size: 16px !important; }
body.app .pay-channel-page .card.pay-summary-card .pay-summary-selected {
background: #f8fafc !important; border: 1px dashed #cbd5e1 !important; border-radius: 8px !important;
padding: 10px 12px !important; margin: 8px 0 !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-sel-eyebrow {
display: block !important; font-size: 10px !important; letter-spacing: 0.6px !important;
text-transform: uppercase !important; color: #64748b !important; font-weight: 600 !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-sel-value {
display: block !important; margin-top: 2px !important; font-weight: 600 !important; color: #0f172a !important; font-size: 13px !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-secure {
display: flex !important; align-items: center !important; gap: 8px !important;
margin-top: 10px !important; padding: 10px 12px !important; background: #fff7ed !important;
border: 1px solid #fed7aa !important; border-radius: 8px !important; color: #9a3412 !important; font-size: 12px !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-secure i { color: #ea580c !important; }
/* === v5.3.3 force tosca summary card (defeat v4-tagger v4-stat) === */
body.app .pay-channel-page .card.pay-summary-card,
body.app .pay-channel-page .card.pay-summary-card.v4-stat,
body.app .pay-channel-page .card.pay-summary-card.v4-tagged,
body.app .card.pay-summary-card.v4-stat {
background: #ffffff !important;
color: #0f172a !important;
border: 1px solid #e6f0ef !important;
box-shadow: 0 4px 14px rgba(15, 118, 110, 0.08) !important;
border-radius: 12px !important;
overflow: hidden !important;
min-height: 0 !important;
}
body.app .pay-channel-page .card.pay-summary-card::after,
body.app .pay-channel-page .card.pay-summary-card.v4-stat::after {
content: none !important;
display: none !important;
}
body.app .pay-channel-page .card.pay-summary-card *,
body.app .pay-channel-page .card.pay-summary-card.v4-stat *,
body.app .pay-channel-page .card.pay-summary-card h1,
body.app .pay-channel-page .card.pay-summary-card h2,
body.app .pay-channel-page .card.pay-summary-card h3,
body.app .pay-channel-page .card.pay-summary-card h6,
body.app .pay-channel-page .card.pay-summary-card span,
body.app .pay-channel-page .card.pay-summary-card small,
body.app .pay-channel-page .card.pay-summary-card .text-uppercase,
body.app .pay-channel-page .card.pay-summary-card .text-muted {
color: inherit !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-head {
background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
color: #ffffff !important;
padding: 14px 16px !important;
border-radius: 12px 12px 0 0 !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-head *,
body.app .pay-channel-page .card.pay-summary-card .pay-summary-eyebrow,
body.app .pay-channel-page .card.pay-summary-card .pay-summary-title {
color: #ffffff !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-eyebrow {
font-size: 11px !important; letter-spacing: 0.6px !important; opacity: 0.85 !important; font-weight: 600 !important; text-transform: uppercase !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-title {
font-size: 18px !important; font-weight: 700 !important; margin: 4px 0 0 !important;
}
body.app .pay-channel-page .card.pay-summary-card .card-body {
padding: 14px 16px !important; color: #0f172a !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-list {
list-style: none !important; padding: 0 !important; margin: 0 0 12px !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-list li {
display: flex !important; align-items: center !important; gap: 8px !important;
padding: 6px 0 !important; font-size: 13px !important; color: #475569 !important;
border-bottom: 1px dashed #e6f0ef !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-list li:last-child { border-bottom: 0 !important; }
body.app .pay-channel-page .card.pay-summary-card .pay-summary-list li b {
margin-left: auto !important; color: #0f766e !important; font-weight: 700 !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-list li i {
color: #0f766e !important; width: 16px !important; text-align: center !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-total {
display: flex !important; justify-content: space-between !important; align-items: center !important;
background: #f0fdfa !important; border: 1px solid #ccfbf1 !important; border-radius: 8px !important;
padding: 10px 12px !important; margin: 8px 0 !important; font-weight: 600 !important; color: #0f766e !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-summary-total strong { color: #0f766e !important; font-size: 16px !important; }
body.app .pay-channel-page .card.pay-summary-card .pay-summary-selected {
background: #f8fafc !important; border: 1px dashed #cbd5e1 !important; border-radius: 8px !important;
padding: 10px 12px !important; margin: 8px 0 !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-sel-eyebrow {
display: block !important; font-size: 10px !important; letter-spacing: 0.6px !important;
text-transform: uppercase !important; color: #64748b !important; font-weight: 600 !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-sel-value {
display: block !important; margin-top: 2px !important; font-weight: 600 !important; color: #0f172a !important; font-size: 13px !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-secure {
display: flex !important; align-items: center !important; gap: 8px !important;
margin-top: 10px !important; padding: 10px 12px !important; background: #fff7ed !important;
border: 1px solid #fed7aa !important; border-radius: 8px !important; color: #9a3412 !important; font-size: 12px !important;
}
body.app .pay-channel-page .card.pay-summary-card .pay-secure i { color: #ea580c !important; }
/* === v5.3.4 defeat v4-dark stat-card icon override on payment cards === */
body.app .row > [class*="col-"] > .card.pay-methods-card {
min-height: 0 !important;
padding: 0 !important;
}
body.app .row > [class*="col-"] > .card.pay-methods-card .card-body {
padding: 0 !important;
}
body.app .row > [class*="col-"] > .card.pay-methods-card h6,
body.app .row > [class*="col-"] > .card.pay-methods-card .text-uppercase,
body.app .row > [class*="col-"] > .card.pay-methods-card small,
body.app .row > [class*="col-"] > .card.pay-methods-card h2,
body.app .row > [class*="col-"] > .card.pay-methods-card h1,
body.app .row > [class*="col-"] > .card.pay-methods-card .h2 {
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
text-transform: none !important;
letter-spacing: normal !important;
margin-bottom: 0 !important;
}
body.app .row > [class*="col-"] > .card.pay-methods-card i,
body.app .row > [class*="col-"] > .card.pay-methods-card .fa,
body.app .row > [class*="col-"] > .card.pay-methods-card [class*="fa-"] {
background: transparent !important;
color: inherit !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
display: inline-block !important;
font-size: inherit !important;
backdrop-filter: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Now restore the intended pay-* icon visuals */
body.app .pay-method-tabs .nav-link i {
color: inherit !important;
font-size: 16px !important;
background: transparent !important;
width: auto !important; height: auto !important;
border: 0 !important;
}
body.app .pay-method-tabs .nav-link.active i { color: #0d9488 !important; }
body.app .pay-method-tabs .nav-link:not(.active) i { color: #94a3b8 !important; }
body.app .pay-group-head i {
width: 32px !important; height: 32px !important;
border-radius: 9px !important;
background: linear-gradient(135deg, rgba(45,212,191,0.18), rgba(20,184,166,0.08)) !important;
color: #0d9488 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
font-size: 14px !important;
border: 1px solid rgba(45,212,191,0.3) !important;
}
body.app .pay-channel-check i {
width: 18px !important; height: 18px !important;
border-radius: 50% !important;
background: #0d9488 !important;
color: #ffffff !important;
font-size: 10px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
border: 0 !important;
}
body.app .pay-channel-page .pay-summary-card .pay-summary-list li i {
background: transparent !important;
color: #0d9488 !important;
width: 16px !important; height: auto !important;
border: 0 !important;
font-size: 13px !important;
display: inline !important;
border-radius: 0 !important;
}
body.app .pay-channel-page .pay-secure i {
background: transparent !important;
color: #ea580c !important;
width: auto !important; height: auto !important;
border: 0 !important;
font-size: 14px !important;
display: inline !important;
border-radius: 0 !important;
}
/* === v5.3.5 also defeat v4-dark on summary card icons === */
body.app .row > [class*="col-"] > .card.pay-summary-card,
body.app .row > [class*="col-"] > .card.pay-summary-card.v4-stat {
min-height: 0 !important;
padding: 0 !important;
}
body.app .row > [class*="col-"] > .card.pay-summary-card .card-body {
padding: 14px 16px !important;
}
body.app .row > [class*="col-"] > .card.pay-summary-card h6,
body.app .row > [class*="col-"] > .card.pay-summary-card .text-uppercase,
body.app .row > [class*="col-"] > .card.pay-summary-card small,
body.app .row > [class*="col-"] > .card.pay-summary-card h2,
body.app .row > [class*="col-"] > .card.pay-summary-card h1,
body.app .row > [class*="col-"] > .card.pay-summary-card .h2 {
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
text-transform: none !important;
letter-spacing: normal !important;
margin-bottom: 0 !important;
}
body.app .row > [class*="col-"] > .card.pay-summary-card i,
body.app .row > [class*="col-"] > .card.pay-summary-card .fa,
body.app .row > [class*="col-"] > .card.pay-summary-card [class*="fa-"] {
background: transparent !important;
color: #0d9488 !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
display: inline-block !important;
font-size: 13px !important;
backdrop-filter: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
body.app .row > [class*="col-"] > .card.pay-summary-card .pay-summary-list li i {
color: #0d9488 !important;
width: 16px !important;
text-align: center !important;
margin-right: 4px !important;
}
body.app .row > [class*="col-"] > .card.pay-summary-card .pay-secure i {
color: #ea580c !important;
font-size: 14px !important;
}
body.app .row > [class*="col-"] > .card.pay-summary-card .pay-summary-head .pay-summary-eyebrow,
body.app .row > [class*="col-"] > .card.pay-summary-card .pay-summary-head .pay-summary-title {
color: #ffffff !important;
}
body.app .row > [class*="col-"] > .card.pay-summary-card .pay-summary-head h3 {
color: #ffffff !important;
font-size: 18px !important;
font-weight: 700 !important;
margin: 4px 0 0 !important;
letter-spacing: -0.01em !important;
}
/* Also fix flash error icon if shown */
body.app .pay-channel-page .pay-alert i {
background: transparent !important;
color: inherit !important;
width: auto !important; height: auto !important;
border: 0 !important; box-shadow: none !important;
font-size: 18px !important;
border-radius: 0 !important;
}
/* ============================================================
v5.3.6 — pay.blade.php (order_manual / order_otomatis) text fix
v4-tagger.js auto-adds .v4-stat to bare .card → forces text white.
Scope override via .pay-info-page wrapper.
============================================================ */
body.app .pay-info-page .card,
body.app .pay-info-page .card.v4-stat {
background: #ffffff !important;
color: #1e1e1e !important;
border: 1px solid #e6eef0 !important;
border-radius: 14px !important;
box-shadow: 0 4px 14px rgba(13,148,136,.06) !important;
}
body.app .pay-info-page .card *,
body.app .pay-info-page .card.v4-stat * {
color: inherit !important;
}
body.app .pay-info-page .card .satu,
body.app .pay-info-page .card.v4-stat .satu {
color: #0d9488 !important;
font-size: 22px !important;
font-weight: 700 !important;
margin-bottom: 6px !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
body.app .pay-info-page .card .untuk,
body.app .pay-info-page .card.v4-stat .untuk {
color: #555 !important;
font-size: 14px !important;
margin: 0 0 8px !important;
}
body.app .pay-info-page .card .harga,
body.app .pay-info-page .card.v4-stat .harga {
color: #0f172a !important;
font-weight: 800 !important;
font-size: 30px !important;
margin-bottom: 12px !important;
letter-spacing: -.5px !important;
}
body.app .pay-info-page .card .status,
body.app .pay-info-page .card.v4-stat .status {
display: inline-block !important;
padding: 6px 18px !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: .5px !important;
}
body.app .pay-info-page .card .status.PENDING { background:#fff3cd !important; color:#856404 !important; border:1px solid #ffc107 !important; }
body.app .pay-info-page .card .status.PAID { background:#d4edda !important; color:#155724 !important; border:1px solid #28a745 !important; }
body.app .pay-info-page .card .status.EXPIRED { background:#f8d7da !important; color:#721c16 !important; border:1px solid #dc3545 !important; }
/* card-header / titles inside detail card */
body.app .pay-info-page .card .card-header {
background: #f8fafc !important;
border-bottom: 1px solid #e6eef0 !important;
border-radius: 14px 14px 0 0 !important;
}
body.app .pay-info-page .card .card-header .card-title,
body.app .pay-info-page .card .card-header h5 {
color: #0f172a !important;
font-weight: 700 !important;
font-size: 15px !important;
margin: 0 !important;
}
/* VA section */
body.app .pay-info-page .va-label { color:#475569 !important; font-weight:600 !important; }
body.app .pay-info-page .va-number { color:#0d9488 !important; font-size:30px !important; font-weight:800 !important; letter-spacing:2px !important; }
body.app .pay-info-page .btn-copy { color:#0d9488 !important; border:1px solid #0d9488 !important; background:#fff !important; border-radius:8px !important; padding:4px 14px !important; font-size:12px !important; }
body.app .pay-info-page .btn-copy:hover { background:#0d9488 !important; color:#fff !important; }
body.app .pay-info-page .batas { color:#64748b !important; font-size:12px !important; text-transform:uppercase !important; letter-spacing:.5px !important; }
body.app .pay-info-page .timer { color:#dc2626 !important; font-weight:700 !important; font-size:18px !important; }
/* accordion (instructions) */
body.app .pay-info-page .accordion-item { background:#fff !important; border:1px solid #e6eef0 !important; border-radius:10px !important; }
body.app .pay-info-page .accordion-header,
body.app .pay-info-page .accordion-button { background:#f8fafc !important; color:#0f172a !important; font-weight:600 !important; }
body.app .pay-info-page .accordion-button:not(.collapsed) { background:#ecfeff !important; color:#0d9488 !important; }
body.app .pay-info-page .accordion-body { background:#fff !important; color:#334155 !important; }
/* icons inside any pay card — neutralize v4-dark glass pill */
body.app .pay-info-page .card i,
body.app .pay-info-page .card .fa,
body.app .pay-info-page .card [class*="fa-"] {
background: transparent !important;
color: inherit !important;
width: auto !important;
height: auto !important;
border: 0 !important;
box-shadow: none !important;
display: inline-block !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 4px 0 0 !important;
font-size: inherit !important;
}