/* here you can put your own css to customize and override the theme */
:root {
    --dsf-primary: #2563eb;       /* Primary Blue */
    --dsf-accent: #0d9488;        /* Accent Teal */
    --dsf-navy: #2563eb;          /* Bright Brand Blue for Top Header Navbar */
    --dsf-slate: #ffffff;         /* White Sidebar Background for clinical theme */
    --dsf-slate-light: #f1f5f9;   /* Light grey for hover states */
    --dsf-text-primary: #1e293b;  /* Dark Slate for high contrast text */
    --dsf-text-muted: #64748b;    /* Muted text */
    --dsf-border: #e2e8f0;        /* Light borders */
    --dsf-bg-light: #f8fafc;      /* Shaded backgrounds */
}

/* brand title visibility toggles */
.brand-title {
    transition: opacity 0.2s ease-in-out;
}
.page-sidebar-closed .brand-title {
    display: none !important;
}

.page-container-bg-solid .page-content {
    background: #fff;
}
.page-content-white .page-content .page-bar {
    border-bottom: 1px solid #e7ecf1;
    background: linear-gradient(to bottom, #36c6d3 0%,#32bdca 50%,#22929c 100%);
}

.page-container-bg-solid .page-bar, .page-content-white .page-bar {
    /*background-color: #e7ecf1;*/
    position: relative;
    padding: 0 20px;
    margin: -26px -20px 0;
}

.page-bar .page-breadcrumb {
    padding: 0px !important;
}
.page-bar .page-breadcrumb > li {
    padding: 8px 6px;
    color: #fff;
    border-right: 1px solid #9cd3d8;
    cursor: pointer;
}

.page-content-white .page-bar .page-breadcrumb > li > a, .page-container-bg-solid .page-bar .page-breadcrumb > li > a {
    display: inline-block;
    padding: 5px;
    color: #fff;
    text-shadow: 2px 1px 2px rgb(105, 103, 103);
}
.page-content-white .page-bar .page-breadcrumb > li:hover a {
    color: #e8e8ef !important;
    background: linear-gradient(135deg, var(--dsf-primary), var(--dsf-accent)) !important;
    border-radius: 4px !important;
}
.page-content-white .page-bar .page-breadcrumb > li a:hover, .page-content-white .page-bar .page-breadcrumb > li a:focus{
    text-decoration: none;
}

.page-bar .page-breadcrumb > li > a {
    font-size: 14px;
}

.mt-checkbox, .mt-radio {
    padding-left: 30px !important;
}

.mt-radio > span:hover {
    border: 1px solid blue !important;
}

.mt-checkbox > span:hover {
    border: 1px solid blue !important;
}

input[type=text]:focus, input[type=number]:focus, input[type=tel]:focus, select:focus {
    border: 2px solid #43c1b5 !important;
    /*border: 1.5px solid #727780 !important;*/
}

/*to show blue colored tick inside the checkbox.*/
.mt-checkbox > span:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid blue;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/*all labels will be left aligned*/
.form-horizontal .control-label {
    text-align: left;
}

/*placeholder color, need to check for firefox and other browser.*/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    /*color: #43c1b5 !important;*/
    color: #89b7d6 !important;
    /*opacity: 1;*/
}

.page-header.navbar {
    height: 52px;
    background-color: var(--dsf-navy) !important;
}

/* Synchronize logo background with top bar */
.page-header.navbar .page-logo {
    background-color: var(--dsf-navy) !important;
    background: var(--dsf-navy) !important;
    border-bottom: none !important;
}
.page-header.navbar .page-logo:hover {
    background-color: var(--dsf-navy) !important;
    background: var(--dsf-navy) !important;
}

/* Reduce vertical gap between header bar and page body content */
.page-header-fixed .page-container {
    margin-top: 52px !important; /* Push down exactly by header height to prevent covering */
}
.page-content-wrapper .page-content {
    padding-top: 8px !important;
}

/* Sidebar styling override */
.page-sidebar-wrapper,
.page-sidebar {
    background-color: var(--dsf-slate) !important;
    border-right: 1px solid var(--dsf-border) !important;
}

.page-sidebar .page-sidebar-menu {
    background-color: var(--dsf-slate) !important;
    padding-top: 0px !important;
}

.page-sidebar .page-sidebar-menu > li > a {
    background: transparent !important;
    color: var(--dsf-text-primary) !important; /* High-contrast text */
    border-top: 1px solid var(--dsf-border) !important;
    border-radius: 0px !important;
    font-weight: 600 !important; /* Bold font for main menu items */
    font-size: 14px !important;
}

.page-sidebar .page-sidebar-menu > li.open > a, 
.page-sidebar .page-sidebar-menu > li.active > a, 
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a {
    background: var(--dsf-slate-light) !important;
    color: var(--dsf-primary) !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

.page-sidebar .page-sidebar-menu > li.open > a span.ad-sign:after {
    color: var(--dsf-primary) !important;
}

/* Default hover styles for main menu */
.page-sidebar .page-sidebar-menu > li:hover > a, 
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a {
    background: var(--dsf-slate-light) !important;
    color: var(--dsf-primary) !important;
    border-radius: 0px !important;
}
.page-sidebar .page-sidebar-menu > li > a:hover span.ad-sign:after {
    color: var(--dsf-primary) !important;
}

/* Navigation icon styling rules */
.fontawesome-nav-icon, 
.fallback-icon {
    color: var(--dsf-text-muted) !important;
    transition: color 0.15s ease-in-out;
}

.left-nav-active .fontawesome-nav-icon, 
.left-nav-active .fallback-icon {
    color: #ffffff !important;
}

.page-sidebar .page-sidebar-menu > li > a:hover .fontawesome-nav-icon, 
.page-sidebar .page-sidebar-menu > li > a:hover .fallback-icon {
    color: var(--dsf-primary) !important;
}

.page-sidebar .page-sidebar-menu > li.open > a .fontawesome-nav-icon, 
.page-sidebar .page-sidebar-menu > li.open > a .fallback-icon {
    color: var(--dsf-primary) !important;
}

/* Submenu background override */
.page-sidebar .page-sidebar-menu .sub-menu {
    background-color: var(--dsf-bg-light) !important;
    margin: 0px !important;
}

.page-sidebar .page-sidebar-menu .sub-menu > li > a {
    color: var(--dsf-text-muted) !important;
    border-radius: 0px !important;
    font-size: 13px !important;     /* Slightly smaller font for hierarchy */
    font-weight: 500 !important;
}

/* Indent nested items ONLY when sidebar is expanded */
body:not(.page-sidebar-closed) .page-sidebar .page-sidebar-menu .sub-menu > li > a {
    padding-left: 45px !important;
}

body:not(.page-sidebar-closed) .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a {
    color: var(--dsf-primary) !important;
    background-color: var(--dsf-slate-light) !important;
    border-radius: 0px !important;
    padding-left: 45px !important;
}

/* Active main menu with no submenu: primary blue solid background */
.page-sidebar .page-sidebar-menu > li > a.left-nav-active,
.left-nav-active {
    background-color: var(--dsf-primary) !important;
    background: var(--dsf-primary) !important;
    color: white !important;
    border-radius: 0px !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

.page-sidebar .page-sidebar-menu > li > a.left-nav-active:hover {
    background-color: #1e40af !important;
    background: #1e40af !important;
    color: white !important;
}

/* Distinct nested styling for active submenu items when expanded */
body:not(.page-sidebar-closed) .page-sidebar .page-sidebar-menu .sub-menu > li > a.left-nav-active {
    background-color: #eff6ff !important;
    background: #eff6ff !important;
    color: var(--dsf-primary) !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--dsf-primary) !important;
    padding-left: 41px !important; /* 41px padding + 4px border = 45px total indentation */
    box-shadow: none !important;
}

body:not(.page-sidebar-closed) .page-sidebar .page-sidebar-menu .sub-menu > li > a.left-nav-active:hover {
    background-color: #dbeafe !important;
    background: #dbeafe !important;
    color: var(--dsf-primary) !important;
}

/* Hover popup styles for collapsed sidebar */
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu > li > a {
    padding-left: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--dsf-text-primary) !important; /* High contrast dark text on light background */
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
}

.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu > li:hover > a {
    color: var(--dsf-primary) !important;
    background-color: var(--dsf-slate-light) !important;
}

.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu > li > a.left-nav-active {
    background-color: #eff6ff !important;
    background: #eff6ff !important;
    color: var(--dsf-primary) !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--dsf-primary) !important;
    padding-left: 16px !important; /* 16px padding + 4px border = 20px total */
    box-shadow: none !important;
}

.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu > li > a.left-nav-active:hover {
    background-color: #dbeafe !important;
    background: #dbeafe !important;
    color: var(--dsf-primary) !important;
}


/*removed outer border from gridview..:sudarshan-28june2017*/
/*.ag-fresh .ag-root {
    border: 1px solid #808080;
}*/

/*For active links inside  <ul class="nav nav-tabs"> set as !important else bootstrap will overwrite this class.*/
.a-tab-active {
    border-bottom: 4px solid #36c6d3 !important;
    font-weight: bold;
}
/*Overwriting border-red of component.css since it was setting only border-color and not the thickness. Used in validations mostly..*/
.border-red {
    border: 1px solid red;
}

/* for billing receipt print */
.hr, p {
    margin: 8px 0;
}

/*For table input type style */
.table-input {
    border: solid 1px #c2cad8;
}

/*This class only for pop-up shows with heading and Vertical scroling*/
.popup {
    overflow-y: scroll;
    z-index: 1030;
    position: fixed;
    width: auto;
    transition: 0.3s;
    height: 400px;
    top: 20%;
    border: solid 1px rgb(50,197,210);
    background-color: white;
}
/*This is static background popup class*/
.popup-static {
    overflow-y: scroll;
    background-color: rgba(47, 84, 124, 0.55) !important;
}
    /*This class apply background color on  portlet body under popup-static */
    .popup-static > .portlet-body {
        background-color: rgba(47, 84, 124, 0) !important;
    }


/*this is to slidedown popupbox at the time of loading:
        Note: Pls check if we're applying custom margins on this class somewhere.
        It'll overwrite otherwise
    */
@keyframes slideDown {
    from {
        margin-top: -200px;
    }

    to {
        margin-top: 0px;
    }
}

/*This class apply on div for model box static background*/
.modelbox-div {
    margin-right: 24px;
    border: 1px solid;
    border-radius: 25px !important;
    background-color: white;
    animation-name: slideDown !important;
    animation-duration: 0.6s !important;
}
/*for lab-report print*/
.popup-print {
    height: 100%;
    z-index: 9999;
    top: 1%;
    left: 5%;
}
/*Change Portlet Title background color for Model Box*/
.popup .portlet-title {
    background-color: rgb(50,197,210) !important;
}
/*Model box caption color white and bold*/
.caption {
    font-weight: bold;
    color: white;
}

/*on hover of dashboard link inside various modules.*/
.fa-home:hover {
    color: blue;
    font-weight: bold;
}

.logo-default:hover {
    background-color: #333;
}

.section-header-new {
    background-color: lightgray;
    width: 50%;
    font-weight: bold;
    height: 25px;
    padding-left: 1em;
    width: 50%;
    font-size: 15px;
}
/*This class for show Validation error message style*/
.error-msg {
    color: red;
    font-size: 13px;
}

.hide-main {
    /* overflow: scroll; */
    height: auto !important;
    /* border: 1px solid rgb(204, 204, 204); */
    /* margin: 10px;*/
    width: auto !important;
    cursor: pointer !important;
    position: relative !important;
}

.hide-cover {
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;
    z-index: 1 !important;
    background-color: #73d1ea !important;
    opacity: 0.3 !important;
}
/* Blink for Webkit and others
(Chrome, Safari, Firefox, IE, ...)
*/

@-webkit-keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}

.blink {
    text-decoration: blink;
    border-color: red;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}

/*this class for vertical line left */
.vertical-line-left {
    border-left: 1px solid #808080 !important;
}
/*this class for vertical line right*/
.vertical-line-right {
    border-right: 1px solid #808080 !important;
}

.portlet.portlet-fullscreen {
    z-index: 9999 !important;
}

.page-sidebar .page-sidebar-menu .sub-menu li:not(:last-child) {
    border-bottom: 1px solid #414b58;
}
.doctor-sdbar ul.doctor-sidebar-list > li > a, .doctor-sdbar ul.doctor-sidebar-list > li:last-child > a {
    padding: 2px 0px;
    background: #fff;
    font-weight: 700;
    border: 1px solid var(--dsf-primary) !important;
    border-radius: 0px !important;
}
.doctor-sdbar ul.doctor-sidebar-list > li
{
    text-align: center;
    padding: 4px 12px;
}
.doctor-sdbar ul.doctor-sidebar-list li a {
    color: var(--dsf-primary);
}
.doctor-sdbar ul.doctor-sidebar-list li a:hover{
    background: var(--dsf-primary);
    color: #ffffff;
    border-radius: 0px !important;
}
.doctor-sdbar ul.doctor-sidebar-list li .cstm-sidenav-active {
    color: #fff !important;
    background: var(--dsf-primary) !important;
    border-radius: 0px !important;
}
h1.pat-name-hd {
    float: left;
    margin: 5px 0px 0px 0px;
    font-size: 16px;
    color: #60f55f;
    font-weight: 700;
}
.pat-info-top p, .pat-info-bottom p {
    float: left;  
    margin: 0;
    color: #fff;
    font-size: 14px;
}
.pat-info-top p {
    line-height: 18px;
    padding-top: 8px;
}

.pat-info-bottom p{
    line-height: 16px;
}
.inout-pat {
    color: #60f55f;
    text-transform: uppercase;
}
p.main-hdp {
    padding: 8px 0px;
    margin: 0;
}
a.btn-back:hover{
    text-decoration: none;
}
.btn-back {
    line-height: 1;
    display: inline-block;
    color: var(--dsf-primary);
    padding: 5px 10px;
    background: #fde11a;
    font-size: 15px;
    font-weight: 700;
}
.btn-back i.fa{
    display: inline-block;
    padding-right: 5px;
}

.btn-back:hover a{
    text-decoration: none;
    color: #2d3a69;
}

.portlet-title.cstm-portlet-title{
    min-height: inherit;
    padding: 5px 10px !important;
}
.portlet-title.cstm-portlet-title > .caption{
    font-size: 16px;
    line-height: 24px;
    padding: 0 !important;
}
.portlet-title.cstm-portlet-title .actions{
    padding: 0 !important;
}
.portlet-title.cstm-portlet-title .actions .btn.btn-sm.btn-default{
    padding: 2px 9px;
}
.cstm-pt-title {
    background: #f1f1f1;
    padding: 5px 10px !important;
    margin-bottom: 0 !important;
    min-height: inherit !important;
}

.cstm-portlet-caption {
    display: inline-block;
    /*float: left;*/
    padding-top: 4px;
    font-weight: bold;
    color: var(--dsf-primary);
}
.cstm-action {
    display: inline-block;
    float: right;
    font-weight: 700;
    background: #374150;
    border: 1px solid #acb9ca;
}
.cstm-action a.cstm-add {
    color: #bbc7d4;
    display: inline-block;
    padding: 1px 8px;
    text-decoration: none;
    font-weight: normal;
}
h3.cstm-add-heading {
    padding-bottom: 7px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    border-bottom: 1px solid #bbb8b8;
    margin: 10px 0px;
}

/*CSS for ToolTip*/
.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1;
}
.tooltip i.fa{
    font-size: 16px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    display: inline-block;
    width: 140px;
    padding: 5px 10px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;   
    left: 50%;
    margin-left: -70px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;

}
.tooltip .tooltiptext.ttptextup {
    bottom: 125%;
}
.tooltip .tooltiptext.ttptextdown{
    top: 125%;
}
.tooltip .tooltiptext.ttptextup:after {
    top: 100%;
    border-color: #555 transparent transparent transparent;
}
.tooltip .tooltiptext.ttptextdown:after{
    bottom: 100%;
    border-color: transparent transparent #555 transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.portlet-with-collapse {
    -webkit-box-shadow: 0px 0px 2px #aaaaab;
    -moz-box-shadow: 0px 0px 2px #aaaaab;
    box-shadow: 0px 0px 2px #aaaaab;
}

.prob-entry label.control-label {
    color: #fff;
}

.prob-entry {
    position: relative;
}

.cstm-close {
    position: absolute;
    position: absolute;
    right: 0;
    top: 0;
    background: #f72424;
    padding: 5px;
}

.cstm-close a {
    padding-top: 5px;
    color: #fff;
}
.cstm-close a i.fa{
    font-size: 18px;
}
.cstm-form-group {
    margin: 0px 0px 5px 0px !important;
    display: table;
    content: "";
    width: 100%;
}
.cstm-control-label{margin-bottom: 0px;}
.cstm-form-control {
    padding: 0;
    height: 25px;
}
.white{color: #fff;}
.add-row-btn {
    padding: 2px 3px 0px;
}
.red {
    background: #ec2222;
    border-color: #ec2222;
}
.add-row-btn i.fa{
    font-size: 18px;
}
span.white{
    background: #fff !important;
}
.quick-add-vital .prob-entry{
    float: left;
}
.quick-add-vital{
    left: 31%;
}
.quick-add-vital .cstm-form-group{
    width: 100%;
    float: left;
}
.popp-upp {
    float: left;
    position: absolute;
    background: #2d2d2d78;
}

/*CSS form Doctor Notes Page*/
table.info-table tr td {
    line-height: 2.5;
    font-weight: 700;
}

.vital-info ul li {
    display: inline-block;
    width: 32%;
    line-height: 2;
}

.label-name {
    float: left;
    margin-right: 15px;
}

.txt-box-holder {
    width: 40%;
    float: left;
    margin-right: 5px;
}

.unit-holder {
    float: left;
}
/*CSS form Doctor Notes Page Ends*/

/*Added by Anish On 7 May 18*/
@media only screen and (max-width: 768px) {
    .pat-info-top p, .pat-info-bottom p{
        padding-left: 15px;
    }
}

@media only screen and (max-width: 991px) {
    .doctor-sdbar {
      min-height: initial;
    }
}

@media only screen and (min-width: 992px) {
    .page-sidebar.doctor-sdbar {
        width: 185px !important;
        min-height: 800px;
        background: #f1f1f1;
        /*-webkit-box-shadow: 1px -5px 5px #afb8bb !important;
        -moz-box-shadow: 1px -5px 5px #afb8bb !important;
        box-shadow: 1px -5px 5px #afb8bb !important;*/
    }
    .doctor-sdbar ul.doctor-sidebar-list{
        margin-top: 18px;
    }
    .page-container.doc-pagecontainer {
        background: url('images/doctor-dashboard-bg.png') repeat-y 0 0;
    }
    .page-container {
        background: url('images/dashboard-bg.png') repeat-y 0 0;
    }
    .page-content.doc-pagecontent{
        margin-left: 185px !important;
    }

    .page-sidebar-closed .page-container {
        background: none !important;
    }
    .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu {
        background: #364150;
        height: auto !important;
    }
    .page-header.navbar .menu-toggler > span {
        height: 2px;
        background: #fff;
        visibility: hidden;
    }

    .page-header.navbar .menu-toggler > span:before, .page-header.navbar .menu-toggler > span:after {
        background: #fff !important;
        height: 2px;
        top: 3px;
        -moz-transition: all 0.7s;
        -webkit-transition: all 0.7s;
        transition: all 0.7s;
        visibility: visible;
    }

    .page-header.navbar .menu-toggler > span:before {
        -moz-transform: rotate(410deg);
        -webkit-transform: rotate(410deg);
        transform: rotate(410deg);
    }

    .page-header.navbar .menu-toggler > span:after {
        -moz-transform: rotate(-410deg);
        -webkit-transform: rotate(-410deg);
        transform: rotate(-410deg);
    }

    .page-sidebar-closed.page-sidebar-closed-hide-logo .page-header.navbar .menu-toggler.sidebar-toggler > span {
        visibility: visible;
    }

    .page-sidebar-closed.page-sidebar-closed-hide-logo .page-header.navbar .menu-toggler.sidebar-toggler > span:before, .page-sidebar-closed.page-sidebar-closed-hide-logo .page-header.navbar .menu-toggler.sidebar-toggler > span:after {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        background: #fff;
    }

    .page-sidebar-closed.page-sidebar-closed-hide-logo .page-header.navbar .menu-toggler.sidebar-toggler > span:before {
        top: 6px;
    }

    .page-sidebar-closed.page-sidebar-closed-hide-logo .page-header.navbar .menu-toggler.sidebar-toggler > span:after {
        top: -6px;
    }
}

/* ==========================================================================
   HOSPITAL EMR - COMPACT, PREMIUM & CLINICAL ACCESSIBILITY UPGRADES
   ========================================================================== */

/* 1. Global Typography & Readability */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #1e293b !important; /* High contrast slate-800 */
}

/* Ensure all text elements are readable */
p, span:not(.fa):not(.glyphicon), div:not(.page-sidebar), td, th, li {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: inherit;
}

/* Form labels - prominent and compact */
.form-horizontal .control-label, 
.control-label, 
label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important; /* Slate-900 */
    padding-top: 4px !important;
    margin-bottom: 4px !important;
}

/* 2. Compact Inputs & Form Controls (Saves vertical space) */
input[type="text"], 
input[type="number"], 
input[type="tel"], 
input[type="password"], 
input[type="email"], 
select, 
textarea,
.form-control,
.ag-grid-cell-editor,
.table-input {
    font-size: 14px !important; 
    height: 34px !important;    /* Compact clinical height */
    padding: 6px 10px !important;
    border: 1.5px solid #cbd5e1 !important; /* Slate-300 */
    border-radius: 6px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

textarea, 
textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
}

/* Focus Indicator */
input[type="text"]:focus, 
input[type="number"]:focus, 
input[type="tel"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
select:focus, 
textarea:focus,
.form-control:focus {
    border-color: var(--dsf-primary) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
    outline: none !important;
    background-color: #ffffff !important;
}

/* Placeholders */
::-webkit-input-placeholder { color: #64748b !important; }
:-moz-placeholder { color: #64748b !important; }
::-moz-placeholder { color: #64748b !important; }
:-ms-input-placeholder { color: #64748b !important; }

/* Compact Search Bar */
input[placeholder*="Search"],
input[placeholder*="Tìm"],
input.search-input {
    border-radius: 20px !important;
    padding-left: 30px !important;
}

/* 3. Compact Clinical Tabs (Pill-like segment controls) */
.page-bar, 
.page-bar.fixed-top-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    padding: 4px 12px !important;
    margin: 0 0 10px 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-bar .page-breadcrumb {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
}

.page-bar .page-breadcrumb > li {
    padding: 0 !important;
    margin: 0 6px 0 0 !important;
    border-right: none !important;
}

.page-bar .page-breadcrumb > li:after {
    display: none !important; /* Remove legacy slashes/separators */
}

/* Inactive Tabs */
.page-content-white .page-bar .page-breadcrumb > li > a, 
.page-container-bg-solid .page-bar .page-breadcrumb > li > a,
.page-bar .page-breadcrumb > li > a {
    display: inline-block;
    padding: 4px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important; /* Slate-600 */
    background: #f1f5f9 !important; /* Soft background */
    border: 1px solid #cbd5e1 !important;
    border-radius: 0px !important; /* Flat square corners */
    text-decoration: none !important;
    text-shadow: none !important;
    transition: all 0.15s ease-in-out;
}

/* Hover tabs */
.page-content-white .page-bar .page-breadcrumb > li:hover > a, 
.page-container-bg-solid .page-bar .page-breadcrumb > li:hover > a,
.page-bar .page-breadcrumb > li > a:hover {
    color: var(--dsf-accent) !important;
    background: #f0fdfa !important; /* light teal bg */
    border-color: #99f6e4 !important; /* light teal border */
    border-radius: 0px !important;
}

/* Active tab */
.link3-active, 
.link3-active:hover, 
.page-bar .page-breadcrumb > li > a.link3-active {
    background: linear-gradient(135deg, var(--dsf-primary), #1d4ed8) !important;
    color: #ffffff !important;
    border-color: var(--dsf-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.2) !important;
    border-radius: 0px !important;
}

/* Sticky secondary sub-navigation bar positioning */
.fixed-subnavtab {
    top: 88px !important; /* Header 52px + page-bar 36px */
}
.fixed-subnavtab.sub-navtab .nav>li>a {
    padding: 6px 12px !important;
    font-size: 13px !important;
}

/* 4. Compact Clinical Buttons */
.btn, 
button {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    height: 34px !important;    /* Compact clinical height */
    border-radius: 6px !important;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in-out;
}

/* Compact Active Counter / counter details badge */
.label-primary, 
.badge-primary,
.page-bar .right label {
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 0px !important; /* Flat square corners */
    background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15) !important;
}

.page-bar .right i.fa-sign-out {
    font-size: 16px !important;
    top: 1px !important;
}

/* Specific button styles for color gradients and soft shadows */
.btn.btn-success, 
.btn-success, 
.green {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}
.btn.btn-success:hover, 
.btn-success:hover {
    background: #15803d !important;
    border-color: #15803d !important;
    transform: translateY(-1px);
}

.btn.btn-primary, 
.btn-primary, 
.blue {
    background: linear-gradient(135deg, var(--dsf-primary), #1d4ed8) !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}
.btn.btn-primary:hover, 
.btn-primary:hover {
    background: #1e40af !important; /* Darker blue */
    border-color: #1e40af !important;
    transform: translateY(-1px);
}

.btn.btn-danger, 
.btn-danger, 
.red {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}
.btn.btn-danger:hover, 
.btn-danger:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    transform: translateY(-1px);
}

/* 5. Dense & Highly Legible Clinical Tables (Saves vertical space) */
.table, 
.dsf-table, 
.table-responsive table {
    width: 100% !important;
    margin-bottom: 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-collapse: collapse !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
}

/* Compact Table Headers */
.table thead tr th, 
.table th,
.dsf-table th {
    background: linear-gradient(to right, #0f172a, #1e293b) !important; /* Sleek dark slate header */
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 8px 12px !important; /* Tight padding to save space */
    border: 1px solid #334155 !important;
    text-align: left;
}

/* Compact Table Cells */
.table tbody tr td, 
.table td,
.dsf-table td {
    padding: 8px 12px !important; /* Tight compact cell spacing */
    font-size: 14px !important;
    color: #1e293b !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Row shading and Hover highlights */
.table-striped tbody tr:nth-of-type(odd),
.table tbody tr:nth-child(even) {
    background-color: #f8fafc !important;
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
    background-color: #eff6ff !important; /* Light primary blue bg */
    color: #1e40af !important;
    border-left: 3px solid var(--dsf-primary) !important; /* Left highlight */
}

/* Remove legacy yellow borders from table headers */
.table thead tr {
    border-bottom: 2px solid #334155 !important;
}

/* 6. High-Contrast Status Badges */
.label, 
.badge {
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    text-transform: uppercase;
}

.label-success, .badge-success {
    background-color: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}
.label-warning, .badge-warning {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde047 !important;
}
.label-danger, .badge-danger {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}
.label-info, .badge-info {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #7dd3fc !important;
}

/* 7. Integrated Pagination Bar */
.pagination-container,
.page-bar + .wrapper .pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
}

/* Pagination arrows and page dropdown */
select.page-size-select {
    height: 30px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
}

.pagination-btn, 
.page-bar-primary .btn {
    height: 30px !important;
    width: 30px !important;
    padding: 0 !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    border-radius: 4px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.pagination-btn.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* 8. Larger Checkboxes & Radios (Remains readable and easy to click) */
.mt-checkbox, 
.mt-radio {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    padding-left: 32px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px !important;
    user-select: none;
}

.mt-checkbox > span, 
.mt-radio > span {
    width: 20px !important;
    height: 20px !important;
    top: 0 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background-color: #fff !important;
}

.mt-radio > span {
    border-radius: 50% !important;
}

.mt-checkbox > input:checked ~ span,
.mt-radio > input:checked ~ span {
    background-color: var(--dsf-primary) !important;
    border-color: var(--dsf-primary) !important;
}

.mt-checkbox > span:after {
    left: 6px !important;
    top: 2px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #ffffff !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
}

/* 5. Compact Table & Grid Cell Action Buttons */
.ag-cell button,
.ag-cell .btn,
.table td button,
.table td .btn,
.grid-btnCstm,
.grid-action {
    height: 24px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    margin: 0 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* Specific dropdown menu positioning/alignment for table cells */
.ag-row .ag-cell:last-child {
    overflow: visible !important;
}

/* 6. Collapsed Sidebar Menu Icons Centering Fix */
body.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a {
    padding: 10px 0 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

body.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a .fontawesome-nav-icon,
body.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a .nav-icon-container {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a img {
    margin-right: 0 !important;
}