@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Apply new font family globally for Vietnamese language support */
body, 
input, 
select, 
textarea, 
button, 
.form-control, 
.control-label, 
h1, h2, h3, h4, h5, h6, 
p, td, th, table, .caption, .name, .value, .btn, a {
    font-family: 'Roboto', 'Quicksand', 'Open Sans', sans-serif !important;
}

/* Protect icon fonts from being overridden */
.fa {
    font-family: 'FontAwesome' !important;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'Simple-Line-Icons' !important;
}
.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}

/* Fix spacing inside ag-grid paging summary panel (e.g. Page 0 of 0) */
.ag-theme-fresh .ag-paging-panel .ag-paging-page-summary-panel *,
.ag-theme-fresh .ag-paging-panel .ag-paging-page-summary *,
.ag-theme-fresh .ag-paging-panel [ref="ePageSummaryPanel"] *,
.ag-theme-fresh .ag-paging-panel .ag-paging-row-summary-panel *,
.ag-theme-fresh .ag-paging-panel .ag-paging-row-summary *,
.ag-theme-fresh .ag-paging-panel [ref="eSummaryPanel"] * {
    margin-left: 3px !important;
    margin-right: 3px !important;
}

/* here you can put your own css to customize and override the theme */
:root {
    --dsf-primary: var(--accent-primary);       /* Dynamic Primary Blue */
    --dsf-accent: var(--accent-primary);        /* Dynamic Accent Teal */
    --dsf-navy: var(--bg-header);          /* Dynamic Header Navbar */
    --dsf-slate: var(--bg-sidebar);         /* Dynamic Sidebar Background */
    --dsf-slate-light: var(--accent-bg);   /* Dynamic hover states background */
    --dsf-text-primary: var(--text-primary);  /* Dynamic text color */
    --dsf-text-muted: var(--text-secondary);    /* Dynamic secondary text color */
    --dsf-border: var(--border-color);        /* Dynamic border color */
    --dsf-bg-light: var(--bg-primary);      /* Dynamic base background */
}

/* 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: var(--bg-primary) !important;
}
.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;
}

/* ==========================================================================
   BULLETPROOF SIDEBAR & PAGE CONTENT LAYOUT (OPEN & CLOSED STATES) - FLEXBOX
   ========================================================================== */

/* Áp dụng Flexbox cho Container chính để sidebar và content luôn song hành trên cùng một hàng */
.page-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: calc(100vh - 52px) !important;
    background: transparent !important;
}

/* 1. Open State Layout (Sidebar is expanded) */
body:not(.page-sidebar-closed) .page-sidebar-wrapper {
    width: 240px !important;
    flex-shrink: 0 !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body:not(.page-sidebar-closed) .page-sidebar {
    width: 240px !important;
    height: calc(100vh - 52px) !important;
    overflow-y: auto !important;
    position: sticky !important;
    top: 52px !important;
}

/* 2. Closed State Layout (Sidebar is collapsed) */
body.page-sidebar-closed .page-sidebar-wrapper {
    width: 60px !important;
    flex-shrink: 0 !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.page-sidebar-closed .page-sidebar {
    width: 54px !important;
}

/* 3. Content Wrapper chung cho cả 2 trạng thái - Tự động co giãn theo Flexbox */
.page-content-wrapper {
    flex-grow: 1 !important;
    width: 0 !important; /* Quan trọng để flex-grow co giãn chuẩn xác và không bị tràn */
    min-width: 0 !important;
    float: none !important;
    margin-left: 0 !important;
}

.page-content-wrapper .page-content {
    margin-left: 0 !important; /* Loại bỏ margin-left dịch chuyển cũ */
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* Ép buộc tất cả các container con bên trong page-content phải giãn rộng 100% lấp đầy lề phải */
.page-content-wrapper .page-content .wrapper,
.page-content-wrapper .page-content .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Custom scrollbar for the open sidebar */
body:not(.page-sidebar-closed) .page-sidebar::-webkit-scrollbar {
    width: 6px;
}
body:not(.page-sidebar-closed) .page-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
body:not(.page-sidebar-closed) .page-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 3px;
}
body:not(.page-sidebar-closed) .page-sidebar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}


.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: none !important; /* Clean floating layout without old dividers */
    border-radius: 8px !important; /* Modern rounded corners */
    margin: 4px 10px !important; /* Spacing between menu blocks */
    font-weight: 600 !important; /* Bold font for main menu items */
    font-size: 14px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !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: 8px !important;
    border-left: 4px solid var(--accent-primary) !important; /* Glowing left indicator */
    box-shadow: inset 3px 0 10px rgba(14, 165, 233, 0.1) !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: 8px !important;
    transform: translateX(6px) !important; /* Premium slide-in interaction */
    box-shadow: var(--shadow-sm) !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: 6px !important; /* Elegant rounded corners */
    margin: 2px 8px !important; /* Floating sub-items */
    font-size: 13px !important;     /* Slightly smaller font for hierarchy */
    font-weight: 500 !important;
    transition: all 0.2s ease !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: 6px !important;
    padding-left: 45px !important;
}

/* Active main menu with no submenu: premium logo-matching gradient background (Royal Blue to Emerald Green) */
.page-sidebar .page-sidebar-menu > li > a.left-nav-active,
.left-nav-active {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%) !important;
    color: white !important;
    border-radius: 8px !important; /* Rounded main active block */
    box-shadow: 0 4px 12px var(--border-glow) !important; /* Glow highlight */
}

.page-sidebar .page-sidebar-menu > li > a.left-nav-active:hover {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-primary) 100%) !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: var(--accent-bg) !important;
    background: var(--accent-bg) !important;
    color: var(--accent-primary) !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--accent-primary) !important;
    border-radius: 6px !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: var(--accent-bg) !important;
    background: var(--accent-bg) !important;
    color: var(--accent-primary) !important;
    opacity: 0.85;
}

/* 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: var(--accent-bg) !important;
    background: var(--accent-bg) !important;
    color: var(--accent-primary) !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--accent-primary) !important;
    padding-left: 16px !important; /* 16px padding + 4px border = 20px total */
    border-radius: 6px !important;
    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: var(--accent-bg) !important;
    background: var(--accent-bg) !important;
    color: var(--accent-primary) !important;
    opacity: 0.85;
}


/*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: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 4px 12px !important;
    margin: 0 0 10px 0 !important;
    min-height: 36px !important;
    height: auto !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;
    row-gap: 6px !important;
}

.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: var(--text-secondary) !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important; /* Modern rounded corners */
    text-decoration: none !important;
    text-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 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(--accent-hover) !important;
    background: var(--accent-bg) !important;
    border-color: var(--accent-primary) !important;
    border-radius: 4px !important;
}

/* Active tab */
.link3-active, 
.link3-active:hover, 
.page-bar .page-breadcrumb > li > a.link3-active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover)) !important;
    color: #ffffff !important;
    border-color: var(--accent-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px var(--border-glow) !important;
    border-radius: 4px !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 & Hide Text 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;
}

/* Ensure text elements are completely hidden with high specificity in collapsed mode */
body.page-sidebar-closed .page-sidebar-menu .title,
body.page-sidebar-closed .page-sidebar-menu .selected,
body.page-sidebar-closed .page-sidebar-menu .ad-sign,
.page-sidebar-menu-closed .title,
.page-sidebar-menu-closed .selected,
.page-sidebar-menu-closed .ad-sign {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 7. Fix ag-grid cell selection shaking/layout shift */
.ag-theme-fresh .ag-cell-focus,
.ag-theme-fresh .ag-ltr .ag-cell-focus,
.ag-theme-fresh .ag-rtl .ag-cell-focus {
    border-top: 1px solid #e0dfdf !important;
    border-bottom: 1px solid #e0dfdf !important;
    border-right: 1px solid #e0dfdf !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1.5px #1577d9 !important; /* Non-shifting blue focus indicator */
}

/* Maintain left border for the first child cell when focused */
.ag-theme-fresh .ag-ltr .ag-cell-focus:first-child,
.ag-theme-fresh .ag-cell-focus:first-child {
    border-left: 1px solid #e0dfdf !important;
}
.ag-theme-fresh .ag-rtl .ag-cell-focus:first-child {
    border-right: 1px solid #e0dfdf !important;
}

/* 8. Enable & style horizontal scrollbar for ag-grid */
.ag-theme-fresh .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
    height: 8px !important;
}
.ag-theme-fresh .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
    background: #f1f5f9 !important; /* slate-100 */
}
.ag-theme-fresh .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important; /* slate-300 */
    border-radius: 4px !important;
}
.ag-theme-fresh .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important; /* slate-400 */
}

/* 9. Premium ag-Grid Header Styling (Dark Navy/Slate with Rounded Corners) */
.ag-theme-fresh .ag-header {
    background-color: #1a2537 !important;
    background: #1a2537 !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    overflow: hidden !important;
}

.ag-theme-fresh .ag-header-row {
    background-color: #1a2537 !important;
    background: #1a2537 !important;
    border-radius: 8px 8px 0 0 !important;
}

.ag-theme-fresh .ag-header-cell,
.ag-theme-fresh .ag-header-group-cell {
    background-color: #1a2537 !important;
    background: #1a2537 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.ag-theme-fresh .ag-header-cell:last-child {
    border-right: none !important;
}

.ag-theme-fresh .ag-header-cell-text,
.ag-theme-fresh .ag-header-cell-label,
.ag-theme-fresh .ag-header-group-cell-label {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Make sort and menu icons white for visibility */
.ag-theme-fresh .ag-header-icon,
.ag-theme-fresh .ag-header-cell-menu-button,
.ag-theme-fresh .ag-header-cell-menu-button .ag-icon,
.ag-theme-fresh .ag-header-cell .ag-header-icon,
.ag-theme-fresh .ag-header-icon .ag-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.ag-theme-fresh .ag-header-cell:hover {
    background-color: #24324c !important;
}

.ag-theme-fresh .ag-root-wrapper {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
}

/* 10. Fix ag-Grid No-Data Overlay Alignment & Text Cutoff */
.ag-theme-fresh .ag-overlay {
    position: absolute !important;
    top: 40px !important;
    left: 0 !important;
    right: 0 !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffe6a0 !important;
    color: #be6b03 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: capitalize !important;
    border-bottom: 1px solid #f5d37f !important;
    z-index: 10 !important;
}

.ag-theme-fresh .ag-overlay .ag-overlay-panel,
.ag-theme-fresh .ag-overlay .ag-overlay-wrapper,
.ag-theme-fresh .ag-overlay .ag-overlay-no-rows-wrapper,
.ag-theme-fresh .ag-overlay .ag-overlay-no-rows-center,
.ag-theme-fresh .ag-overlay .ag-overlay-loading-wrapper,
.ag-theme-fresh .ag-overlay .ag-overlay-loading-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
}

/* 10. Fix horizontal scroll synchronization of grid header and viewports */
.ag-theme-fresh .ag-header-viewport,
.ag-theme-fresh .ag-body-viewport,
.ag-theme-fresh .ag-center-cols-viewport,
.ag-theme-fresh .ag-body-horizontal-scroll-viewport,
.ag-theme-fresh .ag-floating-top-viewport,
.ag-theme-fresh .ag-floating-bottom-viewport,
.ag-theme-fresh .ag-root {
    flex: 1 1 0% !important;
}

.ag-theme-fresh .ag-header-viewport {
    overflow: hidden !important;
}

.ag-theme-fresh .ag-body-viewport,
.ag-theme-fresh .ag-center-cols-viewport {
    overflow-x: hidden !important;
}

.ag-theme-fresh .ag-body-viewport {
    min-height: 100px !important;
}

/* 11. Appointment List Calendar View Styles */
.calendar-container-wrapper {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    box-shadow: var(--shadow-sm);
}

.calendar-header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    background-color: var(--bg-primary) !important;
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid var(--border-color) !important;
}

.calendar-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary) !important;
    text-transform: capitalize;
    margin: 0;
}

.calendar-wrapper-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-weekdays-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color) !important;
}

.weekday-header {
    text-align: center;
    padding: 10px;
    font-weight: bold;
    font-size: 13px;
    border-right: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.weekday-header:last-child {
    border-right: none !important;
}

.calendar-cells-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background-color: var(--border-color) !important;
    border-radius: 0 0 6px 6px;
    padding: 4px;
}

.calendar-cell-item {
    background-color: var(--bg-surface) !important;
    min-height: 120px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease-in-out;
    border-radius: 4px;
    position: relative;
}

.calendar-cell-item:hover {
    background-color: var(--accent-bg) !important;
    box-shadow: inset 0 0 0 2px var(--accent-primary) !important;
}

.calendar-cell-item.other-month {
    background-color: var(--bg-primary) !important;
    opacity: 0.5 !important;
}

.calendar-cell-item.other-month .day-number {
    color: var(--text-secondary) !important;
}

.calendar-cell-item.is-today {
    background-color: var(--accent-bg) !important;
    box-shadow: inset 0 0 0 2px var(--accent-primary) !important;
}

.calendar-cell-item.is-today .day-number {
    color: var(--text-primary) !important;
    background-color: var(--accent-primary) !important;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.cell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.day-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary) !important;
}

.cell-badge {
    background-color: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 6px;
    line-height: 1;
}

.cell-appointments {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    overflow: hidden;
}

.appt-pill {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 4px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    line-height: 1.3;
}

.appt-pill .appt-time {
    font-weight: 700;
    margin-right: 4px;
    opacity: 0.95;
}

.appt-pill .appt-name {
    font-weight: 500;
}

.appt-pill.status-checkedin {
    background-color: #10b981 !important; /* emerald-500 */
}

.appt-pill.status-cancelled {
    background-color: #ef4444 !important; /* red-500 */
    text-decoration: line-through;
    opacity: 0.8;
}

.appt-pill.status-pending {
    background-color: #3b82f6 !important; /* blue-500 */
}

.more-appts {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-align: center;
    padding-top: 2px;
}

/* ==========================================================================
   THEME SYNCHRONIZATION OVERRIDES (PREVENT WHITE LEAKS & MISMATCHES)
   ========================================================================== */

/* 1. Eliminate any potential white background leaks globally across core containers */
html,
body,
.page-wrapper,
.page-container,
.page-content-wrapper,
.page-content,
.cstm-pg-content,
.page-container-bg-solid,
.page-content-white {
    background-color: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

/* 2. Force transparency on breadcrumbs to prevent light-colored background leaks behind tabs */
.page-bar .page-breadcrumb,
ul.page-breadcrumb,
.page-bar .page-breadcrumb > li,
.page-bar .page-breadcrumb > li:after {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* 3. Handle active/inactive states of tabs inside pagebar to prevent white backgrounds */
.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 {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* 4. Style dispensary active label cleanly without harsh colors */
.page-bar .right .label-primary,
.page-bar .right .label {
    background-color: var(--accent-bg) !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--border-color) !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
}

/* 5. Force FontAwesome font-family on icons inside labels to prevent letters like 'T' replacing icons */
.label-default .fa, 
.label .fa,
label.label-default i,
label.label i,
.label-default .fa-filter,
.label .fa-filter {
    font-family: 'FontAwesome' !important;
}

/* Style label-default for filter labels to be theme-adaptive and prevent contrast issues */
.label-default,
label.label-default {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 6. Force a clean, compact and fixed height for the top bar across all modules to prevent vertical bloating */
body .page-bar.fixed-top-bar {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

body .page-bar.fixed-top-bar .page-breadcrumb {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body .page-bar.fixed-top-bar .page-breadcrumb > li {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .page-bar.fixed-top-bar .page-breadcrumb > li > a {
    padding: 0 16px !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border-bottom: 2px solid transparent !important;
}

body .page-bar.fixed-top-bar .page-breadcrumb > li > a.link3-active,
body .page-bar.fixed-top-bar .page-breadcrumb > li > a.a-tab-active {
    color: var(--accent-primary) !important;
    background-color: var(--accent-bg) !important;
    border-bottom: 2px solid var(--accent-primary) !important;
    font-weight: 700 !important;
}

body .page-bar.fixed-top-bar .page-breadcrumb > li > a:hover {
    color: var(--accent-primary) !important;
    background-color: var(--accent-bg) !important;
}

/* 7. Expand the width and height of the Employee Add modal to accommodate the massive 3-column form and prevent layout squishing */
body .popup-static.employee-add-modal .portlet-body.form,
body .popup-static.employee-add-modal .modelbox-div {
    max-width: 1300px !important;
    width: 96% !important;
}

body .popup-static.employee-add-modal .modelbox-div {
    padding: 24px 30px !important;
    max-height: 90vh !important;   /* Giới hạn chiều cao tối đa bằng 90% chiều cao màn hình */
    overflow-y: auto !important;    /* Kích hoạt thanh cuộn dọc khi nội dung vượt quá */
}

body .popup-static.employee-add-modal .form-group {
    margin-bottom: 12px !important;
}

body .popup-static.employee-add-modal .control-label {
    text-align: right;
    padding-right: 5px;
}

/* Tùy chỉnh thanh cuộn dọc mượt mà cho đồng bộ giao diện tối */
body .popup-static.employee-add-modal .modelbox-div::-webkit-scrollbar {
    width: 8px;
}

body .popup-static.employee-add-modal .modelbox-div::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

body .popup-static.employee-add-modal .modelbox-div::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

body .popup-static.employee-add-modal .modelbox-div::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Căn phải nút bấm hành động và đồng bộ giao diện tối cho chân trang popup */
body .popup-static.employee-add-modal .panel-footer {
    text-align: right !important;
    background-color: transparent !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 15px 0 0 0 !important;
    margin-top: 15px !important;
}

/* 8. Modernize and harmonize all primary action buttons (Add, Save, Update) across all modals to match the premium blue-gradient style of the "Select File" (btn-primary) button */
body .popup-static .btn-success,
body .popup-static .btn.green,
body .popup-static .btn.blue:not(.bordered) {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: 0 4px 12px var(--border-glow) !important;
    transition: all 0.2s ease !important;
    text-shadow: none !important;
}

body .popup-static .btn-success:hover,
body .popup-static .btn.green:hover,
body .popup-static .btn.blue:not(.bordered):hover {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-primary) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px var(--border-glow) !important;
}

/* 9. Force all modal action footer containers (form-actions, panel-footer) to align buttons to the right and flow from right to left (row-reverse) */
body .popup-static .form-actions,
body .popup-static .panel-footer {
    display: flex !important;
    flex-direction: row-reverse !important; /* Xếp các nút từ phải sang trái: nút chính ở ngoài cùng bên phải */
    justify-content: flex-start !important;  /* Đẩy toàn bộ cụm nút sát mép bên phải */
    align-items: center !important;
    gap: 12px !important;                   /* Khoảng cách đều đặn giữa các nút */
    background-color: transparent !important;
    background: transparent !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 15px 0 0 0 !important;
    margin-top: 20px !important;
}

/* Triệt tiêu margin cũ của các nút con trong footer modal để khoảng cách gap của Flexbox hoạt động hoàn hảo */
body .popup-static .form-actions button,
body .popup-static .form-actions input[type="button"],
body .popup-static .form-actions input[type="submit"],
body .popup-static .form-actions a,
body .popup-static .panel-footer button,
body .popup-static .panel-footer input[type="button"],
body .popup-static .panel-footer input[type="submit"],
body .popup-static .panel-footer a {
    margin: 0 !important;
}

/* ==========================================================================
   GLOBAL PREMIUM GRID THEME OVERRIDES (AG-GRID SYNCHRONIZATION)
   ========================================================================== */

/* 1. ag-Grid Header Overrides */
body .ag-theme-fresh .ag-header {
    background-color: var(--bg-surface) !important;
    background: var(--bg-surface) !important;
    border-bottom: 2px solid var(--border-color) !important;
    border-radius: 8px 8px 0 0 !important;
}

body .ag-theme-fresh .ag-header-row {
    background-color: var(--bg-surface) !important;
    background: var(--bg-surface) !important;
    border-bottom: none !important;
}

body .ag-theme-fresh .ag-header-cell,
body .ag-theme-fresh .ag-header-group-cell {
    background-color: var(--bg-surface) !important;
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    border-right: none !important;
    border-left: none !important;
}

body .ag-theme-fresh .ag-header-cell:last-child {
    border-right: none !important;
}

body .ag-theme-fresh .ag-header-cell-text,
body .ag-theme-fresh .ag-header-cell-label,
body .ag-theme-fresh .ag-header-group-cell-label {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

/* Make sort and menu icons match secondary text color */
body .ag-theme-fresh .ag-header-icon,
body .ag-theme-fresh .ag-header-cell-menu-button,
body .ag-theme-fresh .ag-header-cell-menu-button .ag-icon,
body .ag-theme-fresh .ag-header-icon .ag-icon {
    color: var(--text-secondary) !important;
    fill: var(--text-secondary) !important;
}

body .ag-theme-fresh .ag-header-cell:hover {
    background-color: var(--accent-bg) !important;
}

/* 2. ag-Grid Body Row & Cell Overrides */
body .ag-theme-fresh .ag-row {
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    transition: all 0.2s ease !important;
}

body .ag-theme-fresh .ag-row-odd,
body .ag-theme-fresh .ag-row-even {
    background-color: transparent !important;
    background: transparent !important;
}

body .ag-theme-fresh .ag-row-hover,
body .ag-theme-fresh .ag-row:hover {
    background-color: var(--accent-bg) !important;
    background: var(--accent-bg) !important;
    color: var(--text-primary) !important;
}

body .ag-theme-fresh .ag-cell,
body .ag-theme-fresh .ag-cell-value,
body .ag-theme-fresh .ag-ltr .ag-cell-focus,
body .ag-theme-fresh .ag-rtl .ag-cell-focus,
body .ag-theme-fresh .ag-ltr .ag-cell-focus:first-child,
body .ag-theme-fresh .ag-cell-focus:first-child {
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    color: var(--text-primary) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: 13.5px !important;
    height: 100% !important;
}

/* Center action cell buttons horizontally */
body .ag-theme-fresh .ag-cell:has(.grid-action),
body .ag-theme-fresh .ag-cell:has([dsf-grid-action]) {
    justify-content: center !important;
}

/* 3. ag-Grid Container Border Radius Override */
body .ag-theme-fresh .ag-root-wrapper {
    border-radius: 12px !important;
    border: 1px solid var(--border-color) !important;
    background-color: var(--bg-surface) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
}

/* 4. Employee Role, Type & Branch Modal Width Override */
body .custom_modal .modelbox-div.modal-employee-role,
body .custom_modal .modelbox-div.modal-employee-type,
body .custom_modal .modelbox-div.modal-branch-manage {
    max-width: 600px !important;
    width: 92% !important;
}

body .custom_modal .modelbox-div.modal-branch-assign {
    max-width: 850px !important;
    width: 95% !important;
}

body .custom_modal .modelbox-div.modal-parameter-edit {
    max-width: 750px !important;
    width: 95% !important;
}

body .custom_modal .modelbox-div.modal-service-item {
    max-width: 960px !important;
    width: 95% !important;
}

body .custom_modal .modelbox-div.modal-ward-substore-map {
    max-width: 850px !important;
    width: 95% !important;
}

body .custom_modal .modelbox-div.modal-substore-add {
    max-width: 900px !important;
    width: 95% !important;
}