/* Hospital Management System Theme Colors */
/* Override AdminLTE default colors with hospital management theme */

:root {
    /* Hospital Management Color Palette */
    --hospital-primary: rgb(29,53,87);
    --hospital-primary-dark: #1D4ED8;
    --hospital-primary-light: #3B82F6;
    --hospital-secondary: #0891B2;
    --hospital-secondary-dark: #0E7490;
    --hospital-secondary-light: #06B6D4;
    --hospital-success: #059669;
    --hospital-success-dark: #047857;
    --hospital-success-light: #10B981;
    --hospital-warning: #F59E0B;
    --hospital-warning-dark: #D97706;
    --hospital-warning-light: #FBBF24;
    --hospital-danger: #DC2626;
    --hospital-danger-dark: #B91C1C;
    --hospital-danger-light: #EF4444;
    --hospital-info: #0891B2;
    --hospital-info-dark: #0E7490;
    --hospital-info-light: #06B6D4;
}

/* Override AdminLTE Primary Colors */
.skin-blue .main-header .navbar {
    background-color: var(--hospital-primary) !important;
}

.skin-blue .main-header .navbar .nav > li > a {
    color: #fff !important;
}

.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus {
    background-color: var(--hospital-primary-dark) !important;
    color: #fff !important;
}

.skin-blue .main-header .logo {
    background-color: var(--hospital-primary) !important;
    color: #fff !important;
    border-bottom: 0 solid transparent !important;
}

.skin-blue .main-header .logo:hover {
    background-color: var(--hospital-primary-dark) !important;
}

.skin-blue .main-sidebar,
.skin-blue .left-side {
    background-color: var(--hospital-primary) !important;
    background: var(--hospital-primary) !important;
}

.skin-blue .sidebar-menu > li.header {
    color: #fff !important;
    background: rgba(0,0,0,0.2) !important;
}

.skin-blue .sidebar-menu > li > a {
    border-left: 3px solid transparent !important;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
    border-left-color: var(--hospital-success) !important;
}

.skin-blue .sidebar-menu > li.active > a {
    background: rgba(255,255,255,0.2) !important;
}

.skin-blue .treeview-menu {
    background: rgba(0,0,0,0.2) !important;
}

.skin-blue .treeview-menu > li > a {
    color: rgba(255,255,255,0.8) !important;
}

.skin-blue .treeview-menu > li > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}

.skin-blue .treeview-menu > li.active > a {
    color: #fff !important;
    background: rgba(255,255,255,0.15) !important;
}

/* Button Colors */
.btn-primary {
    background-color: var(--hospital-primary) !important;
    border-color: var(--hospital-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--hospital-primary-dark) !important;
    border-color: var(--hospital-primary-dark) !important;
}

.btn-success {
    background-color: var(--hospital-success) !important;
    border-color: var(--hospital-success) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: var(--hospital-success-dark) !important;
    border-color: var(--hospital-success-dark) !important;
}

.btn-warning {
    background-color: var(--hospital-warning) !important;
    border-color: var(--hospital-warning) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: var(--hospital-warning-dark) !important;
    border-color: var(--hospital-warning-dark) !important;
}

.btn-danger {
    background-color: var(--hospital-danger) !important;
    border-color: var(--hospital-danger) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    background-color: var(--hospital-danger-dark) !important;
    border-color: var(--hospital-danger-dark) !important;
}

.btn-info {
    background-color: var(--hospital-info) !important;
    border-color: var(--hospital-info) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
    background-color: var(--hospital-info-dark) !important;
    border-color: var(--hospital-info-dark) !important;
}

/* Label Colors */
.label-primary {
    background-color: var(--hospital-primary) !important;
}

.label-success {
    background-color: var(--hospital-success) !important;
}

.label-warning {
    background-color: var(--hospital-warning) !important;
}

.label-danger {
    background-color: var(--hospital-danger) !important;
}

.label-info {
    background-color: var(--hospital-info) !important;
}

/* Progress Bar Colors */
.progress-bar-primary {
    background-color: var(--hospital-primary) !important;
}

.progress-bar-success {
    background-color: var(--hospital-success) !important;
}

.progress-bar-warning {
    background-color: var(--hospital-warning) !important;
}

.progress-bar-danger {
    background-color: var(--hospital-danger) !important;
}

.progress-bar-info {
    background-color: var(--hospital-info) !important;
}

/* Alert Colors */
.alert-primary {
    background-color: var(--hospital-primary-light) !important;
    border-color: var(--hospital-primary) !important;
    color: #fff !important;
}

.alert-success {
    background-color: var(--hospital-success-light) !important;
    border-color: var(--hospital-success) !important;
    color: #fff !important;
}

.alert-warning {
    background-color: var(--hospital-warning-light) !important;
    border-color: var(--hospital-warning) !important;
    color: #fff !important;
}

.alert-danger {
    background-color: var(--hospital-danger-light) !important;
    border-color: var(--hospital-danger) !important;
    color: #fff !important;
}

.alert-info {
    background-color: var(--hospital-info-light) !important;
    border-color: var(--hospital-info) !important;
    color: #fff !important;
}

/* Text Colors */
.text-primary {
    color: var(--hospital-primary) !important;
}

.text-success {
    color: var(--hospital-success) !important;
}

.text-warning {
    color: var(--hospital-warning) !important;
}

.text-danger {
    color: var(--hospital-danger) !important;
}

.text-info {
    color: var(--hospital-info) !important;
}

/* Small Box Colors */
.bg-aqua {
    background-color: var(--hospital-info) !important;
}

.bg-green {
    background-color: var(--hospital-success) !important;
}

.bg-yellow {
    background-color: var(--hospital-warning) !important;
}

.bg-red {
    background-color: var(--hospital-danger) !important;
}

.bg-blue {
    background-color: var(--hospital-primary) !important;
}

/* Info Box Colors */
.info-box-icon.bg-aqua {
    background-color: var(--hospital-info) !important;
}

.info-box-icon.bg-green {
    background-color: var(--hospital-success) !important;
}

.info-box-icon.bg-yellow {
    background-color: var(--hospital-warning) !important;
}

.info-box-icon.bg-red {
    background-color: var(--hospital-danger) !important;
}

.info-box-icon.bg-blue {
    background-color: var(--hospital-primary) !important;
}

/* Box Colors */
.box-primary {
    border-top-color: var(--hospital-primary) !important;
}

.box-success {
    border-top-color: var(--hospital-success) !important;
}

.box-warning {
    border-top-color: var(--hospital-warning) !important;
}

.box-danger {
    border-top-color: var(--hospital-danger) !important;
}

.box-info {
    border-top-color: var(--hospital-info) !important;
}

/* Callout Colors */
.callout-primary {
    border-left-color: var(--hospital-primary) !important;
}

.callout-success {
    border-left-color: var(--hospital-success) !important;
}

.callout-warning {
    border-left-color: var(--hospital-warning) !important;
}

.callout-danger {
    border-left-color: var(--hospital-danger) !important;
}

.callout-info {
    border-left-color: var(--hospital-info) !important;
}

/* Navbar Colors */
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    background-color: var(--hospital-primary) !important;
}

/* Form Focus Colors */
.form-control:focus {
    border-color: var(--hospital-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25) !important;
}

/* Checkbox and Radio Colors */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--hospital-primary) !important;
    border-color: var(--hospital-primary) !important;
}

/* Link Colors */
a {
    color: var(--hospital-primary) !important;
}

a:hover,
a:focus {
    color: var(--hospital-primary-dark) !important;
}

/* Pagination Colors */
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    background-color: var(--hospital-primary) !important;
    border-color: var(--hospital-primary) !important;
}

/* Table Colors */
.table > thead > tr > th {
    background-color: var(--hospital-primary) !important;
    color: #fff !important;
}

/* Modal Colors */
.modal-header {
    background-color: var(--hospital-primary) !important;
    color: #fff !important;
}

/* Tabs Colors */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--hospital-primary) !important;
    color: #fff !important;
}

/* Dropdown Colors */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--hospital-primary) !important;
    color: #fff !important;
}

/* Badge Colors */
.badge-primary {
    background-color: var(--hospital-primary) !important;
}

.badge-success {
    background-color: var(--hospital-success) !important;
}

.badge-warning {
    background-color: var(--hospital-warning) !important;
}

.badge-danger {
    background-color: var(--hospital-danger) !important;
}

.badge-info {
    background-color: var(--hospital-info) !important;
}

/* Custom Hospital Management Specific Styles */
.hospital-gradient {
    background: var(--hospital-primary) !important;
}

.hospital-card {
    border-left: 4px solid var(--hospital-primary) !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1) !important;
}

.hospital-icon {
    color: var(--hospital-primary) !important;
}

.hospital-text {
    color: var(--hospital-primary) !important;
}

/* Medical Theme Icons */
.medical-icon {
    color: var(--hospital-primary) !important;
    font-size: 1.2em !important;
}

.medical-icon:hover {
    color: var(--hospital-primary-dark) !important;
}

/* Status Indicators */
.status-active {
    background-color: var(--hospital-success) !important;
    color: #fff !important;
}

.status-pending {
    background-color: var(--hospital-warning) !important;
    color: #fff !important;
}

.status-inactive {
    background-color: var(--hospital-danger) !important;
    color: #fff !important;
}

.status-emergency {
    background-color: var(--hospital-danger) !important;
    color: #fff !important;
    animation: pulse 2s infinite !important;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hospital-gradient {
        background: var(--hospital-primary) !important;
    }
    
    .hospital-card {
        border-left: 2px solid var(--hospital-primary) !important;
    }
}

/* Print Styles */
@media print {
    .hospital-gradient {
        background: #f8f9fa !important;
        color: #000 !important;
    }
    
    .hospital-card {
        border-left: 2px solid #000 !important;
        box-shadow: none !important;
    }
}

/* ===========================================
   HOSPITAL MANAGEMENT DATEPICKER THEME
   =========================================== */

/* Datepicker dropdown styling */
.datepicker {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    background-color: #fff !important;
}

/* Force white background for all datepicker elements */
.datepicker,
.datepicker table,
.datepicker table tr td,
.datepicker table tr th,
.datepicker table tr td span,
.datepicker .datepicker-switch,
.datepicker .next,
.datepicker .prev,
.datepicker .datepicker-today,
.datepicker .datepicker-clear {
    background-color: #fff !important;
    background-image: none !important;
}

/* Override any inherited dark red or problematic colors */
.datepicker * {
    background-color: transparent !important;
}

/* Ensure datepicker container has white background */
.datepicker.dropdown-menu {
    background-color: #fff !important;
    border: 1px solid #ddd !important;
}

/* Datepicker header (month/year navigation) */
.datepicker table tr td span,
.datepicker table tr th {
    border-radius: 4px !important;
}

/* Today highlight - use hospital warning color */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    background-color: var(--hospital-warning-light) !important;
    background-image: none !important;
    color: #000 !important;
    border-color: var(--hospital-warning) !important;
}

/* Active/selected date - use hospital primary color */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: var(--hospital-primary) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--hospital-primary-dark) !important;
    text-shadow: none !important;
}

/* Hover state for selectable dates */
.datepicker table tr td.day:hover {
    background-color: var(--hospital-primary-light) !important;
    color: #fff !important;
}

/* Focused date cell */
.datepicker table tr td.day:focus {
    background-color: var(--hospital-primary) !important;
    color: #fff !important;
}

/* Range selection */
.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: var(--hospital-primary-dark) !important;
    color: #fff !important;
}

/* Disabled dates */
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

/* Old/New month dates */
.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #adb5bd !important;
}

/* Month/Year dropdowns */
.datepicker .datepicker-switch {
    background-color: var(--hospital-primary) !important;
    color: #fff !important;
    border-radius: 4px !important;
}

.datepicker .datepicker-switch:hover {
    background-color: var(--hospital-primary-dark) !important;
    color: #fff !important;
}

/* Next/Previous buttons */
.datepicker .next,
.datepicker .prev {
    background-color: var(--hospital-secondary) !important;
    color: #fff !important;
    border-radius: 4px !important;
}

.datepicker .next:hover,
.datepicker .prev:hover {
    background-color: var(--hospital-secondary-dark) !important;
    color: #fff !important;
}

/* Datepicker dropdown arrow */
.datepicker-dropdown:before {
    border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}

.datepicker-dropdown:after {
    border-bottom-color: #fff !important;
}

/* Clear button styling */
.datepicker .datepicker-clear {
    background-color: var(--hospital-danger) !important;
    color: #fff !important;
    border-radius: 4px !important;
}

.datepicker .datepicker-clear:hover {
    background-color: var(--hospital-danger-dark) !important;
    color: #fff !important;
}

/* Today button styling */
.datepicker .datepicker-today {
    background-color: var(--hospital-success) !important;
    color: #fff !important;
    border-radius: 4px !important;
}

.datepicker .datepicker-today:hover {
    background-color: var(--hospital-success-dark) !important;
    color: #fff !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .datepicker {
        font-size: 14px !important;
    }

    .datepicker table tr td,
    .datepicker table tr th {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
}