/**
 * Slovojed Modern Theme v2
 * A clean, elegant UI inspired by contemporary healthcare dashboards
 * Light, airy design with refined typography
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Primary colors - softer, more elegant */
    --theme-primary: #1a5fb4;
    --theme-primary-light: #e8f0fc;
    --theme-primary-dark: #0d4a8c;
    --theme-secondary: #8b95a5;
    --theme-success: #2a9d5c;
    --theme-success-light: #e6f5ed;
    --theme-info: #3daee9;
    --theme-info-light: #e8f6fc;
    --theme-warning: #f5a623;
    --theme-warning-light: #fef6e6;
    --theme-danger: #e74c3c;
    --theme-danger-light: #fdeaea;
    
    /* Sidebar - dark navy, compact */
    --sidebar-bg: #1a2332;
    --sidebar-hover: #252f42;
    --sidebar-active: #1a5fb4;
    --sidebar-text: rgba(255, 255, 255, 0.7);
    --sidebar-text-active: #ffffff;
    --sidebar-width: 220px;
    
    /* Layout */
    --body-bg: #f5f7fa;
    --card-bg: #ffffff;
    --card-border-radius: 10px;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
    
    /* Inputs & buttons */
    --input-border-radius: 6px;
    --button-border-radius: 6px;
    
    /* Typography - lighter weights */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    
    /* Text colors - softer, more readable */
    --text-primary: #47556c;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    
    /* Misc */
    --transition-speed: 0.15s;
    --border-color: #e2e8f0;
}

/* Import Inter font - with lighter weights */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ============================================
   GLOBAL STYLES
   ============================================ */
body {
    font-family: var(--font-family) !important;
    font-size: 13px !important;
    font-weight: var(--font-weight-normal) !important;
    color: var(--text-primary) !important;
    background-color: var(--body-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

/* Reset heavy fonts */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: var(--font-weight-semibold) !important;
    color: var(--text-primary);
    line-height: 1.3;
}

p, span, div, td, th, label, a {
    font-weight: var(--font-weight-normal);
}

strong, b, .font-weight-bold {
    font-weight: var(--font-weight-medium) !important;
}

/* ============================================
   CONTENT WRAPPER
   ============================================ */
.content-wrapper {
    background-color: var(--body-bg) !important;
}

.content {
    padding: 0.75rem;
}

@media (min-width: 768px) {
    .content {
        padding: 1.25rem;
    }
}

/* ============================================
   SIDEBAR - Compact & elegant
   ============================================ */
.main-sidebar {
    background-color: var(--sidebar-bg) !important;
    box-shadow: none;
    width: var(--sidebar-width) !important;
}

/* Brand/Logo - compact */
.brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0.75rem 1rem !important;
    height: auto;
}

.brand-link .brand-image {
    max-height: 28px;
    margin-top: 0;
    border-radius: 6px;
}

.brand-text {
    font-size: 1rem !important;
    font-weight: var(--font-weight-medium) !important;
    letter-spacing: 0;
    color: #fff;
}

/* Sidebar navigation - compact */
.sidebar-dark-primary .nav-sidebar > .nav-item {
    margin: 1px 0;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
    color: var(--sidebar-text);
    border-radius: 0;
    margin: 0;
    padding: 0.6rem 1rem;
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    transition: all var(--transition-speed);
    border-left: 3px solid transparent;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: var(--sidebar-hover);
    color: #fff;
}

.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: rgba(26, 95, 180, 0.2) !important;
    color: #fff !important;
    border-left-color: var(--sidebar-active) !important;
    box-shadow: none;
}

.sidebar-dark-primary .nav-sidebar .nav-link p {
    font-weight: var(--font-weight-normal);
    font-size: 13px;
}

/* Sidebar icons - smaller */
.nav-sidebar .nav-icon {
    font-size: 14px;
    margin-right: 8px;
    width: 18px;
    text-align: center;
    opacity: 0.8;
}

.nav-sidebar .nav-link.active .nav-icon {
    opacity: 1;
}

/* User panel */
.user-panel {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================
   TOP NAVBAR - Clean & minimal
   ============================================ */
.main-header.navbar {
    background-color: var(--card-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none;
    padding: 0 1rem;
    min-height: 50px;
}

.main-header .nav-link {
    color: var(--text-secondary) !important;
    font-size: 13px;
    padding: 0.5rem 0.75rem;
}

.main-header .nav-link:hover {
    color: var(--theme-primary) !important;
}

/* ============================================
   CARDS - Light & clean
   ============================================ */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color) !important;
    border-radius: var(--card-border-radius) !important;
    box-shadow: var(--card-shadow);
    margin-bottom: 1rem;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--card-shadow-hover);
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.75rem 1rem;
}

.card-header .card-title {
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    color: var(--text-primary);
    margin: 0;
}
.card-header.text-white .card-title {
    color: white;
}

.card-header .card-title i,
.card-header .card-title .fas,
.card-header .card-title .far,
.card-header .card-title .fa {
    font-size: 13px;
    opacity: 0.7;
}

.card-body {
    padding: 1rem;
}

.card-footer {
    background-color: #fafbfc !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 0.5rem 1rem;
}

/* Card outline - subtle top border */
.card-primary.card-outline {
    border-top: 2px solid var(--theme-primary) !important;
}

.card-success.card-outline {
    border-top: 2px solid var(--theme-success) !important;
}

.card-warning.card-outline {
    border-top: 2px solid var(--theme-warning) !important;
}

.card-danger.card-outline {
    border-top: 2px solid var(--theme-danger) !important;
}

.card-info.card-outline {
    border-top: 2px solid var(--theme-info) !important;
}

/* ============================================
   SMALL BOXES - Compact stats cards
   ============================================ */
.small-box {
    border-radius: var(--card-border-radius) !important;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin-bottom: 1rem;
}

.small-box:hover {
    box-shadow: var(--card-shadow-hover);
    transform: none;
}

.small-box > .inner {
    padding: 0.875rem 1rem;
}

.small-box > .inner h3 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.25rem;
}

.small-box > .inner p {
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    opacity: 0.85;
    margin-bottom: 0;
}

.small-box .icon {
    font-size: 50px;
    opacity: 0.15;
    right: 10px;
    top: 10px;
}

.small-box .small-box-footer {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 6px 12px;
    font-size: 11px;
}

/* ============================================
   TABLES - Clean, minimal borders
   ============================================ */
.table {
    margin-bottom: 0;
    font-size: 13px;
}

.table thead th {
    background-color: #fafbfc;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: none !important;
    font-weight: var(--font-weight-medium);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    padding: 10px 12px;
    white-space: nowrap;
}

.table tbody td {
    border-top: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 10px 12px;
    vertical-align: middle;
    color: var(--text-primary);
    font-size: 13px;
}

.table tbody tr:last-child td {
    border-bottom: none !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafbfc;
}

.table-hover tbody tr {
    transition: background-color var(--transition-speed);
}

.table-hover tbody tr:hover {
    background-color: var(--theme-primary-light) !important;
}

/* Remove all borders for cleaner look */
.table-bordered {
    border: none !important;
}

.table-bordered td,
.table-bordered th {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ============================================
   BUTTONS - Refined, subtle
   ============================================ */
.btn {
    border-radius: var(--button-border-radius) !important;
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    padding: 0.4rem 0.85rem;
    transition: all var(--transition-speed);
    border: 1px solid transparent;
    box-shadow: none !important;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 11px;
}

.btn-lg {
    padding: 0.6rem 1.25rem;
    font-size: 13px;
}

/* Primary */
.btn-primary {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff !important;
}

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

/* Success */
.btn-success {
    background-color: var(--theme-success);
    border-color: var(--theme-success);
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #238b4f;
    border-color: #238b4f;
    color: #fff !important;
}

/* Danger */
.btn-danger {
    background-color: var(--theme-danger);
    border-color: var(--theme-danger);
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #d43d2e;
    border-color: #d43d2e;
    color: #fff !important;
}

/* Secondary/Default - outline style */
.btn-secondary,
.btn-default {
    background-color: #fff;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.card-info.appointment-details .btn-primary {
    color:white !important; 
}
.card-info.appointment-details .btn-primary:hover {
    color:rgb(227, 227, 227) !important; 
}

.btn-secondary:hover,
.btn-default:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    color: var(--text-primary);
}

/* Info - soft */
.btn-info {
    background-color: var(--theme-info);
    border-color: var(--theme-info);
    color: #fff !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: #2a9dd6;
    border-color: #2a9dd6;
    color: #fff !important;
}

/* Warning */
.btn-warning {
    background-color: var(--theme-warning);
    border-color: var(--theme-warning);
    color: #fff !important;
}

.btn-warning.disabled, .btn-warning:disabled {
    color: #1f2d3d;
    background-color: #d56100;
    border-color: #a02c00;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #e09415;
    border-color: #e09415;
    color: #fff !important;
}

/* Outline variants */
.btn-outline-primary {
    color: var(--theme-primary);
    border-color: var(--theme-primary);
    background: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--theme-primary);
    color: #fff;
}

/* Ensure all colored buttons have white text - including links styled as buttons */
a.btn-primary,
a.btn-success,
a.btn-danger,
a.btn-info,
a.btn-warning,
a.btn-primary:hover,
a.btn-success:hover,
a.btn-danger:hover,
a.btn-info:hover,
a.btn-warning:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* Block buttons - full width with proper text color */
.btn-block {
    display: block;
    width: 100%;
}

.btn-block.btn-success,
.btn-block.btn-primary,
.btn-block.btn-info,
.btn-block.btn-warning,
.btn-block.btn-danger {
    color: #fff !important;
}

/* ============================================
   FORM CONTROLS - Clean, subtle
   ============================================ */
.form-control {
    border-radius: var(--input-border-radius) !important;
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    height: auto;
}

.form-control:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px var(--theme-primary-light) !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f8fafc;
    color: var(--text-secondary);
}

.form-control::placeholder {
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

/* Select */
select.form-control {
    cursor: pointer;
    padding-right: 2rem;
}

/* Textarea */
textarea.form-control {
    min-height: 80px;
}

/* Input groups */
.input-group-text {
    border-radius: var(--input-border-radius) !important;
    border: 1px solid var(--border-color);
    background-color: #f8fafc;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
}

/* Labels - lighter */
label:not(.form-check-label) {
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-group {
    margin-bottom: 1rem;
}

/* Form text/help */
.form-text,
small.text-muted {
    font-size: 11px;
    color: var(--text-muted);
}

#appointment-form i.far, #appointment-form i.fas {
    color: inherit;
}

/* ============================================
   BADGES - Soft colors
   ============================================ */
.badge {
    font-weight: var(--font-weight-medium);
    padding: 0.3em 0.6em;
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-primary, .bg-primary:not(.btn):not(.small-box) {
    background-color: var(--theme-primary-light) !important;
    color: var(--theme-primary) !important;
}

.badge-success, .bg-success:not(.btn):not(.small-box) {
    background-color: var(--theme-success-light) !important;
    color: var(--theme-success) !important;
}

.badge-danger, .bg-danger:not(.btn):not(.small-box) {
    background-color: var(--theme-danger-light) !important;
    color: var(--theme-danger) !important;
}

.badge-warning, .bg-warning:not(.btn):not(.small-box) {
    background-color: var(--theme-warning-light) !important;
    color: #b8860b !important;
}

.badge-info, .bg-info:not(.btn):not(.small-box) {
    background-color: var(--theme-info-light) !important;
    color: var(--theme-info) !important;
}

.badge-secondary, .bg-secondary:not(.btn):not(.small-box) {
    background-color: #f1f5f9 !important;
    color: var(--text-secondary) !important;
}

/* ============================================
   NAV TABS - Minimal
   ============================================ */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.nav-tabs .nav-link {
    border: none !important;
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    font-size: 13px;
    padding: 0.6rem 1rem;
    margin-bottom: -1px;
    transition: all var(--transition-speed);
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--theme-primary);
    background-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--theme-primary) !important;
    background-color: transparent !important;
    border-bottom: 2px solid var(--theme-primary) !important;
}

/* Pills - soft */
.nav-pills .nav-link {
    border-radius: var(--button-border-radius);
    padding: 0.4rem 0.85rem;
    margin-right: 0.35rem;
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    color: var(--text-secondary);
    background-color: transparent;
}

.nav-pills .nav-link:hover {
    background-color: #f1f5f9;
}

.nav-pills .nav-link.active {
    background-color: var(--theme-primary);
    color: #fff;
}

/* ============================================
   ALERTS - Soft backgrounds
   ============================================ */
.alert {
    border: 1px solid transparent;
    border-radius: var(--card-border-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 13px;
}

.alert-success {
    background-color: var(--theme-success-light);
    border-color: #c3e6cd;
    color: #1e7c45;
}

.alert-danger {
    background-color: var(--theme-danger-light);
    border-color: #f5c6cb;
    color: #c0392b;
}

.alert-warning {
    background-color: var(--theme-warning-light);
    border-color: #fce8c4;
    color: #9a6700;
}

.alert-warning i.fas {
    color: inherit;
}

.alert-info {
    background-color: var(--theme-info-light);
    border-color: #bee5eb;
    color: #0c5460;
}
.alert-info i.fas {
    color: inherit;
}

/* ============================================
   PAGINATION - Minimal
   ============================================ */
.pagination {
    margin-bottom: 0;
}

.page-link {
    border: none;
    border-radius: 4px !important;
    margin: 0 2px;
    padding: 0.35rem 0.65rem;
    color: var(--text-secondary);
    background-color: transparent;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
}

.page-link:hover {
    background-color: #f1f5f9;
    color: var(--theme-primary);
}

.page-item.active .page-link {
    background-color: var(--theme-primary);
    color: #fff;
}

.page-item.disabled .page-link {
    color: var(--text-muted);
}

/* ============================================
   CONTENT HEADER - Compact
   ============================================ */
.content-header {
    padding: 0.75rem 0.5rem;
}

.content-header h1 {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

@media (min-width: 768px) {
    .content-header {
        padding: 1rem 1.25rem;
    }
    
    .content-header h1 {
        font-size: 1.35rem;
    }
}

/* ============================================
   INFO BOXES - Compact
   ============================================ */
.info-box {
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    min-height: auto;
    padding: 0.75rem;
}

.info-box .info-box-icon {
    border-radius: 8px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 1.1rem;
}

.info-box .info-box-text {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
}

.info-box .info-box-number {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* ============================================
   MODALS - Clean
   ============================================ */
.modal-content {
    border: none;
    border-radius: var(--card-border-radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem;
}

.modal-header .modal-title {
    font-weight: var(--font-weight-semibold);
    font-size: 15px;
}

.modal-body {
    padding: 1rem;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
}

/* ============================================
   DROPDOWNS - Clean
   ============================================ */
.dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 0.35rem;
}

.dropdown-item {
    border-radius: 4px;
    padding: 0.4rem 0.75rem;
    font-size: 13px;
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--theme-primary-light);
    color: var(--theme-primary);
}

.dropdown-divider {
    margin: 0.35rem 0;
    border-top: 1px solid var(--border-color);
}

/* ============================================
   PRELOADER
   ============================================ */
.preloader {
    background-color: var(--body-bg) !important;
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-page,
.register-page {
    background: var(--body-bg) !important;
}

.login-box .card,
.register-box .card {
    border-radius: var(--card-border-radius) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
}

.login-card-body,
.register-card-body {
    padding: 1.5rem !important;
}

/* ============================================
   SELECT2 - Refined
   ============================================ */
.select2-container--default .select2-selection--single {
    border-radius: var(--input-border-radius) !important;
    border: 1px solid var(--border-color);
    height: 36px;
    padding: 0.35rem 0.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-left: 0;
    font-size: 13px;
    color: var(--text-primary);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}

.select2-dropdown {
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.select2-results__option {
    font-size: 13px;
    padding: 0.5rem 0.75rem;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--theme-primary) !important;
}

/* ============================================
   FLATPICKR
   ============================================ */
.flatpickr-calendar {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--border-color) !important;
    font-size: 13px;
}

.flatpickr-day.selected {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--theme-primary);
    text-decoration: none;
}

a:hover {
    color: var(--theme-primary-dark);
    text-decoration: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 767.98px) {
    .small-box > .inner h3 {
        font-size: 1.25rem;
    }
    
    .content-header h1 {
        font-size: 1.1rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .btn {
        padding: 0.5rem 1rem;
    }
}

/* Compact sidebar on larger screens */
@media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse .main-sidebar {
        width: 60px !important;
    }
}

/* ============================================
   SCROLLBAR - Subtle
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ============================================
   ACTION BUTTONS IN TABLES
   ============================================ */
.btn-group .btn {
    margin: 0 1px;
}

/* Icon-only buttons in tables */
td .btn-sm,
.table .btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 11px;
}

/* ============================================
   UTILITY OVERRIDES
   ============================================ */
.text-muted {
    color: var(--text-muted) !important;
}

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

.bg-light {
    background-color: #f8fafc !important;
}

/* ============================================
   INFO BOXES WITH COLORED HEADERS (Invoice detail, etc.)
   ============================================ */

/* Cards with colored headers - make text readable */
.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header,
.card-warning:not(.card-outline) > .card-header,
.card-danger:not(.card-outline) > .card-header {
    color: #fff !important;
}

.card-primary:not(.card-outline) > .card-header .card-title,
.card-info:not(.card-outline) > .card-header .card-title,
.card-success:not(.card-outline) > .card-header .card-title,
.card-warning:not(.card-outline) > .card-header .card-title,
.card-danger:not(.card-outline) > .card-header .card-title {
    color: #fff !important;
}

/* Force white text on colored card headers - all elements */
.card-primary:not(.card-outline) > .card-header *,
.card-info:not(.card-outline) > .card-header *,
.card-success:not(.card-outline) > .card-header *,
.card-warning:not(.card-outline) > .card-header *,
.card-danger:not(.card-outline) > .card-header * {
    color: #fff !important;
}

/* Make card header titles more prominent */
.card-primary:not(.card-outline) > .card-header .card-title,
.card-info:not(.card-outline) > .card-header .card-title,
.card-success:not(.card-outline) > .card-header .card-title,
.card-warning:not(.card-outline) > .card-header .card-title,
.card-danger:not(.card-outline) > .card-header .card-title {
    font-weight: var(--font-weight-semibold) !important;
    font-size: 14px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.card-primary:not(.card-outline) > .card-header .card-title i,
.card-info:not(.card-outline) > .card-header .card-title i,
.card-success:not(.card-outline) > .card-header .card-title i {
    color: #fff !important;
    opacity: 1;
}

/* Colored background cards - softer colors */
.card.card-primary:not(.card-outline) {
    border: none !important;
}

.card.card-primary:not(.card-outline) > .card-header {
    background-color: var(--theme-primary) !important;
    border-bottom: none !important;
}

.card.card-info:not(.card-outline) > .card-header {
    background-color: var(--theme-info) !important;
    border-bottom: none !important;
}

.card.card-success:not(.card-outline) > .card-header {
    background-color: var(--theme-success) !important;
    border-bottom: none !important;
}

/* Links inside colored cards - make them visible */
.card-primary .card-body a,
.card-info .card-body a,
.card-success .card-body a {
    color: var(--theme-primary) !important;
    font-weight: var(--font-weight-medium);
}

.card-primary .card-body a:hover,
.card-info .card-body a:hover,
.card-success .card-body a:hover {
    color: var(--theme-primary-dark) !important;
    text-decoration: underline;
}

/* Fix white text on light backgrounds */
.bg-info,
.bg-primary,
.bg-success {
    color: #fff !important;
}

.bg-info a,
.bg-primary a,
.bg-success a {
    color: #fff !important;
    text-decoration: underline;
}

.bg-info a:hover,
.bg-primary a:hover,
.bg-success a:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Info/detail boxes - better spacing and readability */
.card-body .row > div {
    margin-bottom: 0.5rem;
}

/* User info boxes with icons */
.card-body .media,
.card-body .d-flex {
    align-items: flex-start;
}

/* Better link visibility in info sections */
.info-box a,
.card-body h5 a,
.card-body h6 a {
    color: var(--theme-primary) !important;
}

.info-box a:hover,
.card-body h5 a:hover,
.card-body h6 a:hover {
    color: var(--theme-primary-dark) !important;
    text-decoration: underline;
}

/* Fix for termin link visibility */
.bg-info.card-body a,
.bg-primary.card-body a,
.card.bg-info a,
.card.bg-primary a {
    color: #fff !important;
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
}

/* Invoice detail page specific fixes */
.invoice-info,
.invoice-col {
    margin-bottom: 1rem;
}

/* Better spacing for detail rows */
.card-body > .row:not(:last-child) {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

/* Fix callout/alert boxes inside cards */
.callout {
    background-color: #f8fafc;
    border-left: 4px solid var(--theme-warning);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
}

.callout.callout-info {
    border-left-color: var(--theme-info);
    background-color: var(--theme-info-light);
}

.callout.callout-warning {
    border-left-color: var(--theme-warning);
    background-color: var(--theme-warning-light);
}

.callout.callout-danger {
    border-left-color: var(--theme-danger);
    background-color: var(--theme-danger-light);
}

/* List groups in cards */
.list-group-item {
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    background-color: transparent;
}

.list-group-item:last-child {
    border-bottom: none;
}

/* Better visibility for action links */
.card-footer a,
.list-group-item a {
    color: var(--theme-primary) !important;
}

/* Fix for colored card body text */
.card.card-info .card-body,
.card.card-primary .card-body,
.card.card-success .card-body {
    background-color: #fff;
    color: var(--text-primary);
}

/* Headers inside card body - ensure dark text */
.card-body h4,
.card-body h5,
.card-body h6 {
    color: var(--text-primary) !important;
}

/* Fix media object in cards */
.media-body h5,
.media-body h6 {
    margin-bottom: 0.25rem;
}

.media-body p {
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
    font-size: 12px;
}

/* Better icon styling in cards */
.card-body .fas,
.card-body .far,
.card-body .fa {
    color: white;
    margin-right: 0.35rem;
}

.card-body .bg-light i.fas {
    color: var(--theme-primary);
}

/* User avatar placeholder */
.img-circle.elevation-2 {
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Fix alert links - especially for appointment link */
.alert a:not(.btn) {
    color: inherit !important;
    font-weight: var(--font-weight-medium);
    text-decoration: underline !important;
}

.alert a:not(.btn):hover {
    opacity: 0.85;
}

.alert-info a:not(.btn) {
    color: #055160 !important;
}

.alert-success a:not(.btn) {
    color: #0f5132 !important;
}

.alert-warning a:not(.btn) {
    color: #664d03 !important;
}

.alert-danger a:not(.btn) {
    color: #842029 !important;
}

/* Buttons inside alerts - keep their original styling */
.alert .btn {
    text-decoration: none !important;
}

.alert .btn-primary {
    color: #fff !important;
    background-color: var(--theme-primary) !important;
}

.alert .btn-success {
    color: #fff !important;
    background-color: var(--theme-success) !important;
}

.alert .btn-info {
    color: #fff !important;
    background-color: var(--theme-info) !important;
}

/* Better styling for info alert boxes with icons */
.alert.d-flex,
.alert .d-flex {
    align-items: flex-start;
}

.alert h6 {
    margin-bottom: 0.25rem;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: inherit;
    opacity: 0.85;
}

/* Card with bg-info - fix text and link visibility */
.card.bg-info .card-body,
.card.bg-primary .card-body,
.card.bg-success .card-body {
    background-color: inherit !important;
    color: #fff !important;
}

.card.bg-info .card-body a,
.card.bg-primary .card-body a,
.card.bg-success .card-body a {
    color: #fff !important;
    text-decoration: underline !important;
    font-weight: var(--font-weight-medium);
}

.card.bg-info .card-body h6,
.card.bg-primary .card-body h6,
.card.bg-success .card-body h6 {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Specific fix for Termin box */
.alert-info.mb-0 a {
    color: #055160 !important;
    text-decoration: underline !important;
}

/* Better spacing for invoice detail page cards */
.card .card-body .alert:last-child {
    margin-bottom: 0 !important;
}



/* ============================================
   DASHBOARD STYLES
   ============================================ */
   #total-revenue {
    color: white;
   }
   #total-patients {
    color: white;
   }
   #total-appointments {
    color: white;
   }
   #upcoming-appointments {
    color: white;
   } 
  

/* ============================================
   INVOICES TABLE STYLES
   ============================================ */
   .card-body .invoices-table td .badge i.fas {
    color:rgb(65 65 65)
   }

/* ============================================
   APPOINTMENTS TABLE STYLES
   ============================================ */
   .card-body .appointments-table td .badge-info i.far {
    color:rgb(65 65 65)
   }
   .card-body .appointments-table td a.appointments-table-patient-link i.fas {
    color:rgb(65 65 65)
   }
   .card-body .appointments-table td .appointments-table-start-time i.far {
    color:rgb(65 65 65)
   }
   .card-body .appointments-table td .appointments-table-end-time i.far {
    color:rgb(65 65 65)
   }

/* ============================================
   PRINT
   ============================================ */
@media print {
    .main-sidebar,
    .main-header,
    .btn,
    .no-print {
        display: none !important;
    }
    
    .content-wrapper {
        margin-left: 0 !important;
        background: white !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    body {
        font-size: 11px !important;
    }
}