body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
a{
    text-decoration: none;
}
img {
    overflow: hidden;
    font-size: 0;
}
.form-group {
    margin-bottom: 1rem;
}

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

.form-row > .col {
    padding-left: 5px;
    padding-right: 5px;
}

label {
    margin-bottom: 0.5rem;
}
.cursor-pointer {
    cursor: pointer;
}

.modal .modal-content .back-btn-col, .offcanvas .offcanvas-body .back-btn-col{
    display: none;
}



.comp-card {
    display: block;
    background-color: #fff;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.17);
    padding: 1rem;
}


.card-1 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.card-2 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.card-3 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.card-4 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.card-5 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
        rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.card-6 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.card-7 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.card-8 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.card-9 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}

.card-10 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.card-11 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.card-12 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.card-13 {
    display: block;
    background-color: #fff;
    padding: 1rem;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
        rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

#page-main-content {
    position: relative;
}

.card-link {
    text-decoration: none;
}

.table-responsive {
    overflow-y: hidden !important;
}

.navbar-nav .nav-link.active {
    background-color: rgba(0, 0, 0, 0.2);
}

#sidebar .navbar-nav .nav-link .menu-icon {
    padding: 0 15px;
    display: inline-block;
}

#sidebar .navbar-nav .nav-link .menu-icon .material-icons {
    font-size: 24px;
    max-width: 25px;
}

img.img-gallery {
    height: 200px;
    width: 200px;
}

.btn-sm,
.btn-group-sm > .btn {
    padding: 0.2rem 0.2rem;
}

#ajax-progress-bar {
    height: 4px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.ajax-inline-page {
    position: relative;
    min-height: 200px;
}

.ajax-page-load-indicator {
    position: absolute;
    z-index: 9999;
    display: none;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    background-position: center;
    background-repeat: no-repeat;
    content: "";
}

.ajax-page-load-indicator .load-indicator {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    background-color: #fff;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.page-content.loading,
table.loading {
    overflow: hidden;
    position: relative;
}

#page-content {
    min-height: 75vh;
}

.password-strength-msg .chip {
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.1);
    font-size: x-small;
    padding: 1px 3px;
    border-radius: 3px;
}

td,
th {
    position: relative;
}

td .is-editable {
    border-bottom: none;
    border-bottom: 1px dashed #ccc;
}

td .is-editable:hover {
    border-bottom: 1px dashed rgba(40, 120, 50, 0.081);
}

.editable-error-block {
    color: red;
}

td .inline-edit-btn {
    position: absolute;
    right: 10px;
    display: none;
    top: 5px;
}

td:hover .inline-edit-btn {
    display: block;
}

.search-input {
    position: relative;
}

.search-input .holder {
    position: absolute;
    z-index: 1000;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
    width: 100%;
    display: none;
}

.search-input .search-result {
    max-height: 300px;
    overflow-y: auto;
}

.search-input .search-result .search-link {
    display: block;
    text-decoration: none;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.search-input .search-result .search-link:hover {
    background-color: rgba(40, 120, 50, 0.081);
}

.selectize-control {
    min-width: 150px;
}

.was-validated .dropzone.required.dz-started {
    border-color: #55cc55 !important;
}

.was-validated .selectize-input.full {
    border-color: #55cc55 !important;
}

.was-validated .selectize-input.invalid {
    border-color: red !important;
}

.export-link-btn img {
    width: 24px;
    height: 24px;
}

.dropzone-input {
    opacity: 0;
    position: fixed;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    display: none;
}

.pagination .material-icons {
    font-size: 15px;
}

.nav-tabs.flex-column {
    border-bottom: none !important;
}

.custom-file-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.star-rating .star {
    font-size: 24px;
}

.star-rating .star.active {
    color: orange;
}

.td-check-button {
    font-size: 28px;
    color: #999;
}

.td-check-button.checked {
    color: #55cc55;
}

.filter-chip {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 4px 5px;
}

.filter-chip .close-btn {
    text-decoration: none;
}

.accordion-group .accordion-header {
    position: relative;
    cursor: pointer;
    padding: 10px;
}

.accordion-group .accordion-header:hover {
    background: rgba(0, 0, 0, 0.05);
}

.accordion-group .accordion-header .expand {
    position: absolute;
    right: 10px;
    top: 5px;
}

.dropdown-toggle[aria-expanded="true"]:after {
    transform: rotate(180deg);
}

.dropdown-toggle.inverse:after {
    transform: rotate(180deg);
}

.dropdown-toggle:after {
    transition: 0.5s;
}

.sortedby {
    background: rgba(0, 0, 0, 0.06);
}

.sortedby .sort-icon {
    color: #55cc55;
}

.th-sort-link {
    text-decoration: none !important;
    position: relative;
    color: inherit;
    padding: 5px 0;
    line-height: 1;
}

.th-sort-link .title {
    vertical-align: middle;
}

.sort-icon {
    position: absolute;
    right: 10px;
    font-size: 24px;
    vertical-align: middle;
}

.data-select .load-indicator {
    position: absolute;
    right: 30px;
    top: 7px;
}

.data-select {
    position: relative;
}

.page-footer {
    padding: 10px 0;
}

.page-header {
    padding: 10px 0;
}

.fixed-sticky {
    position: fixed;
}

hr.sm {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.popover.inline-page .popover-header {
    padding: 0;
    background: none;
    border: none;
    position: relative;
}

.popover.inline-page .popover-header .close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    float: none;
    text-align: center;
    z-index: 3000;
}

.close {
    cursor: pointer;
}

.inline-page.popover {
    max-width: 100%;
}

.inline-page .popover-body {
    padding: 0px !important;
}

/* Reset any container in side a column to take the size of the column  */

.comp-grid .container-fluid,
.comp-grid .container {
    padding: 0 !important;
    width: auto !important;
}

.comp-grid .py-2,
.comp-grid .border-bottom {
    padding: 0 !important;
    border: none !important;
}

.reset-grids .container .comp-grid,
.reset-grids .container-fluid .comp-grid {
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.modal .container .comp-grid,
.modal .container-fluid .comp-grid {
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

#main-page-modal .card-body {
    padding: 0 !important;
}

.modal .modal-body.p-0 form {
    padding: 1.4rem;
}

.modal .container,
.modal .container-fluid {
    width: auto;
    padding: 0;
    margin: 0;
}

.page-modal .modal-header {
    display: none;
}

.page-modal .modal-footer {
    display: none;
}

.fixed-alert {
    position: fixed;
    z-index: 2000;
}

.fixed-alert.bottom-left {
    bottom: 10px;
    left: 10px;
}

input[type="radio"],
input[type="checkbox"] {
    vertical-align: middle;
}

@media (min-width: 768px) {
    .collapse.collapse-lg {
        display: block;
        height: auto !important;
        visibility: visible;
    }
}

.menu-profile {
    padding: 0;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
    display: block;
}

.menu-profile a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.navbar-fixed-left .navbar-nav > li.menu-profile > a.avatar {
    padding: 0 !important;
}

.menu-profile .user-name {
    padding: 10px;
    display: block;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-weight: bold;
}

.menu-profile .avatar-icon .material-icons,
.profile .avatar-icon .material-icons,
.menu-profile .avatar-icon .icon,
.profile .avatar-icon .icon {
    font-size: 64px;
    max-width: 64px;
}

.menu-profile img.user-photo {
    height: 60px;
    width: 60px;
    display: block;
}

.menu-profile .menu-dropdown {
    position: absolute;
    right: 15px;
    top: 15px;
}

.flex-column.nav a.nav-link .badge {
    position: absolute;
    right: 5px;
    top: 30%;
}

.nav a.nav-link {
    position: relative;
}

.jumbotron.mini {
    padding: 20px;
    margin-bottom: 0;
}

.jumbotron.sm {
    padding: 15px;
    margin-bottom: 0;
}

.jumbotron.xs {
    padding: 8px;
    margin-bottom: 0;
}

section.page .page-title {
    margin: 20px auto;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.flash-msg-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999999;
}

.section-title {
    padding: 5px 0;
}

.table tr td {
    vertical-align: middle !important;
}
.table tr.selected {
    background-color: rgba(0, 0, 200, 0.1) !important;
}
.bold {
    font-weight: bold;
}

.custom-list {
    position: relative;
}

.custom-list .menu-controls-holder {
    position: absolute;
    right: 10px;
    top: 10px;
}

.detail-list {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.detail-list .title {
    font-weight: bold;
}

.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option-btn {
    margin: 1px 0 1px;
}

.detail-list .value {
    font-weight: bold;
}

.btn.btn-flat {
    background: none;
}

.btn-group,
.btn-group-vertical {
    margin: 0;
}

.table {
    margin-bottom: 0;
}

.page-list-record-detail input {
    padding: 5px 5px;
    background: #fafafa;
    border: 1px solid #ddd;
    width: 50px;
    text-align: center;
}

.page-list-record-detail .info {
    padding: 5px 5px;
    background: #eee;
    display: inline-block;
}

.table > thead > tr > th {
    vertical-align: middle;
}

.pager {
    margin: 0;
}

.footer {
    margin-top: 30px;
    padding: 20px 0;
}

.footer .copyright {
    text-transform: capitalize;
}

.footer .footer-links a {
    display: inline-block;
    padding: 0 5px;
    text-transform: capitalize;
}

.table-borderless tbody tr td,
.table-borderless tbody tr th,
.table-borderless thead tr th {
    border: none;
}

.radius-5 {
    border-radius: 5px;
}

.pad-10 {
    padding: 10px;
}

.center-block {
    float: none;
}

.gutter-lg.row {
    margin-right: -10px;
    margin-left: -10px;
}

.gutter-lg > [class^="col-"],
.gutter-lg > [class^=" col-"] {
    padding-right: 10px;
    padding-left: 10px;
}

.gutter-md.row {
    margin-right: -5px;
    margin-left: -5px;
}

.gutter-md > [class^="col-"],
.gutter-md > [class^=" col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

.gutter-sm.row {
    margin-right: -3px;
    margin-left: -3px;
}

.gutter-sm > [class^="col-"],
.gutter-sm > [class^=" col-"] {
    padding-right: 3px;
    padding-left: 3px;
}

.gutter-xs.row {
    margin-right: -1px;
    margin-left: -1px;
}

.gutter-xs > [class^="col-"],
.gutter-xs > [class^=" col-"] {
    padding-right: 1px;
    padding-left: 1px;
}

.no-gutter.row {
    margin-right: 0;
    margin-left: 0;
}

.no-gutter > [class^="col-"],
.no-gutter > [class^=" col-"] {
    padding-right: 0;
    padding-left: 0;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0;
}

.table td.fit,
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

td.td-btn,
th.td-btn {
    white-space: nowrap;
    width: 1%;
}

table.table tr th.td-sno,
table.table tr td.td-sno {
    white-space: nowrap;
    width: 1%;
    vertical-align: middle !important;
}

table.table tr th.td-checkbox,
table.table tr td.td-checkbox {
    white-space: nowrap;
    width: 1%;
    vertical-align: middle !important;
}

.export-container {
    padding: 10px 0;
}

.form-inline .control-label {
    display: block;
}

.profile {
    padding: 20px;
}

a.avatar {
    padding: 0 !important;
}

.profile .avatar img {
    border-radius: 50%;
    max-width: 100px;
    max-height: 100px;
}

.profile .title {
    text-transform: capitalize;
    color: #fff;
}

.record-count {
    display: block;
    padding: 1rem;
    text-decoration: none !important;
    cursor: pointer;
    margin-bottom: 10px;
}

.record-count .material-icons {
    font-size: 48px !important;
    min-width: 49px;
}

.record-count .material-icons {
    opacity: 0.4;
}

.record-count:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
    border-color: transparent;
}

.record-count .title {
    font-weight: bold;
    margin-bottom: 2px;
}

.record-count .value {
    position: absolute;
    right: 10px;
    top: 10px;
    opacity: 0.6;
}

.record-count .desc {
    display: block;
    margin-top: 4px;
}

.record-count .progress {
    height: 10px;
    margin: 0 0;
    margin-top: 5px;
    border-radius: 0;
}

.record-count .progress-bar {
    line-height: 10px !important;
}

.record-count .progress-label {
    font-size: 8px;
}

.record-progress {
    display: block;
    padding: 10px 15px !important;
    text-decoration: none !important;
    cursor: pointer;
    margin-bottom: 10px;
}

.record-progress .icon {
    position: absolute;
    right: 10px;
    top: 6px;
    opacity: 0.5;
}

.record-progress .icon .material-icons {
    font-size: 36px !important;
}

.record-progress:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
    border-color: transparent;
}

.record-progress .title {
    font-weight: bold;
    margin-bottom: 10px;
}

.record-progress .value {
    position: absolute;
    right: 10px;
    top: 6px;
    opacity: 0.8;
}

.record-progress .desc {
    display: block;
    margin-top: 4px;
}

.record-progress .progress {
    height: 15px;
    margin: 5px 0;
    border-radius: 0;
}

.record-progress .progress-bar {
    line-height: 15px !important;
}

.record-progress .progress-label {
    font-weight: bold;
    font-size: 10px;
}

td.page-list-action {
    width: 50px;
}

td.page-list-action .dropdown-menu {
    min-width: auto !important;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #555;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.load-indicator {
    text-align: center;
}

.load-indicator.parallax {
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 100%;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
}

.load-indicator.fullpage-parallax {
    margin: 0;
    position: fixed;
    left: 0;
    top: 0;
    line-height: 100%;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
}

.load-indicator.dark {
    background: rgba(0, 0, 0, 0.2);
}

.load-indicator.white {
    background: rgba(255, 255, 255, 0.9);
}

.load-indicator .loading-text {
    display: inline-block;
    padding: 10px;
    font-size: 15px;
    font-weight: 100;
    vertical-align: middle;
}

.load-indicator .animator {
    font-weight: bold;
    display: inline-block;
    padding: 10px;
    vertical-align: middle;
}

.btn .load-indicator {
    display: inline-block !important;
    margin: 5px;
}

.range-slider {
    position: relative;
}

.range-slider .value {
    position: absolute;
    right: -30px;
    top: 20%;
    padding: 2px;
    min-width: 25px;
    height: 25px;
    vertical-align: middle;
    line-height: 20px;
    border: 1px solid #ccc;
    background: #fafafa;
    color: #888;
    text-align: center;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    margin: 6.5px 0;
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 7px;
    cursor: pointer;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    background: rgba(10, 0, 0, 0.11);
    border-radius: 0.8px;
    border: 0px solid rgba(0, 0, 1, 0);
}

input[type="range"]::-webkit-slider-thumb {
    box-shadow: 1.9px 1.9px 0px rgba(0, 0, 0, 0.1), 0px 0px 1.9px rgba(13, 13, 13, 0.1);
    border: 0px solid rgba(0, 0, 0, 0);
    height: 20px;
    width: 21px;
    border-radius: 50px;
    background: rgba(42, 42, 252, 0.78);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -6.5px;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
    background: rgba(36, 0, 0, 0.11);
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 7px;
    cursor: pointer;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    background: rgba(10, 0, 0, 0.11);
    border-radius: 0.8px;
    border: 0px solid rgba(0, 0, 1, 0);
}

input[type="range"]::-moz-range-thumb {
    box-shadow: 1.9px 1.9px 0px rgba(0, 0, 0, 0.1), 0px 0px 1.9px rgba(13, 13, 13, 0.1);
    border: 0px solid rgba(0, 0, 0, 0);
    height: 20px;
    width: 21px;
    border-radius: 50px;
    background: rgba(42, 42, 252, 0.78);
    cursor: pointer;
}

input[type="range"]::-ms-track {
    width: 100%;
    height: 7px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type="range"]::-ms-fill-lower {
    background: rgba(0, 0, 0, 0.11);
    border: 0px solid rgba(0, 0, 1, 0);
    border-radius: 1.6px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}

input[type="range"]::-ms-fill-upper {
    background: rgba(10, 0, 0, 0.11);
    border: 0px solid rgba(0, 0, 1, 0);
    border-radius: 1.6px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}

input[type="range"]::-ms-thumb {
    box-shadow: 1.9px 1.9px 0px rgba(0, 0, 0, 0.1), 0px 0px 1.9px rgba(13, 13, 13, 0.1);
    border: 0px solid rgba(0, 0, 0, 0);
    height: 20px;
    width: 21px;
    border-radius: 50px;
    background: rgba(42, 42, 252, 0.78);
    cursor: pointer;
    height: 7px;
}

input[type="range"]:focus::-ms-fill-lower {
    background: rgba(10, 0, 0, 0.11);
}

input[type="range"]:focus::-ms-fill-upper {
    background: rgba(36, 0, 0, 0.11);
}

.radial-progress-container {
    position: relative;
    margin: 0 auto;
}

.radial-progress-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.file-list {
    margin-bottom: 10px;
    padding: 5px;
}

.file-uploads {
    overflow: visible !important;
    margin-bottom: 0 !important;
}

label {
    margin-bottom: 0 !important;
}

.ajax-loader {
    color: #808080;
    font-size: 20px;
    margin: 100px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load4 1.3s infinite linear;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.inline-page form {
    position: relative !important;
}

.form-ajax-status {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: none;
}

@-webkit-keyframes load4 {
    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
            -3em 0 0 -1em, -2em -2em 0 0;
    }
    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
            -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em,
            -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em,
            -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0,
            -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em,
            -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
            -3em 0em 0 0.2em, -2em -2em 0 0;
    }
    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
            -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

@keyframes load4 {
    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
            -3em 0 0 -1em, -2em -2em 0 0;
    }
    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
            -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em,
            -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em,
            -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0,
            -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em,
            -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
            -3em 0em 0 0.2em, -2em -2em 0 0;
    }
    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
            -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

#pre-loader {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    display: block;
    opacity: 0.9;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

#pre-loader .indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    z-index: 100;
}

.lds-dual-ring {
    display: block;
    width: 64px;
    height: 64px;
    margin: auto auto;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 46px;
    height: 46px;
    margin: 1px;
    border-radius: 50%;
    border: 5px solid #aaa;
    border-color: #aaa transparent #aaa transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 2em;
    height: 2em;
    display: inline-block;
}

.loader {
    position: relative;
    border-top: 0.3em solid rgba(0, 0, 128, 0.2);
    border-right: 0.3em solid rgba(0, 0, 128, 0.2);
    border-bottom: 0.3em solid rgba(0, 0, 128, 0.2);
    border-left: 0.3em solid #999;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#sidebar::-webkit-scrollbar {
    width: 6px;
}

/* Track */

#sidebar::-webkit-scrollbar-track {
    background: #fff;
    border: 4px solid transparent;
    background-clip: content-box;
}

/* Handle */

#sidebar::-webkit-scrollbar-thumb {
    background: #555555;
}

.passtrengthMeter {
    position: relative;
    width: 100%;
}

.passtrengthMeter > input {
    width: 100%;
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.passtrengthMeter > input:focus {
    outline-width: 0;
}

.passtrengthMeter::after {
    content: "";
    height: 3px;
    overflow: hidden;
    width: 0%;
    transition: width 0.5s;
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.passtrengthMeter.weak::after {
    background-color: #ec644b;
    width: 25%;
}

.passtrengthMeter.medium::after {
    content: "";
    background-color: #e87e04;
    width: 50%;
}

.passtrengthMeter.strong::after {
    content: "";
    background-color: #efbf17;
    width: 75%;
}

.passtrengthMeter.very-strong::after {
    content: "";
    background-color: #42a72a;
    width: 100%;
}

.passtrengthMeter .showPassword {
    position: absolute;
    width: 20px;
    top: calc(50% - 10px);
    right: 10px;
}

.passtrengthMeter .showPassword.active {
    opacity: 0.5;
}

.passtrengthMeter .showPassword img {
    display: block;
    width: 100%;
    height: auto;
}

.passtrengthMeter .showPassword:hover {
    cursor: pointer;
}

.passtrengthMeter .tooltip {
    background: #000000;
    top: 100%;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    display: block;
    left: 50%;
    margin-bottom: 15px;
    opacity: 0;
    padding: 5px 10px;
    pointer-events: none;
    position: absolute;
    min-width: 70px;
    box-sizing: border-box;
    text-align: center;
    z-index: 10;
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

.passtrengthMeter.weak .tooltip {
    background-color: #ec644b;
}

.passtrengthMeter.weak .tooltip:after {
    border-left: solid transparent 7px;
    border-right: solid transparent 7px;
    border-bottom: solid #ec644b 7px;
    top: -7px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -7px;
    position: absolute;
    width: 0;
}

.passtrengthMeter.medium .tooltip {
    background-color: #e87e04;
}

.passtrengthMeter.medium .tooltip:after {
    border-left: solid transparent 7px;
    border-right: solid transparent 7px;
    border-bottom: solid #e87e04 7px;
    top: -7px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -7px;
    position: absolute;
    width: 0;
}

.passtrengthMeter.strong .tooltip {
    background-color: #efbf17;
}

.passtrengthMeter.strong .tooltip:after {
    border-left: solid transparent 7px;
    border-right: solid transparent 7px;
    border-bottom: solid #efbf17 7px;
    top: -7px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -7px;
    position: absolute;
    width: 0;
}

.passtrengthMeter.very-strong .tooltip {
    background-color: #42a72a;
}

.passtrengthMeter.very-strong .tooltip:after {
    border-left: solid transparent 7px;
    border-right: solid transparent 7px;
    border-bottom: solid #42a72a 7px;
    top: -7px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -7px;
    position: absolute;
    width: 0;
}

.passtrengthMeter.weak .tooltip:before {
    top: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}

.passtrengthMeter .tooltip:after {
    border-left: solid transparent 7px;
    border-right: solid transparent 7px;
    border-bottom: solid #000000 7px;
    top: -7px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -7px;
    position: absolute;
    width: 0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.passtrengthMeter:hover .tooltip {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
}

.lte8 .passtrengthMeter .tooltip {
    display: none;
}

.lte8 .passtrengthMeter:hover .tooltip {
    display: block;
}

.toast-alert {
    padding: 12px;
    top: 40px;
    left: 0;
    right: 0;
    margin: auto;
    width: 400px;
    max-width: 90vw;
}

.toast-alert .msg {
    padding-left: 10px;
}

.toast-alert .close {
    position: absolute;
    right: 10px;
    top: 10px;
}
body{
	padding-top:50px;
}
#page-wrapper{
	display: block;
    width: 100%;
}

#sidebar {
    width: 250px;
    position: fixed;
    top: 50px;
    left: 0;
    height: calc(100vh - 50px);
    z-index: 999;
	transition: all 0.3s;
	overflow-y: auto;
	padding-bottom: 40px;
}
#sidebar.active {
    margin-left: -250px;
}

#main-content {
	width: 100%;
}

#main #main-content {
	width: calc(100% - 250px);
    transition: all 0.3s;
    position: absolute;
    right: 0;
}

#main #main-content.active {
    width: 100%;
}
#sidebar .submenu{
	margin-left: 20px;
}

#sidebar .navbar-nav a.nav-link {
	padding: 12px !important;
}
#sidebar .navbar-nav a.nav-link:hover {
	background: rgba(0,0,0,0.05);
}
#sidebar .navbar-nav a.dropdown-toggle::after {
	float: right;
	margin-right:7px;
	margin-top:7px;
}

#sidebar.navbar-nav > li > a .fa {
	margin-right:10px;
}

#sidebar .menu-profile > a.avatar {
    padding: 0 !important;
}


@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
	}
	
	#main #main-content {
        width: 100%;
    }
	#main #main-content.active {
        width: calc(100% - 250px);
    }
    
}

.navbar-brand{
	min-width:15%;
}

.navbar-brand img{
	display:inline;
	max-height:30px;
}
body {

    }

/* ==========================================================================
   ANTISLOP-ID.md Modern Dark Slate Sidebar Styling (#sidebar)
   ========================================================================== */
.bg-slate-900 { background-color: #0f172a !important; }
.border-slate-800 { border-color: #1e293b !important; }

#sidebar {
    background-color: #0f172a !important;
    border-right: 1px solid #1e293b;
    color: #e2e8f0;
}

#sidebar .menu-profile {
    padding: 20px 15px 15px;
    border-bottom: 1px solid #1e293b;
    margin-bottom: 10px;
}

#sidebar .user-name {
    color: #f8fafc !important;
    font-weight: 700;
    font-size: 0.95rem;
}

#sidebar .navbar-nav .nav-link {
    color: #cbd5e1 !important;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 10px 18px !important;
    display: flex;
    align-items: center;
    transition: all 0.15s ease-in-out;
    border-radius: 0;
}

#sidebar .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background-color: #1e293b !important;
}

/* ==========================================================================
   FLOATING WHITE SIDEBAR CARD & HERO HEADER LAYOUT (contoh.md Reference Project)
   ========================================================================== */
#sidebar.floating-sidebar {
    width: 256px !important;
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    height: calc(100vh - 32px) !important;
    z-index: 1040 !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    overflow-y: auto !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE 10+ */
    padding-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

#sidebar.floating-sidebar::-webkit-scrollbar {
    display: none !important; /* Chrome / Safari */
}

#sidebar.floating-sidebar.active {
    margin-left: -300px !important;
}

#main-content {
    margin-left: 288px !important;
    padding-top: 85px !important;
    padding-right: 20px !important;
    transition: all 0.3s ease-in-out;
}

#main-content.active {
    margin-left: 16px !important;
}

#sidebar .navbar-nav .nav-link {
    color: #64748B !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 11px 16px !important;
    display: flex;
    align-items: center;
    border-radius: 14px !important;
    transition: all 0.2s ease-in-out;
    border-left: none !important;
}

#sidebar .navbar-nav .nav-link:hover {
    color: #0F9F8F !important;
    background-color: #F4F6FF !important;
}

#sidebar .navbar-nav .nav-link.active,
#sidebar .navbar-nav .nav-link.dropdown-toggle[aria-expanded="true"] {
    color: #0F9F8F !important;
    background-color: #F4F6FF !important;
    border: 1px solid #E3E7FF !important;
    font-weight: 800 !important;
    border-left: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

#sidebar .menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: #8392AB !important;
}

#sidebar .nav-link:hover .menu-icon,
#sidebar .nav-link.active .menu-icon {
    color: #0F9F8F !important;
}

#sidebar .submenu {
    background-color: transparent !important;
    padding: 4px 0 4px 12px !important;
    border-left: 2px solid #E3E7FF !important;
    margin-left: 24px !important;
}

#sidebar .submenu .nav-link {
    font-size: 0.82rem !important;
    padding: 8px 12px !important;
    color: #64748B !important;
    border-radius: 10px !important;
}

#sidebar .submenu .nav-link:hover,
#sidebar .submenu .nav-link.active {
    color: #0F9F8F !important;
    background-color: #F4F6FF !important;
    font-weight: 800 !important;
}

@media (max-width: 991px) {
    #sidebar.floating-sidebar {
        margin-left: -300px;
    }
    #sidebar.floating-sidebar.active {
        margin-left: 0 !important;
    }
    #topbar-left-wrapper {
        margin-left: 0 !important;
    }
    #main-content {
        margin-left: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}




/* ==========================================================================
   Argon Dashboard Design System Tokens & Global UI Components (desain_ui_ux.md & desain.md)
   ========================================================================== */

:root {
    --argon-primary: #0F9F8F;
    --argon-secondary: #8392AB;
    --argon-success: #16A36A;
    --argon-warning: #D6A83E;
    --argon-danger: #F5365C;
    --argon-info: #F47B55;
    --argon-bg: #F8F9FE;
    --argon-card-bg: #FFFFFF;
    --argon-text-main: #3B302C;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    background-color: #F8F9FE !important;
    color: #32325D !important;
}

/* Buttons */
.btn-primary, .bg-primary {
    background-color: #0F9F8F !important;
    border-color: #0F9F8F !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #0B756B !important;
    border-color: #0B756B !important;
}

.btn-success, .bg-success {
    background-color: #2DCE89 !important;
    border-color: #2DCE89 !important;
    color: #ffffff !important;
}

.btn-warning, .bg-warning {
    background-color: #FB6340 !important;
    border-color: #FB6340 !important;
    color: #ffffff !important;
}

.btn-danger, .bg-danger {
    background-color: #F5365C !important;
    border-color: #F5365C !important;
    color: #ffffff !important;
}

.btn-info, .bg-info {
    background-color: #11CDEF !important;
    border-color: #11CDEF !important;
    color: #ffffff !important;
}

/* Badges */
.badge-primary, .badge-primary-subtle { background-color: rgba(15, 159, 143, 0.14) !important; color: #0B756B !important; font-weight: 700; }
.badge-success, .badge-success-subtle { background-color: rgba(45, 206, 137, 0.15) !important; color: #2DCE89 !important; font-weight: 700; }
.badge-warning, .badge-warning-subtle { background-color: rgba(251, 99, 64, 0.15) !important; color: #FB6340 !important; font-weight: 700; }
.badge-danger, .badge-danger-subtle { background-color: rgba(245, 54, 92, 0.15) !important; color: #F5365C !important; font-weight: 700; }
.badge-info, .badge-info-subtle { background-color: rgba(17, 205, 239, 0.15) !important; color: #11CDEF !important; font-weight: 700; }

/* Argon Cards & Elevation Shadows */
.card, .stat-card, .metric-card {
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    background-color: #ffffff;
}

/* Tables (Argon Table Header Specification) */
.table thead th {
    background-color: #F6F9FC !important;
    color: #8898AA !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    border-bottom: 1px solid #E9ECEF !important;
    padding: 12px 16px !important;
}

.table tbody td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #E9ECEF !important;
    color: #32325D !important;
    font-size: 0.88rem !important;
}

.table-hover tbody tr:hover, tr.selected-row {
    background-color: #F9F4EA !important; /* Selected Row Golden Tint */
}

/* Form Controls */
.form-control, .form-select {
    border-radius: 0.375rem !important;
    border: 1px solid #D3D3D3 !important;
    padding: 0.6rem 0.88rem !important;
    font-size: 0.88rem !important;
    color: #32325D !important;
    transition: all 0.15s ease-in-out;
}

.form-control:focus, .form-select:focus {
    border-color: #0F9F8F !important;
    box-shadow: 0 0 0 0.2rem rgba(15, 159, 143, 0.2) !important;
}

/* Helper Classes (desain.md Section 5) */
.upper { text-transform: uppercase !important; }
.lower { text-transform: lowercase !important; }
.notspace { white-space: nowrap !important; }
.readonly { background-color: #FFE9ED !important; cursor: not-allowed !important; }

/* Stat Card Icon Shape Container */
.icon-shape {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dashboard shell based on contoh.md reference images 2 and 3 */
#topbar-left-wrapper {
    margin-left: 344px;
    transition: margin-left .3s ease;
}

#sidebar.floating-sidebar {
    width: 320px !important;
    top: 16px !important;
    left: 16px !important;
    height: calc(100vh - 32px) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 14px 34px rgba(31, 41, 55, .13) !important;
}

#sidebar .sidebar-brand-box {
    min-height: 102px;
    padding-left: 28px !important;
    border-color: #eef0f5 !important;
}

#sidebar .sidebar-menu-wrapper {
    padding: 28px 20px !important;
}

#sidebar .navbar-nav .nav-link {
    min-height: 52px;
    padding: 13px 18px !important;
    border-radius: 14px !important;
}

#sidebar .navbar-nav .nav-link.active,
#sidebar .navbar-nav .nav-link.dropdown-toggle[aria-expanded="true"] {
    color: #392b26 !important;
    background: #fbfaf9 !important;
    border-color: #eee9e6 !important;
}

#sidebar .navbar-nav .nav-link.active .menu-icon,
#sidebar .navbar-nav .nav-link.dropdown-toggle[aria-expanded="true"] .menu-icon {
    color: #513d36 !important;
}

#main #main-content,
#main-content {
    position: relative !important;
    right: auto !important;
    width: auto !important;
    margin-left: 360px !important;
    padding: 125px 38px 50px 16px !important;
    transition: margin-left .3s ease, padding .3s ease !important;
    min-width: 0 !important;
}

#main-content.active {
    width: auto !important;
    margin-left: 132px !important;
}

body.sidebar-collapsed #main #main-content,
body.sidebar-collapsed #main-content {
    width: auto !important;
    margin-left: 132px !important;
    padding-left: 16px !important;
}

#sidebar.floating-sidebar.active {
    width: 100px !important;
    margin-left: 0 !important;
}

#sidebar.active .sidebar-brand-box {
    justify-content: center;
    padding: 20px !important;
}

#sidebar.active .sidebar-brand-box > div:last-child,
#sidebar.active .submenu,
#sidebar.active .dropdown-toggle::after {
    display: none !important;
}

#sidebar.active .sidebar-menu-wrapper {
    padding: 28px 18px !important;
}

#sidebar.active .navbar-nav .nav-link {
    width: 62px;
    min-height: 56px;
    justify-content: center;
    overflow: hidden;
    padding: 14px !important;
    font-size: 0 !important;
}

#sidebar.active .navbar-nav .nav-link .menu-icon,
#sidebar.active .menu-icon {
    margin-right: 0 !important;
    font-size: initial !important;
}

body.sidebar-collapsed #topbar-left-wrapper {
    margin-left: 116px;
}

.dashboard-wrapper {
    padding-top: 0 !important;
}

.dashboard-wrapper {
    width: 100%;
    max-width: none;
}

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 20px;
}

.dashboard-kpi {
    min-width: 0;
}

.dashboard-kpis .metric-card {
    min-height: 172px;
    padding: 26px !important;
    border-radius: 22px !important;
}

.dashboard-kpis .metric-card h2 {
    font-size: 1.65rem !important;
}

.metric-footer {
    gap: 12px;
}

.metric-footer .badge {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.metric-footer > a {
    flex: 0 0 auto;
    white-space: nowrap;
}

.dashboard-wrapper .card {
    border-radius: 24px !important;
    box-shadow: 0 2px 3px rgba(50, 50, 93, .05), 0 12px 30px rgba(31, 41, 55, .05) !important;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 28px;
    margin-top: 38px;
}

.dashboard-records,
.dashboard-shortcuts {
    min-width: 0;
}

.dashboard-main-grid > div > .card {
    height: 100%;
}

@media (max-width: 1199px) {
    #sidebar.floating-sidebar { width: 270px !important; }
    #topbar-left-wrapper { margin-left: 294px; }
    #main #main-content, #main-content { margin-left: 304px !important; padding-right: 22px !important; }
    #sidebar.floating-sidebar.active { width: 100px !important; }
    #main-content.active { margin-left: 132px !important; }
}

@media (max-width: 991px) {
    #sidebar.floating-sidebar,
    #sidebar.floating-sidebar.active {
        width: 270px !important;
        margin-left: -310px !important;
    }
    #sidebar.floating-sidebar.active { margin-left: 0 !important; }
    #sidebar.active .sidebar-brand-box > div:last-child { display: flex !important; }
    #sidebar.active .submenu { display: block !important; }
    #sidebar.active .sidebar-menu-wrapper { padding: 28px 20px !important; }
    #sidebar.active .navbar-nav .nav-link { width: auto; justify-content: flex-start; font-size: .88rem !important; }
    #sidebar.active .menu-icon { margin-right: 12px !important; }
    #topbar-left-wrapper,
    body.sidebar-collapsed #topbar-left-wrapper { margin-left: 0; }
    #main #main-content,
    #main-content,
    #main-content.active { margin-left: 0 !important; padding: 112px 15px 40px !important; }
    body.sidebar-collapsed #main #main-content,
    body.sidebar-collapsed #main-content { margin-left: 0 !important; padding: 112px 15px 40px !important; }
    .dashboard-main-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; }
}

@media (max-width: 575px) {
    #topbar { height: 82px !important; }
    #topbar-left-wrapper > span,
    #topbar-left-wrapper > div,
    #topbar .dropdown button > span { display: none !important; }
    #main #main-content,
    #main-content,
    #main-content.active { padding-top: 100px !important; }
    .dashboard-kpis { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .dashboard-kpis .metric-card { min-height: 145px; padding: 20px !important; }
    .metric-footer > a { font-size: .78rem !important; }
    .dashboard-main-grid .card-header { align-items: flex-start !important; flex-direction: column; gap: 12px; }
    .dashboard-main-grid .card-body { padding-left: 16px !important; padding-right: 16px !important; }
    .dashboard-shortcuts .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
}

/* Ringkasan visual pada detail pasien. */
.patient-detail-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #3b302c 0%, #0f9f8f 100%);
    color: #fff;
    box-shadow: 0 12px 26px rgba(38, 51, 77, .18);
}

.patient-detail-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    top: -90px;
    right: -55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}

.patient-detail-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 18px;
    background: rgba(255, 255, 255, .16);
    font-size: 1.45rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.patient-detail-identity {
    min-width: 0;
}

.patient-detail-identity > small {
    color: rgba(255, 255, 255, .68);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.patient-detail-identity h4 {
    margin: 3px 0 9px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
}

.patient-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.patient-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .9);
    font-size: .68rem;
    font-weight: 600;
}

.patient-detail-meta .material-icons {
    font-size: 14px;
}

.page[data-page-type="view"] .page-data .card-1 {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.page[data-page-type="view"] .page-data .card-1:hover {
    z-index: 1;
    transform: translateY(-2px);
    border-color: #ccd5e3 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .07) !important;
}

@media (max-width: 575px) {
    .patient-detail-hero {
        align-items: flex-start;
        padding: 16px;
    }

    .patient-detail-avatar {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
    }
}

/* Form add/edit seragam untuk seluruh halaman CRUD. */
.page[data-page-type="add"],
.page[data-page-type="edit"] {
    padding: 0 12px 32px;
}

.page[data-page-type="add"] > .bg-light,
.page[data-page-type="edit"] > .bg-light {
    max-width: 960px;
    margin: 0 auto 16px !important;
    padding: 16px 20px !important;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.page[data-page-type="add"] > .bg-light .container,
.page[data-page-type="edit"] > .bg-light .container {
    max-width: 100%;
    padding: 0;
}

.page[data-page-type="add"] > div:not(.bg-light) > .container,
.page[data-page-type="edit"] > div:not(.bg-light) > .container {
    max-width: 960px;
    padding: 0;
}

.page[data-page-type="add"] .comp-grid,
.page[data-page-type="edit"] .comp-grid {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

.page[data-page-type="add"] .page-content.card,
.page[data-page-type="edit"] .page-content.card {
    padding: 24px !important;
    border: 1px solid #e3e8ef !important;
    border-radius: 18px !important;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

.page[data-page-type="add"] .page-form > div:first-of-type,
.page[data-page-type="edit"] .page-form > div:first-of-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 22px;
}

.page[data-page-type="add"] .page-form .form-group,
.page[data-page-type="edit"] .page-form .form-group {
    min-width: 0;
    margin: 0;
}

.page[data-page-type="add"] .page-form .form-group > .row,
.page[data-page-type="edit"] .page-form .form-group > .row {
    display: block;
    margin: 0;
}

.page[data-page-type="add"] .page-form .form-group > .row > [class*="col-sm-"],
.page[data-page-type="edit"] .page-form .form-group > .row > [class*="col-sm-"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.page[data-page-type="add"] .page-form .control-label,
.page[data-page-type="edit"] .page-form .control-label {
    margin-bottom: 7px;
    color: #364258;
    font-size: .78rem;
    font-weight: 700;
}

.page[data-page-type="add"] .page-form .form-control,
.page[data-page-type="add"] .page-form .form-select,
.page[data-page-type="edit"] .page-form .form-control,
.page[data-page-type="edit"] .page-form .form-select {
    min-height: 44px;
    border-color: #dce2ea !important;
    border-radius: 10px !important;
    background-color: #fff;
}

.page[data-page-type="add"] .page-form textarea.form-control,
.page[data-page-type="edit"] .page-form textarea.form-control {
    min-height: 108px;
}

.page[data-page-type="add"] .page-form .form-control:focus,
.page[data-page-type="edit"] .page-form .form-control:focus {
    border-color: #0f9f8f !important;
    box-shadow: 0 0 0 3px rgba(15, 159, 143, .13) !important;
}

.page[data-page-type="add"] .page-form .form-check,
.page[data-page-type="edit"] .page-form .form-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 5px 14px 5px 0;
}

/* Baris resep dinamis tetap utuh saat form dipakai dari modal atau ponsel. */
.page-form .obat-row {
    margin-inline: 0;
    padding: 10px;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    background: #f8fafc;
}

.page-form .obat-row__remove {
    display: flex;
    justify-content: flex-end;
}

.page-form .obat-row .btn-remove-row {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 10px;
}

.page-form .obat-row .btn-remove-row .material-icons {
    font-size: 19px;
}

.page[data-page-type="add"] .page-form > .form-group.text-center,
.page[data-page-type="edit"] .page-form > .form-group.text-center {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    margin: 24px -24px -24px;
    padding: 14px 24px;
    border-top: 1px solid #e5e9f0;
    border-radius: 0 0 18px 18px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
}

.page[data-page-type="add"] .page-form > .form-group.text-center .btn,
.page[data-page-type="edit"] .page-form > .form-group.text-center .btn {
    min-width: 140px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 11px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .page[data-page-type="add"],
    .page[data-page-type="edit"] {
        padding: 0 4px 24px;
    }

    .page[data-page-type="add"] .page-content.card,
    .page[data-page-type="edit"] .page-content.card {
        padding: 17px !important;
    }

    .page[data-page-type="add"] .page-form > div:first-of-type,
    .page[data-page-type="edit"] .page-form > div:first-of-type {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .page[data-page-type="add"] .page-form > .form-group.text-center,
    .page[data-page-type="edit"] .page-form > .form-group.text-center {
        margin: 20px -17px -17px;
        padding: 12px 17px;
    }

    .page[data-page-type="add"] .page-form > .form-group.text-center .btn,
    .page[data-page-type="edit"] .page-form > .form-group.text-center .btn {
        width: 100%;
    }

    .page-form .obat-row__remove .btn-remove-row {
        width: 100%;
    }
}

/* Urutan lapisan overlay Bootstrap harus selalu di atas backdrop. */
.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1055 !important;
}

.offcanvas-backdrop {
    z-index: 1045 !important;
}

.offcanvas {
    z-index: 1050 !important;
}

/* Modal edit yang lapang, terstruktur, dan tetap nyaman pada layar kecil. */
#main-page-modal .modal-dialog {
    width: calc(100vw - 32px);
    max-width: 1080px;
    margin: 16px auto;
}

#main-page-modal .modal-content {
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 26px 80px rgba(15, 23, 42, .25);
}

#main-page-modal .modal-body {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: #f6f8fb;
    scrollbar-width: thin;
}

#main-page-modal .page[data-page-type="edit"] {
    padding: 0 14px 20px;
}

#main-page-modal .page[data-page-type="edit"] > .bg-light {
    position: sticky;
    top: 0;
    z-index: 10;
    max-width: none;
    margin: 0 -14px 16px !important;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .05);
}

#main-page-modal .page[data-page-type="edit"] > div:not(.bg-light) > .container {
    max-width: 100%;
}

#main-page-modal .page[data-page-type="edit"] .page-content.card {
    padding: 22px !important;
}

@media (max-width: 767px) {
    #main-page-modal .modal-dialog {
        width: calc(100vw - 16px);
        margin: 8px auto;
    }

    #main-page-modal .modal-content,
    #main-page-modal .modal-body {
        max-height: calc(100dvh - 16px);
        border-radius: 16px;
    }

    #main-page-modal .page[data-page-type="edit"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    #main-page-modal .page[data-page-type="edit"] > .bg-light {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
}

/* Dialog konfirmasi hapus yang jelas dan konsisten. */
#delete-record-modal-confirm .modal-dialog {
    max-width: 440px;
}

#delete-record-modal-confirm .delete-confirm-content {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

#delete-record-modal-confirm .modal-header {
    padding: 22px 22px 14px;
    border-bottom: 0;
}

.delete-confirm-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.delete-confirm-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(245, 54, 92, .1);
    color: #f5365c;
}

.delete-confirm-icon .material-icons {
    font-size: 25px;
}

.delete-confirm-heading .modal-title {
    color: #26334d;
    font-size: 1.08rem;
    font-weight: 800;
}

.delete-confirm-heading small {
    color: #8392a5;
    font-size: .75rem;
}

#delete-record-modal-confirm .modal-body {
    padding: 8px 22px 22px;
    color: #5f6b7c;
    font-size: .9rem;
    line-height: 1.6;
}

#delete-record-modal-confirm .modal-footer {
    gap: 9px;
    padding: 14px 22px 20px;
    border-top: 1px solid #edf0f4;
    background: #fafbfc;
}

#delete-record-modal-confirm .modal-footer .btn {
    min-width: 105px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 11px;
    font-weight: 700;
}

#delete-record-modal-confirm .modal-footer .material-icons {
    font-size: 18px;
}

/* Coordinated sidebar motion */
:root {
    --sidebar-motion-duration: 360ms;
    --sidebar-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

#sidebar.floating-sidebar {
    will-change: width, transform;
    transition:
        width var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        margin-left var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        transform var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        box-shadow var(--sidebar-motion-duration) ease !important;
}

#main #main-content,
#main-content {
    will-change: left;
    transition:
        left var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        padding var(--sidebar-motion-duration) var(--sidebar-motion-ease) !important;
}

#topbar-left-wrapper {
    will-change: margin-left;
    transition: margin-left var(--sidebar-motion-duration) var(--sidebar-motion-ease) !important;
}

#sidebar .sidebar-brand-box > div:last-child,
#sidebar .submenu,
#sidebar .navbar-nav .nav-link,
#sidebar .navbar-nav .nav-link .menu-icon {
    transition:
        opacity 180ms ease,
        max-width var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        max-height var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        margin var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        padding var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        font-size 220ms ease,
        background-color 180ms ease,
        color 180ms ease !important;
}

#sidebar .sidebar-brand-box > div:last-child {
    max-width: 190px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
}

#sidebar .submenu {
    max-height: 520px;
    opacity: 1;
    overflow: hidden;
}

#sidebar.active .sidebar-brand-box > div:last-child {
    display: flex !important;
    max-width: 0;
    opacity: 0;
    pointer-events: none;
}

#sidebar.active .submenu {
    display: block !important;
    max-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    pointer-events: none;
}

body.sidebar-transitioning #page-content {
    pointer-events: none;
}

@media (max-width: 991px) {
    #sidebar.active .sidebar-brand-box > div:last-child {
        max-width: 190px;
        opacity: 1;
        pointer-events: auto;
    }

    #sidebar.active .submenu {
        max-height: 520px;
        opacity: 1;
        pointer-events: auto;
        padding: 4px 0 4px 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar.floating-sidebar,
    #main #main-content,
    #main-content,
    #topbar-left-wrapper,
    #sidebar .sidebar-brand-box > div:last-child,
    #sidebar .submenu,
    #sidebar .navbar-nav .nav-link,
    #sidebar .navbar-nav .nav-link .menu-icon {
        transition-duration: 1ms !important;
    }
}

/* Proporsi sidebar desktop mengikuti referensi: ringkas dan memberi ruang konten. */
@media (min-width: 1200px) {
    #sidebar.floating-sidebar {
        width: 288px !important;
    }

    #sidebar .sidebar-brand-box {
        min-height: 82px;
        padding: 16px 20px !important;
    }

    #sidebar .sidebar-menu-wrapper {
        padding: 18px 14px !important;
    }

    #sidebar .navbar-nav .nav-link {
        min-height: 44px;
        padding: 10px 13px !important;
        border-radius: 12px !important;
        font-size: .82rem !important;
    }

    #sidebar .submenu .nav-link {
        min-height: 36px;
        padding: 7px 10px !important;
        font-size: .76rem !important;
    }

    #topbar-left-wrapper {
        margin-left: 312px;
    }

    #main #main-content,
    #main-content {
        inset: 0 0 auto 320px !important;
    }

    #sidebar.floating-sidebar.active {
        width: 88px !important;
    }

    #sidebar.active .sidebar-menu-wrapper {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    #sidebar.active .navbar-nav .nav-link {
        width: 60px;
    }

    #main #main-content.active,
    #main-content.active,
    body.sidebar-collapsed #main #main-content,
    body.sidebar-collapsed #main-content {
        inset: 0 0 auto 120px !important;
    }

    body.sidebar-collapsed #topbar-left-wrapper {
        margin-left: 104px;
    }
}

@media (min-width: 1200px) {
    #sidebar .navbar-nav .nav-link {
        height: auto !important;
        overflow: visible;
        white-space: normal !important;
        line-height: 1.3;
    }

    #sidebar .navbar-nav .nav-link:not(.dropdown-toggle) {
        align-items: flex-start;
    }

    #sidebar .submenu {
        margin-left: 18px !important;
        padding-left: 8px !important;
    }

    #sidebar .submenu .nav-link {
        overflow-wrap: anywhere;
    }

    #sidebar.active .navbar-nav .nav-link {
        overflow: hidden;
        white-space: nowrap !important;
    }
}

.metric-footer {
    flex-wrap: wrap;
    row-gap: 8px;
}

.metric-footer .badge {
    max-width: 100%;
}

.metric-footer > a {
    margin-left: auto;
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .dashboard-kpis .metric-card {
        padding: 20px !important;
    }

    .metric-footer {
        font-size: .78rem;
    }

    .metric-footer .badge {
        font-size: .68rem !important;
    }
}

/* Normalisasi tabel daftar agar rapi pada seluruh modul CRUD. */
.page[data-page-type="list"] #page-main-content.table-responsive {
    position: relative;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid #e5e9f0 !important;
    border-radius: 16px !important;
    background: #fff;
    scrollbar-color: #b7c0cf transparent;
    scrollbar-width: thin;
}

.page[data-page-type="list"] #page-main-content.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.page[data-page-type="list"] #page-main-content.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.page[data-page-type="list"] #page-main-content.table-responsive::-webkit-scrollbar-thumb {
    border: 2px solid #fff;
    border-radius: 999px;
    background: #b7c0cf;
}

.page[data-page-type="list"] #page-main-content .table {
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto;
}

.page[data-page-type="list"] #page-main-content .table > :not(caption) > * > * {
    border-width: 0 0 1px !important;
    border-color: #e9edf3 !important;
    box-shadow: none !important;
}

.page[data-page-type="list"] #page-main-content .table thead th {
    min-width: 112px;
    height: 58px;
    padding: 12px 16px !important;
    background: #f6f8fb !important;
    color: #7b879b !important;
    font-size: .69rem !important;
    line-height: 1.35;
    text-align: left !important;
    white-space: nowrap;
    vertical-align: middle;
}

.page[data-page-type="list"] #page-main-content .table tbody td {
    min-width: 112px;
    height: 58px;
    padding: 12px 16px !important;
    background: #fff !important;
    color: #26334d !important;
    font-size: .82rem !important;
    line-height: 1.4;
    text-align: left !important;
    white-space: nowrap;
    vertical-align: middle !important;
}

.page[data-page-type="list"] #page-main-content .table tbody tr:nth-child(even) td {
    background: #fbfcfe !important;
}

.page[data-page-type="list"] #page-main-content .table tbody tr:hover td {
    background: #f8f6f5 !important;
}

.page[data-page-type="list"] #page-main-content .table tbody tr:last-child td {
    border-bottom-width: 0 !important;
}

.page[data-page-type="list"] #page-main-content .table .td-alamat,
.page[data-page-type="list"] #page-main-content .table .td-catatan,
.page[data-page-type="list"] #page-main-content .table .td-keterangan {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page[data-page-type="list"] #page-main-content .table th.td-btn,
.page[data-page-type="list"] #page-main-content .table td.td-btn {
    position: sticky;
    right: 0;
    z-index: 2;
    min-width: 128px;
    text-align: right !important;
    box-shadow: -8px 0 14px rgba(15, 23, 42, .04) !important;
}

.page[data-page-type="list"] #page-main-content .table th.td-btn {
    z-index: 3;
    background: #f6f8fb !important;
}

.page[data-page-type="list"] #page-main-content .td-btn .btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px;
    padding: 0 !important;
    border-radius: 9px;
}

.page[data-page-type="list"] #page-main-content .td-btn .material-icons {
    font-size: 17px;
}

.page[data-page-type="list"] .page-content > .mt-3 {
    padding: 10px 4px 0;
}

.page[data-page-type="list"] .page-content > .mt-3 > .row {
    gap: 12px;
    margin: 0;
}

@media (max-width: 767px) {
    .page[data-page-type="list"] #page-main-content .table thead th,
    .page[data-page-type="list"] #page-main-content .table tbody td {
        min-width: 104px;
        padding: 10px 12px !important;
    }

    .page[data-page-type="list"] #page-main-content .table th.td-btn,
    .page[data-page-type="list"] #page-main-content .table td.td-btn {
        min-width: 116px;
    }
}

/* Tampilan detail/view untuk halaman penuh dan side drawer. */
#sidedrawer-page-modal {
    width: min(560px, 100vw);
    border-left: 0;
    box-shadow: -18px 0 45px rgba(15, 23, 42, .16);
}

#sidedrawer-page-modal .offcanvas-body {
    background: #f6f8fb;
}

.page[data-page-type="view"] {
    min-height: 100%;
    padding-bottom: 20px;
}

.page[data-page-type="view"] > .bg-light {
    position: sticky;
    top: 0;
    z-index: 8;
    margin: 0 0 16px !important;
    padding: 18px 22px !important;
    border-bottom: 1px solid #e6eaf0;
    background: rgba(255, 255, 255, .97) !important;
    backdrop-filter: blur(12px);
}

.page[data-page-type="view"] > .bg-light .container {
    max-width: 100%;
    padding: 0;
}

.page[data-page-type="view"] > .bg-light .h5 {
    color: #26334d !important;
    font-size: 1.15rem;
}

.page[data-page-type="view"] .page-content {
    max-width: 1100px;
    margin: 0 auto;
}

.page[data-page-type="view"] #page-main-content {
    padding: 0 18px !important;
}

.page[data-page-type="view"] .page-data > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.page[data-page-type="view"] .page-data > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
}

.page[data-page-type="view"] .page-data .card-1 {
    min-height: 78px;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 13px 15px !important;
    border: 1px solid #e2e7ee !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.page[data-page-type="view"] .page-data .card-1 small {
    display: block;
    margin-bottom: 4px;
    color: #7b8798 !important;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.page[data-page-type="view"] .page-data .card-1 .fw-bold {
    color: #26334d;
    font-size: .92rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.page[data-page-type="view"] #page-main-content > .d-flex:last-child {
    position: sticky;
    bottom: 0;
    z-index: 7;
    margin: 16px -18px 0;
    padding: 14px 18px;
    border-top: 1px solid #e3e8ef;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
}

.page[data-page-type="view"] #page-main-content > .d-flex:last-child .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 10px;
}

@media (max-width: 575px) {
    #sidedrawer-page-modal {
        width: 100vw;
    }

    .page[data-page-type="view"] .page-data > .row {
        grid-template-columns: minmax(0, 1fr);
    }

    .page[data-page-type="view"] #page-main-content {
        padding: 0 12px !important;
    }

    .page[data-page-type="view"] #page-main-content > .d-flex:last-child {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
        flex-wrap: wrap;
    }
}

/* Modernisasi halaman daftar data hasil generator lama. */
.page[data-page-type="list"] {
    padding: 0 12px 32px;
}

.page[data-page-type="list"] > .bg-light {
    margin-bottom: 18px !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 18px;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.page[data-page-type="list"] > .bg-light .container-fluid {
    padding: 0;
}

.page[data-page-type="list"] > .bg-light .row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(240px, 320px);
    align-items: center;
    gap: 14px;
    margin: 0;
}

.page[data-page-type="list"] > .bg-light .row > * {
    width: auto;
    max-width: none;
    padding: 0;
}

.page[data-page-type="list"] > .bg-light .h5 {
    margin: 0;
    color: #26334d !important;
    font-size: 1.15rem;
}

.page[data-page-type="list"] > .bg-light .btn-primary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 12px;
    white-space: nowrap;
}

.page[data-page-type="list"] > .bg-light .input-group {
    min-height: 44px;
}

.page[data-page-type="list"] > .bg-light .form-control {
    min-width: 0;
}

.page[data-page-type="list"] > div:not(.bg-light) > .container-fluid {
    padding: 0;
}

.page[data-page-type="list"] .row.gutter-sm {
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

.page[data-page-type="list"] .row.gutter-sm > * {
    width: auto;
    padding: 0;
}

.page[data-page-type="list"] #page-main-content {
    border: 1px solid #e7ebf1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.page[data-page-type="list"] #page-main-content > .filter-tags,
.page[data-page-type="list"] #page-main-content > nav,
.page[data-page-type="list"] #page-main-content > .pagination {
    margin: 12px 16px !important;
}

.page[data-page-type="list"] .table {
    margin: 0;
    border: 0;
}

.page[data-page-type="list"] .table thead th {
    min-width: 105px;
    padding: 13px 14px !important;
    background: #f6f8fb !important;
}

.page[data-page-type="list"] .table tbody td {
    padding: 14px !important;
    background: #fff;
    line-height: 1.45;
}

.page[data-page-type="list"] .table tbody tr:hover td {
    background: #fbfaf9 !important;
}

@media (max-width: 1199px) {
    .page[data-page-type="list"] > .bg-light .row {
        grid-template-columns: minmax(160px, 1fr) auto;
    }

    .page[data-page-type="list"] > .bg-light .row > [class*="col-md-"] {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .page[data-page-type="list"] {
        padding: 0 4px 24px;
    }

    .page[data-page-type="list"] > .bg-light {
        padding: 15px !important;
        border-radius: 15px;
    }

    .page[data-page-type="list"] > .bg-light .row {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
    }

    .page[data-page-type="list"] > .bg-light .row > * {
        width: 100%;
    }

    .page[data-page-type="list"] .row.gutter-sm {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .page[data-page-type="list"] #page-main-content {
        border-radius: 15px;
    }
}

/* Selaraskan posisi vertikal halaman agar tidak terlalu turun dari topbar. */
@media (min-width: 992px) {
    #main #main-content,
    #main-content,
    #main #main-content.active,
    #main-content.active,
    body.sidebar-collapsed #main #main-content,
    body.sidebar-collapsed #main-content {
        padding-top: 96px !important;
    }

    #page-content > .container-fluid.py-4,
    #page-content > .container.py-4 {
        padding-top: 0 !important;
    }

    #page-content > .container-fluid.py-4 > .d-flex:first-child,
    #page-content > .container.py-4 > .d-flex:first-child {
        margin-bottom: 18px !important;
    }

    #page-content > .container-fluid.py-4 > .d-flex:first-child h1,
    #page-content > .container-fluid.py-4 > .d-flex:first-child h2,
    #page-content > .container-fluid.py-4 > .d-flex:first-child h3,
    #page-content > .container-fluid.py-4 > .d-flex:first-child h4,
    #page-content > .container.py-4 > .d-flex:first-child h1,
    #page-content > .container.py-4 > .d-flex:first-child h2,
    #page-content > .container.py-4 > .d-flex:first-child h3,
    #page-content > .container.py-4 > .d-flex:first-child h4 {
        color: #fff !important;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    }

    #page-content > .container-fluid.py-4 > .d-flex:first-child p,
    #page-content > .container.py-4 > .d-flex:first-child p {
        color: rgba(255, 255, 255, .72) !important;
    }
}

@media (max-width: 991px) {
    #page-content > .container-fluid.py-4,
    #page-content > .container.py-4 {
        padding-top: 4px !important;
    }
}

/* Definitive shell geometry: keep content tied to the actual sidebar edge. */
@media (min-width: 1200px) {
    #main #main-content,
    #main-content {
        position: absolute !important;
        inset: 0 0 auto 360px !important;
        width: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #main #main-content.active,
    #main-content.active,
    body.sidebar-collapsed #main #main-content,
    body.sidebar-collapsed #main-content {
        inset: 0 0 auto 132px !important;
        width: auto !important;
        margin: 0 !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #main #main-content,
    #main-content,
    #main #main-content.active,
    #main-content.active,
    body.sidebar-collapsed #main #main-content,
    body.sidebar-collapsed #main-content {
        position: absolute !important;
        inset: 0 0 auto 132px !important;
        width: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 991px) {
    #main #main-content,
    #main-content,
    #main #main-content.active,
    #main-content.active,
    body.sidebar-collapsed #main #main-content,
    body.sidebar-collapsed #main-content {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Universal responsive layer for legacy generated pages and custom modules */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

#page-wrapper,
#main-content,
#page-content,
#page-main-content,
.page,
.page-content,
.comp-grid {
    min-width: 0;
    max-width: 100%;
}

#page-content {
    width: 100%;
}

#page-content > .page,
#page-content > .container,
#page-content > .container-fluid {
    width: 100%;
}

.page .container,
.page .container-fluid {
    max-width: 100%;
}

.page .comp-grid.col-md-9,
.page .comp-grid.col-lg-9,
.page .comp-grid.col-md-10,
.page .comp-grid.col-lg-10 {
    margin-left: auto;
    margin-right: auto;
}

.page .row > *,
.container-fluid .row > * {
    min-width: 0;
}

.responsive-table-shell,
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.responsive-table-shell > .table,
.table-responsive > .table {
    margin-bottom: 0;
}

.page-content .table th,
.page-content .table td {
    overflow-wrap: normal;
}

.page-form,
.page-form .form-control,
.page-form .form-select,
.page-form .input-group,
.selectize-control,
.selectize-input,
textarea,
select,
input {
    max-width: 100%;
}

.page img,
.card img,
.modal img {
    max-width: 100%;
    height: auto;
}

.pagination {
    flex-wrap: wrap;
    gap: 4px;
}

.modal-dialog {
    max-width: min(calc(100vw - 30px), var(--bs-modal-width, 500px));
    margin-left: auto;
    margin-right: auto;
}

.dropdown-menu {
    max-width: calc(100vw - 24px);
}

.btn-group-responsive,
.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Tema Klinik Griya Mulya: teal, emas, coral, dan cokelat dari identitas logo. */
:root {
    --bs-primary: #0f9f8f;
    --bs-primary-rgb: 15, 159, 143;
    --clinic-primary: #0f9f8f;
    --clinic-primary-dark: #0b756b;
    --clinic-primary-soft: #e3f6f2;
    --clinic-gold: #d6a83e;
    --clinic-coral: #f47b55;
    --clinic-ink: #3b302c;
}

a { color: var(--clinic-primary); }
a:hover { color: var(--clinic-primary-dark); }
.text-primary { color: var(--clinic-primary) !important; }
.border-primary { border-color: var(--clinic-primary) !important; }
.btn-outline-primary {
    color: var(--clinic-primary) !important;
    border-color: var(--clinic-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary:active {
    color: #fff !important;
    background: var(--clinic-primary) !important;
    border-color: var(--clinic-primary) !important;
}
.form-control:focus,
.form-select:focus {
    border-color: rgba(15, 159, 143, .72) !important;
    box-shadow: 0 0 0 3px rgba(15, 159, 143, .12) !important;
}
.page-link { color: var(--clinic-primary); }
.page-item.active .page-link {
    background: var(--clinic-primary) !important;
    border-color: var(--clinic-primary) !important;
}

#sidebar .navbar-nav .nav-link:hover,
#sidebar .navbar-nav .nav-link.active,
#sidebar .navbar-nav .nav-link.dropdown-toggle[aria-expanded="true"],
#sidebar .nav-link:hover .menu-icon,
#sidebar .nav-link.active .menu-icon,
#sidebar .submenu .nav-link:hover,
#sidebar .submenu .nav-link.active {
    color: var(--clinic-primary-dark) !important;
}
#sidebar .navbar-nav .nav-link:hover,
#sidebar .navbar-nav .nav-link.active,
#sidebar .navbar-nav .nav-link.dropdown-toggle[aria-expanded="true"],
#sidebar .submenu .nav-link:hover,
#sidebar .submenu .nav-link.active {
    background-color: #f0faf8 !important;
    border-color: #ccebe5 !important;
}
#sidebar .submenu { border-left-color: #ccebe5 !important; }

/* Toolbar list: judul, tombol tambah, dan pencarian menjadi satu card yang seimbang. */
.page[data-page-type="list"] > .bg-light {
    margin-bottom: 16px !important;
    padding: 18px 20px !important;
    border: 1px solid #e5e9eb;
    border-radius: 18px;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 8px 24px rgba(59, 48, 44, .07);
}
.page[data-page-type="list"] > .bg-light .h5 {
    color: var(--clinic-ink) !important;
    font-size: 1.2rem;
    font-weight: 800 !important;
}
.page[data-page-type="list"] > .bg-light .btn-primary {
    padding-inline: 18px;
    background: linear-gradient(135deg, var(--clinic-primary), #19b7a4) !important;
    box-shadow: 0 7px 16px rgba(15, 159, 143, .2);
}
.page[data-page-type="list"] > .bg-light .search .form-control {
    border-color: #dfe5e5;
    background: #fbfcfc;
}
.page[data-page-type="list"] > .bg-light .search .btn-primary {
    min-width: 50px;
    padding-inline: 12px;
    border-radius: 0 11px 11px 0;
    box-shadow: none;
}
.page[data-page-type="list"] .row.gutter-sm .btn-outline-primary {
    min-height: 40px;
    border-radius: 11px;
    background: rgba(255,255,255,.8);
}
.page[data-page-type="list"] .table thead th {
    background: #f2f8f7 !important;
    color: #607773 !important;
}

@media (max-width: 767px) {
    .page[data-page-type="list"] > .bg-light .btn-primary { width: 100%; }
    .page[data-page-type="list"] > .bg-light .search { width: 100%; }
}

/* Odontogram and similarly wide visual workspaces scroll instead of clipping. */
.odontogram-container,
.odontogram-grid,
.dental-chart,
.teeth-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1199px) and (min-width: 992px) {
    body:not(.sidebar-collapsed) #sidebar.floating-sidebar {
        width: 100px !important;
    }
    body:not(.sidebar-collapsed) #main-content {
        margin-left: 132px !important;
    }
}

@media (max-width: 767px) {
    #main #main-content,
    #main-content,
    #main-content.active,
    body.sidebar-collapsed #main-content {
        padding: 96px 12px 30px !important;
    }

    #page-content .container,
    #page-content .container-fluid,
    #page-content .dashboard-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .page > .bg-light,
    .page > [class*="bg-"] {
        padding: 14px !important;
        border-radius: 16px;
    }

    .page > .bg-light .row,
    .page > [class*="bg-"] .row {
        align-items: stretch !important;
        gap: 10px !important;
    }

    .page > .bg-light .row > .col,
    .page > .bg-light .row > .col-auto,
    .page > .bg-light .row > [class*="col-md-"],
    .page > [class*="bg-"] .row > .col,
    .page > [class*="bg-"] .row > .col-auto,
    .page > [class*="bg-"] .row > [class*="col-md-"] {
        flex: 0 0 100%;
        width: 100%;
    }

    .page > .bg-light .btn,
    .page > [class*="bg-"] .btn {
        width: 100%;
        justify-content: center;
    }

    .page .comp-grid > .card,
    .page-content.card,
    .container-fluid > .card {
        border-radius: 16px !important;
    }

    .card-header,
    .card-body,
    .card-footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .card-header.d-flex.justify-content-between,
    .card-body > .d-flex.justify-content-between:first-child {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    .card-header.d-flex.justify-content-between > *,
    .card-body > .d-flex.justify-content-between:first-child > * {
        max-width: 100%;
    }

    .card-header .text-end {
        text-align: left !important;
    }

    .page-form .form-group > .row {
        gap: 6px;
    }

    .page-form .form-group > .row > [class*="col-sm-"] {
        flex: 0 0 100%;
        width: 100%;
    }

    .page .comp-grid[class*="col-md-"],
    .page .comp-grid[class*="col-lg-"] {
        flex: 0 0 100%;
        width: 100%;
    }

    .page-form .control-label {
        margin-bottom: 2px;
    }

    .page-form .form-footer,
    .page-form .form-group:last-child {
        flex-wrap: wrap;
    }

    .page-form button[type="submit"],
    .page-form .btn-primary[type="submit"] {
        min-height: 44px;
    }

    .table {
        font-size: .8rem;
    }

    .table thead th,
    .table tbody td {
        padding: 10px 12px !important;
    }

    .modal-dialog {
        width: auto;
        max-width: calc(100vw - 20px);
        margin: 10px auto;
    }

    .modal-content {
        border-radius: 16px;
    }

    .modal-body {
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
    }
}

@media (max-width: 575px) {
    #topbar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #topbar .container-fluid {
        gap: 8px;
    }

    #topbar > .container-fluid > .d-flex:last-child {
        gap: 8px !important;
    }

    #topbar .dropdown button {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    h1, .h1 { font-size: 1.65rem; }
    h2, .h2 { font-size: 1.45rem; }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4, h5, .h5 { font-size: 1.05rem; }

    .d-flex.justify-content-between:not(.metric-footer) {
        min-width: 0;
    }

    .btn:not(.btn-sm):not(.btn-close) {
        min-height: 42px;
    }
}
/* ========================================================================== */
/* Komponen UI baku — lihat docs/ARSITEKTUR.md                                */
/* ========================================================================== */
.ui-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e2e8f0}.ui-page-header__copy{min-width:0}.ui-page-header__eyebrow{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.5rem;color:#0f9f8f;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.ui-page-header__eyebrow .material-icons{font-size:1.1rem}.ui-page-header h1{margin:0;color:#172033;font-size:clamp(1.5rem,2.3vw,2rem);font-weight:800;line-height:1.2}.ui-page-header p{margin:.35rem 0 0;color:#718096;font-size:.9rem}.ui-page-header__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem}.ui-alert{display:flex;align-items:flex-start;gap:.65rem;border:0;border-radius:.85rem;box-shadow:0 7px 18px rgba(23,32,51,.06)}.ui-alert>.material-icons{font-size:1.3rem}.ui-empty-state{display:flex;min-height:190px;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;padding:2.25rem 1.5rem;color:#718096;text-align:center}.ui-empty-state__icon{display:inline-flex;width:56px;height:56px;align-items:center;justify-content:center;margin-bottom:.25rem;border:1px solid rgba(15,159,143,.18);border-radius:18px;background:linear-gradient(145deg,#ecfbf8,#def4ef);box-shadow:0 8px 20px rgba(15,159,143,.09)}.ui-empty-state__icon>.material-icons{color:#0f9f8f;font-size:1.75rem}.ui-empty-state>strong{color:#243047;font-size:1rem;font-weight:800;line-height:1.35}.ui-empty-state>span:not(.ui-empty-state__icon){max-width:460px;font-size:.84rem;line-height:1.6}.ui-form-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e2e8f0}.ui-form-actions .btn{display:inline-flex;min-height:42px;align-items:center;gap:.35rem;padding:.6rem 1.15rem;border-radius:.7rem;font-weight:700}.ui-form-actions .material-icons{font-size:1.1rem}.ui-status{display:inline-flex;align-items:center;padding:.32rem .72rem;border-radius:999px;background:#edf2f7;color:#526174;font-size:.74rem;font-weight:800}.ui-status--menunggu,.ui-status--order,.ui-status--belum-lunas{background:#fff3cd;color:#986900}.ui-status--dipanggil,.ui-status--diproses{background:#dff4ff;color:#08799d}.ui-status--selesai,.ui-status--lunas{background:#def7ec;color:#087f5b}.ui-status--batal{background:#fde8e8;color:#c53030}
@media(max-width:767.98px){.ui-page-header{align-items:stretch;flex-direction:column}.ui-page-header__actions{justify-content:stretch}.ui-page-header__actions>.btn,.ui-page-header__actions>form{flex:1}.ui-form-actions{position:sticky;z-index:5;bottom:0;margin-right:-1rem;margin-left:-1rem;padding:1rem;background:rgba(255,255,255,.95);box-shadow:0 -8px 18px rgba(23,32,51,.06);backdrop-filter:blur(10px)}.ui-form-actions .btn{flex:1;justify-content:center}}

/* Billing: konteks transaksi, filter eksplisit, dan pembayaran yang mudah dipindai. */
.billing-page{max-width:1480px}.billing-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(148,163,184,.32)}.billing-page-header__copy{min-width:0}.billing-page-header__copy h3{font-size:clamp(1.45rem,2vw,1.9rem)}.billing-page-header__copy p{max-width:720px;line-height:1.55}.billing-page-header__actions{display:flex;flex:0 0 auto;gap:.65rem}.billing-kpi-card{min-height:116px;justify-content:center;border:1px solid rgba(226,232,240,.8)!important;transition:transform .2s ease,box-shadow .2s ease}.billing-kpi-card:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(15,23,42,.08)!important}.billing-kpi-card h3{font-size:clamp(1.25rem,1.8vw,1.65rem)}.billing-filter-card__heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.billing-filter-card__heading strong{display:block;color:#243047;font-size:1rem}.billing-filter-card__heading span{display:block;margin-top:.15rem;color:#8392a5;font-size:.78rem}.billing-filter-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.billing-filter-actions .btn{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:.3rem}.billing-list-card{overflow:hidden}.billing-list-card__heading{display:flex;min-height:76px;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid #e5eaf1}.billing-list-card__heading>div{display:flex;align-items:center;gap:.75rem}.billing-list-card__icon{display:inline-flex;width:42px;height:42px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:13px;background:#e6f7f4;color:#0f9f8f}.billing-list-card__icon .material-icons{font-size:1.3rem}.billing-list-card__heading h5{margin:0;color:#243047;font-size:1rem;font-weight:800}.billing-list-card__heading p{margin:.15rem 0 0;color:#8392a5;font-size:.78rem}.billing-commission-list>span{position:relative;padding-left:.8rem}.billing-commission-list>span:before{position:absolute;top:.55em;left:0;width:4px;height:4px;border-radius:50%;background:#0f9f8f;content:""}.billing-commission-list strong{color:#087f70}.billing-payment-form{display:grid;min-width:330px;grid-template-columns:minmax(115px,1fr) 82px;gap:.4rem;padding:.65rem;border:1px solid #dbe5e8;border-radius:.75rem;background:#f7fbfa;text-align:left}.billing-payment-form__title{grid-column:1/-1;color:#526174;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.billing-payment-form label>span{display:block;margin-bottom:.2rem;color:#718096;font-size:.64rem;font-weight:700}.billing-payment-form .btn{display:inline-flex;grid-column:1/-1;align-items:center;justify-content:center;gap:.25rem}.billing-receipt-link{display:inline-flex;align-items:center;justify-content:center;margin-top:.45rem}
@media(max-width:991.98px){.billing-page-header{align-items:stretch;flex-direction:column}.billing-page-header__actions{display:grid;grid-template-columns:1fr 1fr}.billing-page-header__actions .btn{justify-content:center}.billing-payment-form{min-width:0}}
@media(max-width:767.98px){.billing-page{padding-top:1.25rem!important}.billing-page-header{gap:1rem}.billing-page-header__actions{grid-template-columns:1fr}.billing-kpi-card{min-height:108px}.billing-filter-card__heading span{max-width:280px}.billing-filter-actions{justify-content:stretch}.billing-filter-actions .btn{flex:1}.billing-list-card__heading{align-items:flex-start;flex-direction:column;padding:1rem}.billing-list-card__heading>div{align-items:flex-start}.billing-list-card .responsive-record-table tbody tr{padding:.35rem .85rem 1rem}.billing-list-card .responsive-record-actions{display:block!important;margin-top:.4rem;padding:.75rem 0 0!important;border-top:1px solid #edf1f5!important}.billing-payment-form{width:100%;grid-template-columns:1fr 100px}.billing-receipt-link{width:100%;min-height:38px}.billing-list-card .ui-empty-state{min-height:230px}}
.billing-page-header{border-bottom-color:rgba(255,255,255,.26)}.billing-page-header__copy h3{color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.38)}.billing-page-header__copy p{color:rgba(255,255,255,.86)!important;text-shadow:0 1px 8px rgba(0,0,0,.32)}

/* Identitas visual halaman operasional lama: Obat dan Manajemen Sistem. */
.legacy-operations-page>.bg-light{padding:1.15rem 1.25rem!important}.legacy-list-heading{display:flex;min-width:0;align-items:center;gap:.9rem}.legacy-list-heading__icon{display:inline-flex;width:50px;height:50px;flex:0 0 auto;align-items:center;justify-content:center;border:1px solid rgba(15,159,143,.18);border-radius:15px;background:linear-gradient(145deg,#e7f9f5,#d9f1eb);color:#0f9f8f}.legacy-list-heading__icon .material-icons{font-size:1.5rem}.legacy-list-heading small{display:block;margin-bottom:.15rem;color:#0f9f8f;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.legacy-list-heading .h5{margin:0!important;color:#243047!important;font-size:1.15rem!important;line-height:1.25}.legacy-list-heading p{margin:.22rem 0 0;color:#7d8a9e;font-size:.76rem;line-height:1.4}.legacy-operations-page .page-content,.legacy-operations-page .comp-grid>div:not(.page-content){border:1px solid rgba(214,223,231,.88);box-shadow:0 16px 35px rgba(27,45,65,.08)}.legacy-operations-page table thead th{height:58px;background:#edf5f4!important;color:#526174!important}.legacy-operations-page table tbody tr{height:64px}.legacy-operations-page table tbody tr:nth-child(even)>td{background:#fbfdfd}.legacy-operations-page table tbody tr:hover>td{background:#eef9f7!important}.legacy-operations-page .td-btn{border-left:1px solid #e5eceb!important;background:#f8fbfa!important}.legacy-operations-page .td-btn .btn{box-shadow:none!important}.legacy-operations-page--obat .legacy-list-heading__icon{background:linear-gradient(145deg,#fff6e5,#fce9c8);border-color:rgba(194,126,0,.16);color:#b56b00}.legacy-operations-page--roles .legacy-list-heading__icon,.legacy-operations-page--permissions .legacy-list-heading__icon{background:linear-gradient(145deg,#edf2ff,#e2e9f7);border-color:rgba(73,97,145,.16);color:#526b9c}.legacy-operations-page--permissions table .badge{border-radius:999px!important}
@media(max-width:767.98px){.legacy-operations-page>.bg-light{padding:1rem!important}.legacy-list-heading{align-items:flex-start}.legacy-list-heading__icon{width:44px;height:44px;border-radius:13px}.legacy-list-heading p{font-size:.72rem}.legacy-operations-page .legacy-list-search{width:100%}.legacy-operations-page table tbody tr{height:auto}.legacy-operations-page .td-btn{border-left:0!important}}

/* Satu garis tepi untuk header, toolbar, dan tabel halaman operasional.
   Breakpoint mengikuti lebar konten (bukan lebar jendela) agar sidebar aman. */
.page.legacy-operations-page[data-page-type="list"] {
    container-name: legacy-list-shell;
    container-type: inline-size;
    padding: 0 12px 32px !important;
}

.page.legacy-operations-page[data-page-type="list"] > .bg-light,
.page.legacy-operations-page[data-page-type="list"] > div:not(.bg-light) {
    box-sizing: border-box;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.page.legacy-operations-page[data-page-type="list"] > div:not(.bg-light) > .container-fluid {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.page.legacy-operations-page[data-page-type="list"] > div:not(.bg-light) > .container-fluid > .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.page.legacy-operations-page[data-page-type="list"] > div:not(.bg-light) > .container-fluid > .row > .comp-grid {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.page.legacy-operations-page[data-page-type="list"] > .bg-light {
    border-radius: 18px 18px 0 0 !important;
}

.page.legacy-operations-page[data-page-type="list"] .comp-grid > div:first-child > .row.gutter-sm {
    box-sizing: border-box;
    width: calc(100% + 2px) !important;
    margin-left: -1px !important;
    border-right-width: 1px;
    border-left-width: 1px;
}

.page.legacy-operations-page[data-page-type="list"] .page-content {
    box-sizing: border-box;
    width: 100% !important;
}

@container legacy-list-shell (max-width: 980px) {
    .page.legacy-operations-page[data-page-type="list"] > .bg-light > .container-fluid > .row {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .page.legacy-operations-page[data-page-type="list"] .legacy-list-search {
        grid-column: 1 / -1;
        width: 100%;
    }

    .page.legacy-operations-page[data-page-type="list"] > .bg-light .col-auto .btn-primary {
        width: 100%;
    }

    .page.legacy-operations-page[data-page-type="list"] > .bg-light .col-auto {
        width: 220px;
    }
}

@container legacy-list-shell (max-width: 640px) {
    .page.legacy-operations-page[data-page-type="list"] > .bg-light > .container-fluid > .row {
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }

    .page.legacy-operations-page[data-page-type="list"] > .bg-light .col-auto,
    .page.legacy-operations-page[data-page-type="list"] > .bg-light .btn-primary,
    .page.legacy-operations-page[data-page-type="list"] > .bg-light .search {
        width: 100%;
    }
}

/* Daftar admin baru — struktur mandiri, tidak bergantung markup generator lama. */
.modern-admin-list{width:calc(100% - 24px);max-width:1450px;margin:0 auto 2rem;border:1px solid #dbe6e3;border-radius:20px;background:#fff;box-shadow:0 18px 45px rgba(24,49,43,.1);overflow:hidden}.modern-admin-list__header{display:flex;min-height:118px;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.35rem 1.6rem;border-bottom:1px solid #e2ebe9;background:linear-gradient(120deg,#fff 55%,#f2fbf9)}.modern-admin-list__identity{display:flex;min-width:0;align-items:center;gap:1rem}.modern-admin-list__identity>div{min-width:0}.modern-admin-list__icon{display:inline-flex;width:58px;height:58px;flex:0 0 auto;align-items:center;justify-content:center;border:1px solid #bfe7df;border-radius:18px;background:#e7f8f4;color:#0f9f8f}.modern-admin-list__icon .material-icons{font-size:1.7rem}.modern-admin-list__identity span:not(.modern-admin-list__icon){display:block;color:#0f9f8f;font-size:.67rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.modern-admin-list__identity h2{margin:.15rem 0;color:#24332f;font-size:1.35rem;font-weight:800}.modern-admin-list__identity p{margin:0;color:#788985;font-size:.8rem}.modern-admin-list__add{display:inline-flex;min-height:44px;flex:0 0 auto;align-items:center;justify-content:center;gap:.4rem;padding:.65rem 1.1rem;border:0;border-radius:12px;box-shadow:0 9px 20px rgba(15,159,143,.18)}.modern-admin-list__toolbar{display:flex;min-height:78px;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.6rem;border-bottom:1px solid #e5ecea;background:#f9fcfb}.modern-admin-list__search{display:grid;width:min(620px,70%);grid-template-columns:40px minmax(0,1fr) auto;align-items:center;border:1px solid #d6e3e0;border-radius:12px;background:#fff;overflow:hidden}.modern-admin-list__search>i{justify-self:center;color:#8b9b97;font-size:1.2rem}.modern-admin-list__search input{min-width:0;height:44px;border:0;outline:0;color:#263832;background:transparent;font-size:.83rem}.modern-admin-list__search button{height:44px;padding:0 1.2rem;border:0;background:#0f9f8f;color:#fff;font-size:.77rem;font-weight:800}.modern-admin-list__summary{display:flex;align-items:baseline;gap:.4rem;padding:.45rem .8rem;border:1px solid #dbe7e4;border-radius:10px;background:#fff}.modern-admin-list__summary strong{color:#0f9f8f;font-size:1rem}.modern-admin-list__summary span{color:#71817d;font-size:.72rem}.modern-admin-list__body{background:#fff}.modern-admin-list__table-wrap{overflow-x:auto}.modern-admin-table{width:100%;border-collapse:collapse;color:#243047;font-size:.8rem}.modern-admin-table th{height:54px;padding:.8rem 1.25rem;border-bottom:1px solid #dfe8e6;background:#f2f6f6;color:#71817d;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-align:left;text-transform:uppercase}.modern-admin-table td{height:72px;padding:.75rem 1.25rem;border-bottom:1px solid #e6edeb;vertical-align:middle}.modern-admin-table tbody tr:last-child td{border-bottom:0}.modern-admin-table tbody tr:hover td{background:#f5fbf9}.modern-admin-table__number{width:78px}.modern-admin-table__index{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:9px;background:#edf5f3;color:#526661;font-size:.72rem;font-weight:800}.modern-admin-table__primary,.modern-admin-table__permission{display:flex;align-items:center;gap:.75rem}.modern-admin-table__primary strong,.modern-admin-table__permission strong{display:block;color:#243047;font-size:.84rem}.modern-admin-table__primary small,.modern-admin-table__permission small,.modern-admin-table__block{display:block;margin-top:.15rem;color:#91a09d;font-size:.68rem}.modern-admin-table__avatar{display:inline-flex;width:38px;height:38px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:12px;background:#e5f7f3;color:#0f8f82;font-weight:800}.modern-admin-table__avatar--photo{border-radius:50%}.modern-admin-table__permission>i{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:12px;background:#eef2fb;color:#5870a2;font-size:1.2rem}.modern-admin-table__muted{color:#71817d}.modern-admin-table__username{color:#34433f}.modern-admin-table__contact{display:flex;flex-direction:column;gap:.25rem}.modern-admin-table__contact a{display:inline-flex;align-items:center;gap:.35rem;color:#087f73;text-decoration:none}.modern-admin-table__contact i{font-size:.95rem}.modern-admin-table__role{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border:1px solid #d8e4e1;border-radius:999px;color:#526661;background:#f8fbfa;font-size:.7rem;font-weight:700;text-decoration:none}.modern-admin-table__role i{font-size:.95rem}.modern-admin-table__actions{width:150px;text-align:right!important}.modern-admin-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:.35rem}.modern-admin-actions a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid #cfe7e2;border-radius:10px;background:#f2fbf9;color:#078d80;text-decoration:none}.modern-admin-actions a:hover{background:#0f9f8f;color:#fff}.modern-admin-actions a.is-edit{border-color:#f0dfaf;background:#fff9e8;color:#a87300}.modern-admin-actions a.is-edit:hover{background:#d99a1b;color:#fff}.modern-admin-actions a.is-delete{border-color:#f1cfd5;background:#fff4f6;color:#d83d52}.modern-admin-actions a.is-delete:hover{background:#e5485d;color:#fff}.modern-admin-actions .material-icons{font-size:1.05rem}.modern-admin-list__footer{display:flex;min-height:64px;align-items:center;justify-content:flex-end;padding:.75rem 1.4rem;border-top:1px solid #e3ebe9;background:#fbfdfd}.modern-admin-list__footer nav{margin-left:auto}.modern-admin-list__footer .pagination{margin:0}
@media(max-width:767.98px){.modern-admin-list{width:calc(100% - 16px);border-radius:16px}.modern-admin-list__header{align-items:stretch;flex-direction:column;padding:1rem}.modern-admin-list__identity{align-items:flex-start}.modern-admin-list__icon{width:46px;height:46px;border-radius:14px}.modern-admin-list__identity h2{font-size:1.1rem}.modern-admin-list__identity p{font-size:.72rem;line-height:1.5}.modern-admin-list__add{width:100%}.modern-admin-list__toolbar{align-items:stretch;flex-direction:column;padding:.8rem 1rem}.modern-admin-list__search{width:100%}.modern-admin-list__summary{align-self:flex-start}.modern-admin-table,.modern-admin-table tbody,.modern-admin-table tr,.modern-admin-table td{display:block}.modern-admin-table thead{display:none}.modern-admin-table tbody{padding:.7rem;background:#f5f9f8}.modern-admin-table tr{margin-bottom:.7rem;padding:.75rem;border:1px solid #dce7e4;border-radius:14px;background:#fff;box-shadow:0 5px 14px rgba(24,49,43,.05)}.modern-admin-table tr:last-child{margin-bottom:0}.modern-admin-table td{display:grid!important;width:100%!important;height:auto;min-height:38px;grid-template-columns:90px minmax(0,1fr);align-items:center;padding:.45rem .2rem!important;border-bottom:1px dashed #e3ebe9!important;text-align:left!important}.modern-admin-table td:last-child{border-bottom:0!important}.modern-admin-table td:before{color:#8a9995;font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;content:attr(data-label)}.modern-admin-table__primary,.modern-admin-table__permission{min-width:0}.modern-admin-table__contact a{overflow-wrap:anywhere}.modern-admin-table__actions .modern-admin-actions{justify-content:flex-start}.modern-admin-list__footer{justify-content:center}.modern-admin-list__footer nav{margin:0 auto}}

/* Daftar operasional: informasi panjang diringkas per entitas, bukan dipaksa menjadi belasan kolom. */
.modern-record-code{display:inline-flex;margin-right:.35rem;padding:.16rem .42rem;border:1px solid #cce7e1;border-radius:7px;background:#eef9f7;color:#087f73;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.64rem;font-weight:800}.modern-admin-table--medicine,.modern-admin-table--medical{table-layout:fixed}.modern-admin-table--medicine th:nth-child(1){width:25%}.modern-admin-table--medicine th:nth-child(2){width:15%}.modern-admin-table--medicine th:nth-child(3){width:14%}.modern-admin-table--medicine th:nth-child(4){width:13%}.modern-admin-table--medicine th:nth-child(5){width:22%}.modern-admin-table--medicine th:nth-child(6){width:11%}.modern-admin-table--medical th:nth-child(1){width:22%}.modern-admin-table--medical th:nth-child(2){width:17%}.modern-admin-table--medical th:nth-child(3){width:19%}.modern-admin-table--medical th:nth-child(4){width:19%}.modern-admin-table--medical th:nth-child(5){width:14%}.modern-admin-table--medical th:nth-child(6){width:9%}.modern-admin-table--medicine td,.modern-admin-table--medical td{min-width:0;overflow:hidden}.modern-stock{display:flex;align-items:center;gap:.55rem}.modern-stock>strong{white-space:nowrap}.modern-stock>strong small{color:#7d8d89;font-size:.66rem;font-weight:600}.modern-status{display:inline-flex;max-width:100%;align-items:center;gap:.25rem;padding:.28rem .55rem;border:1px solid transparent;border-radius:999px;font-size:.64rem;font-weight:800;line-height:1.2}.modern-status i{font-size:.85rem}.modern-status.is-safe{border-color:#ccecdf;background:#eaf8f2;color:#16805d}.modern-status.is-warning{border-color:#f1dda3;background:#fff7da;color:#9c6a00}.modern-status.is-danger{border-color:#f1c9d0;background:#fff0f2;color:#c5374e}.modern-status.is-neutral{border-color:#dbe5e3;background:#f4f7f6;color:#657570}.modern-expiry{display:flex;align-items:flex-start;flex-direction:column;gap:.35rem}.modern-expiry small{color:#788985}.modern-vitals{display:flex;flex-wrap:wrap;gap:.32rem}.modern-vitals span{display:inline-flex;align-items:center;gap:.2rem;padding:.26rem .45rem;border-radius:7px;background:#f1f5f4;color:#52645f;font-size:.68rem;font-weight:700}.modern-vitals i{color:#d84d62;font-size:.85rem}.modern-clinical-text{display:-webkit-box;margin:0;overflow:hidden;color:#42534f;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.modern-clinical-title{display:block;max-width:100%;overflow:hidden;color:#253732;text-overflow:ellipsis;white-space:nowrap}.modern-line-clamp{display:-webkit-box!important;max-width:100%;overflow:hidden;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:1}.modern-inline-icon{margin-right:.25rem;color:#0f9f8f;font-size:.85rem;vertical-align:-2px}.modern-admin-table__avatar--medical{background:#eef2fb;color:#5870a2}.modern-admin-table__avatar>.material-icons{font-size:1.2rem}

@media(max-width:767.98px){.modern-admin-table--medicine th,.modern-admin-table--medical th{min-width:0}.modern-stock{justify-content:flex-start}.modern-clinical-title,.modern-line-clamp{max-width:none}.modern-admin-table--medicine td:first-child,.modern-admin-table--medical td:first-child{padding-top:.2rem!important}.modern-admin-table--medicine td:first-child:before,.modern-admin-table--medical td:first-child:before{align-self:start;margin-top:.7rem}}

@media(min-width:768px){.modern-admin-table--medicine th:nth-child(1){width:23%}.modern-admin-table--medicine th:nth-child(5){width:21%}.modern-admin-table--medicine th:nth-child(6){width:14%}.modern-admin-table--medical th:nth-child(1){width:20%}.modern-admin-table--medical th:nth-child(3){width:17%}.modern-admin-table--medical th:nth-child(4){width:18%}.modern-admin-table--medical th:nth-child(6){width:14%}.modern-admin-table--medicine .modern-admin-table__actions,.modern-admin-table--medical .modern-admin-table__actions{padding-right:.75rem}.modern-admin-table--medicine .modern-admin-actions,.modern-admin-table--medical .modern-admin-actions{gap:.25rem}.modern-admin-table--medicine .modern-admin-actions a,.modern-admin-table--medical .modern-admin-actions a{width:32px;height:32px}}

/* ========================================================================== */
/* Penyegaran visual CRUD lama                                                 */
/* Berlaku untuk template generator list/add/edit/view agar konsisten.         */
/* ========================================================================== */
.page[data-page-type="list"],
.page[data-page-type="add"],
.page[data-page-type="edit"],
.page[data-page-type="view"] {
    --crud-border: #dde8e5;
    --crud-muted: #70827f;
    --crud-surface: rgba(255, 255, 255, .97);
    --crud-soft: #f4faf8;
    color: var(--clinic-ink, #172033);
}

.page[data-page-type="add"] > .bg-light,
.page[data-page-type="edit"] > .bg-light,
.page[data-page-type="view"] > .bg-light {
    margin-bottom: 18px !important;
    padding: 17px 20px !important;
    border: 1px solid var(--crud-border);
    border-radius: 18px;
    background: var(--crud-surface) !important;
    box-shadow: 0 10px 30px rgba(31, 55, 50, .07);
}

.page[data-page-type] > .bg-light .h5 {
    margin: 0;
    color: var(--clinic-ink, #172033) !important;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-weight: 800 !important;
    letter-spacing: -.02em;
}

.page[data-page-type] .back-btn {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--crud-border);
    border-radius: 12px;
    color: var(--clinic-primary-dark, #087f73);
    background: var(--crud-soft);
}

.page[data-page-type] .back-btn:hover {
    color: #fff;
    background: var(--clinic-primary, #0f9f8f);
    transform: translateX(-2px);
}

/* Daftar dan tabel */
.page[data-page-type="list"] .page-content {
    margin-top: 14px;
    border: 1px solid var(--crud-border);
    border-radius: 18px;
    background: var(--crud-surface);
    box-shadow: 0 12px 34px rgba(31, 55, 50, .07);
    overflow: hidden;
}

.page[data-page-type="list"] .table-responsive {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit;
    scrollbar-color: #9bcac3 #edf5f3;
    scrollbar-width: thin;
}

.page[data-page-type="list"] .filter-tags:not(:empty) {
    margin: 14px 16px 0 !important;
}

.page[data-page-type="list"] table.table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border: 0 !important;
    color: #283835;
    font-size: .84rem;
    vertical-align: middle;
}

.page[data-page-type="list"] table.table > thead > tr > th {
    padding: 16px 15px !important;
    border-width: 0 0 1px !important;
    border-color: var(--crud-border) !important;
    background: #f3f8f7 !important;
    color: #687b78 !important;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .075em;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: nowrap;
}

.page[data-page-type="list"] table.table > tbody > tr {
    transition: background-color .18s ease, box-shadow .18s ease;
}

.page[data-page-type="list"] table.table > tbody > tr:nth-child(odd) > * {
    background: #fff;
}

.page[data-page-type="list"] table.table > tbody > tr:nth-child(even) > * {
    background: #fbfdfd;
}

.page[data-page-type="list"] table.table > tbody > tr:hover > * {
    background: #effaf7 !important;
}

.page[data-page-type="list"] table.table > tbody > tr > td {
    min-height: 58px;
    padding: 13px 15px !important;
    border-width: 0 0 1px !important;
    border-color: #e8efed !important;
    line-height: 1.45;
}

.page[data-page-type="list"] table.table .td-btn {
    position: sticky;
    z-index: 2;
    right: 0;
    min-width: 126px;
    box-shadow: -10px 0 18px rgba(255, 255, 255, .9);
    white-space: nowrap;
}

.page[data-page-type="list"] table.table .td-btn .btn,
.page[data-page-type="list"] table.table td:last-child > .btn {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    margin: 2px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}

.page[data-page-type="list"] table.table .td-btn .material-icons,
.page[data-page-type="list"] table.table td:last-child > .btn .material-icons {
    font-size: 18px;
}

.page[data-page-type="list"] .pagination {
    margin: 0;
    padding: 16px;
    border-top: 1px solid var(--crud-border);
    justify-content: flex-end;
}

/* Form tambah dan edit */
.page[data-page-type="add"] .comp-grid,
.page[data-page-type="edit"] .comp-grid {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
}

.page[data-page-type="add"] .page-content,
.page[data-page-type="edit"] .page-content {
    overflow: hidden;
    border: 1px solid var(--crud-border) !important;
    border-radius: 20px !important;
    background: var(--crud-surface);
    box-shadow: 0 16px 42px rgba(31, 55, 50, .08);
}

.page[data-page-type="add"] .page-form,
.page[data-page-type="edit"] .page-form {
    padding: clamp(20px, 3vw, 34px);
}

.page[data-page-type="add"] .page-form > div:first-child,
.page[data-page-type="edit"] .page-form > div:first-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

.page[data-page-type="add"] .page-form .form-group,
.page[data-page-type="edit"] .page-form .form-group {
    margin: 0 !important;
    padding: 0;
    border: 0;
}

.page[data-page-type="add"] .page-form .form-group > .row,
.page[data-page-type="edit"] .page-form .form-group > .row {
    display: block;
    margin: 0;
}

.page[data-page-type="add"] .page-form .form-group > .row > [class*="col-sm-"],
.page[data-page-type="edit"] .page-form .form-group > .row > [class*="col-sm-"] {
    width: 100%;
    max-width: none;
    padding: 0;
}

.page[data-page-type="add"] .page-form .control-label,
.page[data-page-type="edit"] .page-form .control-label {
    display: block;
    margin-bottom: 7px;
    color: #40514e;
    font-size: .78rem;
    font-weight: 800;
}

.page[data-page-type="add"] .page-form .form-control,
.page[data-page-type="add"] .page-form .form-select,
.page[data-page-type="edit"] .page-form .form-control,
.page[data-page-type="edit"] .page-form .form-select {
    min-height: 47px;
    border: 1px solid #d9e4e1;
    border-radius: 11px;
    background-color: #fbfdfd;
}

.page[data-page-type="add"] .page-form textarea.form-control,
.page[data-page-type="edit"] .page-form textarea.form-control {
    min-height: 112px;
    resize: vertical;
}

.page[data-page-type="add"] .page-form .form-check-inline,
.page[data-page-type="edit"] .page-form .form-check-inline {
    margin-top: 10px;
    padding: 9px 13px 9px 34px;
    border: 1px solid var(--crud-border);
    border-radius: 10px;
    background: #fbfdfd;
}

.page[data-page-type="add"] .page-form > .form-group:last-child,
.page[data-page-type="edit"] .page-form > .form-group:last-child,
.page[data-page-type="add"] .page-form > div:last-child,
.page[data-page-type="edit"] .page-form > div:last-child {
    grid-column: 1 / -1;
}

.page[data-page-type="add"] .page-form button[type="submit"],
.page[data-page-type="edit"] .page-form button[type="submit"] {
    min-width: 170px;
    min-height: 44px;
    border: 0;
    border-radius: 11px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(15, 159, 143, .2);
}

/* Detail data */
.page[data-page-type="view"] .page-content {
    max-width: 1040px;
    margin-inline: auto;
    padding: clamp(16px, 2.4vw, 28px);
    border: 1px solid var(--crud-border);
    border-radius: 20px;
    background: var(--crud-surface);
    box-shadow: 0 16px 42px rgba(31, 55, 50, .08);
}

.page[data-page-type="view"] #page-main-content {
    padding: 0 !important;
}

.page[data-page-type="view"] .page-data > .row,
.page[data-page-type="view"] .page-data > .row.row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px !important;
}

.page[data-page-type="view"] .page-data > .row > [class*="col-"] {
    width: auto;
    padding: 0;
}

.page[data-page-type="view"] .page-data .card-1 {
    height: 100%;
    min-height: 82px;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid var(--crud-border) !important;
    border-radius: 13px !important;
    background: #fbfdfd !important;
    box-shadow: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.page[data-page-type="view"] .page-data .card-1:hover {
    border-color: #a9d9d2 !important;
    box-shadow: 0 7px 18px rgba(31, 55, 50, .06);
    transform: translateY(-1px);
}

.page[data-page-type="view"] .page-data small.text-muted {
    display: block;
    margin-bottom: 5px;
    color: var(--crud-muted) !important;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.page[data-page-type="view"] .page-data .fw-bold {
    color: #253633;
    font-size: .94rem;
    overflow-wrap: anywhere;
}

.page[data-page-type="view"] .page-data + .d-flex {
    padding-top: 16px;
    border-top: 1px solid var(--crud-border);
    flex-wrap: wrap;
}

/* Modal dan drawer CRUD: lapisan tetap interaktif, proporsi lebih nyaman. */
.modal-backdrop.show { opacity: .46; }
.modal { z-index: 1060; }
.modal-backdrop { z-index: 1055; }
.modal-dialog .page[data-page-type="add"] .page-content,
.modal-dialog .page[data-page-type="edit"] .page-content,
.modal-dialog .page[data-page-type="view"] .page-content {
    max-width: none;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .page[data-page-type="add"] .page-form > div:first-child,
    .page[data-page-type="edit"] .page-form > div:first-child {
        grid-template-columns: 1fr;
    }

    .page[data-page-type="view"] .page-data > .row,
    .page[data-page-type="view"] .page-data > .row.row {
        grid-template-columns: 1fr;
    }
}

/* Rekam medis: detail klinis dan formulir koreksi */
.medical-record-detail,
.medical-record-form {
    color: #263833;
}

.medical-record-detail__content,
.medical-record-form__form {
    max-width: 1040px;
    margin: 0 auto;
}

.medical-record-detail__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem;
    border-radius: 18px;
    background: linear-gradient(125deg, #075e57, #10998b);
    color: #fff;
    box-shadow: 0 14px 30px rgba(10, 95, 86, 0.16);
}

.medical-record-detail__patient {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.9rem;
}

.medical-record-detail__avatar,
.medical-record-form__avatar {
    display: inline-flex;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
}

.medical-record-detail__avatar {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.medical-record-detail__eyebrow {
    color: #c9f2eb;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.medical-record-detail__patient h2 {
    margin: 0.15rem 0 0.32rem;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
}

.medical-record-detail__identity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    color: #d8f4ef;
    font-size: 0.69rem;
}

.medical-record-detail__identity span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.medical-record-detail__identity i {
    font-size: 0.9rem;
}

.medical-record-detail__service,
.medical-record-detail__status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 800;
}

.medical-record-detail__service {
    max-width: 210px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #fff;
    text-align: center;
}

.medical-record-detail__context {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0.75rem 0;
}

.medical-record-detail__context > div {
    padding: 0.75rem 0.85rem;
    border: 1px solid #dce8e5;
    border-radius: 13px;
    background: #f8fbfa;
}

.medical-record-detail__context span,
.medical-record-detail__clinical-grid article > span,
.medical-record-detail__note > span {
    display: block;
    margin-bottom: 0.2rem;
    color: #778985;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.medical-record-detail__context strong {
    color: #2d403a;
    font-size: 0.76rem;
}

.medical-record-detail__section {
    margin-top: 0.75rem;
    overflow: hidden;
    border: 1px solid #dce8e5;
    border-radius: 16px;
    background: #fff;
}

.medical-record-detail__section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e5eeec;
}

.medical-record-detail__section-heading > div > span {
    color: #0b8d80;
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.medical-record-detail__section-heading h3 {
    margin: 0.1rem 0 0;
    color: #263833;
    font-size: 0.86rem;
    font-weight: 800;
}

.medical-record-detail__status {
    background: #e7f7f3;
    color: #087a6f;
}

.medical-record-detail__vitals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.85rem 1rem 1rem;
}

.medical-record-detail__vitals > div {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    padding: 0.65rem;
    border-radius: 12px;
    background: #f4f8f7;
}

.medical-record-detail__vitals i {
    grid-row: 1 / 3;
    color: #0e9285;
    font-size: 1.1rem;
}

.medical-record-detail__vitals span {
    color: #7a8b87;
    font-size: 0.63rem;
}

.medical-record-detail__vitals strong {
    color: #253732;
    font-size: 0.78rem;
}

.medical-record-detail__clinical-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.85rem 1rem 1rem;
}

.medical-record-detail__clinical-grid article {
    min-width: 0;
    padding: 0.8rem;
    border-radius: 12px;
    background: #f7faf9;
}

.medical-record-detail__clinical-grid article p,
.medical-record-detail__note p,
.medical-record-detail__legacy-prescription {
    margin: 0;
    color: #2a3c37;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.medical-record-detail__clinical-grid .medical-record-detail__wide {
    grid-column: 1 / -1;
}

.medical-record-detail__prescriptions,
.medical-record-detail__related {
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem 1rem 0;
}

.medical-record-detail__prescriptions > div,
.medical-record-detail__related > div,
.medical-record-form__readonly {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 11px;
    background: #f4f8f7;
}

.medical-record-detail__prescriptions i,
.medical-record-detail__related i,
.medical-record-form__readonly > i:first-child {
    color: #0e9285;
    font-size: 1.15rem;
}

.medical-record-detail__prescriptions span,
.medical-record-detail__related span,
.medical-record-form__readonly div {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.medical-record-detail__prescriptions strong,
.medical-record-detail__related strong {
    color: #2b3d38;
    font-size: 0.73rem;
}

.medical-record-detail__prescriptions small,
.medical-record-detail__related small {
    color: #788985;
    font-size: 0.65rem;
}

.medical-record-detail__legacy-prescription,
.medical-record-detail__empty {
    margin: 0.85rem 1rem 0;
    padding: 0.75rem;
    border-radius: 11px;
    background: #f4f8f7;
}

.medical-record-detail__empty {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #758783;
    font-size: 0.72rem;
}

.medical-record-detail__empty i {
    color: #93a39f;
    font-size: 1.15rem;
}

.medical-record-detail__note {
    margin: 0.65rem 1rem 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px dashed #d5e1de;
}

.medical-record-detail__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    padding: 0 1rem 0.9rem;
    color: #748681;
    font-size: 0.65rem;
}

.medical-record-detail__meta-row strong {
    color: #354741;
}

.medical-record-detail__related {
    padding-bottom: 0.85rem;
}

.medical-record-detail__audit {
    display: flex;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e0e8e6;
    border-radius: 13px;
    background: #f8faf9;
}

.medical-record-detail__audit > i {
    color: #70827d;
    font-size: 1.1rem;
}

.medical-record-detail__audit span {
    color: #40534d;
    font-size: 0.69rem;
    font-weight: 800;
}

.medical-record-detail__audit p {
    margin: 0.1rem 0 0;
    color: #748580;
    font-size: 0.67rem;
}

.medical-record-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.medical-record-detail__actions .btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 10px;
    font-size: 0.74rem;
    font-weight: 800;
}

.medical-record-detail__actions i {
    font-size: 1rem;
}

.medical-record-form__form {
    padding: 0.2rem;
}

.medical-record-form__patient {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid #d9e7e3;
    border-radius: 16px;
    background: linear-gradient(135deg, #f3faf8, #fff);
}

.medical-record-form__avatar {
    background: #dff3ef;
    color: #087e72;
}

.medical-record-form__patient > div {
    min-width: 0;
    flex: 1;
}

.medical-record-form__patient div > span {
    color: #0c8b7e;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.medical-record-form__patient h2 {
    margin: 0.12rem 0;
    color: #263833;
    font-size: 1rem;
    font-weight: 800;
}

.medical-record-form__patient p {
    margin: 0;
    color: #71827e;
    font-size: 0.69rem;
}

.medical-record-form__locked {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: #e6f4f1;
    color: #177d73;
    font-size: 0.64rem;
    font-weight: 800;
}

.medical-record-form__locked i,
.medical-record-form__identity-note i {
    font-size: 0.9rem;
}

.medical-record-form__identity-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    padding: 0 0.2rem;
    color: #748580;
    font-size: 0.66rem;
}

.medical-record-form__section {
    margin-top: 0.8rem;
    padding: 1rem;
    border: 1px solid #dce8e5;
    border-radius: 16px;
    background: #fff;
}

.medical-record-form__section-heading {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.medical-record-form__section-heading > span {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #e3f5f1;
    color: #0a8277;
    font-size: 0.64rem;
    font-weight: 800;
}

.medical-record-form__section-heading h3 {
    margin: 0;
    color: #2a3c37;
    font-size: 0.87rem;
    font-weight: 800;
}

.medical-record-form__section-heading p {
    margin: 0.1rem 0 0;
    color: #778884;
    font-size: 0.67rem;
}

.medical-record-form__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.medical-record-form__wide {
    grid-column: 1 / -1;
}

.medical-record-form__field label {
    display: block;
    margin-bottom: 0.32rem;
    color: #40524d;
    font-size: 0.7rem;
    font-weight: 800;
}

.medical-record-form__field label > span {
    color: #d33b55;
}

.medical-record-form__field .form-control,
.medical-record-form__field .input-group-text {
    min-height: 42px;
    border-color: #d4e1de;
    font-size: 0.75rem;
}

.medical-record-form__field textarea.form-control {
    min-height: auto;
    line-height: 1.55;
    resize: vertical;
}

.medical-record-form__field .input-group-text {
    background: #f3f7f6;
    color: #71827e;
    font-size: 0.66rem;
}

.medical-record-form__field .form-control:focus {
    border-color: #17a395;
    box-shadow: 0 0 0 0.18rem rgba(23, 163, 149, 0.12);
}

.medical-record-form__field > small {
    display: block;
    margin-top: 0.3rem;
    color: #7c8d89;
    font-size: 0.62rem;
}

.medical-record-form__readonly {
    margin-bottom: 0.75rem;
    border: 1px solid #e0e9e7;
}

.medical-record-form__readonly span {
    color: #788985;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.medical-record-form__readonly p {
    margin: 0.1rem 0 0;
    color: #334640;
    font-size: 0.72rem;
    font-weight: 700;
}

.medical-record-form__readonly > i:last-child {
    color: #91a19d;
    font-size: 0.95rem;
}

.medical-record-form__correction {
    border-color: #eadcb5;
    background: #fffdf7;
}

.medical-record-form__last-reason {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: #f6f1e3;
    color: #6f6446;
    font-size: 0.67rem;
}

.medical-record-form__actions {
    position: sticky;
    z-index: 5;
    bottom: 0;
    margin: 0.85rem -0.2rem -0.2rem;
    padding: 0.75rem;
    border: 1px solid #dce6e3;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -7px 20px rgba(30, 58, 51, 0.07);
    backdrop-filter: blur(8px);
}

.medical-record-form__actions .btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 800;
}

.medical-record-form__actions i {
    font-size: 1rem;
}

.server-validation-feedback {
    display: block;
}

@media (max-width: 767.98px) {
    .medical-record-detail__hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .medical-record-detail__service {
        max-width: none;
    }

    .medical-record-detail__context,
    .medical-record-detail__clinical-grid,
    .medical-record-form__grid {
        grid-template-columns: 1fr;
    }

    .medical-record-detail__vitals {
        grid-template-columns: 1fr;
    }

    .medical-record-detail__clinical-grid .medical-record-detail__wide,
    .medical-record-form__wide {
        grid-column: auto;
    }

    .medical-record-form__patient {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .medical-record-form__locked {
        margin-left: 56px;
    }

    .medical-record-detail__actions,
    .medical-record-form__actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Profil Pasien 360 */
.patient-name-link {
    color: inherit;
    text-decoration: none;
}

.patient-name-link:hover {
    color: #0d8f82;
}

.patient-profile-page {
    padding-bottom: 2rem;
    color: #273934;
}

.patient-profile-shell {
    width: min(1380px, 100%);
    margin: 0 auto;
}

.patient-profile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.patient-profile-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
}

.patient-profile-back:hover {
    color: #fff;
}

.patient-profile-back i,
.patient-profile-actions i {
    font-size: 1rem;
}

.patient-profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.patient-profile-actions .btn,
.patient-profile-section-heading .btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
}

.patient-profile-hero {
    position: relative;
    display: flex;
    min-height: 164px;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.6rem 1.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% -30%, rgba(96, 235, 213, 0.32) 0, rgba(96, 235, 213, 0) 42%),
        linear-gradient(125deg, #173d37 0%, #0d6e64 52%, #0f9b8c 100%);
    box-shadow: 0 20px 42px rgba(15, 56, 50, 0.17);
    color: #fff;
}

.patient-profile-hero::after {
    position: absolute;
    top: -85px;
    right: -60px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
    content: "";
}

.patient-profile-identity {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

.patient-profile-avatar {
    display: inline-flex;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.7rem;
    font-weight: 900;
}

.patient-profile-eyebrow {
    color: #bdece4;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.patient-profile-identity h1 {
    margin: 0.25rem 0 0.55rem;
    color: #fff;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
}

.patient-profile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.patient-profile-chips span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.32rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #effffb;
    font-size: 0.64rem;
    font-weight: 700;
}

.patient-profile-chips i {
    font-size: 0.85rem;
}

.patient-profile-contact {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 210px;
    flex-direction: column;
    align-items: flex-end;
}

.patient-profile-contact > span {
    color: #b9e9e1;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.patient-profile-contact strong {
    margin: 0.15rem 0 0.6rem;
    color: #fff;
    font-size: 0.88rem;
}

.patient-profile-contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #d9f8f2;
    font-size: 0.68rem;
    font-weight: 700;
    text-decoration: none;
}

.patient-profile-contact i {
    font-size: 0.9rem;
}

.patient-profile-alert {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.7rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid;
    border-radius: 13px;
}

.patient-profile-alert > i {
    font-size: 1.15rem;
}

.patient-profile-alert > div {
    display: flex;
    flex-direction: column;
}

.patient-profile-alert span {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.patient-profile-alert strong {
    font-size: 0.72rem;
}

.patient-profile-alert--danger {
    border-color: #f1bec6;
    background: #fff0f2;
    color: #a9233b;
}

.patient-profile-alert--safe {
    border-color: #cce6df;
    background: #f0f9f6;
    color: #247566;
}

.patient-profile-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.7rem;
}

.patient-profile-facts > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #dce7e4;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 7px 18px rgba(38, 62, 56, 0.04);
}

.patient-profile-facts > div > i {
    color: #109486;
    font-size: 1.1rem;
}

.patient-profile-facts span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.patient-profile-facts small {
    color: #7c8d89;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
}

.patient-profile-facts strong {
    overflow: hidden;
    margin-top: 0.1rem;
    color: #30433d;
    font-size: 0.69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-profile-tabs {
    display: flex;
    overflow-x: auto;
    gap: 0.3rem;
    margin-top: 0.8rem;
    padding: 0.45rem;
    border: 1px solid #dbe6e3;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 9px 24px rgba(30, 53, 47, 0.06);
    scrollbar-width: thin;
}

.patient-profile-tabs a {
    display: inline-flex;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.78rem;
    border-radius: 10px;
    color: #657772;
    font-size: 0.67rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.patient-profile-tabs a:hover {
    background: #edf7f4;
    color: #0e8176;
    transform: translateY(-1px);
}

.patient-profile-tabs a.is-active {
    background: #0e9184;
    box-shadow: 0 6px 14px rgba(14, 145, 132, 0.2);
    color: #fff;
}

.patient-profile-tabs i {
    font-size: 1rem;
}

.patient-profile-content {
    min-height: 310px;
    margin-top: 0.75rem;
    padding: 1.15rem;
    border: 1px solid #dce7e4;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(32, 54, 48, 0.06);
}

.patient-profile-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #e3ebe9;
}

.patient-profile-section-heading > div > span,
.patient-profile-card > header div > span,
.patient-profile-record-card > header div > span {
    color: #0c8c7f;
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.patient-profile-section-heading h2 {
    margin: 0.12rem 0;
    color: #263934;
    font-size: 1.05rem;
    font-weight: 800;
}

.patient-profile-section-heading p {
    margin: 0;
    color: #7a8b87;
    font-size: 0.68rem;
}

.patient-profile-section-heading > strong {
    color: #647671;
    font-size: 0.68rem;
    white-space: nowrap;
}

.patient-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.8rem;
}

.patient-profile-stats > div {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid #e0e9e7;
    border-radius: 13px;
    background: #f9fbfa;
}

.patient-profile-stats > div > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
}

.patient-profile-stats .is-teal { background: #dff5f1; color: #0a8175; }
.patient-profile-stats .is-blue { background: #e3f0fb; color: #2477a8; }
.patient-profile-stats .is-purple { background: #efe9fb; color: #7652ad; }
.patient-profile-stats .is-amber { background: #fff1d5; color: #a76b08; }
.patient-profile-stats i { font-size: 1.1rem; }

.patient-profile-stats > div > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.patient-profile-stats small {
    color: #758682;
    font-size: 0.62rem;
}

.patient-profile-stats strong {
    color: #243731;
    font-size: 1rem;
}

.patient-profile-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 0.8rem;
}

.patient-profile-card,
.patient-profile-record-card {
    overflow: hidden;
    border: 1px solid #dde8e5;
    border-radius: 14px;
    background: #fff;
}

.patient-profile-card > header,
.patient-profile-record-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid #e6eeec;
    background: #fbfcfc;
}

.patient-profile-card > header h3,
.patient-profile-record-card > header h3 {
    margin: 0.1rem 0 0;
    color: #2c3f39;
    font-size: 0.8rem;
    font-weight: 800;
}

.patient-profile-card > header > i,
.patient-profile-record-card > header > i {
    color: #149487;
    font-size: 1.1rem;
}

.patient-profile-data-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0.55rem 0.9rem 0.8rem;
}

.patient-profile-data-list > div {
    min-width: 0;
    padding: 0.55rem 0;
    border-bottom: 1px dashed #e1e9e7;
}

.patient-profile-data-list > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.patient-profile-data-list .is-wide {
    grid-column: 1 / -1;
}

.patient-profile-data-list dt {
    color: #7c8c88;
    font-size: 0.59rem;
    font-weight: 700;
}

.patient-profile-data-list dd {
    margin: 0.12rem 0 0;
    color: #31443e;
    font-size: 0.7rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.patient-current-status {
    padding: 0.75rem;
}

.patient-current-status__item {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
    padding: 0.65rem;
    border-radius: 11px;
    background: #f3f8f6;
}

.patient-current-status__item:last-child { margin-bottom: 0; }
.patient-current-status__item > span { color: #0b8d80; }
.patient-current-status__item i { font-size: 1.05rem; }
.patient-current-status__item div { display: flex; min-width: 0; flex-direction: column; }
.patient-current-status__item small { color: #768783; font-size: 0.58rem; font-weight: 800; text-transform: uppercase; }
.patient-current-status__item strong { color: #2d403a; font-size: 0.7rem; }
.patient-current-status__item p { margin: 0.08rem 0 0; color: #71827e; font-size: 0.63rem; }

.patient-current-status__empty,
.patient-profile-small-empty {
    display: flex;
    min-height: 138px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #7a8b87;
    text-align: center;
}

.patient-current-status__empty i,
.patient-profile-small-empty i { color: #93aaa4; font-size: 1.5rem; }
.patient-current-status__empty strong { color: #4a5d57; font-size: 0.72rem; }
.patient-current-status__empty span,
.patient-profile-small-empty span { max-width: 240px; font-size: 0.63rem; }

.patient-profile-recent {
    margin-top: 0.8rem;
}

.patient-profile-recent > header a {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: #0d8b7e;
    font-size: 0.65rem;
    font-weight: 800;
    text-decoration: none;
}

.patient-profile-recent > header a i { font-size: 0.9rem; }

.patient-visit-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto 32px;
    gap: 0.8rem;
    align-items: center;
    padding: 0.8rem 0.95rem;
    border-bottom: 1px solid #e7eeec;
}

.patient-visit-row:last-child { border-bottom: 0; }
.patient-visit-row time { display: flex; flex-direction: column; }
.patient-visit-row time strong { color: #354842; font-size: 0.68rem; }
.patient-visit-row time span { color: #83928e; font-size: 0.6rem; }
.patient-visit-row > div:nth-child(2) { min-width: 0; }
.patient-visit-row > div:nth-child(2) > span { color: #0c8c7f; font-size: 0.58rem; font-weight: 800; text-transform: uppercase; }
.patient-visit-row > div:nth-child(2) > strong { display: block; overflow: hidden; color: #2d403a; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.patient-visit-row > div:nth-child(2) > p { overflow: hidden; margin: 0.1rem 0 0; color: #778783; font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
.patient-visit-row__status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }
.patient-visit-row__status span { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.25rem 0.4rem; border-radius: 999px; background: #edf6f3; color: #4d6962; font-size: 0.58rem; font-weight: 700; }
.patient-visit-row__status i { font-size: 0.75rem; }
.patient-visit-row > a { display: inline-flex; align-items: center; justify-content: center; color: #64807a; text-decoration: none; }
.patient-visit-row > a i { font-size: 1.05rem; }

.patient-profile-table-wrap {
    overflow-x: auto;
    border: 1px solid #dfe9e6;
    border-radius: 13px;
}

.patient-profile-table {
    min-width: 880px;
    margin: 0;
}

.patient-profile-table thead th {
    padding: 0.68rem 0.75rem;
    border-bottom: 1px solid #dce6e3;
    background: #f2f7f5;
    color: #72827e;
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.patient-profile-table tbody td {
    max-width: 280px;
    padding: 0.75rem;
    border-color: #e5ecea;
    color: #354741;
    font-size: 0.68rem;
    vertical-align: middle;
}

.patient-profile-table tbody td > strong,
.patient-profile-table tbody td > small { display: block; }
.patient-profile-table tbody td > small { margin-top: 0.1rem; color: #82918d; font-size: 0.59rem; }
.patient-profile-table tbody td > p { display: -webkit-box; overflow: hidden; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.45; }
.patient-profile-code,
.patient-profile-service { display: inline-flex; padding: 0.27rem 0.42rem; border-radius: 7px; background: #eaf6f3; color: #0b7b70; font-size: 0.61rem; font-weight: 800; }
.patient-profile-service { max-width: 160px; white-space: normal; }
.patient-profile-inline-status { display: flex; flex-direction: column; gap: 0.18rem; color: #657772; font-size: 0.61rem; }
.patient-profile-money { color: #087c59; white-space: nowrap; }

.patient-profile-row-action {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfe3df;
    border-radius: 9px;
    background: #f2faf8;
    color: #0a8175;
    text-decoration: none;
}

.patient-profile-row-action:hover { background: #0e9184; color: #fff; }
.patient-profile-row-action i { font-size: 1rem; }
.patient-profile-pagination { display: flex; justify-content: flex-end; margin-top: 0.9rem; }

.patient-profile-record-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.patient-profile-record-card > header .ui-status { font-size: 0.58rem; }
.patient-profile-record-list { padding: 0.45rem 0.8rem; }
.patient-profile-record-list > div { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0; border-bottom: 1px dashed #e1e9e7; }
.patient-profile-record-list > div:last-child { border-bottom: 0; }
.patient-profile-record-list > div > i { color: #139487; font-size: 1.05rem; }
.patient-profile-record-list > div > span { display: flex; min-width: 0; flex-direction: column; }
.patient-profile-record-list strong { color: #30433d; font-size: 0.68rem; }
.patient-profile-record-list small { color: #788985; font-size: 0.6rem; }
.patient-profile-record-list > p { margin: 0.5rem 0; color: #7b8c88; font-size: 0.65rem; }
.patient-profile-record-card > footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem; padding: 0.6rem 0.8rem; border-top: 1px solid #e5ecea; background: #fafcfb; color: #71827e; font-size: 0.59rem; }
.patient-profile-record-card > footer span { display: inline-flex; align-items: center; gap: 0.2rem; }
.patient-profile-record-card > footer i { font-size: 0.8rem; }

.patient-profile-timeline { position: relative; }
.patient-profile-timeline::before { position: absolute; top: 10px; bottom: 10px; left: 128px; width: 1px; background: #dbe6e3; content: ""; }
.patient-profile-timeline article { position: relative; display: grid; grid-template-columns: 105px 34px minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 0; }
.patient-profile-timeline time { display: flex; flex-direction: column; text-align: right; }
.patient-profile-timeline time strong { color: #3b4e48; font-size: 0.65rem; }
.patient-profile-timeline time span { color: #84938f; font-size: 0.57rem; }
.patient-profile-timeline__icon { z-index: 1; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 4px solid #fff; border-radius: 50%; background: #dff4f0; color: #0c8a7d; }
.patient-profile-timeline__icon i { font-size: 0.95rem; }
.patient-profile-timeline article > div { padding: 0.65rem 0.75rem; border: 1px solid #e0e9e7; border-radius: 11px; background: #fafcfb; }
.patient-profile-timeline h3 { margin: 0; color: #30433d; font-size: 0.72rem; }
.patient-profile-timeline p { margin: 0.12rem 0 0.45rem; color: #748580; font-size: 0.64rem; }
.patient-profile-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.patient-profile-tags span { padding: 0.24rem 0.4rem; border-radius: 999px; background: #e9f4f1; color: #54716a; font-size: 0.56rem; font-weight: 700; }

.patient-profile-aesthetic-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; padding: 0.8rem; }
.patient-profile-aesthetic-summary > div { display: flex; flex-direction: column; padding: 0.55rem; border-radius: 9px; background: #f5f8f7; }
.patient-profile-aesthetic-summary small { color: #7f8f8b; font-size: 0.57rem; }
.patient-profile-aesthetic-summary strong { color: #344741; font-size: 0.65rem; }
.patient-profile-aesthetic-card > p { margin: 0 0.8rem 0.75rem; color: #6e807b; font-size: 0.64rem; }

.patient-profile-bed-active {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.38rem 0.6rem;
    border-radius: 999px;
    background: #e5f5f1;
    color: #0b7e72;
    font-size: 0.63rem;
    font-weight: 800;
}

.patient-profile-bed-active i { font-size: 0.9rem; }
.patient-profile-compact-list { max-height: 510px; overflow-y: auto; padding: 0.35rem 0.75rem; }
.patient-profile-compact-list article { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0; border-bottom: 1px solid #e6edeb; }
.patient-profile-compact-list article:last-child { border-bottom: 0; }
.patient-profile-compact-list article > div { display: flex; min-width: 0; flex-direction: column; }
.patient-profile-compact-list strong { color: #30433d; font-size: 0.7rem; }
.patient-profile-compact-list p { margin: 0.1rem 0; color: #6e807b; font-size: 0.62rem; }
.patient-profile-compact-list small { color: #879692; font-size: 0.58rem; }
.patient-triage-category,
.patient-queue-number { display: inline-flex; min-width: 54px; justify-content: center; padding: 0.3rem 0.4rem; border-radius: 8px; font-size: 0.59rem; font-weight: 900; text-transform: uppercase; }
.patient-triage-category.is-merah { background: #fee2e2; color: #b91c1c; }
.patient-triage-category.is-kuning { background: #fef3c7; color: #a16207; }
.patient-triage-category.is-hijau { background: #dcfce7; color: #15803d; }
.patient-triage-category.is-hitam { background: #e5e7eb; color: #1f2937; }
.patient-queue-number { background: #e1f3ef; color: #087d71; }

@media (max-width: 991.98px) {
    .patient-profile-facts,
    .patient-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .patient-profile-overview-grid { grid-template-columns: 1fr; }
    .patient-profile-record-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .patient-profile-topbar { align-items: stretch; flex-direction: column; }
    .patient-profile-back { color: #fff; }
    .patient-profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .patient-profile-actions .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .patient-profile-hero { align-items: flex-start; flex-direction: column; padding: 1.2rem; }
    .patient-profile-avatar { width: 58px; height: 58px; flex-basis: 58px; border-radius: 17px; font-size: 1.3rem; }
    .patient-profile-contact { min-width: 0; align-items: flex-start; }
    .patient-profile-facts { grid-template-columns: 1fr; }
    .patient-profile-tabs { margin-right: -0.75rem; margin-left: -0.75rem; border-right: 0; border-left: 0; border-radius: 0; }
    .patient-profile-content { margin-right: -0.75rem; margin-left: -0.75rem; padding: 0.85rem; border-right: 0; border-left: 0; border-radius: 0; }
    .patient-profile-section-heading { align-items: flex-start; flex-direction: column; }
    .patient-profile-section-heading .btn { width: 100%; }
    .patient-profile-stats { grid-template-columns: 1fr 1fr; }
    .patient-profile-data-list { grid-template-columns: 1fr; }
    .patient-profile-data-list .is-wide { grid-column: auto; }
    .patient-visit-row { grid-template-columns: 76px minmax(0, 1fr) 28px; }
    .patient-visit-row__status { display: none; }
    .patient-profile-timeline::before { left: 15px; }
    .patient-profile-timeline article { grid-template-columns: 34px minmax(0, 1fr); }
    .patient-profile-timeline time { grid-column: 2; grid-row: 1; align-items: baseline; flex-direction: row; gap: 0.3rem; text-align: left; }
    .patient-profile-timeline__icon { grid-column: 1; grid-row: 1 / 3; }
    .patient-profile-timeline article > div { grid-column: 2; }
    .patient-profile-aesthetic-summary { grid-template-columns: 1fr; }
}

@media (max-width: 479.98px) {
    .patient-profile-actions { grid-template-columns: 1fr; }
    .patient-profile-actions .btn:last-child:nth-child(odd) { grid-column: auto; }
    .patient-profile-identity { align-items: flex-start; }
    .patient-profile-chips { gap: 0.3rem; }
    .patient-profile-stats { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .page[data-page-type="list"] > .bg-light,
    .page[data-page-type="add"] > .bg-light,
    .page[data-page-type="edit"] > .bg-light,
    .page[data-page-type="view"] > .bg-light {
        padding: 14px !important;
        border-radius: 15px;
    }

    .page[data-page-type="list"] .page-content,
    .page[data-page-type="add"] .page-content,
    .page[data-page-type="edit"] .page-content,
    .page[data-page-type="view"] .page-content {
        border-radius: 15px !important;
    }

    .page[data-page-type="list"] .table-responsive {
        border-radius: 14px;
    }

    .page[data-page-type="add"] .page-form,
    .page[data-page-type="edit"] .page-form {
        padding: 17px;
    }

    .page[data-page-type="add"] .page-form button[type="submit"],
    .page[data-page-type="edit"] .page-form button[type="submit"] {
        width: 100%;
    }
}

/* Accessibility and responsive shell refinements (2026-08). */
:where(a, button, input, select, textarea, [role="button"]):focus-visible {
    outline: 3px solid rgba(15, 159, 143, .45) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px #fff !important;
}

.sidebar-mobile-close,
.sidebar-backdrop {
    display: none;
}

.command-item[hidden] {
    display: none !important;
}

.command-item.is-command-active {
    background: #e7f8f4 !important;
    box-shadow: inset 3px 0 #0f9f8f;
}

.command-filter-btn {
    min-height: 36px;
}

.patient-action,
.modern-admin-actions a,
.table .btn-sm {
    min-width: 40px;
    min-height: 40px;
}

#main-content .text-muted,
#main-content .text-secondary {
    color: #596579 !important;
}

@media (max-width: 991.98px) {
    #sidebar.floating-sidebar,
    #sidebar.floating-sidebar.active {
        width: min(320px, calc(100vw - 32px)) !important;
        margin-left: 0 !important;
        transform: translateX(calc(-100% - 36px)) !important;
        visibility: hidden;
        z-index: 1055 !important;
        transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s !important;
    }

    #sidebar.floating-sidebar.is-mobile-open {
        transform: translateX(0) !important;
        visibility: visible;
    }

    #sidebar .sidebar-brand-box {
        padding-right: 62px !important;
    }

    .sidebar-mobile-close {
        position: absolute;
        top: 50%;
        right: 14px;
        display: inline-flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1050;
        display: block;
        border: 0;
        background: rgba(15, 23, 42, .55);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease, visibility .2s ease;
    }

    body.sidebar-mobile-open {
        overflow: hidden !important;
    }

    body.sidebar-mobile-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #globalSearchTriggerBtn {
        width: 44px;
        height: 44px;
        justify-content: center;
        padding: 0 !important;
    }

    #globalSearchTriggerBtn > span,
    #globalSearchTriggerBtn > kbd {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    #global-command-palette-modal .modal-dialog {
        width: calc(100% - 20px);
        max-width: none;
        margin: 10px;
    }

    #global-command-palette-modal .modal-content {
        max-height: calc(100dvh - 20px);
    }

    #global-command-palette-modal .modal-header kbd,
    #global-command-palette-modal .modal-footer {
        display: none !important;
    }

    #global-command-palette-modal .modal-body > .sticky-top {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    #global-command-palette-modal .command-filter-btn {
        flex: 0 0 auto;
        min-height: 44px;
    }

    #global-command-palette-modal .command-item {
        min-height: 56px;
    }

    .patient-action,
    .modern-admin-actions a,
    .table .btn-sm {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Standar form: petunjuk ringkas dan searchable select yang nyaman dibaca. */
.form-format-hint {
    display: block;
    margin-top: .38rem;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.35;
}

.selectize-control {
    width: 100%;
}

/* Selectize menyalin class form-select ke wrapper; netralkan dekorasi Bootstrap
   agar tidak muncul bingkai ganda dan ruang kosong di sekeliling kontrol. */
.selectize-control.form-select,
.selectize-control.form-control,
.selectize-control.rounded-3 {
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none;
}

.selectize-control.single .selectize-input,
.selectize-control.multi .selectize-input {
    min-height: 42px;
    padding: .58rem 2.4rem .58rem .85rem;
    border: 1px solid #d6e1df;
    border-radius: .65rem;
    background: #fff;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    font-size: .9rem;
    line-height: 1.45;
}

.selectize-control.single .selectize-input > input,
.selectize-control.multi .selectize-input > input {
    min-width: 4rem;
    color: #1e293b;
    font: inherit;
}

.selectize-control.single .selectize-input::after {
    right: .9rem;
    border-color: #64748b transparent transparent;
}

.selectize-control .selectize-input.focus {
    border-color: #0f9f8f;
    box-shadow: 0 0 0 .2rem rgba(15, 159, 143, .14);
}

.selectize-dropdown {
    z-index: 2055;
    margin-top: .3rem;
    overflow: hidden;
    border: 1px solid #d6e1df;
    border-radius: .65rem;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
}

.selectize-dropdown .option {
    padding: .68rem .85rem;
    color: #334155;
    line-height: 1.35;
}

.selectize-dropdown .active {
    background: #e8f7f4;
    color: #0f766e;
}

.was-validated select:invalid + .selectize-control .selectize-input,
select.is-invalid + .selectize-control .selectize-input {
    border-color: #dc3545;
}

/* Fondasi halaman operasional: kartu metrik, filter, ikon, dan tabel. */
.material-icons {
    overflow: visible;
    line-height: 1;
    vertical-align: middle;
}

.operational-page {
    max-width: 1480px;
}

.operational-kpi-card {
    min-height: 124px;
    padding: 1.1rem 1.15rem !important;
    overflow: visible;
    border: 1px solid rgba(219, 229, 227, .9) !important;
    box-shadow: 0 10px 25px rgba(31, 55, 50, .07) !important;
}

.operational-kpi-card > .d-flex {
    align-items: flex-start !important;
    gap: .75rem;
}

.operational-kpi-card > .d-flex > .material-icons {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    margin-top: -.2rem;
    border-radius: 13px;
    background: #e8f7f4;
    font-size: 1.3rem !important;
}

.operational-kpi-card > .d-flex > .material-icons.text-danger { background: #fff0f2; }
.operational-kpi-card > .d-flex > .material-icons.text-amber-dark { background: #fff6dd; }
.operational-kpi-card > .d-flex > .material-icons.text-primary { background: #edf3ff; }
.operational-kpi-card > .d-flex > .material-icons.text-emerald { background: #e6f7ef; }
.operational-kpi-card h2,
.operational-kpi-card h3 { margin-top: .45rem; line-height: 1.1; }

.operational-filter-card,
.billing-filter-card {
    padding: 1.15rem 1.25rem !important;
    border: 1px solid #dde7e5 !important;
    box-shadow: 0 9px 24px rgba(31, 55, 50, .06) !important;
}

.operational-filter-card form > [class*="col-"],
.billing-filter-card form > [class*="col-"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.operational-filter-card .form-control,
.operational-filter-card .form-select,
.billing-filter-card .form-control,
.billing-filter-card .form-select {
    min-height: 44px;
    border-color: #d6e1df;
    border-radius: 11px !important;
}

.operational-filter-card .btn,
.billing-filter-card .btn,
.billing-filter-actions .btn {
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 11px !important;
}

.billing-filter-actions {
    flex-direction: row !important;
}

.operational-list-card,
.billing-list-card {
    overflow: hidden;
    border: 1px solid #dde7e5 !important;
    box-shadow: 0 12px 30px rgba(31, 55, 50, .07) !important;
}

.operational-list-heading {
    display: flex;
    min-height: 78px;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2ebe9;
    background: linear-gradient(110deg, #fff 60%, #f3fbf9);
}

.operational-list-heading > span {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #e4f6f2;
    color: #0f8f82;
}

.operational-list-heading > span .material-icons { font-size: 1.3rem; }
.operational-list-heading h2 { margin: 0; color: #24332f; font-size: 1rem; font-weight: 800; }
.operational-list-heading p { margin: .18rem 0 0; color: #7b8c88; font-size: .74rem; }

.operational-list-card .table-responsive,
.billing-list-card .table-responsive {
    overflow-x: auto;
}

.operational-list-card table,
.billing-list-card table {
    min-width: 1040px;
    table-layout: auto;
}

.operational-list-card thead th,
.billing-list-card thead th {
    padding: .95rem 1rem !important;
    border-bottom: 1px solid #dfe8e6 !important;
    background: #f3f7f6 !important;
    color: #687a76 !important;
    font-size: .66rem;
    letter-spacing: .08em;
    line-height: 1.35;
    white-space: normal;
}

.operational-list-card tbody td,
.billing-list-card tbody td {
    padding: 1rem !important;
    border-bottom-color: #e8efed !important;
    line-height: 1.45;
}

.operational-list-card tbody tr:last-child td,
.billing-list-card tbody tr:last-child td { border-bottom: 0; }

.operational-list-card .responsive-record-actions .d-inline-flex {
    align-items: stretch;
}

.operational-list-card .responsive-record-actions .btn {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    border-radius: 10px;
    line-height: 1.25;
}

.pharmacy-page .operational-list-card table { min-width: 1120px; }
.pharmacy-page .responsive-record-actions { min-width: 230px; }
.billing-list-card table { min-width: 1180px; }
.billing-list-card .responsive-record-actions { min-width: 280px; }

.patient-list-toolbar > * {
    min-width: 0;
    align-self: stretch;
}

.patient-list-toolbar .patient-search-field,
.patient-list-toolbar .patient-filter-field,
.patient-list-toolbar .patient-filter-button,
.patient-list-toolbar .patient-reset-button {
    min-height: 44px;
}

.operational-filter-actions{display:flex!important;align-items:flex-end;justify-content:flex-end!important}.filter-reset-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:.35rem;padding:.55rem 1rem;border:1px solid #d8e2e0;border-radius:11px;background:#fff;color:#60716d;font-size:.73rem;font-weight:800;text-decoration:none;white-space:nowrap}.filter-reset-button:hover{border-color:#efcbd1;background:#fff5f6;color:#c63d50}.filter-reset-button .material-icons,.filter-auto-note .material-icons{font-size:1rem}.filter-auto-note{display:inline-flex;min-height:44px;align-items:center;gap:.3rem;color:#8a9996;font-size:.68rem;font-weight:700;white-space:nowrap}.billing-item-count{display:block;margin-top:.2rem;color:#0f8f82!important;font-size:.64rem;font-weight:700}.billing-row-actions{display:flex;justify-content:flex-end;gap:.35rem}.billing-row-actions .btn{display:inline-flex;min-height:36px;align-items:center;justify-content:center;gap:.25rem;padding:.4rem .6rem;border-radius:9px;font-size:.68rem;font-weight:800}.billing-row-actions .material-icons{font-size:.95rem}.billing-payment-panel{margin-top:.5rem;border:1px solid #dbe6e3;border-radius:10px;background:#f7fbfa;text-align:left}.billing-payment-panel summary{display:flex;min-height:38px;align-items:center;justify-content:center;gap:.3rem;padding:.45rem .65rem;color:#087f73;font-size:.68rem;font-weight:800;cursor:pointer;list-style:none}.billing-payment-panel summary::-webkit-details-marker{display:none}.billing-payment-panel summary .material-icons{font-size:1rem}.billing-payment-panel[open] summary{border-bottom:1px solid #dbe6e3}.billing-payment-panel .billing-payment-form{min-width:0;border:0;border-radius:0 0 10px 10px}

@media(max-width:767.98px){.operational-filter-actions{align-items:stretch;justify-content:stretch!important}.filter-reset-button{width:100%}.filter-auto-note{justify-content:center;width:100%}.billing-row-actions{display:grid;grid-template-columns:repeat(3,1fr)}}

@media (max-width: 767.98px) {
    .operational-kpi-card { min-height: 112px; }
    .operational-filter-card { padding: 1rem !important; }
    .operational-list-card table,
    .billing-list-card table { min-width: 0; }
    .billing-list-card .responsive-record-actions { min-width: 0; }
}

/* Daftar rekam klinis berubah menjadi kartu pada layar kecil agar aksi utama
   tidak tersembunyi di luar viewport. */
@media (max-width: 767.98px) {
    .responsive-record-table,
    .responsive-record-table tbody,
    .responsive-record-table tr,
    .responsive-record-table td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .responsive-record-table {
        border: 0 !important;
        background: transparent !important;
    }

    .responsive-record-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .responsive-record-table tbody tr {
        margin: 0 0 14px;
        padding: 14px 15px;
        border: 1px solid #dfe8e6;
        border-radius: 14px;
        background: #fff !important;
        box-shadow: 0 6px 18px rgba(31, 55, 50, .06);
    }

    .responsive-record-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .responsive-record-table tbody td {
        display: grid;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        gap: 12px;
        height: auto !important;
        padding: 9px 0 !important;
        border: 0 !important;
        border-bottom: 1px dashed #e4ebe9 !important;
        background: transparent !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .responsive-record-table tbody td::before {
        content: attr(data-label);
        color: #7b8b87;
        font-size: .65rem;
        font-weight: 800;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

    .responsive-record-table tbody td.responsive-record-actions,
    .responsive-record-table tbody td.td-btn {
        position: static !important;
        display: block;
        padding-top: 13px !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    .responsive-record-table tbody td.responsive-record-actions::before,
    .responsive-record-table tbody td.td-btn::before {
        display: block;
        margin-bottom: 8px;
    }

    .responsive-record-table .responsive-record-actions .d-inline-flex,
    .responsive-record-table .responsive-record-actions .btn,
    .responsive-record-table .td-btn .btn {
        flex-wrap: wrap;
    }

    .responsive-record-table .responsive-record-actions > .btn,
    .responsive-record-table .responsive-record-actions > a.btn {
        width: 100%;
        justify-content: center;
    }

    .responsive-record-table td[colspan] {
        display: block;
        padding: 24px 10px !important;
        text-align: center !important;
    }

    .responsive-record-table td[colspan]::before {
        display: none;
    }

    .responsive-record-table .badge,
    .responsive-record-table .queue-status,
    .responsive-record-table .queue-number {
        max-width: 100%;
        white-space: normal;
    }

    /* Halaman CRUD generator lama mengikuti pola kartu list yang sama. */
    .legacy-record-table,
    .legacy-record-table tbody,
    .legacy-record-table tr,
    .legacy-record-table td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .legacy-record-table {
        border: 0 !important;
        background: transparent !important;
    }

    .legacy-record-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .legacy-record-table tbody tr {
        margin: 0 0 12px;
        padding: 13px 14px;
        border: 1px solid #dfe8e6 !important;
        border-radius: 14px;
        background: #fff !important;
        box-shadow: 0 5px 16px rgba(31, 55, 50, .055);
    }

    .legacy-record-table tbody td {
        display: grid;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        gap: 11px;
        height: auto !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px dashed #e4ebe9 !important;
        background: transparent !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .legacy-record-table tbody td::before {
        content: attr(data-label);
        color: #7b8b87;
        font-size: .64rem;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .legacy-record-table tbody td.td-btn {
        display: block;
        padding-top: 12px !important;
        border-bottom: 0 !important;
        text-align: left !important;
        box-shadow: none !important;
    }

    .legacy-record-table tbody td.td-btn::before {
        display: block;
        margin-bottom: 8px;
    }

    .legacy-record-table tbody td.td-btn .btn {
        width: 38px;
        height: 36px;
        display: inline-grid;
        place-items: center;
        margin: 0 4px 4px 0;
        padding: 0;
    }

    .legacy-record-table td[colspan] {
        display: block;
        padding: 22px 10px !important;
        text-align: center !important;
    }

    .legacy-record-table td[colspan]::before {
        display: none;
    }

    .triage-record-table tbody tr.table-danger {
        border-color: #f1a4a4;
        background: #fff5f5 !important;
    }
}

/* ========================================================================== */
/* Data pasien — list workspace                                                */
/* ========================================================================== */
.patient-list-page {
    padding-bottom: 32px;
}

.patient-list-page .patient-list-card {
    overflow: hidden;
    border: 1px solid #dce8e5;
    border-radius: 20px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 42px rgba(25, 55, 49, .09);
}

.patient-list-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px 18px;
}

.patient-list-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: var(--clinic-primary, #0f9f8f);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.patient-list-eyebrow .material-icons {
    font-size: 17px;
}

.patient-list-heading h1,
.patient-list-heading h2 {
    margin: 0;
    color: var(--clinic-ink, #172033);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.patient-list-heading p {
    margin: 6px 0 0;
    color: #71817f;
    font-size: .84rem;
}

.patient-add-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 10px 17px;
    border: 0 !important;
    border-radius: 12px !important;
    white-space: nowrap;
    box-shadow: 0 9px 20px rgba(15, 159, 143, .19);
}

.patient-add-button .material-icons {
    font-size: 19px;
}

.patient-list-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 190px) minmax(150px, 175px) auto auto;
    gap: 10px;
    padding: 16px 26px;
    border-top: 1px solid #edf2f1;
    border-bottom: 1px solid #e4ecea;
    background: #f8fbfa;
}

.patient-search-field {
    position: relative;
    display: block;
    margin: 0;
}

.patient-search-field > .material-icons {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 14px;
    color: #879995;
    font-size: 19px;
    transform: translateY(-50%);
    pointer-events: none;
}

.patient-search-field .form-control {
    min-height: 43px;
    padding-left: 43px;
    border-color: #d9e4e1;
    border-radius: 11px;
    background: #fff;
    font-size: .84rem;
}

.patient-filter-field {
    display: block;
    margin: 0;
}

.patient-filter-field .form-select {
    min-height: 43px;
    border-color: #d9e4e1;
    border-radius: 11px;
    background-color: #fff;
    color: #40514e;
    font-size: .81rem;
}

.patient-filter-button,
.patient-reset-button {
    display: inline-flex;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-inline: 14px;
    border-radius: 11px !important;
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
}

.patient-filter-button .material-icons,
.patient-reset-button .material-icons {
    font-size: 18px;
}

.patient-reset-button {
    border: 1px solid #e3e9e8;
    color: #6c7d7a;
    background: #fff;
}

.patient-reset-button:hover {
    color: #b8404d;
    border-color: #f2cdd2;
    background: #fff6f7;
}

.patient-list-summary {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 26px;
    color: #758581;
    font-size: .76rem;
}

.patient-list-summary strong {
    margin-right: 4px;
    color: #293b37;
    font-size: .94rem;
}

.patient-search-result {
    overflow: hidden;
    max-width: 50%;
    padding: 5px 9px;
    border-radius: 999px;
    color: #087f73;
    background: #e9f8f5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-top: 1px solid #edf2f1;
    -webkit-overflow-scrolling: touch;
}

.patient-list-page .patient-table {
    width: 100%;
    min-width: 980px;
    margin: 0;
    border: 0 !important;
    table-layout: fixed;
}

.patient-list-page .patient-table th:nth-child(1) { width: 24%; }
.patient-list-page .patient-table th:nth-child(2) { width: 15%; }
.patient-list-page .patient-table th:nth-child(3) { width: 15%; }
.patient-list-page .patient-table th:nth-child(4) { width: 16%; }
.patient-list-page .patient-table th:nth-child(5) { width: 20%; }
.patient-list-page .patient-table th:nth-child(6) { width: 10%; }

.patient-list-page .patient-table > thead > tr > th {
    padding: 13px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid #dde8e5 !important;
    color: #728480 !important;
    background: #f4f8f7 !important;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.patient-list-page .patient-table > tbody > tr > td {
    height: 68px;
    padding: 10px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid #e8efed !important;
    color: #31423f;
    background: #fff;
    font-size: .81rem;
    text-align: left;
    vertical-align: middle;
}

.patient-list-page .patient-table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

.patient-list-page .patient-table > tbody > tr:hover > td {
    background: #f4fbf9 !important;
}

.patient-identity-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.patient-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 11px;
    color: #087f73;
    background: linear-gradient(145deg, #dff5f0, #edf9f7);
    font-size: .82rem;
    font-weight: 900;
}

.patient-identity-cell > span:last-child,
.patient-cell-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.patient-identity-cell strong,
.patient-cell-stack strong,
.patient-cell-stack a {
    overflow: hidden;
    color: #263834;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-cell-stack a:hover {
    color: var(--clinic-primary, #0f9f8f);
}

.patient-identity-cell small,
.patient-cell-stack small {
    overflow: hidden;
    color: #82918e;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-rm-code {
    display: inline-flex;
    max-width: 100%;
    padding: 6px 9px;
    border: 1px solid #c9ebe5;
    border-radius: 8px;
    color: #087f73;
    background: #effaf8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .72rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.patient-list-page .patient-table .td-btn {
    position: sticky;
    z-index: 2;
    right: 0;
    min-width: 112px;
    padding-right: 14px !important;
    background: #fff;
    box-shadow: -12px 0 18px rgba(255, 255, 255, .92);
}

.patient-list-page .patient-table tr:hover .td-btn {
    background: #f4fbf9 !important;
}

.patient-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.patient-action {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    text-decoration: none !important;
    transition: transform .16s ease, color .16s ease, background .16s ease;
}

.patient-action:hover {
    transform: translateY(-1px);
}

.patient-action .material-icons {
    font-size: 17px;
}

.patient-action-view {
    color: #078d80;
    border-color: #cbece6;
    background: #eefaf8;
}

.patient-action-edit {
    color: #a76d00;
    border-color: #f2dfad;
    background: #fff9e9;
}

.patient-action-delete {
    color: #d83d52;
    border-color: #f3cbd1;
    background: #fff4f5;
}

.patient-action-view:hover { color: #fff; background: #0f9f8f; }
.patient-action-edit:hover { color: #fff; background: #d99a1b; }
.patient-action-delete:hover { color: #fff; background: #e5485d; }

.patient-list-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    min-height: 66px;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    border-top: 1px solid #e5ecea;
    background: #fbfdfd;
}

.patient-page-info {
    color: #71817f;
    font-size: .73rem;
    white-space: nowrap;
}

/* Halaman list generator lain mengikuti workspace yang sama tanpa mengubah
   kontrak controller lama. Header, filter, tabel, dan footer terasa satu card. */
.page[data-page-type="list"]:not(.patient-list-page) {
    padding: 0 12px 32px;
}

.page[data-page-type="list"]:not(.patient-list-page) > .bg-light {
    width: 100%;
    margin-bottom: 0 !important;
    padding: 20px 22px !important;
    border: 1px solid #dce8e5;
    border-bottom-color: #edf2f1;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 10px 30px rgba(31, 55, 50, .06);
}

.page[data-page-type="list"]:not(.patient-list-page) > .bg-light > .container-fluid {
    padding: 0 !important;
}

.page[data-page-type="list"]:not(.patient-list-page) > .bg-light > .container-fluid > .row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(270px, 360px);
    align-items: center;
    gap: 14px !important;
    margin: 0 !important;
}

.page[data-page-type="list"]:not(.patient-list-page) > .bg-light .h5 {
    margin: 0;
    color: #293b37 !important;
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 800;
}

.page[data-page-type="list"]:not(.patient-list-page) > .bg-light .col,
.page[data-page-type="list"]:not(.patient-list-page) > .bg-light .col-auto,
.page[data-page-type="list"]:not(.patient-list-page) > .bg-light .col-md-3 {
    width: auto;
    max-width: none;
    padding: 0;
}

.page[data-page-type="list"]:not(.patient-list-page) > .bg-light .btn-primary {
    display: inline-flex;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 0;
    border-radius: 11px;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 159, 143, .16);
}

.page[data-page-type="list"]:not(.patient-list-page) > .bg-light .search .input-group {
    flex-wrap: nowrap;
}

.page[data-page-type="list"]:not(.patient-list-page) > .bg-light .search .form-control {
    min-height: 43px;
    border-color: #d9e4e1;
    border-radius: 11px 0 0 11px;
    font-size: .84rem;
}

.page[data-page-type="list"]:not(.patient-list-page) > .bg-light .search .btn {
    width: 48px;
    min-height: 43px;
    padding: 0;
    border-radius: 0 11px 11px 0;
    box-shadow: none;
}

.page[data-page-type="list"]:not(.patient-list-page) > div:not(.bg-light) {
    width: 100%;
}

.page[data-page-type="list"]:not(.patient-list-page) > div:not(.bg-light) > .container-fluid > .row > .comp-grid {
    padding-inline: 0;
}

.page[data-page-type="list"]:not(.patient-list-page) .comp-grid > div:first-child > .row.gutter-sm {
    width: 100%;
    margin: 0;
    padding: 13px 18px;
    border-right: 1px solid #dde8e5;
    border-left: 1px solid #dde8e5;
    background: #f8fbfa;
}

@media (max-width: 991.98px) {
    .page[data-page-type="list"]:not(.patient-list-page) > .bg-light > .container-fluid > .row {
        grid-template-columns: minmax(180px, 1fr) auto;
    }

    .page[data-page-type="list"]:not(.patient-list-page) > .bg-light .col-md-3 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .page[data-page-type="list"]:not(.patient-list-page) {
        padding-inline: 6px;
    }

    .page[data-page-type="list"]:not(.patient-list-page) > .bg-light {
        padding: 17px !important;
    }

    .page[data-page-type="list"]:not(.patient-list-page) > .bg-light > .container-fluid > .row {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 12px !important;
    }

    .page[data-page-type="list"]:not(.patient-list-page) > .bg-light .btn-primary,
    .page[data-page-type="list"]:not(.patient-list-page) > .bg-light .search {
        width: 100%;
    }

    .page[data-page-type="list"]:not(.patient-list-page) .comp-grid > div:first-child > .row.gutter-sm {
        padding: 12px 14px;
    }
}

.page[data-page-type="list"]:not(.patient-list-page) .comp-grid > div:first-child > .row.gutter-sm .btn {
    min-height: 39px;
    border-color: #d8e5e2;
    border-radius: 10px;
    color: #536762;
    background: #fff;
    font-size: .79rem;
}

.page[data-page-type="list"]:not(.patient-list-page) .page-content {
    margin-top: 0;
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 16px 36px rgba(31, 55, 50, .07);
}

.page[data-page-type="list"]:not(.patient-list-page) .page-content + .mt-3,
.page[data-page-type="list"]:not(.patient-list-page) .page-content > .mt-3 {
    margin-top: 0 !important;
    padding: 13px 18px;
    border-top: 1px solid #e5ecea;
    background: #fbfdfd;
}

.page[data-page-type="list"]:not(.patient-list-page) .table > thead > tr > th,
.page[data-page-type="list"]:not(.patient-list-page) .table > tbody > tr > td {
    text-align: left !important;
}

.page[data-page-type="list"]:not(.patient-list-page) .table > tbody > tr > td {
    height: 58px;
}

.page[data-page-type="list"]:not(.patient-list-page) .table .td-btn {
    text-align: right !important;
}

.page[data-page-type="list"]:not(.patient-list-page) .export-btn-holder {
    display: none !important;
}

.page[data-page-type="list"]:not(.patient-list-page) .pagination {
    gap: 4px;
    padding: 0;
    border: 0;
}

.page[data-page-type="list"]:not(.patient-list-page) .page-link {
    min-width: 32px;
    padding: 6px 9px;
    border-radius: 8px !important;
    font-size: .75rem;
    text-align: center;
}

.patient-list-footer nav {
    justify-self: end;
}

.patient-list-footer .pagination {
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
}

.patient-list-footer .page-link {
    min-width: 32px;
    padding: 6px 9px;
    border: 1px solid #dce6e4;
    border-radius: 8px !important;
    color: #52635f;
    background: #fff;
    font-size: .75rem;
    text-align: center;
}

@media (max-width: 1199.98px) {
    .patient-list-toolbar {
        grid-template-columns: minmax(260px, 1fr) minmax(160px, 190px) auto;
    }

    .patient-order-field {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .patient-list-page {
        padding-bottom: 18px;
    }

    .patient-list-page .patient-list-card {
        overflow: visible;
        border-radius: 16px;
    }

    .patient-list-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        padding: 19px 17px 16px;
    }

    .patient-add-button {
        justify-content: center;
        width: 100%;
    }

    .patient-list-toolbar {
        grid-template-columns: 1fr 1fr;
        padding: 14px 17px;
    }

    .patient-search-field {
        grid-column: 1 / -1;
    }

    .patient-filter-field {
        display: block;
    }

    .patient-filter-button,
    .patient-reset-button {
        width: 100%;
    }

    .patient-list-summary {
        padding: 10px 17px;
    }

    .patient-table-wrap {
        overflow: visible;
        padding: 0 12px 12px;
        border-top: 0;
        background: #f8fbfa;
    }

    .patient-list-page .patient-table,
    .patient-list-page .patient-table tbody,
    .patient-list-page .patient-table tr,
    .patient-list-page .patient-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .patient-list-page .patient-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .patient-list-page .patient-table tbody tr {
        position: relative;
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid #dfe9e7;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(31, 55, 50, .05);
    }

    .patient-list-page .patient-table > tbody > tr > td {
        height: auto;
        padding: 8px 0 !important;
        border-bottom: 1px dashed #e2ebe9 !important;
        background: transparent !important;
    }

    .patient-list-page .patient-table > tbody > tr > td:not(:first-child):not(.td-btn) {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
    }

    .patient-list-page .patient-table > tbody > tr > td:not(:first-child):not(.td-btn)::before {
        content: attr(data-label);
        color: #84938f;
        font-size: .65rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .patient-list-page .patient-table > tbody > tr > td:first-child {
        padding-top: 0 !important;
        padding-bottom: 13px !important;
    }

    .patient-list-page .patient-table .td-btn {
        position: static;
        padding: 12px 0 0 !important;
        border-bottom: 0 !important;
        box-shadow: none;
    }

    .patient-row-actions {
        justify-content: flex-start;
    }

    .patient-action {
        width: 38px;
        height: 36px;
    }

    .patient-list-footer {
        grid-template-columns: 1fr;
        justify-items: stretch;
        padding: 15px 17px;
    }

    .patient-page-info {
        text-align: center;
        white-space: normal;
    }

    .patient-list-footer nav {
        justify-self: center;
    }
}

@media (max-width: 479.98px) {
    .patient-list-toolbar {
        grid-template-columns: 1fr;
    }

    .patient-search-field {
        grid-column: auto;
    }

    .patient-list-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .patient-search-result {
        max-width: 100%;
    }
}

/* Fondasi visual modul kustom: kontras hero, utility card, dan status AJAX. */
#page-content > .container-fluid.py-4 > .d-flex:first-child > div:first-child > h1,
#page-content > .container-fluid.py-4 > .d-flex:first-child > div:first-child > h2,
#page-content > .container-fluid.py-4 > .d-flex:first-child > div:first-child > h3 {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(2, 22, 19, .42);
}

#page-content > .container-fluid.py-4 > .d-flex:first-child > div:first-child > p {
    color: rgba(255, 255, 255, .84) !important;
    text-shadow: 0 1px 8px rgba(2, 22, 19, .34);
}

#page-content > .container-fluid.py-4 > .d-flex:first-child.border-bottom {
    border-bottom-color: rgba(255, 255, 255, .54) !important;
}

#page-content > .container-fluid.py-4 > .ui-page-header {
    border-bottom-color: rgba(255, 255, 255, .54);
}

#page-content > .container-fluid.py-4 > .ui-page-header h1 {
    color: #fff;
    text-shadow: 0 2px 12px rgba(2, 22, 19, .42);
}

#page-content > .container-fluid.py-4 > .ui-page-header p {
    color: rgba(255, 255, 255, .84);
    text-shadow: 0 1px 8px rgba(2, 22, 19, .34);
}

#page-content > .container-fluid.py-4 > .ui-page-header .ui-page-header__eyebrow {
    color: #8ff2e5;
}

.card.bg-danger { background-color: var(--bs-danger, #f5365c) !important; }
.card.bg-success { background-color: var(--bs-success, #16a36a) !important; }
.card.bg-warning { background-color: var(--bs-warning, #d6a83e) !important; }
.card.bg-dark,
.card.bg-slate-900 { background-color: #0f172a !important; }
.card.bg-teal-dark { background-color: #0f766e !important; }

.card.bg-danger.text-white,
.card.bg-success.text-white,
.card.bg-dark.text-white,
.card.bg-slate-900.text-white,
.card.bg-teal-dark.text-white {
    color: #fff !important;
}

.ajax-page-state {
    min-height: 220px;
}

.ajax-page-state .loader {
    width: 42px;
    height: 42px;
}

.ajax-page-error .material-icons {
    font-size: 44px;
}

@media (max-width: 767.98px) {
    #page-content > .container-fluid.py-4 {
        padding-top: 1.25rem !important;
    }

    #page-content > .container-fluid.py-4 > .d-flex:first-child {
        margin-bottom: 1.25rem !important;
    }

    #page-content > .container-fluid.py-4 > .d-flex:first-child > div:first-child > h3 {
        font-size: clamp(1.35rem, 7vw, 1.75rem);
        line-height: 1.12;
    }
}

/* ==========================================================================
   Tahap 1: Command Palette, Enhanced Sidebar & Toast Styling
   ========================================================================== */
.command-palette-modal .modal-content {
    border: 1px solid rgba(15, 159, 143, 0.18) !important;
    box-shadow: 0 25px 60px -15px rgba(15, 38, 35, 0.35) !important;
}

.command-item {
    transition: all 0.18s ease-in-out;
    margin-bottom: 2px;
}

.command-item:hover, .command-item:focus {
    background-color: #f0fdf9 !important;
    transform: translateX(4px);
}

.command-item:hover .text-slate-900 {
    color: #0f766e !important;
}

.command-filter-btn {
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

#globalSearchTriggerBtn:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Sidebar Navigasi Enhancement */
#sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: #475569;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.18s ease;
    margin-bottom: 2px;
}

#sidebar .nav-link .menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f766e;
    font-size: 20px;
    width: 24px;
}

#sidebar .nav-link:hover {
    background-color: #f1f5f9;
    color: #0f766e;
}

#sidebar .nav-link.active,
#sidebar .nav-item.active > .nav-link {
    background: linear-gradient(135deg, #0F9F8F 0%, #0d887a 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15, 159, 143, 0.28);
}

#sidebar .nav-link.active .menu-icon,
#sidebar .nav-item.active > .nav-link .menu-icon {
    color: #ffffff !important;
}

#sidebar .dropdown-menu {
    border: none;
    background: #f8fafc;
    border-radius: 10px;
    padding: 6px;
    margin: 4px 0 6px 12px;
    border-left: 2px solid #cbd5e1;
}

#sidebar .dropdown-menu .dropdown-item {
    font-size: 0.82rem;
    padding: 7px 12px;
    border-radius: 8px;
    color: #64748b;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}

#sidebar .dropdown-menu .dropdown-item:hover {
    background-color: #e2e8f0;
    color: #0f766e;
}

#sidebar .dropdown-menu .dropdown-item.active {
    background-color: #ccfbf1;
    color: #0f766e;
    font-weight: 700;
}

/* ==========================================================================
   CLINICAL WORKSTATION, RME SOAP & MODERN SIMKLI DESIGN SYSTEM
   ========================================================================== */

/* Buttons */
.btn-teal-action {
    background-color: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-teal-action:hover, .btn-teal-action:focus {
    background-color: #0d5f58 !important;
    border-color: #0d5f58 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.35);
}

.btn-outline-teal {
    color: #0f766e !important;
    border-color: #0f766e !important;
    font-weight: 600;
    transition: all 0.15s ease;
}
.btn-outline-teal:hover {
    background-color: #0f766e !important;
    color: #ffffff !important;
}

.btn-emerald {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
    font-weight: 600;
}
.btn-emerald:hover {
    background-color: #047857 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}

.btn-indigo {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 600;
}
.btn-indigo:hover {
    background-color: #4338ca !important;
    color: #ffffff !important;
}

.btn-rose {
    background-color: #e11d48 !important;
    border-color: #e11d48 !important;
    color: #ffffff !important;
    font-weight: 600;
}
.btn-rose:hover {
    background-color: #be123c !important;
    color: #ffffff !important;
}

/* Color Tokens & Subtles */
.bg-teal-dark { background-color: #0f766e !important; }
.text-teal-dark { color: #0f766e !important; }
.text-teal-light { color: #ccfbf1 !important; }
.bg-teal-subtle { background-color: #ccfbf1 !important; color: #0f766e !important; }
.bg-teal-accent { background-color: #99f6e4 !important; }
.border-teal-accent { border-color: #0d9488 !important; box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2) !important; }

.bg-emerald-subtle { background-color: #d1fae5 !important; color: #047857 !important; }
.text-emerald { color: #047857 !important; }
.border-emerald { border-color: #a7f3d0 !important; }

.bg-amber-subtle { background-color: #fef3c7 !important; color: #b45309 !important; }
.text-amber-dark { color: #b45309 !important; }

.bg-cyan-subtle { background-color: #cffafe !important; color: #0891b2 !important; }
.text-cyan { color: #0891b2 !important; }

.bg-indigo-subtle { background-color: #eef2ff !important; color: #4f46e5 !important; }
.text-indigo { color: #4f46e5 !important; }

.bg-purple-subtle { background-color: #f3e8ff !important; color: #7e22ce !important; }
.text-purple { color: #7e22ce !important; }

.bg-pink-subtle { background-color: #fce7f3 !important; color: #db2777 !important; }
.text-pink { color: #db2777 !important; }
.border-pink { border-color: #fbcfe8 !important; }

.shadow-2xs { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important; }
.shadow-xs { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important; }

/* Clinical Workstation Hero Card */
.clinical-exam-hero {
    background: linear-gradient(135deg, #0F766E 0%, #0F9F8F 100%);
    border-radius: 16px;
    padding: 24px;
    color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(15, 118, 110, 0.25);
}

.clinical-exam-hero__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.clinical-exam-back {
    color: #ccfbf1;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}
.clinical-exam-back:hover {
    color: #ffffff;
}

.clinical-patient-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
}

.clinical-patient-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #0f766e;
    font-size: 1.25rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.clinical-patient-card span {
    display: flex;
    flex-direction: column;
}

.clinical-patient-card small {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #ccfbf1;
    letter-spacing: 0.5px;
}

.clinical-patient-card strong {
    font-size: 1.05rem;
    line-height: 1.2;
}

.clinical-patient-card em {
    font-size: 0.78rem;
    color: #e6fffa;
    font-style: normal;
    font-family: monospace;
}

/* Quick Diagnostic Template Buttons */
.quick-template-btn {
    transition: all 0.18s ease;
    border-color: #e2e8f0 !important;
}
.quick-template-btn:hover {
    background-color: #f0fdf4 !important;
    border-color: #0d9488 !important;
    transform: translateX(3px);
}

/* Odontogram FDI Styles */
.tooth-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.dot-normal { background: #94a3b8; }
.dot-caries { background: #dc2626; }
.dot-missing { background: #0f172a; }
.dot-filled { background: #2563eb; }
.dot-crown { background: #d97706; }
.dot-root { background: #7e22ce; }

.tooth-box {
    width: 60px;
    height: 80px;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.tooth-box:hover {
    transform: translateY(-3px);
    border-color: #0d9488 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.tooth-num {
    font-weight: 800;
    font-size: 0.82rem;
    color: #0f172a;
}
.tooth-shape {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px dashed #94a3b8;
    background: #f8fafc;
}
.tooth-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-normal .tooth-shape { background: #f8fafc; border-color: #94a3b8; }
.status-normal .tooth-label { color: #64748b; }
.status-caries .tooth-shape { background: #dc2626; border-color: #991b1b; }
.status-caries .tooth-label { color: #dc2626; }
.status-missing .tooth-shape { background: #0f172a; border-color: #0f172a; }
.status-missing .tooth-label { color: #0f172a; }
.status-filled .tooth-shape { background: #2563eb; border-color: #1d4ed8; }
.status-filled .tooth-label { color: #2563eb; }
.status-crown .tooth-shape { background: #d97706; border-color: #b45309; }
.status-crown .tooth-label { color: #d97706; }
.status-root .tooth-shape { background: #7e22ce; border-color: #581c87; }
.status-root .tooth-label { color: #7e22ce; }

/* Aesthetics Facial Pins */
.facial-canvas-container {
    cursor: crosshair;
    user-select: none;
}
.facial-pin {
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #e11d48;
    border: 2px solid #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.pin-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #ffffff;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Bed Management Cards */
.bed-card {
    background: #ffffff;
    transition: all 0.2s ease;
}
.bed-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.bed-occupied { border-left: 4px solid #dc2626 !important; background: #fffaf0; }
.bed-vacant { border-left: 4px solid #059669 !important; background: #f0fdf4; }
.bed-cleaning { border-left: 4px solid #d97706 !important; background: #fefce8; }

/* ==========================================================================
   MOBILE & TABLET RESPONSIVENESS ENHANCEMENTS (SMARTPHONE / TABLET UX)
   ========================================================================== */

/* Odontogram Scroll Container */
.odontogram-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px 12px 4px;
    display: flex;
    justify-content: center;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.odontogram-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
}

.odontogram-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.odontogram-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

@media (max-width: 991.98px) {
    /* Odontogram Horizontal Panning on Mobile */
    .odontogram-scroll-wrapper {
        justify-content: flex-start !important;
    }

    /* Clinical Workstation Doctor Screen */
    .clinical-exam-page .sticky-top {
        position: static !important;
        top: auto !important;
        margin-bottom: 1rem;
    }

    .clinical-exam-hero {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .clinical-exam-hero__content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .clinical-patient-card {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 10px 14px !important;
    }

    /* Sticky Bottom Actions on Mobile */
    .clinical-form-actions {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        padding: 12px 16px;
        border-top: 1px solid #e2e8f0;
        z-index: 100;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }
}

@media (max-width: 767.98px) {
    /* Top Navbar Mobile Spacing */
    #topbar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Command Palette Modal on Mobile Phone */
    #commandPaletteModal .modal-dialog {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }

    #commandPaletteModal .modal-content {
        max-height: 85vh;
        display: flex;
        flex-direction: column;
    }

    #commandPaletteResults {
        max-height: 55vh !important;
    }

    /* Prescription Row on Mobile */
    .prescription-row .row > div {
        margin-bottom: 6px;
    }

    /* POS Cash Presets 4-Column Thumb Grid */
    .btn-cash-preset {
        flex: 1 1 calc(25% - 6px);
        text-align: center;
        padding: 6px 4px !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
    }

    /* Kanban Triase on Mobile Phone */
    #triage-kanban-pane .row > div {
        margin-bottom: 1rem;
    }

    /* Odontogram status popup selector */
    #toothStatusModal .modal-dialog {
        margin: 12px auto !important;
        width: calc(100% - 24px) !important;
    }
}

/* Keep these mobile drawer rules last so legacy .active declarations cannot reopen it. */
@media (max-width: 991.98px) {
    #sidebar.floating-sidebar,
    #sidebar.floating-sidebar.active {
        width: min(320px, calc(100vw - 32px)) !important;
        margin-left: 0 !important;
        transform: translateX(calc(-100% - 36px)) !important;
        visibility: hidden !important;
    }

    #sidebar.floating-sidebar.is-mobile-open,
    #sidebar.floating-sidebar.active.is-mobile-open {
        margin-left: 0 !important;
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    body.sidebar-mobile-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Profil Pasien 360 — penyempurnaan UX */
.patient-profile-page {
    font-size: 15px;
}

.patient-profile-back {
    font-size: 0.84rem;
}

.patient-profile-actions .btn,
.patient-profile-section-heading .btn {
    min-height: 44px;
    padding-right: 0.9rem;
    padding-left: 0.9rem;
    font-size: 0.82rem;
}

.patient-profile-hero {
    min-height: 144px;
    padding: 1.35rem 1.55rem;
}

.patient-profile-avatar {
    width: 66px;
    height: 66px;
    flex-basis: 66px;
    border-radius: 18px;
}

.patient-profile-eyebrow {
    font-size: 0.74rem;
}

.patient-profile-identity h1 {
    margin-bottom: 0.48rem;
}

.patient-profile-chips span {
    padding: 0.36rem 0.6rem;
    font-size: 0.78rem;
}

.patient-profile-contact > span {
    font-size: 0.72rem;
}

.patient-profile-contact strong {
    font-size: 0.98rem;
}

.patient-profile-contact a {
    font-size: 0.82rem;
}

.patient-profile-alert {
    padding: 0.78rem 0.95rem;
}

.patient-profile-alert span {
    font-size: 0.7rem;
}

.patient-profile-alert strong {
    font-size: 0.86rem;
}

.patient-profile-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.patient-profile-facts > div {
    padding: 0.85rem 0.95rem;
}

.patient-profile-facts small {
    font-size: 0.7rem;
}

.patient-profile-facts strong {
    font-size: 0.84rem;
}

.patient-profile-tabs {
    display: grid;
    overflow: visible;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
}

.patient-profile-tabs a {
    min-height: 62px;
    padding: 0.65rem 0.8rem;
    font-size: 0.84rem;
}

.patient-profile-tabs a > i {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf6f4;
    color: #0d897d;
}

.patient-profile-tabs a.is-active > i {
    background: rgba(255, 255, 255, 0.17);
    color: #fff;
}

.patient-profile-tabs a > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.patient-profile-tabs a > span strong {
    color: inherit;
    font-size: 0.86rem;
}

.patient-profile-tabs a > span small {
    margin-top: 0.08rem;
    color: #879591;
    font-size: 0.72rem;
    font-weight: 600;
}

.patient-profile-tabs a.is-active > span small {
    color: rgba(255, 255, 255, 0.78);
}

.patient-profile-content {
    position: relative;
    scroll-margin-top: 1rem;
    padding: 1.25rem;
    outline: 0;
    transition: opacity 0.16s ease;
}

.patient-profile-shell.is-loading .patient-profile-content {
    min-height: 360px;
    opacity: 0.42;
    pointer-events: none;
}

.patient-profile-shell.is-loading .patient-profile-content::after {
    position: absolute;
    top: 88px;
    left: 50%;
    width: 34px;
    height: 34px;
    border: 3px solid #cfe6e1;
    border-top-color: #0e9184;
    border-radius: 50%;
    animation: patient-profile-spin 0.7s linear infinite;
    content: "";
}

@keyframes patient-profile-spin {
    to { transform: rotate(360deg); }
}

.patient-profile-section-heading > div > span,
.patient-profile-card > header div > span,
.patient-profile-record-card > header div > span {
    font-size: 0.71rem;
}

.patient-profile-section-heading h2 {
    font-size: 1.28rem;
}

.patient-profile-section-heading p,
.patient-profile-section-heading > strong {
    font-size: 0.84rem;
}

.patient-profile-stats > div {
    padding: 0.9rem;
}

.patient-profile-stats small {
    font-size: 0.77rem;
}

.patient-profile-stats strong {
    font-size: 1.14rem;
}

.patient-profile-card > header h3,
.patient-profile-record-card > header h3 {
    font-size: 0.95rem;
}

.patient-profile-data-list {
    gap: 0 1rem;
    padding: 0.65rem 1rem 0.9rem;
}

.patient-profile-data-list dt {
    font-size: 0.75rem;
}

.patient-profile-data-list dd {
    font-size: 0.88rem;
    line-height: 1.5;
}

.patient-current-status__item small,
.patient-current-status__empty span,
.patient-profile-small-empty span {
    font-size: 0.74rem;
}

.patient-current-status__item strong,
.patient-current-status__empty strong {
    font-size: 0.86rem;
}

.patient-current-status__item p {
    font-size: 0.78rem;
}

.patient-profile-recent > header a {
    font-size: 0.8rem;
}

.patient-visit-row time strong,
.patient-visit-row > div:nth-child(2) > strong {
    font-size: 0.83rem;
}

.patient-visit-row time span,
.patient-visit-row > div:nth-child(2) > span,
.patient-visit-row__status span {
    font-size: 0.72rem;
}

.patient-visit-row > div:nth-child(2) > p {
    font-size: 0.78rem;
}

.patient-profile-subnav {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    margin: -0.15rem 0 1rem;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
}

.patient-profile-subnav a {
    display: inline-flex;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid #d8e5e2;
    border-radius: 10px;
    background: #f8fbfa;
    color: #566d67;
    font-size: 0.81rem;
    font-weight: 800;
    text-decoration: none;
}

.patient-profile-subnav a:hover,
.patient-profile-subnav a.is-active {
    border-color: #8ed1c7;
    background: #e5f5f1;
    color: #087c71;
}

.patient-profile-subnav a.is-active {
    box-shadow: inset 0 0 0 1px #8ed1c7;
}

.patient-profile-subnav i {
    font-size: 1.05rem;
}

.patient-profile-subcontent .patient-profile-section-heading {
    margin-top: 0.2rem;
}

.patient-profile-administration__billing {
    display: block;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid #e1eae8;
}

.patient-history-list {
    position: relative;
    display: grid;
    gap: 0.7rem;
}

.patient-history-card {
    overflow: hidden;
    border: 1px solid #dce7e4;
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.patient-history-card:has(details[open]) {
    border-color: #9ed6cd;
    box-shadow: 0 8px 22px rgba(26, 76, 67, 0.07);
}

.patient-history-card summary {
    display: grid;
    min-height: 82px;
    grid-template-columns: 72px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    list-style: none;
}

.patient-history-card summary::-webkit-details-marker {
    display: none;
}

.patient-history-card summary:hover {
    background: #f8fbfa;
}

.patient-history-card summary time {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-right: 0.85rem;
    border-right: 1px solid #e1eae8;
    line-height: 1.1;
}

.patient-history-card summary time strong {
    color: #0b8176;
    font-size: 1.35rem;
}

.patient-history-card summary time span {
    margin-top: 0.15rem;
    color: #506761;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.patient-history-card summary time small {
    margin-top: 0.2rem;
    color: #899793;
    font-size: 0.7rem;
}

.patient-history-card__main {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.patient-history-card__main > small {
    color: #0b897d;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.patient-history-card__main > strong {
    overflow: hidden;
    margin-top: 0.14rem;
    color: #2d403a;
    font-size: 0.91rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-history-card__main > span {
    overflow: hidden;
    margin-top: 0.12rem;
    color: #71827e;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-history-card__status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.patient-history-card__status > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    background: #eaf5f2;
    color: #496a62;
    font-size: 0.72rem;
    font-weight: 800;
}

.patient-history-card__status i {
    font-size: 0.85rem;
}

.patient-history-card__expand {
    color: #71847f;
    transition: transform 0.16s ease;
}

.patient-history-card details[open] .patient-history-card__expand {
    transform: rotate(180deg);
}

.patient-history-card__body {
    padding: 0.95rem 1rem 1rem 6.55rem;
    border-top: 1px solid #e4ecea;
    background: #fbfdfc;
}

.patient-history-card__body dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1.25rem;
    margin: 0;
}

.patient-history-card__body dt,
.patient-history-card__vitals small {
    color: #748681;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.patient-history-card__body dd {
    margin: 0.16rem 0 0;
    color: #30433d;
    font-size: 0.84rem;
    line-height: 1.5;
}

.patient-history-card__vitals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.9rem 0;
}

.patient-history-card__vitals > span {
    display: flex;
    min-width: 130px;
    flex-direction: column;
    padding: 0.55rem 0.7rem;
    border-radius: 9px;
    background: #edf5f3;
}

.patient-history-card__vitals strong {
    margin-top: 0.1rem;
    color: #2d403a;
    font-size: 0.86rem;
}

.patient-history-card__body .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.patient-profile-table thead th {
    font-size: 0.71rem;
}

.patient-profile-table tbody td {
    font-size: 0.82rem;
}

.patient-profile-table tbody td > small,
.patient-profile-code,
.patient-profile-service,
.patient-profile-inline-status {
    font-size: 0.74rem;
}

.patient-profile-record-card > header .ui-status,
.patient-profile-record-list small,
.patient-profile-record-card > footer,
.patient-profile-compact-list small,
.patient-triage-category,
.patient-queue-number {
    font-size: 0.72rem;
}

.patient-profile-record-list strong,
.patient-profile-compact-list strong {
    font-size: 0.84rem;
}

.patient-profile-record-list > p,
.patient-profile-compact-list p,
.patient-profile-aesthetic-card > p {
    font-size: 0.78rem;
}

.patient-profile-timeline time strong,
.patient-profile-timeline h3,
.patient-profile-aesthetic-summary strong {
    font-size: 0.82rem;
}

.patient-profile-timeline time span,
.patient-profile-timeline p,
.patient-profile-tags span,
.patient-profile-aesthetic-summary small,
.patient-profile-bed-active {
    font-size: 0.74rem;
}

@media (max-width: 991.98px) {
    .patient-profile-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .patient-profile-page {
        padding-bottom: 5rem;
        font-size: 14px;
    }

    .patient-profile-topbar {
        position: sticky;
        z-index: 20;
        top: 8px;
        margin: 0 -0.25rem 0.7rem;
        padding: 0.6rem;
        border: 1px solid #dce7e4;
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 8px 24px rgba(28, 58, 51, 0.12);
        backdrop-filter: blur(10px);
    }

    .patient-profile-back {
        color: #355049;
    }

    .patient-profile-actions {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .patient-profile-actions .btn,
    .patient-profile-actions .btn:last-child:nth-child(odd) {
        width: auto;
        grid-column: auto;
        flex: 1 0 auto;
    }

    .patient-profile-hero {
        padding: 1.1rem;
    }

    .patient-profile-facts {
        grid-template-columns: 1fr;
    }

    .patient-profile-tabs {
        margin-right: 0;
        margin-left: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-right: 1px solid #dbe6e3;
        border-left: 1px solid #dbe6e3;
        border-radius: 14px;
    }

    .patient-profile-tabs a {
        min-height: 58px;
        padding: 0.55rem;
    }

    .patient-profile-tabs a > span small {
        display: none;
    }

    .patient-profile-content {
        margin-right: 0;
        margin-left: 0;
        padding: 0.95rem;
        border-right: 1px solid #dce7e4;
        border-left: 1px solid #dce7e4;
        border-radius: 15px;
    }

    .patient-history-card summary {
        grid-template-columns: 56px minmax(0, 1fr) 24px;
        gap: 0.65rem;
        padding: 0.7rem;
    }

    .patient-history-card__status {
        display: none;
    }

    .patient-history-card__body {
        padding: 0.85rem;
    }

    .patient-history-card__body dl {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479.98px) {
    .patient-profile-tabs {
        grid-template-columns: 1fr;
    }

    .patient-profile-tabs a {
        min-height: 50px;
    }

    .patient-profile-tabs a > span small {
        display: block;
    }

    .patient-profile-section-heading h2 {
        font-size: 1.12rem;
    }
}

/* Quick patient view — identitas, administrasi, dan screening di atas */
.patient-quick-view {
    overflow: hidden;
    border: 1px solid #d9e5e2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(29, 61, 53, 0.08);
}

.patient-quick-view__grid {
    display: grid;
    grid-template-columns: minmax(270px, 0.85fr) minmax(310px, 1fr) minmax(340px, 1.15fr);
}

.patient-quick-view--limited .patient-quick-view__grid {
    grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
}

.patient-quick-view__identity,
.patient-quick-view__administration,
.patient-quick-view__clinical {
    min-width: 0;
    padding: 1rem 1.1rem;
}

.patient-quick-view__identity,
.patient-quick-view__administration {
    border-right: 1px solid #e2eae8;
}

.patient-quick-view--limited .patient-quick-view__administration {
    border-right: 0;
}

.patient-quick-view__identity-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.8rem;
}

.patient-quick-view__avatar {
    display: inline-flex;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    border: 1px solid #afd8d1;
    border-radius: 15px;
    background: #e5f4f1;
    color: #087c71;
    font-size: 1.35rem;
    font-weight: 900;
}

.patient-quick-view__eyebrow {
    display: block;
    color: #72847f;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.patient-quick-view__identity h1 {
    overflow: hidden;
    margin: 0.15rem 0 0.38rem;
    color: #263b35;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-quick-view__identity-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.patient-quick-view__identity-meta strong,
.patient-quick-view__identity-meta span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.48rem;
    border-radius: 7px;
    background: #f0f5f3;
    color: #526861;
    font-size: 0.73rem;
    font-weight: 750;
}

.patient-quick-view__identity-meta strong {
    background: #def1ed;
    color: #08796e;
}

.patient-quick-view__identity-meta i {
    font-size: 0.85rem;
}

.patient-quick-view__allergy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.48rem 0.6rem;
    border: 1px solid;
    border-radius: 9px;
}

.patient-quick-view__allergy > i {
    font-size: 1rem;
}

.patient-quick-view__allergy > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.patient-quick-view__allergy small {
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.patient-quick-view__allergy strong {
    overflow: hidden;
    font-size: 0.79rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-quick-view__allergy--danger {
    border-color: #f2bdc6;
    background: #fff2f4;
    color: #ac2941;
}

.patient-quick-view__allergy--safe {
    border-color: #cde5df;
    background: #f2f8f6;
    color: #39756a;
}

.patient-quick-view__administration {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    margin: 0;
}

.patient-quick-view__administration > div {
    min-width: 0;
    padding: 0.52rem 0;
    border-bottom: 1px dashed #dfe8e6;
}

.patient-quick-view__administration > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.patient-quick-view__administration dt,
.patient-quick-view__clinical small {
    color: #778984;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.patient-quick-view__administration dd {
    overflow: hidden;
    margin: 0.13rem 0 0;
    color: #30443e;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-quick-view__administration a {
    color: #087c71;
    text-decoration: none;
}

.patient-quick-view__clinical {
    background: #f8fbfa;
}

.patient-quick-view__clinical > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.55rem;
}

.patient-quick-view__clinical > header > span {
    display: flex;
    flex-direction: column;
}

.patient-quick-view__clinical > header strong {
    margin-top: 0.08rem;
    color: #4b615a;
    font-size: 0.8rem;
}

.patient-quick-view__clinical > header a {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfe2de;
    border-radius: 8px;
    background: #fff;
    color: #0b8175;
    text-decoration: none;
}

.patient-quick-view__clinical > header i {
    font-size: 0.95rem;
}

.patient-quick-view__diagnosis {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.patient-quick-view__diagnosis strong {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0.12rem;
    color: #253a34;
    font-size: 0.9rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.patient-quick-view__clinical > p {
    overflow: hidden;
    margin: 0.35rem 0 0.55rem;
    color: #657973;
    font-size: 0.77rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-quick-view__clinical > p strong {
    color: #40564f;
}

.patient-quick-view__vitals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.patient-quick-view__vitals > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 0.36rem 0.5rem;
    border: 1px solid #dce8e5;
    border-radius: 8px;
    background: #fff;
}

.patient-quick-view__vitals strong {
    overflow: hidden;
    margin-top: 0.05rem;
    color: #30453e;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-quick-view__clinical-empty {
    display: flex;
    min-height: 86px;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: #7f918c;
    font-size: 0.78rem;
    text-align: center;
}

.patient-quick-view__clinical-empty i {
    color: #9cb0aa;
}

.patient-quick-view__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border-top: 1px solid #e1eae8;
    background: #fbfcfc;
}

.patient-quick-view__stats > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    border-right: 1px solid #e3ebe9;
}

.patient-quick-view__stats > div:last-child {
    border-right: 0;
}

.patient-quick-view__stats > div > span {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.patient-quick-view__stats .is-teal { background: #dff5f1; color: #0a8175; }
.patient-quick-view__stats .is-blue { background: #e3f0fb; color: #2477a8; }
.patient-quick-view__stats .is-purple { background: #efe9fb; color: #7652ad; }
.patient-quick-view__stats .is-amber { background: #fff1d5; color: #a76b08; }
.patient-quick-view__stats i { font-size: 1rem; }

.patient-quick-view__stats p {
    display: flex;
    min-width: 0;
    flex-direction: column;
    margin: 0;
}

.patient-quick-view__stats p strong {
    color: #263b35;
    font-size: 1rem;
    line-height: 1;
}

.patient-quick-view__stats p small {
    overflow: hidden;
    margin-top: 0.18rem;
    color: #71837e;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-profile-tabs a.is-active {
    border: 1px solid #a9d9d1;
    background: #e4f4f1;
    box-shadow: none;
    color: #087c71;
}

.patient-profile-tabs a.is-active > i {
    background: #cceae4;
    color: #087c71;
}

.patient-profile-tabs a.is-active > span small {
    color: #5d7972;
}

.patient-profile-current-service .patient-current-status {
    padding: 0.75rem 0.9rem;
}

.patient-profile-current-service .patient-current-status__empty {
    min-height: 86px;
}

@media (max-width: 1199.98px) {
    .patient-quick-view__grid {
        grid-template-columns: minmax(270px, 0.9fr) minmax(330px, 1.1fr);
    }

    .patient-quick-view__clinical {
        grid-column: 1 / -1;
        border-top: 1px solid #e2eae8;
    }

    .patient-quick-view__identity {
        border-right: 1px solid #e2eae8;
    }

    .patient-quick-view__administration {
        border-right: 0;
    }
}

@media (max-width: 767.98px) {
    .patient-quick-view__grid,
    .patient-quick-view--limited .patient-quick-view__grid {
        grid-template-columns: 1fr;
    }

    .patient-quick-view__identity,
    .patient-quick-view__administration,
    .patient-quick-view__clinical {
        padding: 0.85rem;
        border-right: 0;
        border-bottom: 1px solid #e2eae8;
    }

    .patient-quick-view__clinical {
        grid-column: auto;
        border-top: 0;
    }

    .patient-quick-view__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .patient-quick-view__stats > div:nth-child(2n) {
        border-right: 0;
    }

    .patient-quick-view__stats > div:nth-child(n+3) {
        border-top: 1px solid #e3ebe9;
    }
}

@media (max-width: 479.98px) {
    .patient-quick-view__administration {
        grid-template-columns: 1fr;
    }

    .patient-quick-view__administration > div,
    .patient-quick-view__administration > div:nth-last-child(-n+2) {
        border-bottom: 1px dashed #dfe8e6;
    }

    .patient-quick-view__administration > div:last-child {
        border-bottom: 0;
    }

    .patient-quick-view__identity-main {
        align-items: flex-start;
    }

    .patient-quick-view__identity-meta strong {
        width: 100%;
    }
}