tanpa jarak.
========================================================================== */
.m-heading-1{
background: var(--c-surface);
border: 1px solid var(--c-border);
border-left: 1px solid var(--c-border);
border-radius: var(--r-xl);
box-shadow: var(--sh-xs);
padding: var(--sp-5) var(--sp-6);
margin: 0 0 var(--sp-6) 0;
}
.m-heading-1.border-green,
.m-heading-1.border-red,
.m-heading-1.border-blue,
.m-heading-1.border-yellow,
.m-heading-1.border-purple{
border-left: 3px solid var(--c-primary) !important;
}
.m-heading-1 > h1,
.m-heading-1 > h2,
.m-heading-1 > h3{
font-size: var(--fs-xl);
line-height: var(--lh-xl);
font-weight: var(--fw-semi);
color: var(--c-text);
margin: 0 0 var(--sp-1) 0;
text-transform: none;
font-family: var(--font-sans) !important;
display: block; /* <- kunci perbaikan "judul menempel" */
}
.m-heading-1 > h1 > i,
.m-heading-1 > h3 > i{ color: var(--c-primary); margin-right: var(--sp-2); }
.m-heading-1 > h1 .fa-angle-right{
color: var(--g-300); font-size: var(--fs-sm); margin: 0 var(--sp-2);
}
.m-heading-1 > p{
font-size: var(--fs-sm);
color: var(--c-text-muted);
margin: 0;
display: block; /* <- kunci perbaikan "judul menempel" */
}
/* Sebagian modul menaruh
beruntun di dalam heading -> netralkan */
.m-heading-1 > h1 + br,
.m-heading-1 br + br{ display: none; }
.breadcrumbs{ margin-bottom: var(--sp-6); }
/* PERBAIKAN (disetujui): ruang kosong menganga antara header dan konten.
Beberapa modul menaruh
di atas .page-content. */
.page-content > br,
.page-content > .breadcrumbs + br{ display: none; }
/* ==========================================================================
6. TOMBOL — resep TailAdmin: rounded-lg, px-4 py-3, text-sm, font-medium
========================================================================== */
.btn{
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-med);
line-height: 20px;
border-radius: var(--r-md);
border: 1px solid transparent;
padding: 10px var(--sp-4);
min-height: 40px;
box-shadow: var(--sh-xs);
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
text-transform: none;
}
.btn:focus, .btn:active:focus{ outline:none; box-shadow: var(--sh-focus); }
.btn i{ margin-right: 6px; }
/* Merah UNHAS = aksi utama */
.btn.red, .btn.btn-danger, .btn.red-sunglo, .btn.red-intense{
background: var(--c-primary); border-color: var(--c-primary); color:#fff;
}
.btn.red:hover, .btn.btn-danger:hover, .btn.red:focus, .btn.btn-danger:focus{
background: var(--c-primary-600); border-color: var(--c-primary-600); color:#fff;
}
/* Hijau = simpan/sukses */
.btn.green, .btn.btn-success, .btn.green-haze, .btn.green-jungle{
background: var(--c-success); border-color: var(--c-success); color:#fff;
}
.btn.green:hover, .btn.btn-success:hover, .btn.green:focus{
background: var(--c-success-600); border-color: var(--c-success-600); color:#fff;
}
/* Biru = info */
.btn.blue, .btn.btn-primary, .btn.blue-madison{
background: var(--c-info); border-color: var(--c-info); color:#fff;
}
.btn.blue:hover, .btn.btn-primary:hover{
background: var(--c-info-600); border-color: var(--c-info-600); color:#fff;
}
/* Kuning */
.btn.yellow, .btn.btn-warning{
background: var(--c-warning); border-color: var(--c-warning); color:#fff;
}
.btn.yellow:hover, .btn.btn-warning:hover{
background: var(--c-warning-600); border-color: var(--c-warning-600); color:#fff;
}
/* Default/putih ala TailAdmin */
.btn.default, .btn.btn-default, .btn.grey, .btn.white{
background: var(--c-surface);
border-color: var(--c-border-strong);
color: var(--g-700);
}
.btn.default:hover, .btn.btn-default:hover, .btn.grey:hover, .btn.white:hover{
background: var(--g-50); border-color: var(--c-border-strong); color: var(--g-800);
}
.btn.dark, .btn.btn-dark{ background: var(--g-800); border-color: var(--g-800); color:#fff; }
.btn.dark:hover{ background: var(--g-900); border-color: var(--g-900); }
/* Outline */
.btn.btn-outline{ background: var(--c-surface); box-shadow: var(--sh-xs); }
.btn.green.btn-outline{ color: var(--c-success); border-color: var(--c-success); background: var(--c-surface); }
.btn.green.btn-outline:hover{ background: var(--c-success); color:#fff; }
.btn.red.btn-outline{ color: var(--c-primary); border-color: var(--c-primary); background: var(--c-surface); }
.btn.red.btn-outline:hover{ background: var(--c-primary); color:#fff; }
.btn.blue.btn-outline{ color: var(--c-info); border-color: var(--c-info); background: var(--c-surface); }
.btn.blue.btn-outline:hover{ background: var(--c-info); color:#fff; }
.btn.dark.btn-outline{ color: var(--g-700); border-color: var(--c-border-strong); background: var(--c-surface); }
.btn.dark.btn-outline:hover{ background: var(--g-800); color:#fff; border-color: var(--g-800); }
/* Ukuran */
.btn.btn-sm{ font-size: var(--fs-xs); padding: 7px var(--sp-3); min-height: 34px; border-radius: var(--r-sm); }
.btn.btn-xs{ font-size: var(--fs-xs); padding: 5px 10px; min-height: 28px; border-radius: var(--r-sm); }
.btn.btn-lg{ font-size: var(--fs-lg); padding: 12px var(--sp-6); min-height: 48px; }
.btn.btn-block{ width:100%; }
/* ==========================================================================
7. FORM — resep TailAdmin: h-11 (44px), rounded-lg, border-gray-300,
shadow-xs, focus -> border brand-300 + ring brand 12%
========================================================================== */
.form-control{
height: 44px;
font-family: var(--font-sans);
font-size: var(--fs-sm);
line-height: 20px;
color: var(--c-text);
background: var(--c-surface);
border: 1px solid var(--c-border-strong);
border-radius: var(--r-md);
box-shadow: var(--sh-xs);
padding: 10px var(--sp-4);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control:focus{
border-color: var(--c-primary-300);
box-shadow: var(--sh-focus);
outline: none;
}
.form-control::placeholder{ color: var(--g-400); }
.form-control[disabled], .form-control[readonly]{
background: var(--g-50); color: var(--g-400); cursor: not-allowed;
}
textarea.form-control{ height:auto; min-height: 96px; padding: var(--sp-3) var(--sp-4); }
select.form-control{ padding-right: var(--sp-7); }
.control-label{
font-size: var(--fs-sm);
font-weight: var(--fw-med);
color: var(--g-700);
margin-bottom: var(--sp-2);
padding-top: 11px;
}
.form-group{ margin-bottom: var(--sp-5); }
.help-block{ font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 6px; }
/* Status validasi */
.has-error .form-control{ border-color: var(--c-error); }
.has-error .form-control:focus{ box-shadow: 0 0 0 4px rgba(240,68,56,.12); }
.has-error .control-label, .has-error .help-block{ color: var(--c-error-700); }
.has-success .form-control{ border-color: var(--c-success); }
.has-success .control-label{ color: var(--c-success-700); }
/* Input group */
.input-group .form-control{ box-shadow:none; }
.input-group-addon{
background: var(--g-50);
border: 1px solid var(--c-border-strong);
border-radius: var(--r-md);
color: var(--g-500);
font-size: var(--fs-sm);
padding: 10px var(--sp-3);
}
.input-group .form-control:first-child,
.input-group-addon:first-child{ border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn{ border-top-left-radius:0; border-bottom-left-radius:0; }
/* Checkbox / radio Metronic */
.mt-checkbox > span, .mt-radio > span{ border-color: var(--c-border-strong); }
.mt-checkbox > input:checked ~ span,
.mt-radio > input:checked ~ span{ background: var(--c-primary); border-color: var(--c-primary); }
.form-actions{
background: transparent;
border-top: 1px solid var(--c-border);
padding: var(--sp-5) 0 0;
margin-top: var(--sp-5);
}
/* ==========================================================================
8. TABEL — resep TailAdmin: tanpa grid penuh, hanya garis mendatar,
kepala abu + huruf kecil, padding lega
========================================================================== */
.table{
font-size: var(--fs-sm);
color: var(--c-text);
background: var(--c-surface);
margin-bottom: 0;
border: 0;
}
.table > thead > tr > th{
background: var(--g-50);
color: var(--g-500);
font-size: var(--fs-xs);
line-height: var(--lh-xs);
font-weight: var(--fw-med);
text-transform: none;
letter-spacing: .01em;
border: 0;
border-bottom: 1px solid var(--c-border);
padding: var(--sp-3) var(--sp-4);
vertical-align: middle;
white-space: nowrap;
}
.table > tbody > tr > td{
border: 0;
border-bottom: 1px solid var(--c-border);
padding: var(--sp-3) var(--sp-4);
vertical-align: middle;
color: var(--g-600);
}
.table > tbody > tr:last-child > td{ border-bottom: 0; }
/* Hilangkan kotak-kotak penuh khas Metronic */
.table.table-bordered,
.table.table-bordered > thead > tr > th,
.table.table-bordered > tbody > tr > td{ border-left:0; border-right:0; }
.table.table-striped > tbody > tr:nth-child(odd){ background: var(--g-25); }
.table.table-hover > tbody > tr:hover{ background: var(--g-50); }
.table > tbody > tr.active > td{ background: var(--c-primary-50); }
/* Pembungkus tabel (23 file sudah punya .table-scrollable,
sisanya dibungkus .rf-scroll oleh refresh.js) */
.table-scrollable, .rf-scroll{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
background: var(--c-surface);
margin-bottom: var(--sp-4);
}
.table-scrollable > .table, .rf-scroll > .table{ margin-bottom: 0; }
/* ---- DataTables chrome ---- */
.dataTables_wrapper{ padding: 0; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
height: 40px;
border: 1px solid var(--c-border-strong);
border-radius: var(--r-md);
background: var(--c-surface);
box-shadow: var(--sh-xs);
font-size: var(--fs-sm);
color: var(--c-text);
padding: 8px var(--sp-3);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{
border-color: var(--c-primary-300); box-shadow: var(--sh-focus); outline:none;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info{
font-size: var(--fs-sm); color: var(--c-text-muted); padding: var(--sp-3) 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
min-width: 38px; min-height: 38px;
line-height: 22px;
border: 1px solid var(--c-border) !important;
border-radius: var(--r-md) !important;
background: var(--c-surface) !important;
color: var(--g-600) !important;
font-size: var(--fs-sm);
font-weight: var(--fw-med);
margin: 0 2px; padding: 7px 12px;
box-shadow: var(--sh-xs);
transition: background var(--dur) var(--ease);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
background: var(--g-50) !important; color: var(--c-primary) !important;
border-color: var(--c-border-strong) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active{
background: var(--c-primary) !important;
border-color: var(--c-primary) !important;
color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
opacity:.45; box-shadow:none; cursor: not-allowed;
}
/* Tombol export (Print/PDF/CSV) */
.dt-buttons .dt-button, .table-toolbar .btn.dt-button{
background: var(--c-surface) !important;
border: 1px solid var(--c-border-strong) !important;
border-radius: var(--r-md) !important;
color: var(--g-700) !important;
font-size: var(--fs-sm);
font-weight: var(--fw-med);
padding: 8px var(--sp-4);
box-shadow: var(--sh-xs);
}
.dt-buttons .dt-button:hover{ background: var(--g-50) !important; color: var(--c-primary) !important; }
.table-toolbar{ margin-bottom: var(--sp-4); }
/* ==========================================================================
9. MODAL
========================================================================== */
.modal-content{
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
box-shadow: var(--sh-xl);
}
.modal-header{
border-bottom: 1px solid var(--c-border);
padding: var(--sp-5) var(--sp-6);
}
.modal-title{ font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--c-text); }
.modal-body{ padding: var(--sp-6); }
.modal-footer{ border-top: 1px solid var(--c-border); padding: var(--sp-4) var(--sp-6); }
.modal-backdrop.in{ background: var(--g-900); opacity:.5; }
/* Portlet di dalam modal jangan bertumpuk bayangan */
.modal-body .portlet.light{
border:0; box-shadow:none; padding:0; margin-bottom:0; border-radius:0;
}
/* ==========================================================================
10. ALERT & NOTE
========================================================================== */
.alert{
border-radius: var(--r-lg);
border: 1px solid transparent;
font-size: var(--fs-sm);
padding: var(--sp-4) var(--sp-5);
margin-bottom: var(--sp-5);
box-shadow: none;
}
.alert-success{ background: var(--c-success-50); border-color: var(--c-success-100); color: var(--c-success-700); }
.alert-danger, .alert-error{ background: var(--c-error-50); border-color: var(--c-error-100); color: var(--c-error-700); }
.alert-warning{ background: var(--c-warning-50); border-color: #fedf89; color: var(--c-warning-700); }
.alert-info{ background: var(--c-info-50); border-color: #b9e6fe; color: var(--c-info-600); }
.alert .close{ opacity:.5; text-shadow:none; }
.note{
border-radius: var(--r-lg);
border: 1px solid var(--c-border);
border-left: 3px solid var(--c-border-strong);
background: var(--c-surface);
padding: var(--sp-4) var(--sp-5);
margin-bottom: var(--sp-5);
}
.note.note-success{ background: var(--c-success-50); border-color: var(--c-success-100); border-left-color: var(--c-success); }
.note.note-danger{ background: var(--c-error-50); border-color: var(--c-error-100); border-left-color: var(--c-error); }
.note.note-warning{ background: var(--c-warning-50); border-color:#fedf89; border-left-color: var(--c-warning); }
.note.note-info{ background: var(--c-info-50); border-color:#b9e6fe; border-left-color: var(--c-info); }
/* Badge & label */
.badge{
border-radius: var(--r-pill);
font-size: var(--fs-xs);
font-weight: var(--fw-med);
padding: 3px 10px;
}
.label{ border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-med); padding: 4px 8px; }
/* ==========================================================================
11. TAB
========================================================================== */
.nav-tabs{ border-bottom: 1px solid var(--c-border); }
.nav-tabs > li > a{
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--g-500);
font-size: var(--fs-sm);
font-weight: var(--fw-med);
padding: var(--sp-3) var(--sp-4);
margin-right: var(--sp-2);
background: transparent;
}
.nav-tabs > li > a:hover{ background: transparent; color: var(--c-primary); border-bottom-color: var(--c-border-strong); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus{
background: transparent;
border: 0; border-bottom: 2px solid var(--c-primary);
color: var(--c-primary);
font-weight: var(--fw-semi);
}
.tabbable-line > .nav-tabs > li.active{ border-bottom-color: var(--c-primary); }
.tab-content{ padding-top: var(--sp-5); }
/* ==========================================================================
12. PLUGIN — select2 & datepicker disamakan tinggi dengan .form-control
========================================================================== */
.select2-container--bootstrap .select2-selection,
.select2-container .select2-selection--single{
height: 44px !important;
border: 1px solid var(--c-border-strong) !important;
border-radius: var(--r-md) !important;
background: var(--c-surface);
box-shadow: var(--sh-xs);
padding: 6px var(--sp-3);
}
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--single .select2-selection__rendered{
line-height: 30px; color: var(--c-text); font-size: var(--fs-sm); padding-left: 0;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow,
.select2-container .select2-selection--single .select2-selection__arrow{ height: 42px; }
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection{
border-color: var(--c-primary-300) !important; box-shadow: var(--sh-focus) !important;
}
.select2-dropdown{
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
box-shadow: var(--sh-lg);
overflow: hidden;
}
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected]{
background: var(--c-primary) !important; color:#fff;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice{
background: var(--c-primary-50); border:1px solid var(--c-primary-100);
color: var(--c-primary-700); border-radius: var(--r-sm); font-size: var(--fs-xs);
}
.datepicker{
border: 1px solid var(--c-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--sh-lg) !important;
padding: var(--sp-2);
}
.datepicker table tr td, .datepicker table tr th{ border-radius: var(--r-sm); font-size: var(--fs-sm); }
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active{
background: var(--c-primary) !important; background-image:none !important;
color:#fff !important; text-shadow:none;
}
.datepicker table tr td.today{ background: var(--c-primary-50) !important; color: var(--c-primary-700) !important; }
.datepicker table tr td.day:hover{ background: var(--g-100) !important; }
/* Fileinput */
.fileinput .input-group-addon{ border-radius: var(--r-md) 0 0 var(--r-md); }
.fileinput-preview{ border-radius: var(--r-md); border:1px solid var(--c-border); }
/* ==========================================================================
13. HALAMAN PROFIL — halaman pertama residen & konsultan
PERBAIKAN (disetujui): nama dokter sebelumnya tosca -> jadi warna teks utama
========================================================================== */
.profile{ margin-top: 0; }
.profile .profile-nav{
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
box-shadow: var(--sh-xs);
padding: var(--sp-4);
margin-bottom: var(--sp-6);
list-style: none;
}
.profile .profile-nav > li{ margin-bottom: var(--sp-3); }
.profile .profile-nav > li:last-child{ margin-bottom: 0; }
.profile .profile-nav > li > img,
.profile .profile-nav img.img-responsive{
border-radius: var(--r-lg);
border: 1px solid var(--c-border);
width: 100%;
background: var(--c-surface);
}
.profile .profile-nav > li > a{
display: block;
color: var(--g-700);
font-size: var(--fs-sm);
font-weight: var(--fw-med);
padding: 10px var(--sp-3);
border-radius: var(--r-md);
background: var(--g-50);
border: 1px solid var(--c-border);
transition: background var(--dur) var(--ease);
}
.profile .profile-nav > li > a:hover{ background: var(--c-primary-50); color: var(--c-primary); }
.profile .profile-nav > li > a > i{ color: var(--c-primary); margin-right: var(--sp-2); }
.profile .profile-info{
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
box-shadow: var(--sh-xs);
padding: var(--sp-6);
}
/* Nama besar di halaman profil (sebelumnya tosca) */
.profile .profile-info h1,
.profile .profile-info h2,
.profile .profile-info h3,
.profile .profile-info .caption{
color: var(--c-text) !important;
font-family: var(--font-sans) !important;
font-weight: var(--fw-semi);
font-size: var(--fs-xl);
line-height: var(--lh-xl);
margin-top: 0;
margin-bottom: var(--sp-4);
}
.profile .profile-info ul{ list-style:none; padding-left:0; }
.profile .profile-info li{
font-size: var(--fs-sm);
color: var(--g-600);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--c-border);
}
.profile .profile-info li:last-child{ border-bottom: 0; }
.profile .profile-info i{ color: var(--g-400); margin-right: var(--sp-2); }
.profile .tab-content{ background: transparent; border: 0; padding: 0; }
.profile .tabbable-line.tabbable-full-width{ margin-bottom: 0; }
/* ==========================================================================
14. HALAMAN HOME + FOOTER
========================================================================== */
.portlet.light.about-text{ padding: var(--sp-6); }
.about-text .card-title, .stories-cont .card-title{
font-size: var(--fs-lg);
font-weight: var(--fw-semi);
color: var(--c-text);
margin-bottom: var(--sp-2);
font-family: var(--font-sans);
}
.about-text .card-desc, .stories-cont .card-desc{
font-size: var(--fs-sm); color: var(--c-text-muted); line-height: var(--lh-base);
}
.card-icon > i, .about-text .card-icon i{ font-size: 32px; }
.stories-cont .photo img{ border-radius: var(--r-lg); box-shadow: var(--sh-xs); }
.copyright{
color: var(--g-400);
font-size: var(--fs-xs);
padding: var(--sp-6) 0;
border-top: 1px solid var(--c-border);
margin-top: var(--sp-6);
}
.copyright a{ color: var(--g-500); }
.copyright a:hover{ color: var(--c-primary); }
.go2top{
background: var(--c-surface) !important;
border: 1px solid var(--c-border);
border-radius: var(--r-pill) !important;
box-shadow: var(--sh-md);
width: 44px; height: 44px;
line-height: 42px;
text-align: center;
color: var(--g-600) !important;
transition: background var(--dur) var(--ease);
}
.go2top:hover{ background: var(--g-50) !important; color: var(--c-primary) !important; }
/* ==========================================================================
15. RESPONSIF HP
========================================================================== */
@media (max-width: 991px){
/* Menu di HP */
.page-header .navbar .navbar-nav{ margin: var(--sp-2) 0; }
.page-header .navbar .navbar-nav > li > a{
padding: 14px var(--sp-4); /* target sentuh >= 44px */
font-size: var(--fs-base);
border-radius: 0;
border-bottom: 1px solid var(--c-border);
}
.page-header .navbar .navbar-nav > li.active > a,
.page-header .navbar .navbar-nav > li.selected > a{
background: var(--c-primary-50);
box-shadow: inset 3px 0 0 var(--c-primary);
}
.page-header .navbar .navbar-collapse.collapse.in{
max-height: calc(100vh - 120px);
overflow-y: auto;
border-top: 1px solid var(--c-border);
}
.page-header .navbar .dropdown-menu{
box-shadow: none; border: 0; background: var(--g-50); border-radius: 0;
}
/* Badge notifikasi menumpuk rapi di HP */
.page-header .navbar .topbar-actions{ float: none; display: flex; flex-wrap: wrap; gap: 6px; }
.page-header .navbar .topbar-actions .btn-group-notification{ margin: 0; }
/* Form menumpuk ke bawah */
.form-horizontal .control-label{
text-align: left !important;
padding-top: 0;
margin-bottom: var(--sp-2);
font-weight: var(--fw-med);
}
.form-horizontal .form-group{ margin-bottom: var(--sp-5); }
/* 16px mencegah iPhone zoom paksa saat kolom disentuh */
.form-control, .btn, .select2-container .select2-selection__rendered{ font-size: 16px; }
.portlet.light,
.portlet.light.portlet-fit,
.portlet.light.portlet-form{ padding: var(--sp-5); border-radius: var(--r-lg); }
.m-heading-1{ padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); }
.m-heading-1 > h1, .m-heading-1 > h3{ font-size: var(--fs-lg); line-height: 1.4; }
.modal-body{ padding: var(--sp-5); }
.modal-header{ padding: var(--sp-4) var(--sp-5); }
}
@media (max-width: 767px){
/* Petunjuk bahwa tabel masih bisa digeser ke kanan */
.rf-scroll, .table-scrollable{ position: relative; }
/* PERBAIKAN: bayangan petunjuk gulir.
Cara lama memakai ::after dengan position:absolute di dalam elemen yang
ITU SENDIRI menggulir, sehingga right:0 mengikuti ujung ISI tabel --
bayangan ikut bergeser saat tabel digeser ke kanan.
Cara baru memakai background-attachment: bayangan menempel pada
kotak pandang (viewport) elemen, jadi tetap diam di tepi kanan,
dan otomatis hilang saat gulir sudah mentok kanan. */
.rf-scroll::after, .table-scrollable::after{ content:none; }
.rf-scroll, .table-scrollable{
background-image:
linear-gradient(90deg, rgba(255,255,255,0), var(--c-surface)),
linear-gradient(90deg, rgba(255,255,255,0), rgba(16,24,40,.07));
background-repeat: no-repeat, no-repeat;
background-size: 28px 100%, 28px 100%;
background-position: right center, right center;
background-attachment: local, scroll;
}
.table > tbody > tr > td, .table > thead > tr > th{ white-space: nowrap; }
/* DataTables menumpuk */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{ float:none; width:100%; text-align:left; }
.dataTables_wrapper .dataTables_filter input{ width:100%; margin-left:0; margin-top:6px; }
.dataTables_wrapper .dataTables_paginate{ float:none; text-align:center; padding-top: var(--sp-4); }
.dataTables_wrapper .dataTables_paginate .paginate_button{ min-width:40px; min-height:40px; }
.dataTables_wrapper .dataTables_info{ text-align:center; }
/* Tombol penuh selebar layar agar mudah ditekan */
.form-actions .btn{ width:100%; margin-bottom: var(--sp-2); }
.btn.btn-sm{ min-height: 36px; }
}
/* Badge bernilai 0 dibuat abu agar tidak "berteriak" (ala TailAdmin) */
.page-header .navbar .topbar-actions .btn-group-notification .btn .badge.rf-zero{
background: var(--g-100);
color: var(--g-500);
}
/* DataTables menimpa latar kepala tabel lewat .sorting/.sorting_asc/.sorting_desc
(plugins.min.css memakai "background: initial"). Dikembalikan di sini. */
table.dataTable > thead > tr > th,
table.dataTable thead th,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc{
background-color: var(--g-50);
color: var(--g-500);
font-size: var(--fs-xs);
font-weight: var(--fw-med);
text-transform: none;
border-bottom: 1px solid var(--c-border);
padding: var(--sp-3) var(--sp-4);
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc{ color: var(--c-primary); }
/* ==========================================================================
16. PENGUATAN MOBILE — specificity dinaikkan agar menang atas
datatables.bootstrap.css / plugins.min.css yang memakai .col-* & #id
========================================================================== */
@media (max-width: 767px){
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper div[class*="col-"] .dataTables_filter{
float: none !important; width: 100% !important; text-align: left !important;
}
.dataTables_wrapper .dataTables_filter label{ width: 100%; display: block; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper div[class*="col-"] .dataTables_filter input{
width: 100% !important;
margin-left: 0 !important;
margin-top: 6px;
display: block;
font-size: 16px !important; /* cegah zoom paksa iPhone */
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper div[class*="col-"] .dataTables_length{
float: none !important; width: 100% !important; text-align: left !important;
}
.dataTables_wrapper .dataTables_length select{ font-size: 16px !important; }
.dataTables_wrapper div[class*="col-"]{ width: 100%; float: none; }
}
/* ==========================================================================
17. PERBAIKAN LANJUTAN (permintaan revisi)
========================================================================== */
/* --------------------------------------------------------------------------
17a. BADGE NOTIFIKASI — angka & bulatannya dibuat presisi
Masalah: bulatan tidak bulat sempurna, angka tidak center, ukuran berubah
mengikuti jumlah digit (545 vs 0).
Solusi: ukuran tetap, benar-benar bundar, angka center vertikal & horizontal.
-------------------------------------------------------------------------- */
.page-header .navbar .topbar-actions .btn-group-notification > .btn{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
line-height: 1;
}
.page-header .navbar .topbar-actions .btn-group-notification .btn .badge,
.page-header .navbar .topbar-actions .btn-group-notification .badge{
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
margin: 0 !important;
border-radius: var(--r-pill) !important;
background: var(--c-primary);
color: #fff;
font-size: 11px;
font-weight: var(--fw-semi);
line-height: 1;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
vertical-align: middle;
position: static !important;
top: auto !important; right: auto !important;
box-shadow: none;
border: 0;
}
/* Badge 0 -> abu, tidak menarik perhatian */
.page-header .navbar .topbar-actions .btn-group-notification .btn .badge.rf-zero{
background: var(--g-100);
color: var(--g-500);
}
/* --------------------------------------------------------------------------
17b. GARIS PEMISAH ANTAR MENU
Aplikasi lama memang TIDAK punya garis antar menu. Dipertahankan (tanpa
garis vertikal) agar user lama tidak bingung -- yang diperbaiki hanya
JARAK antar item supaya tidak terlihat berdempetan.
-------------------------------------------------------------------------- */
@media (min-width: 992px){
.page-header .navbar .navbar-nav > li{ margin-right: 2px; }
.page-header .navbar .navbar-nav > li > a{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
white-space: nowrap;
}
.page-header .navbar .navbar-nav > li > a i{ margin-right: 0; }
/* baris kedua (submenu mega-menu) diberi pemisah halus dari baris pertama */
.page-header .navbar .nav-collapse{ border-top: 1px solid var(--c-border); }
}
/* --------------------------------------------------------------------------
17c. PERAPIAN TULISAN & GARIS DI DESKTOP
Masalah: teks dan batas kotak tidak sejajar / terlalu mepet.
-------------------------------------------------------------------------- */
.page-content > .breadcrumbs > .m-heading-1{ margin-bottom: 0; }
.m-heading-1 > h1,
.m-heading-1 > h3{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0;
}
.m-heading-1 > h1 > i,
.m-heading-1 > h3 > i{ margin-right: 0; flex: 0 0 auto; }
.m-heading-1 > h1 .fa-angle-right{ margin: 0 2px; }
.m-heading-1 > p{ margin-top: 6px; }
/* Beberapa modul memakai
di dalam heading -> netralkan agar tidak menganga */
.m-heading-1 br{ display: none; }
/* --- Judul & subjudul TIDAK boleh menempel ---
Penyebab:
adalah elemen terpisah. Saat
naik sejajar di sampingnya.
Solusi: pakai inline-flex TAPI paksa h1 selebar penuh (width:100%). */
.m-heading-1 > h1,
.m-heading-1 > h3{
width: 100%;
flex: 0 0 100%;
}
.m-heading-1{ display: block; }
.m-heading-1 > p{
clear: both;
width: 100%;
margin: 6px 0 0 0 !important;
}
/* --- Garis kotak judul terbelah dua warna ---
Penyebab: components-rounded.css -> ".m-heading-1.m-bordered" memberi
border kanan/atas/bawah warna #10161c terpisah, sehingga terlihat belang.
Solusi: samakan keempat sisinya. */
.m-heading-1.m-bordered{
border-top: 1px solid var(--c-border) !important;
border-right: 1px solid var(--c-border) !important;
border-bottom: 1px solid var(--c-border) !important;
padding: var(--sp-5) var(--sp-6) !important;
}
.m-heading-1.m-bordered.border-green,
.m-heading-1.m-bordered.border-red,
.m-heading-1.m-bordered.border-blue,
.m-heading-1.m-bordered.border-yellow,
.m-heading-1.m-bordered.border-purple{
border-left: 3px solid var(--c-primary) !important;
}
/* --- Ruang kosong menganga di bawah navbar ---
Penyebab: beberapa modul menaruh
SEBELUM .page-content
(jadi kakak-adik, bukan anak) sehingga aturan ".page-content > br" tidak kena.
Solusi: sembunyikan
yang berdiri sendiri di dalam .container-fluid. */
.container-fluid > br{ display: none; }
/* Judul di dalam kartu sejajar dengan ikonnya */
.portlet.light > .portlet-title > .caption{
display: flex;
align-items: center;
gap: 8px;
float: none;
}
.portlet.light > .portlet-title > .caption > i{ margin-right: 0; }
.portlet.light > .portlet-title{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-3);
}
.portlet.light > .portlet-title > .actions,
.portlet.light > .portlet-title > .tools{ float: none; display: flex; gap: 8px; flex-wrap: wrap; }
/* --------------------------------------------------------------------------
17d. IKON MENU YANG RELEVAN
Ikon di database memakai icon-settings / icon-fire untuk hampir semua menu
(13x settings, 7x fire) sehingga tidak bermakna.
Diperbaiki lewat CSS berdasarkan JUDUL menu -> database TIDAK diubah.
Memakai Simple Line Icons yang SUDAH dimuat aplikasi (tanpa unduhan baru).
-------------------------------------------------------------------------- */
/* dasar: samakan ukuran & posisi semua ikon menu */
.page-header .navbar .navbar-nav i[class^="icon-"],
.page-header .navbar .navbar-nav i[class*=" icon-"]{
font-size: 15px;
line-height: 1;
width: 16px;
text-align: center;
display: inline-block;
flex: 0 0 auto;
}
/* Kelas penanda ditambahkan oleh refresh.js berdasarkan teks menu.
::before ditimpa dengan glyph Simple Line Icons yang sesuai. */
.rf-ic i::before{ font-family: 'simple-line-icons' !important; }
.rf-ic-home i::before{ content: "\e069" !important; } /* home */
.rf-ic-security i::before{ content: "\e00e" !important; } /* shield */
.rf-ic-master i::before{ content: "\e03f" !important; } /* drawer */
.rf-ic-eval i::before{ content: "\e080" !important; } /* check */
.rf-ic-activity-in i::before{ content: "\e05f" !important; } /* pencil */
.rf-ic-activity-mk i::before{ content: "\e040" !important; } /* docs */
.rf-ic-paper i::before{ content: "\e04c" !important; } /* book-open */
.rf-ic-profile i::before{ content: "\e005" !important; } /* user */
.rf-ic-elearning i::before{ content: "\e019" !important; } /* graduation */
.rf-ic-library i::before{ content: "\e013" !important; } /* notebook */
.rf-ic-search i::before{ content: "\e090" !important; } /* magnifier */
.rf-ic-report i::before{ content: "\e077" !important; } /* bar-chart */
.rf-ic-chart i::before{ content: "\e05e" !important; } /* pie-chart */
.rf-ic-inpatient i::before{ content: "\e08a" !important; } /* heart */
.rf-ic-er i::before{ content: "\e020" !important; } /* energy */
.rf-ic-ward i::before{ content: "\e069" !important; } /* home */
.rf-ic-scientific i::before{ content: "\e026" !important; } /* chemistry */
.rf-ic-exam i::before{ content: "\e028" !important; } /* badge */
.rf-ic-coass i::before{ content: "\e001" !important; } /* users */
.rf-ic-division i::before{ content: "\e034" !important; } /* layers */
.rf-ic-affective i::before{ content: "\e09b" !important; } /* star */
.rf-ic-hospital i::before{ content: "\e04b" !important; } /* briefcase */
.rf-ic-user i::before{ content: "\e005" !important; } /* user */
.rf-ic-users i::before{ content: "\e001" !important; } /* users */
.rf-ic-menu i::before{ content: "\e067" !important; } /* list */
.rf-ic-group i::before{ content: "\e06a" !important; } /* grid */
.rf-ic-edit i::before{ content: "\e05f" !important; } /* pencil */
.rf-ic-satellite i::before{ content: "\e033" !important; } /* map */
.rf-ic-academic i::before{ content: "\e019" !important; } /* graduation */
.rf-ic-rotasi i::before{ content: "\e042" !important; } /* direction */
.rf-ic-export i::before{ content: "\e083" !important; } /* cloud-download */
.rf-ic-sync i::before{ content: "\e098" !important; } /* refresh */
.rf-ic-head i::before{ content: "\e006" !important; } /* trophy */
.rf-ic-bullying i::before{ content: "\e07c" !important; } /* ban */
.rf-ic-dashboard i::before{ content: "\e06a" !important; } /* grid */
.rf-ic-rps i::before{ content: "\e085" !important; } /* doc */
.rf-ic-waiting i::before{ content: "\e081" !important; } /* clock */
.rf-ic-form i::before{ content: "\e060" !important; } /* note */
.rf-ic-mapping i::before{ content: "\e033" !important; } /* map */
.rf-ic-kelompok i::before{ content: "\e001" !important; } /* users */
.rf-ic-dosen i::before{ content: "\e005" !important; } /* user */
.rf-ic-residen i::before{ content: "\e001" !important; } /* users */
.rf-ic-thesis i::before{ content: "\e04c" !important; } /* book-open */
/* --------------------------------------------------------------------------
17e. TOPBAR & MENU DI HP — masalah "menumpuk aneh di atas"
Sebelumnya badge notifikasi membungkus jadi 3 baris + foto profil terpisah,
memakan hampir setengah layar.
Solusi: di HP badge digulir mendatar dalam SATU baris, foto profil sebaris
dengan logo. Tidak ada elemen yang dihapus/dipindah permanen.
-------------------------------------------------------------------------- */
@media (max-width: 991px){
.page-header .navbar .navbar-fixed-top{ padding: var(--sp-2) 0 0; }
/* baris 1: logo (kiri) + hamburger (kanan) */
.page-header .navbar .page-logo{ float: left; }
.page-header .navbar .navbar-toggle{ float: right; margin-top: 0; }
/* baris 2: badge notifikasi -> satu baris, bisa digeser mendatar */
.page-header .navbar .topbar-actions{
float: none;
clear: both;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: var(--sp-3) 0 var(--sp-2);
margin: 0;
scrollbar-width: none;
/* WAJIB: tanpa ini kotak ikut melebar mengikuti isinya (660px),
sehingga badge meluber keluar layar alih-alih bisa digeser. */
width: 100%;
max-width: 100%;
min-width: 0;
}
.page-header .navbar .topbar-actions::-webkit-scrollbar{ display: none; }
.page-header .navbar .topbar-actions .btn-group-notification{
float: none; margin: 0; flex: 0 0 auto;
}
.page-header .navbar .topbar-actions .btn-group-notification > .btn{
padding: 6px 10px; font-size: var(--fs-xs); white-space: nowrap;
}
/* foto profil didorong ke ujung kanan baris yang sama */
.page-header .navbar .topbar-actions .btn-group-img{
float: none; margin: 0 0 0 auto; flex: 0 0 auto;
}
.page-header .navbar .topbar-actions .btn-group-img > .btn{ padding: 2px; }
/* nama panjang disembunyikan di HP, foto tetap terlihat (menu tetap bisa dibuka) */
.page-header .navbar .topbar-actions .btn-group-img > .btn > span{ display: none; }
.page-header .navbar .topbar-actions .btn-group-img .btn > img{ margin-left: 0; }
.page-header .navbar .nav-collapse{ border-top: 0; }
}
/* --------------------------------------------------------------------------
17f. TABEL DI HP — kolom terpotong (lihat screenshot "Scientific Activity")
Tabel harus melebar penuh lalu digeser, bukan dipaksa muat.
-------------------------------------------------------------------------- */
@media (max-width: 991px){
.rf-scroll > .table,
.table-scrollable > .table,
.dataTables_wrapper .rf-scroll > .table{
min-width: 640px; /* pastikan kolom tidak saling menghimpit */
width: auto !important;
}
.rf-scroll, .table-scrollable{ -webkit-overflow-scrolling: touch; }
}
/* ==========================================================================
18. PERBAIKAN BUG (laporan revisi ke-2)
========================================================================== */
/* --------------------------------------------------------------------------
18a. BUG: submenu menutupi judul & tombol
-------------------------------------------------------------------------
PENYEBAB (hasil pengukuran langsung di browser):
- Saat halaman submenu dibuka, nav_menu.php memberi class
"active open selected" pada menu induk -> submenu TERBUKA PERMANEN,
bukan sekadar muncul saat disorot.
- Di desktop, ".dropdown-menu" = position:absolute (bootstrap.min.css),
jadi submenu MENGAMBANG di atas halaman: mulai y=130 sampai y=224,
sementara judul halaman mulai y=151 -> tertutup.
- Aturan Metronic ".mega-menu .dropdown-menu{position:static!important}"
ternyata HANYA berlaku di bawah 991px, jadi tidak menolong di desktop.
SOLUSI:
Samakan perilakunya dengan versi HP -> submenu yang TERBUKA PERMANEN
dibuat position:static sehingga IKUT MENDORONG konten ke bawah,
bukan menimpanya. Submenu yang dibuka sesaat (hover/klik) tetap
mengambang seperti biasa supaya tidak mengagetkan.
Tata letak & urutan menu tidak diubah sama sekali.
-------------------------------------------------------------------------- */
@media (min-width: 992px){
/* submenu milik menu yang sedang aktif -> ikut memakan ruang */
.page-header .navbar.mega-menu .navbar-nav > li.selected > .dropdown-menu,
.page-header .navbar.mega-menu .navbar-nav > li.active.open > .dropdown-menu{
position: static !important;
float: none !important;
width: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
margin: 0 !important;
border: 0 !important;
border-top: 1px solid var(--c-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--g-50) !important;
padding: var(--sp-2) 0 !important;
min-width: 0 !important;
display: block !important;
}
/* Isi submenu berjajar mendatar seperti tampilan aslinya.
WAJIB width:100% + clear:both -> tanpa ini submenu (yang kini static)
ikut mengalir di baris menu utama dan mendorong menu lain
(Profile/Elearning/Library) ke kanan. */
.page-header .navbar.mega-menu .navbar-nav > li.selected > .dropdown-menu,
.page-header .navbar.mega-menu .navbar-nav > li.active.open > .dropdown-menu{
display: flex !important;
flex-wrap: wrap;
gap: 2px var(--sp-2);
align-items: center;
width: 100% !important;
clear: both;
}
/* Menu utama tetap satu baris rapi: