/* Professional hospital theme overlay. Existing ASPX IDs and scripts stay unchanged. */
:root {
    --primary: #0f6f8f;
    --primary2: #16a3a6;
    --primary-soft: #e8f7f8;
    --mint: #e6f8f0;
    --green: #15a66a;
    --orange: #e8a325;
    --purple: #4f6fd9;
    --teal: #118c95;
    --bg: #f3f8fb;
    --card: #ffffff;
    --text: #1e3343;
    --muted: #657789;
    --border: #d9e7ee;
    --shadow: 0 18px 42px rgba(27, 70, 92, 0.12);
    --danger: #d94f5c;
    --warning: #e8a325;
    --success: #15a66a;
}

html,
body {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: "Poppins", Arial, sans-serif !important;
}

body {
    overflow-x: hidden !important;
}

.top-header,
.fixed-footer,
.topbar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: var(--border) !important;
    box-shadow: 0 10px 30px rgba(22, 72, 96, 0.08) !important;
}

.main-wrapper,
.dashboard-wrapper {
    background:
        radial-gradient(circle at top left, rgba(22, 163, 166, 0.16), transparent 30%),
        radial-gradient(circle at bottom right, rgba(15, 111, 143, 0.12), transparent 34%),
        linear-gradient(135deg, #f7fbfd 0%, #eef7fa 48%, #f5fbf8 100%) !important;
}

.menu-link:hover,
.menu-link.active,
.dropdown-box a:hover,
.dropdown-sub:hover > a,
.dropdown-sub-menu a:hover,
.fixed-footer a,
.login-card h2,
.brand-title,
.topbar-status,
.footer-text a {
    color: var(--primary) !important;
}

.menu-link i,
.dropdown-box a > i:first-child,
.dropdown-sub-menu a > i:first-child,
.dropdown-sub > a .menu-text > i:first-child,
.mobile-menu-panel a i,
.mobile-parent-title span i,
.mobile-sub-parent-title span i,
.input-icon,
.password-icon:hover {
    color: var(--primary) !important;
}

.user-pill,
.btn-primary,
.btn-add,
.btn-refresh,
.btn-appt,
.btn-login,
.modal-header,
.modal-header-primary,
.modern-modal-header,
.master-modal-title,
.user-modal-title,
.doctor-modal-title {
    background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
    border: 0 !important;
    color: #ffffff !important;
}

.btn-new,
.stat-complete .stat-icon {
    background: linear-gradient(135deg, var(--success), #30c98a) !important;
}

.btn-pres,
.btn-patient {
    background: linear-gradient(135deg, #266fd1, #5b95e5) !important;
}

.btn-pres {
    background: linear-gradient(135deg, #6f55d9, #927df0) !important;
}

.btn-trans {
    background: linear-gradient(135deg, #0f8f62, #2fc886) !important;
}

.btn-list,
.stat-pending .stat-icon {
    background: linear-gradient(135deg, var(--warning), #f1bd52) !important;
}

.btn-danger,
.stat-cancel .stat-icon {
    background: linear-gradient(135deg, var(--danger), #ef7882) !important;
}

.stat-total .stat-icon,
.appt-title-icon,
.settings-icon,
.logout-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
    color: #ffffff !important;
}

.icon-activity {
    background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
}

.page-card,
.appt-card,
.schedule-card,
.table-card,
.patient-card,
.master-card,
.settings-card,
.user-management-card,
.login-card,
.welcome-card,
.brand-logo-card,
.mobile-logo-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}

.page-card,
.appt-card,
.schedule-card,
.table-card,
.patient-card,
.master-card,
.settings-card,
.user-management-card {
    border-radius: 18px !important;
}

.master-hero,
.settings-hero,
.user-management-hero {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 250, 252, 0.96)) !important;
    border-left: 5px solid var(--primary2) !important;
}

.page-title h3,
.master-title h3,
.appt-title h3,
.patient-title h3,
.settings-card h4,
.section-title {
    color: var(--text) !important;
}

.page-title h3 i,
.master-title h3 i,
.page-title h1 i,
.master-title h1 i {
    color: var(--primary) !important;
}

.page-title p,
.master-title p,
.appt-title p,
.patient-title p,
.schedule-header p,
.settings-card p,
.login-subtitle {
    color: var(--muted) !important;
}

.form-control,
select.form-control,
textarea.form-control,
.select2-container .select2-choice,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: #f8fcfd !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    border-radius: 12px !important;
}

.form-control:focus,
.input-box .form-control:focus,
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
    border-color: var(--primary2) !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 166, 0.14) !important;
}

label,
.form-group label,
.control-label {
    color: #294559 !important;
}

.table thead th,
.master-table th,
.rights-table thead th {
    background: #eaf6f8 !important;
    color: #244153 !important;
    border-color: var(--border) !important;
}

.table tbody td,
.master-table td,
.rights-table tbody td {
    border-color: var(--border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fbfdfe !important;
}

.table-hover > tbody > tr:hover {
    background-color: #eef9fa !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: #f8fcfd !important;
    border-color: var(--border) !important;
}

.select2-results .select2-highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
    color: #ffffff !important;
}

.dropdown-box,
.dropdown-sub-menu,
.mobile-menu-panel {
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
}

.dropdown-box a:hover,
.dropdown-sub:hover > a,
.dropdown-sub-menu a:hover,
.mobile-parent.open .mobile-parent-title,
.mobile-sub-parent-title {
    background: var(--primary-soft) !important;
}

.mobile-menu-panel a.active,
.mobile-menu-panel a:hover {
    background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
    color: #ffffff !important;
}

.mobile-menu-btn {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
}

.modal-content {
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(27, 70, 92, 0.22) !important;
}

.modal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.modal-backdrop {
    width: 100vw !important;
    height: 100vh !important;
}

.modal .form-control,
.modal select.form-control,
.modal textarea.form-control,
#new .form-control,
#edit .form-control,
#appt_lst .form-control,
#doctorModal .form-control,
#userModal .form-control,
#groupModal .form-control,
#operatoryModal .form-control,
#chiefComplaintModal .form-control,
#procedureModal .form-control {
    background: #f8fcfd !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.modal .form-control:focus,
.modal select.form-control:focus,
.modal textarea.form-control:focus,
#new .form-control:focus,
#edit .form-control:focus,
#doctorModal .form-control:focus,
#userModal .form-control:focus,
#groupModal .form-control:focus,
#operatoryModal .form-control:focus,
#chiefComplaintModal .form-control:focus,
#procedureModal .form-control:focus {
    background: #ffffff !important;
    border-color: var(--primary2) !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 166, 0.14) !important;
}

.modal .select2-container .select2-choice,
.modal .select2-container--default .select2-selection--single,
.modal .select2-container--default .select2-selection--multiple {
    background: #f8fcfd !important;
    border-color: var(--border) !important;
    border-radius: 12px !important;
}

.modal-header.master-modal-header,
.user-modal-header {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    display: block !important;
}

.master-modal-title,
.doctor-modal-title,
.user-modal-title {
    width: 100% !important;
    min-height: 64px !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
    color: #ffffff !important;
}

.master-modal-title .modal-title,
.doctor-modal-title .modal-title,
.user-modal-title .modal-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.master-modal-title .close,
.doctor-modal-title .close,
.user-modal-title .close,
.modal-header-primary .close {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 30px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

#doctorModal .modal-content,
#userModal .modal-content,
#new .modal-content,
#edit .modal-content {
    overflow: hidden !important;
}

body.patients-page #new .modal-content,
body.patients-page #edit .modal-content {
    overflow: visible !important;
}

body.patients-page #new .modal-body,
body.patients-page #edit .modal-body {
    overflow: visible !important;
}

#doctorModal .modal-body,
#userModal .modal-body {
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%) !important;
}

#doctorModal .doctor-color-input {
    min-height: 48px !important;
    padding: 5px 8px !important;
    cursor: pointer;
}

.btn-light {
    background: #eef6f8 !important;
    border: 1px solid var(--border) !important;
    color: #294559 !important;
}

.btn-light:hover,
.btn-light:focus {
    background: #e3f1f4 !important;
    color: var(--primary) !important;
}

.modal-footer {
    border-color: var(--border) !important;
}

.activity-item {
    background: #f8fcfd !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 24px rgba(27, 70, 92, 0.07) !important;
}

.activity-item span {
    color: var(--muted) !important;
}

.activity-item strong,
#tdLastLogin,
#tdLastIP {
    color: var(--primary) !important;
}

.user-action-btn,
.master-action-btn,
.patient-action-btn {
    box-shadow: 0 10px 20px rgba(27, 70, 92, 0.13) !important;
}

.user-edit-btn,
.master-edit-btn,
.patient-edit-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
}

.user-delete-btn,
.master-delete-btn,
.patient-delete-btn,
#btnDeletePt {
    background: linear-gradient(135deg, var(--danger), #ef7882) !important;
    border: 0 !important;
    color: #ffffff !important;
}

.rights-check {
    accent-color: var(--primary) !important;
}

.tap-top {
    position: fixed !important;
    right: 22px !important;
    bottom: 78px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(15, 111, 143, 0.25) !important;
    z-index: 19998 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.tap-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 111, 143, 0.32) !important;
}

.tap-top i {
    color: #ffffff !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

.appt-status-pending {
    background: #fff5db !important;
    color: #8a600d !important;
}

.appt-status-complete {
    background: #e5f8ef !important;
    color: #0f6844 !important;
}

.appt-status-cancel {
    background: #fde9eb !important;
    color: #9f303a !important;
}

.login-page {
    background: linear-gradient(135deg, #f7fbfd 0%, #edf8fa 48%, #f5fbf8 100%) !important;
}

.login-left {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 30%),
        linear-gradient(135deg, #e2f5f8 0%, #f7fbfd 46%, #eaf8f0 100%) !important;
}

.brand-tagline {
    color: var(--primary) !important;
    background: #ffffff !important;
}

.loading-circle {
    border-color: var(--primary-soft) !important;
    border-top-color: var(--primary2) !important;
}

.dashboard-wrapper {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.65), transparent 32%),
        linear-gradient(135deg, #e8f7f8 0%, #f7fbfd 50%, #eaf8f0 100%) !important;
}

.dashboard-wrapper .topbar,
.dashboard-wrapper .footer {
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: var(--border) !important;
}

.dashboard-wrapper .brand-title,
.dashboard-wrapper .topbar-status i,
.dashboard-wrapper .footer a {
    color: var(--primary) !important;
}

.dashboard-wrapper .topbar-status,
.dashboard-wrapper .footer p,
.dashboard-wrapper .loading-subtext {
    color: var(--muted) !important;
}

.dashboard-wrapper .welcome-card,
.dashboard-wrapper .logo-card {
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
}

.dashboard-wrapper .welcome-card:before {
    background: rgba(22, 163, 166, 0.08) !important;
}

.dashboard-wrapper .loading-circle {
    border-color: #dff2f5 !important;
    border-top-color: var(--primary2) !important;
}

.dashboard-wrapper .loading-text {
    color: var(--text) !important;
}

@media (max-width: 991px) {
    .top-header {
        height: 76px !important;
    }

    .main-wrapper {
        padding: 18px 14px !important;
    }
}

@media (max-width: 768px) {
    .page-card,
    .appt-card,
    .schedule-card,
    .table-card,
    .patient-card,
    .master-card,
    .settings-card,
    .user-management-card {
        border-radius: 16px !important;
    }

    .login-page {
        background: linear-gradient(135deg, #e7f7f9 0%, #f7fbfd 55%, #edf8f2 100%) !important;
    }

    .tap-top {
        right: 14px !important;
        bottom: 72px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
    }

    .appt-actions {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    body.patients-page .select2-container--open,
    body.patients-page .select2-dropdown {
        z-index: 30050 !important;
    }

    body.patients-page .select2-dropdown {
        border-radius: 14px !important;
        box-shadow: 0 18px 42px rgba(27, 70, 92, 0.22) !important;
    }

    body.patients-page .select2-container--default .select2-results > .select2-results__options {
        max-height: 220px !important;
        overflow-y: auto !important;
    }

    body.patients-page .patient-modal-select2 {
        width: 100% !important;
    }

    body.patients-page .modal .select2-container--default .select2-selection--single,
    body.patients-page .modal .select2-container--default .select2-selection--multiple {
        width: 100% !important;
    }

    body.patients-page .modal .select2-container--default .select2-selection--multiple .select2-search--inline {
        width: auto !important;
        min-width: 4px !important;
        flex: 1 0 4px !important;
    }

    body.patients-page .modal .select2-container--default .select2-selection--multiple .select2-search__field {
        width: 100% !important;
        min-width: 4px !important;
    }
}