/**
 * 1Rx Medical Theme - Master Stylesheet
 * Professional doctor-centric design system
 * Version: 1.0
 *
 * This stylesheet provides a cohesive medical theme for the 1Rx platform
 * with professional colors, typography, and component styling.
 */

/* ========================================
   CSS Variables - Medical Color Palette
   ======================================== */

:root {
    /* Primary Medical Colors */
    --medical-primary: #5e72e4;
    --medical-primary-dark: #4361ee;
    --medical-primary-light: #7889e8;
    --medical-primary-lighter: #e8ebfa;

    /* Secondary Medical Colors */
    --medical-teal: #00A9A5;
    --medical-teal-dark: #008b88;
    --medical-teal-light: #33bbb8;
    --medical-teal-lighter: #e6f7f7;

    /* Health & Success */
    --medical-success: #2dce89;
    --medical-success-dark: #24a46d;
    --medical-success-light: #57d89f;
    --medical-success-lighter: #e8f9f2;

    /* Warning & Alert */
    --medical-warning: #fb6340;
    --medical-warning-dark: #fc3c0f;
    --medical-warning-light: #fc8566;
    --medical-warning-lighter: #fee9e3;

    /* Danger & Critical */
    --medical-danger: #f5365c;
    --medical-danger-dark: #ec0c38;
    --medical-danger-light: #f75e7d;
    --medical-danger-lighter: #fde7ec;

    /* Info & Notification */
    --medical-info: #11cdef;
    --medical-info-dark: #0da5c0;
    --medical-info-light: #41d7f2;
    --medical-info-lighter: #e7f9fd;

    /* Neutral Grays */
    --medical-gray-50: #f8f9fa;
    --medical-gray-100: #f1f3f5;
    --medical-gray-200: #e9ecef;
    --medical-gray-300: #dee2e6;
    --medical-gray-400: #ced4da;
    --medical-gray-500: #adb5bd;
    --medical-gray-600: #868e96;
    --medical-gray-700: #495057;
    --medical-gray-800: #343a40;
    --medical-gray-900: #212529;

    /* Text Colors */
    --medical-text-primary: #32325d;
    --medical-text-secondary: #525f7f;
    --medical-text-muted: #8898aa;
    --medical-text-light: #adb5bd;

    /* Background Colors */
    --medical-bg-primary: #ffffff;
    --medical-bg-secondary: #f7fafc;
    --medical-bg-tertiary: #f1f5f9;
    --medical-bg-dark: #172b4d;

    /* Border & Divider */
    --medical-border-color: #e9ecef;
    --medical-border-light: #f0f2f5;
    --medical-divider: #dee2e6;

    /* Shadows */
    --medical-shadow-sm: 0 0.125rem 0.25rem rgba(31, 45, 61, 0.08);
    --medical-shadow: 0 0.5rem 1rem rgba(31, 45, 61, 0.1);
    --medical-shadow-lg: 0 1rem 3rem rgba(31, 45, 61, 0.15);
    --medical-shadow-xl: 0 1.5rem 4rem rgba(31, 45, 61, 0.2);

    /* Typography */
    --medical-font-family: 'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --medical-font-size-base: 0.9375rem;
    --medical-font-size-sm: 0.875rem;
    --medical-font-size-lg: 1rem;
    --medical-line-height: 1.6;

    /* Spacing Scale */
    --medical-spacing-xs: 0.25rem;
    --medical-spacing-sm: 0.5rem;
    --medical-spacing-md: 1rem;
    --medical-spacing-lg: 1.5rem;
    --medical-spacing-xl: 2rem;
    --medical-spacing-2xl: 3rem;

    /* Border Radius */
    --medical-radius-sm: 0.25rem;
    --medical-radius: 0.375rem;
    --medical-radius-lg: 0.5rem;
    --medical-radius-xl: 0.75rem;
    --medical-radius-pill: 50rem;

    /* Transitions */
    --medical-transition: all 0.2s ease-in-out;
    --medical-transition-fast: all 0.15s ease-in-out;
    --medical-transition-slow: all 0.3s ease-in-out;
}

/* ========================================
   Global Typography
   ======================================== */

body {
    font-family: var(--medical-font-family);
    font-size: var(--medical-font-size-base);
    line-height: var(--medical-line-height);
    color: var(--medical-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--medical-text-primary);
    line-height: 1.3;
}

h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.875rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem; }

p {
    margin-bottom: var(--medical-spacing-md);
    color: var(--medical-text-secondary);
}

.text-medical-primary { color: var(--medical-primary) !important; }
.text-medical-teal { color: var(--medical-teal) !important; }
.text-medical-success { color: var(--medical-success) !important; }
.text-medical-warning { color: var(--medical-warning) !important; }
.text-medical-danger { color: var(--medical-danger) !important; }
.text-medical-info { color: var(--medical-info) !important; }
.text-muted { color: var(--medical-text-muted) !important; }

/* ========================================
   Background Utilities
   ======================================== */

.bg-medical-primary { background-color: var(--medical-primary) !important; }
.bg-medical-teal { background-color: var(--medical-teal) !important; }
.bg-medical-success { background-color: var(--medical-success) !important; }
.bg-medical-warning { background-color: var(--medical-warning) !important; }
.bg-medical-danger { background-color: var(--medical-danger) !important; }
.bg-medical-info { background-color: var(--medical-info) !important; }
.bg-medical-light { background-color: var(--medical-bg-secondary) !important; }

/* ========================================
   Button Enhancements
   ======================================== */

.btn {
    font-weight: 500;
    border-radius: var(--medical-radius);
    transition: var(--medical-transition);
    box-shadow: var(--medical-shadow-sm);
    letter-spacing: 0.025em;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow);
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--medical-shadow-sm);
}

.btn-medical-primary {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    border: none;
    color: #ffffff;
}

.btn-medical-primary:hover {
    background: linear-gradient(135deg, var(--medical-primary-dark) 0%, var(--medical-primary) 100%);
    color: #ffffff;
}

.btn-medical-teal {
    background: linear-gradient(135deg, var(--medical-teal) 0%, var(--medical-teal-dark) 100%);
    border: none;
    color: #ffffff;
}

.btn-medical-teal:hover {
    background: linear-gradient(135deg, var(--medical-teal-dark) 0%, var(--medical-teal) 100%);
    color: #ffffff;
}

.btn-outline-medical-primary {
    border: 2px solid var(--medical-primary);
    color: var(--medical-primary);
    background: transparent;
}

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

/* ========================================
   Card Components
   ======================================== */

.card {
    border-radius: var(--medical-radius-lg);
    border: 1px solid var(--medical-border-light);
    box-shadow: var(--medical-shadow-sm);
    transition: var(--medical-transition);
    background: var(--medical-bg-primary);
}

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

.card-header {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    border-bottom: none;
    padding: var(--medical-spacing-lg);
    border-radius: var(--medical-radius-lg) var(--medical-radius-lg) 0 0;
}

.card-header h4,
.card-header h5,
.card-header .text-white {
    color: #ffffff !important;
}

.card-body {
    padding: var(--medical-spacing-xl);
}

.card-footer {
    background: var(--medical-bg-secondary);
    border-top: 1px solid var(--medical-border-light);
    padding: var(--medical-spacing-lg);
}

/* Medical Status Cards */
.card-medical-info {
    border-left: 4px solid var(--medical-info);
}

.card-medical-success {
    border-left: 4px solid var(--medical-success);
}

.card-medical-warning {
    border-left: 4px solid var(--medical-warning);
}

.card-medical-danger {
    border-left: 4px solid var(--medical-danger);
}

/* ========================================
   Form Controls
   ======================================== */

.form-label {
    font-weight: 600;
    color: var(--medical-text-primary);
    margin-bottom: var(--medical-spacing-sm);
    font-size: var(--medical-font-size-sm);
    letter-spacing: 0.025em;
}

.form-control,
.form-select {
    border: 1px solid var(--medical-border-color);
    border-radius: var(--medical-radius);
    padding: 0.625rem 0.875rem;
    font-size: var(--medical-font-size-base);
    transition: var(--medical-transition);
    color: var(--medical-text-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--medical-primary);
    box-shadow: 0 0 0 0.2rem rgba(94, 114, 228, 0.15);
    outline: none;
}

.form-control::placeholder {
    color: var(--medical-text-light);
    font-size: 0.875rem;
}

.form-control.is-valid {
    border-color: var(--medical-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232dce89' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

.form-control.is-invalid {
    border-color: var(--medical-danger);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f5365c' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
}

.invalid-feedback {
    color: var(--medical-danger);
    font-size: var(--medical-font-size-sm);
    margin-top: var(--medical-spacing-xs);
}

.valid-feedback {
    color: var(--medical-success);
    font-size: var(--medical-font-size-sm);
    margin-top: var(--medical-spacing-xs);
}

/* Form Group Spacing */
.form-group,
.mb-3,
.mb-4 {
    margin-bottom: var(--medical-spacing-lg);
}

/* ========================================
   Badge Components
   ======================================== */

.badge {
    padding: 0.35rem 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--medical-radius);
}

.badge-medical-primary {
    background: var(--medical-primary);
    color: #ffffff;
}

.badge-medical-success {
    background: var(--medical-success);
    color: #ffffff;
}

.badge-medical-warning {
    background: var(--medical-warning);
    color: #ffffff;
}

.badge-medical-danger {
    background: var(--medical-danger);
    color: #ffffff;
}

.badge-medical-info {
    background: var(--medical-info);
    color: #ffffff;
}

.badge-medical-light {
    background: var(--medical-primary-lighter);
    color: var(--medical-primary);
}

/* ========================================
   Alert Components
   ======================================== */

.alert {
    border-radius: var(--medical-radius-lg);
    border: none;
    padding: var(--medical-spacing-lg);
    box-shadow: var(--medical-shadow-sm);
}

.alert-medical-primary {
    background: var(--medical-primary-lighter);
    color: var(--medical-primary-dark);
    border-left: 4px solid var(--medical-primary);
}

.alert-medical-success {
    background: var(--medical-success-lighter);
    color: var(--medical-success-dark);
    border-left: 4px solid var(--medical-success);
}

.alert-medical-warning {
    background: var(--medical-warning-lighter);
    color: var(--medical-warning-dark);
    border-left: 4px solid var(--medical-warning);
}

.alert-medical-danger {
    background: var(--medical-danger-lighter);
    color: var(--medical-danger-dark);
    border-left: 4px solid var(--medical-danger);
}

.alert-medical-info {
    background: var(--medical-info-lighter);
    color: var(--medical-info-dark);
    border-left: 4px solid var(--medical-info);
}

/* ========================================
   Table Enhancements
   ======================================== */

.table {
    border-radius: var(--medical-radius);
    overflow: hidden;
}

.table thead th {
    background: var(--medical-bg-secondary);
    color: var(--medical-text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--medical-border-color);
    padding: var(--medical-spacing-md);
}

.table tbody tr {
    transition: var(--medical-transition-fast);
}

.table tbody tr:hover {
    background: var(--medical-bg-secondary);
}

.table tbody td {
    padding: var(--medical-spacing-md);
    vertical-align: middle;
    color: var(--medical-text-secondary);
    border-bottom: 1px solid var(--medical-border-light);
}

/* ========================================
   Modal Enhancements
   ======================================== */

.modal-content {
    border-radius: var(--medical-radius-xl);
    border: none;
    box-shadow: var(--medical-shadow-xl);
}

.modal-header {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    color: #ffffff;
    border-bottom: none;
    padding: var(--medical-spacing-lg) var(--medical-spacing-xl);
    border-radius: var(--medical-radius-xl) var(--medical-radius-xl) 0 0;
}

.modal-header .modal-title {
    color: #ffffff;
    font-weight: 600;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.modal-body {
    padding: var(--medical-spacing-xl);
}

.modal-footer {
    background: var(--medical-bg-secondary);
    border-top: 1px solid var(--medical-border-light);
    padding: var(--medical-spacing-lg) var(--medical-spacing-xl);
}

/* ========================================
   Breadcrumb & Navigation
   ======================================== */

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: var(--medical-spacing-lg);
}

.breadcrumb-item {
    font-size: var(--medical-font-size-sm);
    color: var(--medical-text-muted);
}

.breadcrumb-item.active {
    color: var(--medical-text-primary);
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--medical-text-light);
    font-size: 1.25rem;
}

/* ========================================
   Progress Bars
   ======================================== */

.progress {
    height: 0.5rem;
    border-radius: var(--medical-radius-pill);
    background: var(--medical-gray-200);
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    border-radius: var(--medical-radius-pill);
    transition: width 0.6s ease;
}

.progress-bar.bg-medical-success {
    background: linear-gradient(90deg, var(--medical-success) 0%, var(--medical-success-dark) 100%);
}

.progress-bar.bg-medical-warning {
    background: linear-gradient(90deg, var(--medical-warning) 0%, var(--medical-warning-dark) 100%);
}

.progress-bar.bg-medical-danger {
    background: linear-gradient(90deg, var(--medical-danger) 0%, var(--medical-danger-dark) 100%);
}

/* ========================================
   Utility Classes
   ======================================== */

/* Shadows */
.shadow-medical-sm { box-shadow: var(--medical-shadow-sm); }
.shadow-medical { box-shadow: var(--medical-shadow); }
.shadow-medical-lg { box-shadow: var(--medical-shadow-lg); }
.shadow-medical-xl { box-shadow: var(--medical-shadow-xl); }

/* Border Radius */
.rounded-medical { border-radius: var(--medical-radius); }
.rounded-medical-lg { border-radius: var(--medical-radius-lg); }
.rounded-medical-xl { border-radius: var(--medical-radius-xl); }
.rounded-medical-pill { border-radius: var(--medical-radius-pill); }

/* Dividers */
.medical-divider {
    height: 1px;
    background: var(--medical-divider);
    margin: var(--medical-spacing-lg) 0;
}

.medical-divider-vertical {
    width: 1px;
    background: var(--medical-divider);
    margin: 0 var(--medical-spacing-lg);
}

/* Spacing Utilities */
.gap-medical-sm { gap: var(--medical-spacing-sm); }
.gap-medical { gap: var(--medical-spacing-md); }
.gap-medical-lg { gap: var(--medical-spacing-lg); }
.gap-medical-xl { gap: var(--medical-spacing-xl); }

/* ========================================
   Icon Enhancements
   ======================================== */

.bi {
    vertical-align: -0.125em;
}

.icon-medical-sm {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.icon-medical {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
}

.icon-medical-lg {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
}

.icon-medical-xl {
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
}

/* Icon Circle Background */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--medical-primary-lighter);
    color: var(--medical-primary);
}

.icon-circle-success {
    background: var(--medical-success-lighter);
    color: var(--medical-success);
}

.icon-circle-warning {
    background: var(--medical-warning-lighter);
    color: var(--medical-warning);
}

.icon-circle-danger {
    background: var(--medical-danger-lighter);
    color: var(--medical-danger);
}

.icon-circle-info {
    background: var(--medical-info-lighter);
    color: var(--medical-info);
}

/* ========================================
   Loading & Spinner
   ======================================== */

.spinner-medical {
    border: 3px solid var(--medical-primary-lighter);
    border-top-color: var(--medical-primary);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    animation: medical-spin 0.8s linear infinite;
}

@keyframes medical-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   Dropdown Enhancements
   ======================================== */

.dropdown-menu {
    border: none;
    border-radius: var(--medical-radius-lg);
    box-shadow: var(--medical-shadow-lg);
    padding: var(--medical-spacing-sm);
}

.dropdown-item {
    border-radius: var(--medical-radius);
    padding: var(--medical-spacing-sm) var(--medical-spacing-md);
    transition: var(--medical-transition-fast);
    color: var(--medical-text-secondary);
}

.dropdown-item:hover {
    background: var(--medical-primary-lighter);
    color: var(--medical-primary);
}

.dropdown-item.active {
    background: var(--medical-primary);
    color: #ffffff;
}

.dropdown-divider {
    border-top: 1px solid var(--medical-border-light);
    margin: var(--medical-spacing-sm) 0;
}

/* ========================================
   Tooltip & Popover
   ======================================== */

.tooltip-inner {
    background: var(--medical-gray-900);
    border-radius: var(--medical-radius);
    padding: var(--medical-spacing-sm) var(--medical-spacing-md);
    font-size: var(--medical-font-size-sm);
    box-shadow: var(--medical-shadow);
}

.popover {
    border: none;
    border-radius: var(--medical-radius-lg);
    box-shadow: var(--medical-shadow-lg);
}

.popover-header {
    background: var(--medical-bg-secondary);
    border-bottom: 1px solid var(--medical-border-light);
    border-radius: var(--medical-radius-lg) var(--medical-radius-lg) 0 0;
    padding: var(--medical-spacing-md) var(--medical-spacing-lg);
    font-weight: 600;
}

.popover-body {
    padding: var(--medical-spacing-lg);
}

/* ========================================
   Responsive Utilities
   ======================================== */

@media (max-width: 768px) {
    .card-body {
        padding: var(--medical-spacing-lg);
    }

    .modal-body {
        padding: var(--medical-spacing-lg);
    }

    h1, .h1 { font-size: 1.875rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
}

/* ========================================
   Accessibility Enhancements
   ======================================== */

*:focus-visible {
    outline: 2px solid var(--medical-primary);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    body {
        background: white;
        color: black;
    }

    .card {
        box-shadow: none;
        border: 1px solid #000;
    }

    .btn,
    .modal,
    .dropdown-menu {
        display: none !important;
    }
}

/* ========================================
   Records Corner Styles
   ======================================== */

.hover-lift {
    transition: all 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.record-card {
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.record-card:hover {
    border-color: var(--medical-primary);
}

.icon-shape {
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}