/* Premium Theme for MedicalPRO */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif !important;
    color: #334155;
    /* Slate 700 */
    background-color: #f1f5f9;
    /* Slate 100 */
}

/* Typography Overrides */
h1,
h2,
/* h3, */
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
    letter-spacing: -0.025em;
    /* color: #0f172a; */
    /* Slate 900 */
}

/*  h3 {
    color: #ffffff !important;
}
Commented out to fix the color of the h3 in the panel heading*/

/* Cards (Panels) */
.panel {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 -20px 1px -20px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important
    background: #ffffff;
    transition: box-shadow 0.2s ease;
    /* Removed transform to fix stacking context */
    margin-bottom: 24px;
    background-color: #fff;
    /* overflow: visible !important; - Removed to allow proper corner clipping/masking */
}

.panel:hover {
    /* transform removed to prevent z-index/dropdown issues */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.panel-heading {
    background-color: transparent;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 20px 24px !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    /* color: #ffffffe7 !important; */
    border-radius: 16px 16px 0 0 !important;
}

#heading-tra_menu {
    line-height: 0.429;
}


.panel-body {
    padding: 15px !important;
    /*  color: #000000 !important;  */
    overflow: visible !important;
}

/* Fix for panel-body border causing sharp corners */
.panel-body:last-child,
.panel-body:last-of-type {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* Specifically for the primary panel with the light border user noticed */
.panel-primary>.panel-body {
  /*  border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;	*/
    border: 1px solid rgba(51, 122, 183, 0.1);
    /* Ensure border follows radius */
}

.panel-footer {
    background-color: #2c3f4f !important;
    border-top: 1px solid #f1f5f9 !important;
    border-radius: 0 0 16px 16px !important;
    padding: 16px 24px !important;
    color: #ffffffe7 !important;
}

/* Buttons */
.btn {
    border-radius: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    padding: 10px 15px;
    transition: all 0.2s;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: none !important;
    text-transform: none !important;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1.1em;
}

.btn-sm {
    padding: 6px 14px;
    border-radius: 8px !important;
}

.btn-primary {
    background: linear-gradient(135deg, #337ab7 0%, #286090 100%) !important;
    /* Updated to requested Blue */
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(51, 122, 183, 0.3) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #286090 0%, #204d74 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 10px -1px rgba(51, 122, 183, 0.4) !important;
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3) !important;
}

.btn-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    box-shadow: 0 4px 6px -1px rgba(8, 145, 178, 0.3) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 4px 6px -1px rgba(217, 119, 6, 0.3) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.3) !important;
}

/* Inputs */
.form-control {
    border-radius: 10px !important;
    /*  border: 1px solid #cbd5e1 !important; */
    padding: 10px 15px !important;
    /* height is usually fixed in BS3, so padding needs care */
    height: 46px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    background-color: #ffffff;
    transition: all 0.2s;
    color: #1e293b;
}

.form-control:focus {
    background-color: #fff;
    border-color: #337ab7 !important;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.2) !important;
}

/* Main Menu Customization */
#main_menu .panel-heading {
    padding: 13px 25px !important;
    color: #337ab7;
    /* Requested Main Menu Color */
}

/* Override inline background colors if needed, or allow them per user request "remove !important on background" */
/* We don't verify !important here to allow inline overrides or simply defaults */

/* Tables */
.table {
    margin-bottom: 0;
}

.table>thead>tr>th {
    border-bottom: 2px solid #e2e8f0 !important;
    color: #f0f1f3;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8em;
    padding: 16px 14px !important;
}

.table>tbody>tr>td {
    padding: 10px 5px !important;
    border-top: 1px solid #f1f5f9 !important;
    color: #475569;
}

.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
    background-color: #e2e8f0 !important;
}

/* Badges / Labels */
.label,
.badge {
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-weight: 600 !important;
    font-size: 0.85em !important;
}

.label-success {
    background-color: #d1fae5;
    color: #065f46;
}

.label-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.label-primary {
    background-color: #dbeafe;
    color: #1e40af;
}

/* Navbar (Sidebar/Header) Placeholder adjustments */
.navbar-default {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/*
.navbar-brand {
    font-weight: 800;
    color: #0f172a !important;
}
*/

/* Utilities */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Dropdown & Select Fixes */
.dropdown-menu {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    padding: 8px !important;
    z-index: 20000 !important;
    /* Ensure it's above everything including modals */
}

.dropdown-menu>li>a {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    margin-bottom: 2px;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: #f1f5f9 !important;
    color: #337ab7 !important;
}

/* Bootstrap Select Specifics */
.bootstrap-select .dropdown-toggle {
    border: 0.1px solid #cbd5e1 !important;
    background: #fff !important;
    padding: 10px 15px !important;
    border-radius: 10px !important;
}

.bootstrap-select.open .dropdown-toggle {
    border-color: #337ab7 !important;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.2) !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* Bootstrap-select specifics when attached to body */
.bootstrap-select .dropdown-menu {
    margin-top: 5px !important;
    /* When attached to body, width is handled by JS, but we ensure min-width matches button */
    min-width: 80% !important;
}

/* Fix for double borders/padding when bootstrap-select inherits form-control */
.bootstrap-select.form-control {
    border: none !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    height: auto !important;
}

/* Selectize & Tags Fixes */
.selectize-control.form-control {
    border: none !important;
    padding: 0 !important;
    height: auto !important;
}

.selectize-input {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 12px !important;
    min-height: 46px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    transition: all 0.2s;
}

.selectize-input.focus {
    border-color: #337ab7 !important;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.2) !important;
}

.selectize-control.multi .selectize-input>div {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-radius: 6px !important;
    border: none !important;
    padding: 3px 10px !important;
    margin: 2px 4px 2px 0 !important;
    font-weight: 500;
}

.selectize-control.multi .selectize-input>div.active {
    background: #337ab7 !important;
    color: #ffffff !important;
}

.selectize-dropdown {
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #f1f5f9 !important;
    padding: 8px !important;
    margin-top: 8px !important;
}

/* Label Alignment for 46px height inputs */
.control-label {
    padding-top: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

/* Button group with no border radius - joined buttons */
.no-radius-group .btn {
    border-radius: 0px !important;
}

.no-radius-group .btn:first-child {
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 0px !important;
}

.no-radius-group .btn:last-child {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

/* Compact nav tabs to prevent wrapping */
.nav-tabs.nav-justified>li>a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    border-top-left-radius: 12px;
  	border-top-right-radius: 12px;
}

.nav-tabs.nav-justified>li>a .fa {
    margin-right: 4px !important;
}