/* ============================================
   OPTIMIZED STYLE.CSS 
   ============================================ */



:root {
    /* Light Theme (Default) */
    --theme-bg-primary: #f8f9fa;
    --theme-bg-secondary: rgba(255, 255, 255, 0.85);
    --theme-bg-card: rgba(255, 255, 255, 0.9);
    --theme-text-primary: #343a40;
    --theme-text-secondary: #6c757d;
    --theme-text-muted: #999;
    --theme-border-light: rgba(0, 0, 0, 0.1);
    --theme-border-medium: rgba(0, 0, 0, 0.2);
    --theme-shadow-light: rgba(0, 0, 0, 0.1);
    --theme-shadow-medium: rgba(0, 0, 0, 0.15);
    --theme-overlay: rgba(0, 86, 166, 0.6);
    
    /* Brand colors */
    --brand-primary: #0056a6;
    --brand-primary-dark: #003d73;
    --brand-primary-light: #1e7bc8;
    --brand-primary-rgb: 0, 86, 166;
    --brand-secondary: #28a745;
    --brand-secondary-light: #20c997;
    --brand-danger: #dc3545;
    --brand-warning: #ffc107;
    --brand-info: #17a2b8;
    --brand-info-rgb: 23, 162, 184;
    
    /* Glass effects */
    --glass-bg: var(--theme-bg-secondary);
    --glass-border: rgba(255, 255, 255, 0.3);
    --card-shadow: 0 4px 16px var(--theme-shadow-light);
    --card-shadow-hover: 0 08px 24px var(--theme-shadow-medium);
    
    /* Typography */
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Dark Theme */


/* Proportional zoom for smaller desktop screens.
   Applied to a wrapper div so body background stays full-viewport. */
.page-zoom-wrapper {
    --zoom-factor: 1;
    min-height: 100vh;
}
@media (max-width: 2400px) {
    .page-zoom-wrapper { --zoom-factor: 0.875; zoom: 0.875; min-height: calc(100vh / 0.875); }
}
@media (max-width: 2000px) {
    .page-zoom-wrapper { --zoom-factor: 0.75; zoom: 0.75; min-height: calc(100vh / 0.75); }
}
@media (max-width: 992px) {
    .page-zoom-wrapper { --zoom-factor: 1; zoom: 1; min-height: 100vh; }
}

/* Modal overlays & full-screen elements inside zoom wrapper need compensated sizing
   so they cover the full visible viewport at any zoom level */
.warning-modal,
.success-modal,
.cancel-order-modal,
.repeat-order-modal,
.under-query-modal,
.awaiting-prescription-modal,
.request-cancellation-modal,
.cancellation-details-modal,
.edit-history-modal,
.contact-pc-modal,
.remove-patient-modal,
.edit-modal-overlay,
.loading-overlay {
    width: calc(100vw / var(--zoom-factor, 1)) !important;
    height: calc(100vh / var(--zoom-factor, 1)) !important;
}

/* ============================================
   UNIVERSAL BODY & BACKGROUND
   ============================================ */

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body:not(.login-page-body) {
    font-family: var(--font-family-sans-serif) !important;
    color: var(--theme-text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    background-color: var(--theme-bg-primary) !important;
    background-image: url('PC_BG.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body:not(.login-page-body)::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, var(--theme-overlay) 0%, rgba(40, 167, 69, 0.3) 50%, var(--theme-overlay) 100%) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 0 !important;
    transition: background 0.3s ease;
    pointer-events: none !important;
}

/* ============================================
   UNIVERSAL CONTAINER STYLING
   ============================================ */

.new-patient-container, .account-container, .view-order-container, .view-patient-container, .construction-container,
.contact-us-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.consent-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px; /* Increased from 12px to 20px */
    padding: 20px;
    border: 2px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 12px;
    background: rgba(var(--primary-rgb), 0.03);
    margin-bottom: 10px;
}

#consentCheckbox {
    margin: 0; 
    min-width: 18px;
    height: 18px;
    cursor: pointer;
}

.order-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
    max-width: none;
}

.catalogue-order-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 25px;
    align-items: start;
}

/* Right column wrapper */
.right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-us-container {
    max-width: 1200px;
}

.construction-container {
    max-width: 800px;
    padding: 50px 20px;
    text-align: center;
}

.dashboard-container {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: var(--theme-text-primary) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 30px 20px 20px 20px;
    width: 100%;
    max-width: 100%;
}

/* ============================================
   UNIFIED CARD STYLING WITH GRADIENT BORDERS
   ============================================ */

.form-container, .account-card, .construction-card, .success-modal-content,
.info-card-compact, .patient-card-compact, .order-items-section, .form-section,
.contact-info-section, .contact-form-section, .account-status-bar, .order-status-bar,
.patient-info-panel, .product-selection, .order-summary, .card, .function-card, .stat-item,
.updates-container, .updates-panel-container {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--card-shadow-hover);
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
}

/* Unified gradient top border */
.form-container::before, .account-card::before, .construction-card::before, .success-modal-content::before, .confirmation-modal-content::before,
.info-card-compact::before, .patient-card-compact::before, .order-items-section::before, .form-section::before,
.contact-info-section::before, .contact-form-section::before, .account-status-bar::before, .order-status-bar::before,
.patient-info-panel::before, .product-selection::before, .order-summary::before, .stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
    border-radius: 24px 24px 0 0;
    z-index: 1;
}

/* Special gradient overrides */
.construction-card::before {
    background: linear-gradient(90deg, #63b3ed, #68d391);
}

.contact-form-section::before {
    background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary));
}

.product-selection::before {
    background: linear-gradient(90deg, var(--brand-info), var(--brand-secondary));
}

.order-summary::before {
    background: linear-gradient(90deg, var(--brand-secondary), var(--brand-warning));
}

/* Card hover effects - function-card excluded (has its own styles) */
.account-card:hover, .form-container:hover, .info-card-compact:hover, .patient-card-compact:hover,
.stat-item:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--card-shadow-hover);
}

/* ============================================
   OVERRIDE FOR DARK MODE CONTAINERS
   ============================================ */

/* Force form controls to maintain theme colors in all states */
.form-control,
input[type="text"],
input[type="email"], 
input[type="password"],
input[type="tel"]{
    border: 2px solid var(--theme-border-light) !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    transition: all 0.3s ease !important;
    background: var(--theme-bg-card) !important;
    color: var(--theme-text-primary) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Force focus states to maintain theme */
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus{
    border-color: var(--border-color-focus) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25) !important;
    background: var(--theme-bg-card) !important;
    color: var(--theme-text-primary) !important;
    outline: none !important;
}

/* Fix autocomplete dropdown styling */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--theme-bg-card) inset !important;
    -webkit-text-fill-color: var(--theme-text-primary) !important;
    border: 2px solid var(--theme-border-light) !important;
    background: var(--theme-bg-card) !important;
    color: var(--theme-text-primary) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Force dark theme colors for dark mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="tel"] {
    background: rgba(40, 45, 54, 0.9) !important;
    color: #e9ecef !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] input[type="tel"]:focus {
    background: rgba(40, 45, 54, 0.9) !important;
    color: #e9ecef !important;
    border-color: var(--brand-primary) !important;
}

/* Fix dark mode autocomplete */
[data-theme="dark"] .form-control:-webkit-autofill,
[data-theme="dark"] .form-control:-webkit-autofill:hover,
[data-theme="dark"] .form-control:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px rgba(40, 45, 54, 0.9) inset !important;
    -webkit-text-fill-color: #e9ecef !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(40, 45, 54, 0.9) !important;
    color: #e9ecef !important;
}

.primary-badge {
    color: #FFD700 !important;
    font-weight: bold !important;
}

/* Fix placeholder colors */
.form-control::placeholder,
input::placeholder {
    color: var(--theme-text-muted) !important;
    opacity: 1 !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}

/* Additional fixes for browser-specific autocomplete styling */
input:-internal-autofill-selected {
    background: var(--theme-bg-card) !important;
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] input:-internal-autofill-selected {
    background: rgba(40, 45, 54, 0.9) !important;
    color: #e9ecef !important;
}

/* ============================================
   PAGE HEADERS & TITLES
   ============================================ */

.page-header-section, .page-header {
    margin-bottom: 40px;
    text-align: center;
}

.page-header-section h1,
.page-header h1,
.header-text h1 {
    color: white !important; /* White text in light mode */
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    font-size: 2.2rem !important;
    /* BOLD drop shadow - same as dark mode */
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.6),
                 0 2px 4px rgba(0, 0, 0, 0.4),
                 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    /* Extra glow for visibility */
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3)) !important;
}

.page-header-section .subtitle,
.page-header p,
.header-text .subtitle {
    color: rgba(255, 255, 255, 0.95) !important; /* Nearly white in light mode */
    font-size: 1.1rem !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important; /* Bolder weight for visibility */
    text-align: center !important;
    /* Strong shadow for readability */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7),
                 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
}

.section-title {
    color: var(--brand-primary);
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

/* ============================================
   UNIFIED FORM ELEMENTS
   ============================================ */

.form-section {
    margin-bottom: 35px;
}

.form-section h3 {
    color: var(--brand-primary);
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 1.3rem;
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 8px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.form-label, .form-group label, .info-item label {
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 8px;
    display: block;
    font-size: 0.95rem;
}

.form-control, .form-select, .search-input {
    border: 2px solid var(--theme-border-light);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--theme-bg-card);
    color: var(--theme-text-primary);
    width: 100%;
}

.form-control:focus, .form-select:focus, .search-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 86, 166, 0.15);
    background: var(--theme-bg-card);
    color: var(--theme-text-primary);
    outline: none;
}

.form-control::placeholder, .search-input::placeholder {
    color: var(--theme-text-muted);
}

.form-control:hover, .search-input:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--theme-shadow-light);
    border-color: var(--brand-primary-light);
}

.form-control:disabled {
    background: var(--theme-border-light);
    color: var(--theme-text-muted);
    cursor: not-allowed;
    transform: none;
}

.form-control.is-invalid, .form-select.is-invalid {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.05);
    animation: shake 0.5s ease-in-out;
}

.form-control.is-valid {
    border-color: var(--brand-secondary) !important;
    background-color: rgba(40, 167, 69, 0.05) !important;
}

textarea.form-control, .notes-textarea {
    min-height: 100px;
    max-height: 150px;
    resize: vertical;
}

.postcode-group {
    display: flex;
    gap: 10px;
    align-items: end;
}

.postcode-group .form-control {
    flex: 1;
}

.postcode-group .btn {
    flex-shrink: 0;
    height: 48px;
    padding: 0 16px;
}

/* ============================================
   UNIFIED BUTTON STYLING
   ============================================ */

.btn-primary, .modal-btn-primary, .btn-function, .submit-order {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px 32px !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 16px rgba(0, 86, 166, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    color: white !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.btn-function {
    padding: 18px 36px !important;
    border-radius: 50px !important;
    letter-spacing: 0.5px !important;
    border: 2px solid transparent !important;
}

.submit-order {
    width: 100%;
    gap: 10px;
    position: relative;
    z-index: 2;
    margin-top: 0;
    flex-shrink: 0; /* Never shrink the button */
}

.btn-primary::before, .modal-btn-primary::before, .btn-function::before, .submit-order::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
    transition: left 0.8s ease !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.btn-primary:hover::before, .modal-btn-primary:hover::before, .btn-function:hover::before, .submit-order:hover::before {
    left: 100% !important;
}

.btn-primary:hover, .modal-btn-primary:hover, .submit-order:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 86, 166, 0.4) !important;
    color: white !important;
}

.btn-function:hover {
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 20px 60px rgba(0, 86, 166, 0.5) !important;
    background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary)) !important;
    color: white !important;
    text-decoration: none !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 1px !important;
}

.btn-primary:disabled, .submit-order:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    background: var(--theme-text-muted) !important;
    box-shadow: none !important;
}

.btn-primary *, .modal-btn-primary *, .btn-function *, .submit-order * {
    position: relative;
    z-index: 1;
}

/* Success buttons */
.btn-success, .view-order-container .btn-success, .order-actions .btn-success {
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-secondary-light)) !important;
    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3) !important;
    border: none !important;
    color: white !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    min-width: 140px !important;
    height: 44px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transform: translateY(0) !important;
}

.btn-success::before, .view-order-container .btn-success::before, .order-actions .btn-success::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
    transition: left 0.8s ease !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.btn-success:hover::before, .view-order-container .btn-success:hover::before, .order-actions .btn-success:hover::before {
    left: 100% !important;
}

.btn-success:hover, .view-order-container .btn-success:hover, .order-actions .btn-success:hover {
    background: linear-gradient(135deg, var(--brand-secondary-light), var(--brand-secondary)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(40, 167, 69, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
    border: none !important;
}

.btn-success *, .view-order-container .btn-success *, .order-actions .btn-success * {
    position: relative !important;
    z-index: 1 !important;
}

/* Clear button */
.btn-clear {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    border: none;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    height: fit-content;
}

.btn-clear:hover {
    background: linear-gradient(135deg, #5a6268, #495057);
    transform: translateY(-2px);
    color: white;
}

/* Add to order button */
.add-to-order {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    border: none;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.add-to-order:hover {
    background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 86, 166, 0.3);
    color: white;
}

.add-to-order:disabled {
    background: var(--theme-text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.add-to-order.added {
    background: linear-gradient(135deg, #28a745, #1e7e34) !important;
    cursor: default;
    transform: none;
    pointer-events: none;
    transition: background 0.3s ease;
}

.catalogue-card.added-feedback {
    border-color: #28a745 !important;
}

.added-to-basket-label {
    color: #28a745;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* "X in basket" indicator on catalogue cards */
.in-basket-label {
    color: var(--brand-secondary, #28a745);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 2px;
}

/* "X in basket" badge on search result quick-add buttons */
.in-basket-badge {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.8;
    margin-left: 4px;
}

/* Small view order button */
.view-order-btn-small {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)) !important;
    border: none !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb), 0.3) !important;
    font-size: 0.85rem !important;
    min-width: 60px !important;
    height: 34px !important;
    position: relative !important;
    overflow: hidden !important;
}

.view-order-btn-small::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
    transition: left 0.8s ease !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.view-order-btn-small:hover::before {
    left: 100% !important;
}

.view-order-btn-small:hover {
    background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary)) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.4) !important;
}

.view-order-btn-small * {
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================
   CHANGE PATIENT BUTTON STYLES
   ============================================ */

/* Change Patient Button */
.change-patient-btn-small {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: none !important;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: 16px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
    overflow: hidden !important;
    min-width: auto !important;
    height: 2.2rem !important;
    width: auto !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
}

.change-patient-btn-small::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    transition: left 0.6s ease !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.change-patient-btn-small:hover::before {
    left: 100% !important;
}

.change-patient-btn-small:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
    color: #fff !important;
}

.change-patient-btn-small * {
    position: relative !important;
    z-index: 1 !important;
}

.change-patient-btn-small i {
    font-size: 0.9rem !important;
}

/* Change Address Button - matches change patient button style */
.change-address-btn-small {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: none !important;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: 16px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: auto !important;
    height: 2.2rem !important;
    width: auto !important;
    white-space: nowrap !important;
}

.change-address-btn-small::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    transition: left 0.6s ease !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.change-address-btn-small:hover::before {
    left: 100% !important;
}

.change-address-btn-small:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
    color: #fff !important;
}

.change-address-btn-small:hover::after {
    content: 'Change Address';
    position: absolute;
    bottom: -35px;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}

.change-address-btn-small * {
    position: relative !important;
    z-index: 1 !important;
}

.change-address-btn-small i {
    font-size: 0.9rem !important;
}

/* Address override indicator */
.address-overridden {
    color: #10b981;
    font-weight: 600;
}

.address-override-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #10b981;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.75em;
    margin-left: 6px;
}

.edit-address-overlay .ea-input{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.2;
  box-shadow: 0 1px 0 rgba(0,0,0,.03), inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.edit-address-overlay .ea-input::placeholder{
  color: var(--text-secondary);
  opacity: .9;
}

.edit-address-overlay .ea-input:focus{
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(13,110,253,.15);
}

.edit-address-overlay .ea-stack .form-control{
  margin: 20px 0;               /* vertical separation for stacked inputs */
}

.edit-address-overlay .ea-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.success-modal-content{
  display: flex;
  flex-direction: column;
}

/* Sit the button row at the bottom */
.success-modal-content .modal-buttons{
  margin-top: auto;      /* pushes it to the bottom of the modal */
}

/* Extra nudge for dark mode contrast (if you use data-theme) */
[data-theme="dark"] .edit-address-overlay .ea-input{
  background: var(--background);
  border-color: #374151; /* tweak if your token differs */
  box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ============================================
   AVATARS & PATIENT INFO
   ============================================ */

.patient-avatar, .account-avatar, .selected-patient-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 86, 166, 0.3);
}

.selected-patient-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-secondary-light));
    font-size: 1.2rem;
    margin-right: 15px;
    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3);
}

/* ============================================
   DETAIL ROWS & INFO DISPLAY
   ============================================ */

.detail-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--theme-border-light);
}

.detail-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.detail-row .label, .detail-label {
    font-size: 0.8rem;
    color: var(--brand-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.detail-row .value, .detail-value {
    color: var(--theme-text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
    word-break: break-word;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text-primary);
    font-size: 0.95rem;
    font-weight: 500;
}

.meta-item i {
    color: var(--brand-primary);
    width: 16px;
}

.meta-item small {
    color: var(--theme-text-muted);
    font-size: 0.85rem;
    margin-left: 8px;
}

/* ============================================
   BADGES & STATUS INDICATORS
   ============================================ */

.badge {
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
}

.status-badge {
    font-size: 0.8rem !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
    letter-spacing: 0.3px;
}

.exemption-badge {
    background: var(--brand-secondary);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.no-exemption {
    background: var(--theme-text-muted);
}

.role-badge {
    background: var(--brand-info);
    color: white;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.quantity-badge {
    background: #3b82f6 !important;
    color: white !important;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-block;
    min-width: 40px;
    text-align: center;
}

.quantity-badge.total {
    background: #2563eb !important;
    font-size: 1rem;
    padding: 6px 16px;
}

/* Shipped column styling — green */
.quantity-badge.shipped {
    background: #22c55e !important;
    color: white !important;
    border: 1px solid #16a34a;
}

.quantity-badge.shipped.total {
    background: #16a34a !important;
    font-weight: 600;
}

[data-theme="dark"] .quantity-badge.shipped {
    background: rgba(34, 197, 94, 0.85) !important;
    color: white !important;
    border-color: rgba(34, 197, 94, 0.6);
}

[data-theme="dark"] .quantity-badge.shipped.total {
    background: rgba(22, 163, 74, 0.9) !important;
}

/* Status colors */
.status-pending {
    background-color: #E7D1FE !important;
    color: #4C1D95 !important;
    border-color: #C4B5FD !important;
}

.status-awaiting-prescription {
    background-color: #FFCCCC !important;
    color: #7F1D1D !important;
    border-color: #FCA5A5 !important;
}

/* Part Prescription Received: derived from BP status 4a/4b. Teal palette
   matches the view-order tracker's prescription-partial step so the same
   colour signals "partial Rx received" everywhere a status pill shows. */
.status-part-prescription-received {
    background-color: #CCFBF1 !important;
    color: #0F766E !important;
    border-color: #5EEAD4 !important;
}

.status-awaiting-stock {
    background-color: #DBEAFE !important;
    color: #1E40AF !important;
    border-color: #93C5FD !important;
}

.status-received {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #FCD34D !important;
}

.status-part-dispatched {
    background-color: #FFEDD5 !important;
    color: #9A3412 !important;
    border-color: #FB923C !important;
}

.status-completed {
    background-color: #D1FAE5 !important;
    color: #065F46 !important;
    border-color: #34D399 !important;
}

/* ============================================
   ORDER PAGE LAYOUT - 2 COLUMN DESIGN
   ============================================ */

.order-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.product-selection,
.order-summary {
    padding: 30px;
}

.catalogue-order-grid, .order-summary {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

.patient-info-panel {
    width: 100%;
    border-radius: 12px;
    padding: 25px 30px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-height: 100px; /* UNIFIED HEIGHT */
    max-height: 100px;
    display: flex;
    align-items: center;
    position: relative;
}

.patient-info-panel.empty {
    justify-content: center;
}

.patient-info-panel .empty-patient-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0;
}

.patient-info-panel .empty-patient-info h3 {
    display: none;
}

.patient-info-panel .selected-patient-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: visible !important;
    gap: 20px;
}

.patient-info-panel .selected-patient-header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.patient-info-panel .patient-details-section {
    display: none;
}

.patient-info-panel.empty .empty-patient-info i {
    font-size: 1.5rem;
    margin-bottom: 0;
    opacity: 0.5;
}

.patient-info-panel.empty .empty-patient-info h3 {
    display: none;
}

.patient-info-panel.empty .empty-patient-info p {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.patient-info-panel.empty i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.3;
}

.change-clinic-actions {
    position: absolute;
    top: 10px;
    right: 30px;
}

.selected-patient-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.selected-patient-header {
    display: flex;
    align-items: center;
    flex: 1;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.selected-patient-main {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 15px;
}

.selected-patient-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* New positioning for the change patient button */
.selected-patient-actions-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    position: relative;
    z-index: 10;
}

.selected-patient-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 100%;
}

.selected-patient-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-patient-nhs {
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-clinic-info {
    margin-top: 0;
}

.selected-clinic-column {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-right: 30px;
    height: 100%;
}

.selected-clinic-column i {
    font-size: 1.5rem;
    color: var(--brand-secondary);
    opacity: 0.5;
}

.selected-address-column {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.selected-address-column i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.delivery-label {
    font-size: 1.3rem;
    font-weight: 600;
}

.address-text {
    font-size: 1.3rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clinic-name-compact {
    font-weight: 600;
    color: var(--brand-primary);
    font-size: 1.3rem;
    white-space: nowrap;
}

.patient-name-inline {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nhs-separator {
    margin: 0 10px;
    color: var(--theme-text-muted);
    font-weight: 400;
}

.patient-details-section {
    display: none;
}

.patient-detail-group {
    margin-bottom: 20px;
}

.patient-detail-group.gp-info-group {
    border-top: 2px solid var(--theme-border-light);
    padding-top: 20px;
    margin-top: 25px;
    background: rgba(var(--brand-info-rgb, 23, 162, 184), 0.05);
    padding: 20px 15px 15px 15px;
    border-radius: 12px;
    border-left: 4px solid var(--brand-info);
}

.patient-detail-group h4 {
    color: var(--brand-primary);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.patient-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.patient-detail-label {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.patient-detail-value {
    color: var(--theme-text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.4;
}

.patient-detail-value.address {
    line-height: 1.5;
}

.patient-detail-value.nhs-number {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--brand-info);
}

.patient-detail-value.contact-info {
    line-height: 1.6;
    word-break: break-all;
    overflow-wrap: break-word;
}

.patient-detail-value.contact-info div {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
    min-width: 0;
    width: 100%;
}

.patient-detail-value.contact-info div:last-child {
    margin-bottom: 0;
}

.patient-detail-value.contact-info i {
    color: var(--brand-primary);
    width: 16px;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.patient-detail-value.contact-info span,
.patient-detail-value.contact-info div > *:not(i) {
    word-break: break-all;
    overflow-wrap: break-word;
    min-width: 0;
    flex: 1;
    max-width: calc(100% - 24px);
}

.order-summary {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 20px;
    width: 100%;
    overflow: hidden;
}

.order-summary .section-title {
    margin-bottom: 0px;
}

.order-items {
    max-height: 800px; /* This will now actually work */
    overflow-y: auto;
    padding: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}

.order-items:hover {
    background: none;
    border: none;
    box-shadow: none;
}

.order-item {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 14px 16px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); /* MOVED shadow here - always visible in light mode */
}

.order-item:hover {
    background: rgba(255, 255, 255, 1); /* Fully opaque on hover */
    border-color: var(--brand-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
}


/* Right column - notes and files */
.order-meta-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.order-notes,
.order-attachments {
    margin-bottom: 0;
}

.order-summary-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.order-items-wrapper,
.order-meta-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.clinic-selection-info {
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border: 2px solid var(--brand-primary);
    border-radius: 12px;
    text-align: center;
}

.selected-clinic-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.clinic-name-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.selected-clinic-display .clinic-name {
    font-weight: 600;
    color: var(--brand-primary);
    font-size: 1.1rem;
}

.selected-clinic-display i.fa-hospital {
    color: var(--brand-primary);
}

/* Undo clinic button - styled exactly like "Change Selection" button */


.undo-clinic-btn i {
    font-size: 0.875rem;
}

/* Center both change buttons */
.selected-patient-actions-top,
.change-clinic-actions {
    text-align: center !important;
    margin: 20px 0 !important;
}

.undo-clinic-btn {
    background: #ffc107 !important;
    color: #212529 !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    margin: 0 auto !important;
}

.undo-clinic-btn:hover {
    background: #e0a800 !important;
    color: #212529 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.change-patient-btn-small:active,
.undo-clinic-btn:active {
    transform: translateY(0) !important;
}

.change-patient-btn-small i {
    font-size: 0.875rem;
}

.confirmation-modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: var(--card-shadow-hover);
    border: 1px solid var(--glass-border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    opacity: 0;
    width: 90%;
    max-width: 600px;
    max-height: calc(85vh / var(--zoom-factor, 1));
    padding: 15px;
}

.confirmation-modal-content h2 {
    color: var(--brand-primary) !important;
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 1.8rem;
    position: relative;
    z-index: 2;
    text-align: center; /* ADD THIS */
}

.confirmation-modal-content > p {
    color: var(--theme-text-primary);
    margin-bottom: 30px;
    font-size: 1.1rem;
    line-height: 1.5;
    position: relative;
    z-index: 2;
    text-align: center; /* ADD THIS */
}

.confirmation-icon {
    color: white;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em;
    margin: 0 auto 20px;
}

.confirmation-details {
    background: var(--background);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.confirmation-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.confirmation-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.confirmation-section h4 {
    margin: 0 0 15px 0;
    color: var(--text);
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center; /* CHANGE from flex-start to center */
    gap: 8px;
}

.confirmation-section h4 i {
    color: var(--primary-color);
}

.confirmation-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.95em;
}

.confirmation-row .label {
    color: var(--text-secondary);
    font-weight: 500;
}

.confirmation-row .value {
    color: var(--text);
    font-weight: 600;
    text-align: right;
}

/* Section header with action button (e.g., Change Address) */
.section-header-with-action {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.section-header-with-action h4 {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-start !important;
}

/* Change address button in confirmation modal - blue/green gradient */
.change-address-btn,
button.change-address-btn,
.warning-modal .change-address-btn,
.warning-modal button.change-address-btn,
.confirmation-modal-content .change-address-btn,
.confirmation-modal-content button.change-address-btn,
#order-confirmation-modal .change-address-btn,
#order-confirmation-modal button.change-address-btn,
.delivery-section .change-address-btn,
.delivery-section button.change-address-btn,
.section-header-with-action .change-address-btn,
.section-header-with-action button.change-address-btn {
    background: linear-gradient(135deg, var(--brand-primary, #0056a6), var(--brand-secondary, #28a745)) !important;
    border: none !important;
    color: #fff !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 86, 166, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    outline: none !important;
}

button.change-address-btn::before,
.change-address-btn::before,
.warning-modal .change-address-btn::before,
.confirmation-modal-content .change-address-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    transition: left 0.6s ease !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

button.change-address-btn:hover::before,
.change-address-btn:hover::before,
.warning-modal .change-address-btn:hover::before,
.confirmation-modal-content .change-address-btn:hover::before {
    left: 100% !important;
}

button.change-address-btn:hover,
.change-address-btn:hover,
.warning-modal .change-address-btn:hover,
.warning-modal button.change-address-btn:hover,
.confirmation-modal-content .change-address-btn:hover,
.confirmation-modal-content button.change-address-btn:hover {
    background: linear-gradient(135deg, var(--brand-primary-dark, #003d73), var(--brand-secondary, #28a745)) !important;
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(0, 86, 166, 0.4) !important;
    color: #fff !important;
}

button.change-address-btn *,
.change-address-btn *,
.warning-modal .change-address-btn *,
.confirmation-modal-content .change-address-btn * {
    position: relative !important;
    z-index: 1 !important;
}

button.change-address-btn i,
.change-address-btn i,
.warning-modal .change-address-btn i,
.confirmation-modal-content .change-address-btn i {
    font-size: 0.85rem !important;
}

/* Dark theme support for change address button */
[data-theme="dark"] .change-address-btn,
[data-theme="dark"] button.change-address-btn,
[data-theme="dark"] .warning-modal .change-address-btn,
[data-theme="dark"] .warning-modal button.change-address-btn,
[data-theme="dark"] .confirmation-modal-content .change-address-btn,
[data-theme="dark"] .confirmation-modal-content button.change-address-btn,
.dark-mode .change-address-btn,
.dark-mode button.change-address-btn,
body.dark .change-address-btn,
body.dark button.change-address-btn {
    background: linear-gradient(135deg, var(--brand-primary, #0056a6), var(--brand-secondary, #28a745)) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 86, 166, 0.4) !important;
}

[data-theme="dark"] .change-address-btn:hover,
[data-theme="dark"] button.change-address-btn:hover,
[data-theme="dark"] .warning-modal .change-address-btn:hover,
[data-theme="dark"] .warning-modal button.change-address-btn:hover,
.dark-mode .change-address-btn:hover,
.dark-mode button.change-address-btn:hover,
body.dark .change-address-btn:hover,
body.dark button.change-address-btn:hover {
    background: linear-gradient(135deg, var(--brand-primary-dark, #003d73), var(--brand-secondary, #28a745)) !important;
    box-shadow: 0 4px 16px rgba(0, 86, 166, 0.5) !important;
}

.confirmation-items-list {
    max-height: 40px;
    overflow-y: auto;
    margin: 20px 0;
    padding: 0;
    background: var(--background);
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.confirm-order-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 16px;
    align-items: center;
}

.confirm-order-item:last-child {
    border-bottom: none;
}

.confirm-item-sku {
    font-family: monospace;
    font-size: 0.85em;
    text-align: left;
    color: var(--text-secondary);
    font-weight: 500;
}

.confirm-item-name {
    font-weight: 600;
    color: var(--text);
    text-align: left;
    font-size: 0.9em;
}

.confirm-item-qty {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9em;
    text-align: right;
    white-space: nowrap;
}

.confirm-item-details {
    display: none; /* Remove old details wrapper */
}

.confirm-item-price {
    display: none; /* Hide individual prices */
}

.confirmation-totals {
    border-top: 2px solid var(--border);
    padding-top: 12px;
    margin-top: 12px;
    font-weight: 600;
}

/* Delivery Address Emphasis */
.delivery-address-emphasis {
    background: linear-gradient(135deg, rgba(0, 86, 166, 0.08), rgba(79, 195, 247, 0.08));
    border: 4px solid var(--brand-primary);
    padding: 15px 20px;
    border-radius: 6px;
    font-size: 1.05em;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.delivery-address-emphasis .address-line {
    color: var(--text);
    font-weight: 600;
    margin: 4px 0;
}

.delivery-address-emphasis .address-line:first-child {
    font-size: 1.1em;
    color: var(--brand-primary);
}

.confirmation-message {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9em;
    margin: 15px 0;
    font-style: italic;
}

/* Dark theme support */

[data-theme="dark"] .delivery-address-emphasis,
.dark-mode .delivery-address-emphasis,
body.dark .delivery-address-emphasis {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.15), rgba(0, 86, 166, 0.15));
    border-left-color: #4FC3F7;
}

[data-theme="dark"] .confirmation-modal-content h2 {
    color: lightblue !important;
}

[data-theme="dark"] .delivery-address-emphasis .address-line:first-child {
    color: #4FC3F7;
}

[data-theme="dark"] .clinic-selection-info {
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.15) 0%, rgba(123, 31, 162, 0.15) 100%);
    border-color: var(--brand-primary-light);
}

[data-theme="dark"] .selected-clinic-display .clinic-name {
    color: var(--brand-primary-light);
}

[data-theme="dark"] .selected-clinic-display i.fa-hospital {
    color: var(--brand-primary-light);
}

[data-theme="dark"] .undo-clinic-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

[data-theme="dark"] .undo-clinic-btn:hover {
    background: #c0392b;
}

[data-theme="dark"] .selected-clinic-column {
    border-right-color: var(--theme-border-light);
}

[data-theme="dark"] .clinic-name-compact {
    color: lightblue;
}

[data-theme="dark"] .selected-clinic-column i {
    color: lightblue;
}

[data-theme="dark"] .selected-patient-name {
    color: #FFFFFF;
}

[data-theme="dark"] .selected-patient-nhs {
    color: var(--theme-text-secondary);
}

[data-theme="dark"] .selected-address-column i {
    color: var(--brand-secondary);
}

[data-theme="dark"] .address-text {
    color: var(--theme-text-secondary);
}

[data-theme="dark"] .nhs-separator {
    color: var(--theme-text-muted);
}

[data-theme="dark"] .patient-name-inline {
    color: white;
}

[data-theme="dark"] .change-patient-btn-small,
.dark-mode .change-patient-btn-small,
body.dark .change-patient-btn-small {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4) !important;
}

[data-theme="dark"] .change-patient-btn-small:hover,
.dark-mode .change-patient-btn-small:hover,
body.dark .change-patient-btn-small:hover {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5) !important;
}

[data-theme="dark"] .change-patient-btn-small:hover::after,
.dark-mode .change-patient-btn-small:hover::after,
body.dark .change-patient-btn-small:hover::after {
    background: rgba(255, 255, 255, 0.95);
    color: #000;
}

.clinic-info-display {
    text-align: center !important;
    position: absolute;
    top: 35px;
    left: 30px;
}

.clinic-info-display .clinic-name {
    font-weight: 600 !important;
    color: #0056a6; !important;
    font-size: 1.3rem !important;
    margin-left: 8px !important;
}

.clinic-info-display i.fa-hospital {
    color: var(--brand-secondary) !important;
}

/* Selected clinic info in patient panel */
.selected-clinic-info {
    font-size: 0.9rem;
    color: var(--brand-primary);
    margin-top: 5px;
    font-weight: 500;
}

.selected-clinic-info i {
    margin-right: 5px;
}

/* Dark theme support for selected clinic info */
[data-theme="dark"] .selected-clinic-info {
    color: lightblue;
}

[data-theme="dark"] .clinic-info-display i.fa-hospital {
    color: white !important;
    opacity: 0.5;
}

[data-theme="dark"] .clinic-info-display .clinic-name {
    color: lightblue !important;
}

/* Enhanced transitions for step flow */
.clinic-filter, .patient-selector {
    transition: all 0.4s ease;
}

.patient-selector.hidden {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transform: translateY(-10px);
}

.patient-selector.visible {
    opacity: 1;
    height: auto;
    overflow: visible;
    transform: translateY(0);
}

/* Product search bar - maintain full width */
.search-filters {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

.filter-group {
    flex: 1;
    width: 100%;
}

.search-input {
    width: 100%;
    min-width: 0; /* Allow flex shrinking */
}

/* Product selection visibility */
.search-filters {
    transition: all 0.3s ease;
}

.search-filters[style*="display: none"] {
    opacity: 0;
    transform: translateY(-10px);
}

/* Empty state improvements */
.empty-patient-info {
    text-align: center;
    padding: 30px;
}

.empty-patient-info i.fa-hospital,
.empty-patient-info i.fa-user-plus,
.empty-patient-info i.fa-info-circle {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.empty-patient-info i.fa-hospital {
    color: var(--brand-primary);
}

.empty-patient-info i.fa-user-plus {
    color: var(--brand-secondary);
}

.empty-patient-info i.fa-info-circle {
    color: #6c757d;
}

/* Dark theme support for empty state icons */
[data-theme="dark"] .empty-patient-info i.fa-hospital {
    color: var(--brand-primary-light);
}

[data-theme="dark"] .empty-patient-info i.fa-user-plus {
    color: var(--brand-secondary-light);
}

[data-theme="dark"] .empty-patient-info i.fa-info-circle {
    color: #adb5bd;
}

/* ============================================
   PRICE TOGGLE FEATURE
   ============================================ */

.price-toggle-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--theme-border-light);
    border-radius: 10px;
    border: 1px solid var(--theme-border-medium);
    position: relative;
    z-index: 2;
}

.section-title-with-toggle {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.section-title-with-toggle .section-title {
    margin-bottom: 0;
    flex: 1;
}

.price-toggle-freeform {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.price-toggle-label {
    font-weight: 600;
    color: var(--theme-text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Toggle switch styling */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--brand-primary);
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

/* Hide/show price elements */
.price-hidden .product-pricing,
.price-hidden .item-cost,
.price-hidden .order-totals,
.price-hidden .unit-cost,
.price-hidden .drug-tariff-cost,
.price-hidden .product-price,
.price-hidden .price-cell,
.price-hidden .grand-total {
    display: none !important;
}

/* Show pricing status in toggle section */
.pricing-status {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin-left: 5px;
}

.pricing-status.enabled {
    color: var(--brand-primary);
}

/* ============================================
   PATIENT SELECTOR VISIBILITY
   ============================================ */

.patient-selector.hidden {
    display: none !important;
}

.patient-selector.visible {
    display: block !important;
}

/* ============================================
   PRODUCT SELECTION & SEARCH
   ============================================ */

.patient-selector {
    margin-bottom: 30px;
    padding: 20px;
    background: var(--theme-border-light);
    border-radius: 12px;
    border: 2px solid var(--theme-border-medium);
    position: relative;
    z-index: 2;
}

.search-filters {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    margin-bottom: 20px;
    align-items: end;
    position: relative;
    z-index: 2;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 5px;
    font-size: 0.9rem;
}


.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    max-height: 1200px;
    padding-top: 5px;
    overflow-y: auto;
    padding-right: 10px;
    position: relative;
    z-index: 2;
    grid-auto-rows: auto !important; /* Let rows size to content */
    align-content: start !important;
}

/* Firefox scrollbar styling */
.products-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary) var(--theme-border-light);
}




.product-card.variant-product,
.variant-product {
    min-height: 400px !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.product-card.variant-product {
    min-height: 280px !important;
    height: auto !important;
}

/* Custom scrollbar for products grid */
.products-grid::-webkit-scrollbar {
    width: 8px;
}

.products-grid::-webkit-scrollbar-track {
    background: var(--theme-border-light);
    border-radius: 10px;
}

.products-grid::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: 10px;
    opacity: 0.7;
}

.products-grid::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary-dark);
    opacity: 1;
}

/* Firefox scrollbar styling */
.products-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary) var(--theme-border-light);
}

.product-card {
    min-width: 350px;
    min-height: 280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--theme-bg-card);
    border: 2px solid var(--theme-border-light);
    border-radius: 15px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    margin-right: 0;
    height: auto;
    overflow: none;
    box-shadow: 0 2px 8px var(--theme-shadow-light);
    box-sizing: border-box;
}

.product-details {
    margin-top: auto; 
}

.product-footer {
    margin-top: auto; 
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 15px 15px 0 0;
    z-index: 1;
}

.product-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--theme-shadow-medium);
}

.product-card:hover::before {
    opacity: 1;
}

.product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.product-info {
    flex: 1;
}

.product-title {
    font-weight: 700;
    color: var(--brand-primary);
    font-size: 1.1rem;
    margin-bottom: 5px;
    line-height: 1.3;
}

.product-sku {
    color: var(--theme-text-muted);
    font-size: 0.85rem;
    font-family: inherit !important;
    background: var(--theme-border-light);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

.product-details {
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.product-brand {
    font-weight: 600;
    color: var(--brand-secondary);
    margin-bottom: 8px;
    font-size: 1rem;
}

.product-size {
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
    background: var(--theme-border-light);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--theme-border-light);
    position: relative;
    z-index: 2;
}

.product-pricing {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-price {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--brand-primary);
}

.drug-tariff-cost {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    font-style: italic;
}

.empty-products {
    text-align: center;
    color: var(--theme-text-muted);
    padding: 60px 20px;
    grid-column: 1 / -1;
}

.empty-products i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.3;
}

/* ============================================
   ORDER SUMMARY & ITEMS
   ============================================ */

.order-items::-webkit-scrollbar {
    width: 8px;
}

.order-items::-webkit-scrollbar-track {
    background: var(--theme-border-light);
    border-radius: 10px;
}

.order-items::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: 10px;
}

.order-items::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary-dark);
}

.order-items {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary) var(--theme-border-light);
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.item-name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    flex: 1;
    margin-right: 10px;
}

.item-remove {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b6b;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.item-remove:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
    transform: scale(1.05);
}

/* Item header actions container */
.item-header-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Edit button in basket */
.item-edit {
    background: linear-gradient(135deg, var(--brand-primary, #0056a6), var(--brand-secondary, #28a745));
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.item-edit:hover {
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(0, 86, 166, 0.4);
}

.item-edit i {
    color: #fff;
}

/* Edit variant notice in modal */
.edit-variant-notice {
    background: linear-gradient(135deg, rgba(0, 86, 166, 0.1), rgba(40, 167, 69, 0.1));
    border: 1px solid rgba(0, 86, 166, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.edit-variant-notice i {
    color: var(--brand-primary, #0056a6);
    font-size: 1.1rem;
}

.edit-variant-notice strong {
    color: var(--brand-secondary, #28a745);
}

/* Dark theme support for edit elements */
[data-theme="dark"] .item-edit {
    background: linear-gradient(135deg, var(--brand-primary, #0056a6), var(--brand-secondary, #28a745));
}

[data-theme="dark"] .edit-variant-notice {
    background: linear-gradient(135deg, rgba(0, 86, 166, 0.2), rgba(40, 167, 69, 0.15));
    border-color: rgba(0, 86, 166, 0.4);
}

/* Bottom section with info and controls */
.item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 50px;
}

.item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.item-variant {
    font-size: 0.9rem;
    line-height: 1.3;
    font-weight: 500;
}

.attribute-label {
    font-weight: 700;
    color: var(--brand-primary);
    text-transform: capitalize;
}

.attribute-value {
    font-weight: 500;
    color: var(--theme-text-primary);
}

[data-theme="dark"] .attribute-label {
    color: lightblue;
}

[data-theme="dark"] .attribute-value {
    color: #FFFFFF;
}

/* Lead Time Color Coding */
.lead-time-fast {
    color: #28a745 !important; /* Green - 1-3 days */
    font-weight: 600;
}

.lead-time-medium {
    color: #e6a700 !important; /* Yellow/Amber - 4-9 days */
    font-weight: 600;
}

.lead-time-slow {
    color: #dc3545 !important; /* Red - 10+ days (light mode) */
    font-weight: 600;
}

.lead-time-na {
    color: var(--theme-text-muted) !important;
    font-style: italic;
}

/* Dark mode adjustments for lead time colors */
[data-theme="dark"] .lead-time-fast {
    color: #4cdf6a !important; /* Brighter green for dark mode */
}

[data-theme="dark"] .lead-time-medium {
    color: #ffc107 !important; /* Brighter yellow for dark mode */
}

[data-theme="dark"] .lead-time-slow {
    color: #ff6b7a !important; /* Softer red for dark mode - easier on eyes */
}

[data-theme="dark"] .lead-time-na {
    color: #6c757d !important;
}

/* Lead Time Disclaimer Note */
.lead-time-disclaimer {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin: 12px 0 0 0;
    font-style: italic;
}

[data-theme="dark"] .lead-time-disclaimer {
    color: #6c757d;
}

.item-sku {
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Right side controls */
.item-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quantity-controls {
    display: flex;
    flex-direction: row;
    align-items: center; 
    gap: 3px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.qty-btn {
    background: rgba(13, 110, 253, 0.15);
    border: 1px solid rgba(13, 110, 253, 0.3);
    color: #4FC3F7;
    width: 28px;
    height: 22px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.qty-btn:hover:not(:disabled) {
    background: rgba(13, 110, 253, 0.25);
    border-color: rgba(13, 110, 253, 0.5);
    color: #90cdf4;
}

.qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.quantity-input {
    width: 28px;
    text-align: center;
    border: none;
    background: transparent;
    padding: 4px 0;
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 700;
    height: 24px;
}

.quantity-input:focus {
    outline: none;
}

/* Hide spinner arrows in webkit browsers */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spinner arrows in Firefox */
.quantity-input[type="number"] {
    -moz-appearance: textfield;
}

.item-cost {
    font-weight: 700;
    color: #0056a6;
    font-size: 1.05rem;
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
    letter-spacing: 0.3px;
}

.item-details {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-totals {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 0;
    margin-top: 20px;
    gap: 15px;
    width: 100%;
}

.order-totals,
.order-attachments,
.order-notes {
    flex-shrink: 0; /* Never shrink these */
}

.price-hidden .order-totals {
    display: none !important;
}

.total-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: var(--theme-bg-card);
    border: 1px solid var(--theme-border-light);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    min-width: 140px;
    max-width: 280px;
    width: auto;
    flex-shrink: 0;
    flex-grow: 0;
}

.total-label {
    font-size: 0.85em !important;
    color: var(--theme-text-secondary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.total-value {
    font-size: 1.3em !important;
    font-weight: 700 !important;
    color: var(--theme-text-primary) !important;
}

.grand-total {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.05)) !important;
    border-color: var(--brand-primary) !important;
}

.grand-total .total-value {
    color: var(--brand-primary) !important;
}

.order-notes label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 8px;
}

.notes-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 120px;
    resize: vertical;
    border: 2px solid var(--theme-border-light);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.95rem;
    background: var(--theme-bg-card);
    color: var(--theme-text-primary);
}

.notes-textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0, 86, 166, 0.1);
}

.empty-order {
    text-align: center;
    color: var(--theme-text-muted);
    padding: 40px 20px;
    border: 2px dashed var(--theme-border-light);
    border-radius: 12px;
}

.empty-order i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

.right-column-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.patient-info-panel-compact {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 16px 24px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--glass-border);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    min-height: 100px;
    max-height: 100px;
}

.patient-info-panel-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary));
    border-radius: 16px 16px 0 0;
}

.patient-info-panel-compact .selected-patient-card {
    display: grid;
    grid-template-columns: 0.5fr 0.8fr 1fr;
    gap: 30px;
    align-items: center;
    justify-items: start; /* Aligns all items to the left within their columns */
    width: 100%;
    overflow: visible !important;
    position: relative;
    top: 15px;
    z-index: 2;
}

.patient-info-panel-compact .selected-patient-main {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.patient-info-panel-compact .selected-patient-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-secondary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
}

.patient-info-panel-compact .selected-patient-info {
    display: flex;
    gap: 20px;
    align-items: center;
    display: inline;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.patient-info-panel-compact .selected-patient-name,
.patient-info-panel-compact .selected-patient-nhs,
.patient-info-panel-compact .selected-patient-address {
    display: inline-block; /* Make them inline */
    white-space: nowrap; /* Keep text on one line */
}

.patient-info-panel-compact .selected-patient-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
}

.patient-info-panel-compact .selected-patient-nhs {
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
    margin: 0;
}

.patient-info-panel-compact .selected-patient-address {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.patient-info-panel-compact.empty {
    text-align: center;
    padding: 16px 24px;
}

.patient-info-panel-compact.empty .empty-patient-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.patient-info-panel-compact.empty .empty-patient-info i {
    font-size: 1.2rem;
    opacity: 0.5;
}

.patient-info-panel-compact.empty .empty-patient-info p {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
}
/* ============================================
   DASHBOARD STYLES
   ============================================ */

/* Statistics Section */
.info-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

/* DISABLED: This hover-dim effect causes white flash on click/navigation */
/*
.info-stats:hover .stat-item:not(:hover) {
    opacity: 0.7;
    transform: translateY(2px) scale(0.98);
}
*/

.stat-item {
    text-align: center;
    padding: 28px 20px;
    /* Reduced transition - no opacity/background to prevent flash */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    transform: translateY(0) scale(1);
    max-width: none;
    width: 100%;
}

/* Prevent flash on click - maintain appearance during navigation */
.stat-item:active,
a.stat-item:active {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    transition: none !important;
}

.stat-item:hover {
    transform: translateY(-12px) scale(1.05);
    box-shadow: var(--card-shadow-hover) !important;
    border-color: rgba(255, 255, 255, 0.4);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--brand-primary);
    display: block;
    text-shadow: 0 2px 4px var(--theme-shadow-light);
    margin-bottom: 10px;
    line-height: 1;
    /* No transition to prevent flash */
    transition: none;
    transform: scale(1);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* No transition to prevent flash */
    transition: none;
}

/* Function Cards */
.function-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin-top: 35px;
}

/* DISABLED: This hover-dim effect causes white flash on click/navigation */
/*
.function-cards:hover .function-card:not(:hover) {
    opacity: 0.8;
    transform: translateY(2px) scale(0.99);
}
*/

.function-card {
    padding: 35px 28px;
    text-align: center;
    cursor: pointer;
    transform: translateY(0) scale(1);
    max-width: none;
    width: 100%;
    border-radius: 24px;
    /* Solid background to prevent flash - override glass-bg */
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    /* NO transitions to prevent flash */
    transition: none !important;
    /* Anchor tag specific - remove link styling */
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit !important;
}

.function-card,
.function-card:link,
.function-card:visited,
.function-card:hover,
.function-card:active,
.function-card:focus {
    text-decoration: none !important;
}

/* Force remove underline from all elements inside function-card */
a.function-card,
a.function-card *,
a.function-card h3,
a.function-card p {
    text-decoration: none !important;
}

[data-theme="dark"] .function-card {
    background: rgba(30, 35, 44, 0.95) !important;
}

/* Prevent flash on click - maintain appearance during navigation */
.function-card:active {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

.function-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
    color: inherit !important;
}

.function-card:focus {
    outline: none;
    text-decoration: none !important;
}

/* Ensure child elements keep their colors */
.function-card h3 {
    color: var(--brand-primary) !important;
}

.function-card p {
    color: var(--theme-text-secondary) !important;
}

.function-card-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: white;
    position: relative;
    /* NO transition to prevent flash */
    transition: none !important;
    z-index: 2;
    transform: scale(1) rotate(0deg);
}

.card-new-patient .function-card-icon {
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-secondary-light));
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.3);
}

.card-new-order .function-card-icon {
    background: linear-gradient(135deg, var(--brand-info), #6f42c1);
    box-shadow: 0 8px 32px rgba(23, 162, 184, 0.3);
}

.function-card h3 {
    color: var(--brand-primary) !important;
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 1.25rem;
    text-shadow: 0 1px 2px var(--theme-shadow-light);
    /* NO transition to prevent flash */
    transition: none !important;
    z-index: 2;
    position: relative;
}

.function-card p {
    color: var(--theme-text-secondary) !important;
    margin-bottom: 25px;
    line-height: 1.6;
    font-size: 0.95rem;
    /* NO transition to prevent flash */
    transition: none !important;
    z-index: 2;
    position: relative;
}

/* ============================================
   UPDATES PANEL
   ============================================ */

.updates-panel-container {
    min-height: 450px;
    max-height: 650px;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}

.updates-panel-header {
    padding: 32px 28px 24px 28px !important;
    border-bottom: 1px solid var(--theme-border-light) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.updates-panel-title {
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all 0.3s ease !important;
}

.updates-panel-title i {
    color: var(--brand-secondary) !important;
    font-size: 1.2rem !important;
}

.updates-panel-content {
    flex: 1 !important;
    padding: 24px !important;
    overflow-y: auto !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 2 !important;
}

.updates-feed-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 !important;
    width: 100% !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
    max-height: 400px !important;
    position: relative !important;
    z-index: 99999 !important;
    min-height: 200px !important;
}

.feed-update-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--theme-bg-card) !important;
    border: 1px solid var(--theme-border-light) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 99999 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.feed-update-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.feed-update-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

.feed-update-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 0.9rem !important;
    flex-shrink: 0 !important;
}

.feed-update-title {
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    flex: 1 !important;
}

.feed-update-time {
    color: var(--theme-text-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    background: var(--theme-border-light) !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}

.feed-update-message {
    color: var(--theme-text-secondary) !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    margin-top: 4px !important;
}

.updates-loading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    color: var(--theme-text-muted) !important;
    text-align: center !important;
    flex: 1 !important;
}

.loading-spinner {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1rem !important;
}

.updates-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    color: var(--theme-text-muted) !important;
    text-align: center !important;
    flex: 1 !important;
    padding: 40px 20px !important;
}

.empty-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #6c757d, #5a6268) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1.2rem !important;
}

/* ============================================
   CONTACT US STYLES
   ============================================ */

.contact-content {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.contact-info-section.contact-info-centered {
    max-width: 600px;
    width: 100%;
}

.contact-info-section h2, .contact-form-section h2 {
    color: var(--brand-primary);
    font-weight: 700;
    margin-bottom: 30px;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-item {
    margin-bottom: 30px;
    padding: 20px;
    background: var(--theme-border-light);
    border-radius: 16px;
    border: 1px solid var(--theme-border-medium);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: var(--theme-border-medium);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--theme-shadow-medium);
}

.contact-item h3 {
    color: var(--brand-primary);
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-item .contact-detail {
    color: var(--theme-text-primary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.contact-item .contact-detail strong {
    color: var(--brand-primary);
}

.contact-item .contact-detail a {
    color: var(--brand-primary) !important;
    text-decoration: none !important;
}

.contact-item .contact-detail a:hover {
    color: var(--brand-primary-dark) !important;
    text-decoration: underline !important;
}

.contact-item .contact-detail small {
    color: var(--theme-text-muted) !important;
}

.address-lines {
    line-height: 1.8;
}

.opening-hours {
    background: var(--theme-border-light);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid var(--theme-border-medium);
}

.opening-hours h4 {
    color: var(--brand-primary);
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    color: var(--theme-text-primary);
    border-bottom: 1px solid var(--theme-border-light);
}

.hours-list li:last-child {
    border-bottom: none;
}

.priority-select {
    background: var(--theme-bg-card);
}

.priority-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 8px;
}

.priority-normal {
    background: rgba(0, 123, 255, 0.1);
    color: #0056b3;
}

.priority-urgent {
    background: rgba(255, 193, 7, 0.1);
    color: #856404;
}

.priority-emergency {
    background: rgba(220, 53, 69, 0.1);
    color: #721c24;
}

/* ============================================
   ACCOUNT & VIEW ORDER UNIFIED STYLES
   ============================================ */

/* Status bars */
.account-status-bar, .order-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 30px;
    padding: 25px 30px;
}

.account-basic-info {
    display: flex;
    align-items: left;
    gap: 20px;
}

.account-name-details h2 {
    color: var(--brand-primary);
    margin: 0 0 8px 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.account-meta {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.account-summary-stats {
    display: flex;
    gap: 30px;
}

.member-since-subtle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
}

.member-since-subtle i {
    color: var(--brand-secondary);
}

/* Status info */
.status-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.status-label {
    font-weight: 600;
    color: var(--theme-text-primary);
    font-size: 1.1rem;
}

.tracking-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tracking-label {
    font-weight: 600;
    color: var(--theme-text-primary);
    font-size: 1.1rem;
}

.tracking-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tracking-number {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.tracking-status {
    font-size: 0.8rem;
    color: var(--brand-info);
    font-weight: 500;
}

.tracking-pending {
    font-size: 0.9rem;
    color: var(--theme-text-muted);
    font-style: italic;
}

.order-dates-with-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.order-dates {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.date-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.date-label {
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-value {
    font-size: 0.95rem;
    color: var(--theme-text-primary);
    font-weight: 500;
    margin-top: 4px;
}

.order-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.order-actions .btn {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 10px;
}

/* Patient action buttons - FORCE exactly the same size */
.view-order-container .order-actions .btn,
.order-status-bar .order-actions .btn {
    padding: 12px 20px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    width: 150px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Main content layout */
.main-content-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.account-sidebar, .patient-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-content {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Card headers */
.card-header-compact, .patient-header {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    background: var(--theme-bg-card);
    border-bottom: 1px solid var(--theme-border-light);
    color: var(--brand-primary);
}

.card-icon, .patient-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    margin-right: 15px;
    box-shadow: 0 2px 8px rgba(0, 86, 166, 0.3);
}

.card-header-compact h3, .patient-header h3 {
    color: var(--brand-primary) !important;
    font-weight: 700;
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.card-body-compact, .patient-info {
    padding: 20px;
    background: var(--theme-bg-card);
}

.patient-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.patient-name-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.patient-name-link:hover {
    color: var(--theme-primary, #0d6efd);
    text-decoration: underline;
}

.patient-name-link-icon {
    font-size: 0.65em;
    opacity: 0.4;
    margin-left: 2px;
    vertical-align: middle;
    transition: opacity 0.2s ease;
}

.patient-name-link:hover .patient-name-link-icon {
    opacity: 0.8;
}

.patient-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.username-display {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--brand-primary) !important;
}

.clinic-name {
    font-weight: 600;
    color: orange;
}

.address-row .value, .notes-row .value {
    font-size: 0.85rem;
    line-height: 1.5;
}

.admin-notes-row {
    background: rgba(255, 193, 7, 0.1);
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid var(--brand-warning);
    margin-top: 8px;
}

.admin-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-badge {
    background: var(--brand-warning);
    color: #000;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
}

/* Security info */
.security-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.security-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--theme-text-primary);
}

.security-item i {
    width: 16px;
    font-size: 0.8rem;
}

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

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

/* Section headers */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background: var(--theme-bg-card);
    border-bottom: 1px solid var(--theme-border-light);
    flex-wrap: wrap;
    gap: 15px;
    color: var(--brand-primary);
}

.section-header h2 {
    color: var(--brand-primary) !important;
    font-weight: 700;
    margin: 0;
    font-size: 1.4rem;
}

.section-header h2 i {
    color: var(--brand-primary) !important;
}

.section-header .role-badge {
    background: var(--brand-info) !important;
    color: white !important;
    border: 1px solid transparent;
}

/* Compact forms */
.compact-form {
    padding: 25px 30px;
    background: var(--theme-bg-card);
}

.button-group {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 25px;
}

/* Password requirements */
.password-requirements-notice {
    background: rgba(255, 193, 7, 0.1);
    padding: 12px 16px;
    border-radius: 12px;
    border-left: 4px solid var(--brand-warning);
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.password-requirements-notice i {
    color: var(--brand-warning);
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.requirements-text {
    flex: 1;
}

.requirements-text strong {
    color: var(--brand-primary);
    font-weight: 600;
}

/* ============================================
   PATIENT-SPECIFIC ORDER CARDS
   ============================================ */

.patient-orders-list {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--theme-bg-card);
}

.patient-order-card {
    background: var(--glass-bg);
    border: 2px solid var(--theme-border-light);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px var(--theme-shadow-light);
}

.patient-order-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--theme-shadow-medium);
    border-color: var(--brand-primary);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--theme-border-light);
}

.order-number h4 {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.brightpearl-id {
    color: #000000 !important;
    font-family: 'Courier New', monospace !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

.internal-id-pending {
    color: var(--theme-text-muted) !important;
    font-style: italic !important;
    font-family: 'Courier New', monospace !important;
}

.processing-indicator {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.processing-indicator i {
    color: var(--brand-warning);
    animation: spin 2s linear infinite;
}

.order-date {
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.order-card-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.order-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-notes {
    background: rgba(var(--brand-info-rgb, 23, 162, 184), 0.1);
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    border-left: 4px solid var(--brand-info);
    margin-bottom: 0;
    width: 100%;
}

.notes-label {
    font-weight: 700;
    color: var(--brand-primary);
    margin-right: 8px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.notes-value {
    color: var(--theme-text-primary);
}

.order-items-summary-compact {
    font-size: 0.9rem;
}

.order-items-summary-compact strong {
    color: var(--brand-primary);
    margin-right: 8px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.items-list-compact {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.items-list-compact li {
    background: var(--theme-border-light);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--theme-border-medium);
    /* MTM bases nest a sub-list of options under the name + qty;
       flex-wrap lets that sub-list drop onto its own row inside the
       pill instead of overflowing horizontally. Non-MTM rows have
       no sub-list so the wrap is a no-op for them. */
    flex-wrap: wrap;
}

.item-quantity {
    color: var(--brand-secondary);
    font-weight: 700;
    font-size: 0.8rem;
}

/* MTM options sub-list — nested inside an MTM base pill so the
   garment + its options read as one logical unit (matches the
   Quick Repeat modal + new-order Repeat modal). flex-basis:100%
   forces the sub-list onto a new line under the base name+qty. */
.items-list-compact-mtm-opts {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.items-list-compact .items-list-compact-mtm-opts li {
    background: transparent;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    border: 1px dashed var(--theme-border-medium);
    color: var(--theme-text-secondary);
    opacity: 0.9;
}

.more-items {
    font-style: italic;
    background: var(--brand-primary) !important;
    color: white !important;
    border: 1px solid var(--brand-primary-dark) !important;
}

/* ============================================
   ORDER ITEMS TABLE STYLES
   ============================================ */

.items-table-container {
    padding: 0;
    background: var(--theme-bg-card);
}

.items-table {
    margin: 0;
    font-size: 0.95rem;
    color: var(--theme-text-primary) !important;
    table-layout: fixed;
    width: 100%;
}

.items-table th {
    background: var(--theme-bg-card) !important;
    border-bottom: 2px solid var(--theme-border-medium) !important;
    font-weight: 600;
    color: var(--theme-text-primary) !important;
    padding: 18px 15px;
    vertical-align: middle;
}

.items-table td {
    padding: 18px 15px;
    vertical-align: middle;
    border-bottom: 1px solid var(--theme-border-light) !important;
    color: var(--theme-text-primary) !important;
}

.items-table tbody tr:hover {
    background-color: var(--theme-border-light) !important;
    transition: background-color 0.2s ease;
}

.sku-cell {
    width: 25%;
    min-width: 140px;
    word-break: break-word;
    hyphens: none;
}

.sku-cell code {
    background: var(--theme-border-light);
    padding: 6px 10px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--theme-border-medium);
    color: #1f2937;
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
    line-height: 1.3;
}

.product-cell strong {
    color: var(--theme-text-primary);
    font-weight: 600;
}

.item-details i {
    color: var(--brand-info);
    font-size: 0.8rem;
}

.quantity-cell {
    text-align: center;
}

.quantity-header {
    text-align: center;
}

.price-cell {
    text-align: right;
    font-weight: 600;
    color: #374151 !important;
}

.totals-row {
    background: var(--theme-border-light) !important;
    font-weight: 600;
}

.totals-row td {
    border-bottom: none !important;
    border-top: 2px solid var(--theme-border-medium) !important;
}

/* No items state */
.no-items-container {
    text-align: center;
    padding: 60px 20px;
    background: var(--theme-bg-card);
}

.no-items-icon {
    font-size: 3rem;
    color: var(--theme-text-muted);
    margin-bottom: 20px;
}

.no-items-content h3 {
    color: var(--theme-text-primary);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.no-items-content p {
    color: var(--theme-text-secondary);
    font-size: 1rem;
}

/* ============================================
   SELECT2 THEMING
   ============================================ */

.select2-container .select2-selection--single {
    height: 48px !important;
    border: 2px solid var(--theme-border-light) !important;
    border-radius: 10px !important;
    background-color: var(--theme-bg-card) !important;
    padding-right: 50px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-top: 10px !important;
    padding-left: 16px !important;
    padding-right: 50px !important;
    color: var(--theme-text-primary) !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 8px !important;
    width: 20px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 30px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    background: transparent !important;
    color: var(--theme-text-muted) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.2s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    background: var(--theme-border-light) !important;
    color: var(--theme-text-primary) !important;
    border-radius: 4px !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    display: none !important;
}

.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection--single:hover .select2-selection__clear {
    display: flex !important;
}

.select2-dropdown {
    border: 2px solid var(--theme-border-light) !important;
    border-radius: 10px !important;
    background-color: var(--theme-bg-card) !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

.select2-results__option {
    color: var(--theme-text-primary) !important;
    background-color: var(--theme-bg-card) !important;
    transition: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.select2-results__option--highlighted {
    background-color: var(--brand-primary) !important;
    color: white !important;
}

.select2-results__option:hover {
    background-color: var(--brand-primary) !important;
    color: white !important;
    transition: none !important;
}

.results-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 5px; /* Minimal padding */
    flex-wrap: wrap;
    gap: 15px;
    /* No background on container */
}

.results-summary .results-count {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
    font-weight: 600 !important;
}

.results-summary .text-muted,
.results-summary small.text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    font-weight: 500 !important;
}

.results-summary .pagination-info {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* ============================================
   ALERTS & MODALS
   ============================================ */

.alert {
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 25px;
    border: none;
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.alert.show {
    display: flex;
}

.alert-success {
    background: rgba(40, 167, 69, 0.15);
    color: var(--brand-secondary);
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.alert-danger {
    background: rgba(220, 53, 69, 0.15);
    color: var(--brand-danger);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Success Modal */
.success-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: calc(100vw / var(--zoom-factor, 1));
    height: calc(100vh / var(--zoom-factor, 1));
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.success-modal-content {
    position: relative;
    margin: 10% auto;
    padding: 40px;
    width: 90%;
    max-width: 600px;
    text-align: center;
    animation: slideIn 0.4s ease-out;
}

.success-modal-content,
.confirmation-modal-content,
.warning-modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: var(--card-shadow-hover);
    border: 1px solid var(--glass-border);
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Confirmation modal: use flex centering from parent overlay
   so it scales correctly with page zoom */
.warning-modal .confirmation-modal-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    animation: modalFadeOnly 0.3s ease-out forwards;
}

@keyframes modalFadeOnly {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Apply animation ONLY when modal is visible */
.success-modal[style*="display: block"] .success-modal-content,
.warning-modal[style*="display: block"] .warning-modal-content,
.confirmation-modal[style*="display: flex"] .confirmation-modal-content {
    animation: modalFadeIn 0.3s ease-out;
}

.success-icon {
    font-size: 4rem;
    color: var(--brand-secondary);
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.success-modal h2 {
    color: #0056a6;
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 1.8rem;
    position: relative;
    z-index: 2;
}

[data-theme="dark"] .success-modal h2 {
    color: lightblue;
}

.success-modal p {
    color: var(--theme-text-primary);
    margin-bottom: 30px;
    font-size: 1.1rem;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.modal-btn {
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
}

.modal-btn-secondary {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
}

.modal-btn-secondary:hover {
    background: linear-gradient(135deg, #5a6268, #495057);
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

/* ============================================
   WARNING MODAL STYLES
   ============================================ */

.warning-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw / var(--zoom-factor, 1));
    height: calc(100vh / var(--zoom-factor, 1));
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Space around card */
}

.warning-modal-content {
    background: var(--surface);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 30%;
    max-height: 80vh; /* Reduced from 85vh */
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
    margin: auto; /* Center within flex container */
}

.warning-modal-content {
    max-width: 500px;
}

.warning-modal[style*="display: block"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 40px 20px; /* Add padding top and bottom */
}

.warning-modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--card-shadow-hover);
    border: 1px solid var(--glass-border);
    position: relative;
    margin: 10% auto;
    width: 90%;
    max-width: 500px;
    text-align: center;
    animation: slideIn 0.4s ease-out;
    overflow: hidden;
}

.warning-modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-warning), #e0a800);
    border-radius: 24px 24px 0 0;
    z-index: 1;
}

.warning-icon {
    font-size: 4rem;
    color: var(--brand-warning);
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.warning-modal h2 {
    color: var(--brand-warning);
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 1.8rem;
    position: relative;
    z-index: 2;
}

.warning-modal p {
    color: var(--theme-text-primary);
    margin-bottom: 30px;
    font-size: 1.1rem;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

.warning-modal .modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.warning-modal .modal-btn {
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.warning-modal .modal-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
    z-index: 0;
    pointer-events: none;
}

.warning-modal .modal-btn:hover::before {
    left: 100%;
}

.warning-modal .modal-btn * {
    position: relative;
    z-index: 1;
}

.warning-modal .modal-btn-danger {
    background: linear-gradient(135deg, var(--brand-danger), #c82333);
    color: white;
}

.warning-modal .modal-btn-danger:hover {
    background: linear-gradient(135deg, #c82333, #a71e2a);
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

.warning-modal .modal-btn-secondary {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
}

.warning-modal .modal-btn-secondary:hover {
    background: linear-gradient(135deg, #5a6268, #495057);
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

/* ============================================
   LOADING STATES
   ============================================ */

.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--theme-border-light);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ============================================
   LOGIN PAGE SPECIFIC STYLES
   ============================================ */

.login-page-body {
    font-family: var(--font-family-sans-serif) !important;
    color: var(--theme-text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    background-color: var(--theme-bg-primary) !important;
    background-image: url('PC_BG.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.login-page-body::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, var(--theme-overlay) 0%, rgba(40, 167, 69, 0.3) 50%, var(--theme-overlay) 100%) !important;
    z-index: 0 !important;
    transition: background 0.3s ease;
    pointer-events: none !important;
}

.login-page-layout-wrapper {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh / var(--zoom-factor, 1)) !important;
}

.page-header-login {
    background-color: var(--theme-bg-card) !important;
    backdrop-filter: blur(15px) !important;
    padding: 1rem 0 !important;
    width: 100% !important;
    box-shadow: var(--card-shadow) !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--theme-border-light) !important;
    position: relative !important;
    z-index: 10 !important;
}

.page-header-login-logo {
    max-height: 60px !important;
    width: auto !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
}

.login-page-content-wrapper {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
    position: relative !important;
    z-index: 10 !important;
}

.login-container {
    background-color: var(--theme-bg-card) !important;
    backdrop-filter: blur(20px) !important;
    padding: 3rem !important;
    border-radius: 24px !important;
    box-shadow: var(--card-shadow-hover) !important;
    border: 1px solid var(--theme-border-light) !important;
    width: 100% !important;
    max-width: 450px !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1000 !important;
}

.login-container::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)) !important;
    border-radius: 24px 24px 0 0 !important;
}

.login-container h2 {
    color: var(--theme-text-primary) !important;
    margin-bottom: 2rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-size: 1.8rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.login-container .form-check {
    margin: 1.5rem 0 !important;
}

.login-container .form-check-input {
    background-color: var(--theme-bg-card) !important;
    border: 2px solid var(--theme-border-light) !important;
    border-radius: 4px !important;
    margin-right: 8px !important;
}

.login-container .form-check-input:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.login-container .form-check-label {
    color: var(--theme-text-primary) !important;
    font-weight: 500 !important;
}

.login-container a {
    color: var(--brand-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

[data-theme="dark"] .login-container a {
    color: lightblue !important;
}

.login-container a:hover {
    color: var(--brand-primary-dark) !important;
    text-decoration: underline !important;
}

.password-wrapper {
    position: relative !important;
}

.password-wrapper .toggle-password {
    position: absolute !important;
    top: 48px !important;
    right: 20px !important;
    cursor: pointer !important;
    color: var(--theme-text-secondary) !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    transition: color 0.3s ease !important;
}

.password-wrapper .toggle-password:hover {
    color: var(--brand-primary) !important;
}

.login-container .alert-danger {
    background-color: rgba(248, 215, 218, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid #f5c6cb !important;
    border-radius: 12px !important;
    color: #721c24 !important;
    padding: 1rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.page-footer-login {
    background-color: var(--theme-bg-card) !important;
    backdrop-filter: blur(15px) !important;
    color: var(--theme-text-secondary) !important;
    padding: 1.5rem 0 !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    width: 100% !important;
    border-top: 1px solid var(--theme-border-light) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

/* Dark mode form headers and icons - make them white */
[data-theme="dark"] .form-section h3,
[data-theme="dark"] .form-section h3 i,
[data-theme="dark"] .page-header-section h1,
[data-theme="dark"] .page-header-section h1 i,
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .page-header h1 i,
[data-theme="dark"] .header-text h1,
[data-theme="dark"] .header-text h1 i {
    color: #FFFFFF !important;
}

/* Dark mode section titles and their icons */
[data-theme="dark"] .section-title,
[data-theme="dark"] .section-title i {
    color: #FFFFFF !important;
}

/* Dark mode form labels */
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-group label,
[data-theme="dark"] .info-item label {
    color: #FFFFFF !important;
}

/* Dark mode page header icons specifically */
[data-theme="dark"] .page-header-section i,
[data-theme="dark"] .page-header i,
[data-theme="dark"] .header-text i {
    color: #FFFFFF !important;
}

/* Dark mode subtitle text - make it white too */
[data-theme="dark"] .page-header-section .subtitle,
[data-theme="dark"] .page-header p,
[data-theme="dark"] .header-text .subtitle {
    color: #FFFFFF !important;
}

/* Dark mode form section icons */
[data-theme="dark"] .form-section i {
    color: #FFFFFF !important;
}

/* Ensure all icons in headers are white in dark mode */
[data-theme="dark"] h1 i,
[data-theme="dark"] h2 i,
[data-theme="dark"] h3 i,
[data-theme="dark"] .fas,
[data-theme="dark"] .far,
[data-theme="dark"] .fab {
    color: #FFFFFF !important;
}

/* Make sure the "Add New Patient" header and icon are white */
[data-theme="dark"] .new-patient-container .page-header-section h1,
[data-theme="dark"] .new-patient-container .page-header-section h1 i,
[data-theme="dark"] .new-patient-container .form-section h3,
[data-theme="dark"] .new-patient-container .form-section h3 i {
    color: #FFFFFF !important;
}

[data-theme="dark"] .account-name-details h2,
[data-theme="dark"] .patient-header h3,
[data-theme="dark"] .card-header-compact h3,
[data-theme="dark"] .contact-info-section h2,
[data-theme="dark"] .contact-item h3,
[data-theme="dark"] .opening-hours h4,
[data-theme="dark"] .updates-panel-title,
[data-theme="dark"] .feed-update-title,
[data-theme="dark"] .grand-total {
    color: lightblue !important;
}

[data-theme="dark"] .stat-number,
[data-theme="dark"] .function-card h3 {
    color: #4FC3F7 !important;
    
}

[data-theme="dark"] .meta-item i,
[data-theme="dark"] .member-since-subtle i,
[data-theme="dark"] .section-header h2 i,
[data-theme="dark"] .section-header h2,
[data-theme="dark"] .detail-row .label,
[data-theme="dark"] .form-group label,
[data-theme="dark"] .date-label,
[data-theme="dark"] .contact-info-section h2 i,
[data-theme="dark"] .contact-item h3 i,
[data-theme="dark"] .opening-hours h4 i,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .detail-label,
[data-theme="dark"] .notes-label,
[data-theme="dark"] .order-items-summary-compact strong,
[data-theme="dark"] .patient-detail-value.contact-info i {
    color: lightblue !important;
}

[data-theme="dark"] .meta-item,
[data-theme="dark"] .meta-item small,
[data-theme="dark"] .registration-date,
[data-theme="dark"] .account-name-details h2,
[data-theme="dark"] .status-label,
[data-theme="dark"] .tracking-label,
[data-theme="dark"] .date-value,
[data-theme="dark"] .detail-row .value,
[data-theme="dark"] .patient-name,
[data-theme="dark"] .security-item,
[data-theme="dark"] .no-items-content h3,
[data-theme="dark"] .no-items-content p,
[data-theme="dark"] .updates-empty h4,
[data-theme="dark"] .updates-loading p,
[data-theme="dark"] .order-date,
[data-theme="dark"] .detail-value,
[data-theme="dark"] .notes-value,
[data-theme="dark"] .item-name {
    color: #FFFFFF !important;
}

[data-theme="dark"] .product-title,
[data-theme="dark"] .product-price,
[data-theme="dark"] .item-cost,
[data-theme="dark"] .total-value {
    color: lightblue !important;
}

[data-theme="dark"] .product-brand {
    color: var(--brand-secondary) !important;
}

[data-theme="dark"] .order-container .section-title,
[data-theme="dark"] .order-container .section-title i,
[data-theme="dark"] .selected-patient-name,
[data-theme="dark"] .patient-detail-group h4,
[data-theme="dark"] .patient-detail-group h4 i {
    color: #FFFFFF !important;
}

[data-theme="dark"] .section-header h2,
[data-theme="dark"] .section-header h2 i {
    color: #lightblue !important;
}

[data-theme="dark"] .contact-us-container .contact-info-section h2,
[data-theme="dark"] .contact-us-container .contact-item h3,
[data-theme="dark"] .contact-us-container .opening-hours h4 {
    color: #ffffff !important;
}

[data-theme="dark"] .contact-us-container .contact-item .contact-detail strong,
[data-theme="dark"] .contact-us-container .contact-item .contact-detail a {
    color: #63b3ed !important;
}

[data-theme="dark"] .contact-us-container .contact-item .contact-detail a:hover {
    color: #90cdf4 !important;
}

[data-theme="dark"] .requirements-text strong {
    color: #ffffff !important;
}

[data-theme="dark"] .price-toggle-section {
    background: var(--theme-bg-card);
    border-color: var(--theme-border-medium);
}

[data-theme="dark"] .price-toggle-label,
[data-theme="dark"] .price-toggle-freeform .price-toggle-label {
    color: #FFFFFF !important;
}

[data-theme="dark"] .pricing-status {
    color: var(--theme-text-muted) !important;
}

[data-theme="dark"] .pricing-status.enabled {
    color: #4FC3F7 !important;
}

[data-theme="dark"] .toggle-slider {
    background-color: #6b7280;
}

[data-theme="dark"] input:checked + .toggle-slider {
    background-color: #4FC3F7;
}

[data-theme="dark"] .badge {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .form-control.is-invalid,
[data-theme="dark"] .form-select.is-invalid {
    background-color: rgba(220, 53, 69, 0.1);
}

[data-theme="dark"] .form-control.is-valid {
    background-color: rgba(40, 167, 69, 0.1) !important;
}

[data-theme="dark"] .admin-notes-row {
    background: rgba(255, 193, 7, 0.15);
}

[data-theme="dark"] .password-requirements-notice {
    background: rgba(255, 193, 7, 0.15);
}

[data-theme="dark"] .priority-normal {
    background: rgba(0, 123, 255, 0.2);
    color: #66b3ff;
}

[data-theme="dark"] .priority-urgent {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

[data-theme="dark"] .priority-emergency {
    background: rgba(220, 53, 69, 0.2);
    color: #f8d7da;
}

[data-theme="dark"] .alert-success {
    background: rgba(40, 167, 69, 0.15);
    color: #d4edda;
}

[data-theme="dark"] .alert-danger {
    background: rgba(220, 53, 69, 0.15);
    color: #f8d7da;
}

[data-theme="dark"] .login-container .alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
    color: #f8d7da !important;
}

[data-theme="dark"] .sku-cell code {
    color: #e5e7eb !important;
    background: #374151 !important;
    border-color: #4b5563 !important;
}

[data-theme="dark"] .price-cell {
    color: #f3f4f6 !important;
}

[data-theme="dark"] .brightpearl-id {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .results-info {
    background: rgba(0, 0, 0, 0.4); /* Dark semi-transparent background */
    backdrop-filter: blur(5px); /* Slight blur for glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    border-radius: 8px;
    padding: 8px 12px; /* Padding around text only */
}

[data-theme="dark"] .page-header-section .subtitle,
[data-theme="dark"] .page-header p,
[data-theme="dark"] .header-text .subtitle {
    background: rgba(0, 0, 0, 0.4) !important; /* Dark semi-transparent background */
    backdrop-filter: blur(5px) !important; /* Slight blur for glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle border */
    border-radius: 8px !important;
    padding: 8px 12px !important; /* Padding around text only */
    display: inline-block !important; /* Make it wrap around text content */
    margin: 0 auto !important; /* Center the backdrop */
    max-width: fit-content !important; /* Don't stretch full width */
}

[data-theme="dark"] .order-items {
    background: none;
    border: none;
}

[data-theme="dark"] .order-items:hover {
    border: none;
}

[data-theme="dark"] .order-item {
    background: #1e1e1e;
    border-color: #333;
}

[data-theme="dark"] .order-item:hover {
    border-color: #4FC3F7;
}

[data-theme="dark"] .item-cost {
    color: lightblue;
}

[data-theme="dark"] .total-row,
.dark-mode .total-row,
body.dark .total-row {
    background: #2a2a2a;
    border-color: #444;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .grand-total .total-value {
    color: lightblue;
}

/* ============================================
   GENERAL TEXT STYLING
   ============================================ */



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

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

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 992px) {
    .main-content-layout {
        grid-template-columns: 350px 1fr;
        gap: 25px;
    }
    
    .order-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .catalogue-order-grid {
        grid-template-columns: 1fr;
    }
    
    .order-summary-split {
        grid-template-columns: 1fr;
    }
    
    .order-summary {
        position: static;
    }
    
    .patient-info-panel .selected-patient-card {
        flex-wrap: wrap;
    }
    
    .patient-info-panel .selected-patient-actions-top {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
    
    .section-title-with-toggle {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .price-toggle-freeform {
        align-self: flex-end;
    }
}

@media (max-width: 992px) {
    .dashboard-container {
        padding: 25px 15px 15px 15px;
    }
}

@media (max-width: 992px) {
    .account-container, .view-order-container, .order-container {
        padding: 15px;
    }
    
    .header-content {
        flex-direction: column;
        align-items: center;
    }
    
    .order-status-bar, .account-status-bar {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .account-basic-info {
        justify-content: center;
    }
    
    .account-summary-stats {
        justify-content: center;
    }
    
    .order-dates-with-actions {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .order-dates {
        justify-content: center;
    }
    
    .order-actions {
        justify-content: center;
        width: 100%;
    }
    
    .main-content-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .patient-sidebar, .account-sidebar {
        position: static;
        order: 2;
    }
    
    .main-content {
        order: 1;
    }
    
    .account-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
    }
    
    .patient-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
    }
    
    .selected-patient-card {
        grid-template-columns: auto 1fr auto;
        gap: 15px;
    }
    
    .selected-clinic-column {
        grid-column: 1 / -1;
        justify-content: center;
        padding-right: 0;
        padding-bottom: 15px;
        border-right: none;
        border-bottom: 2px solid var(--theme-border-light);
    }
    
    .selected-patient-column {
        grid-column: 1 / 2;
    }
    
    .selected-address-column {
        grid-column: 2 / 3;
    }
    
    .change-patient-btn-small {
        grid-column: 3 / 4;
    }
}

@media (max-width: 992px) {
    .confirmation-modal-content {
        width: 95%;
    }
    
    .confirm-item-details {
        flex-direction: column;
        gap: 4px;
    }
    
    .confirm-item-price {
        margin-left: 0;
    }
    
    .confirmation-row {
        flex-direction: column;
        gap: 4px;
    }
    
    .confirmation-row .value {
        text-align: left;
    }
    
    .delivery-address-emphasis {
        padding: 12px 15px;
        font-size: 1em;
    }
    
    .dashboard-container, .contact-us-container, .order-container {
        padding: 20px 10px 10px 10px;
    }
    
    .header-text h1 {
        font-size: 1.8rem;
    }
    
    .header-text .subtitle {
        font-size: 1rem;
    }
    
    .search-filters {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
        max-height: 400px;
    }
    
    .product-card {
        padding: 15px;
        margin-right: 0;
    }
    
    .product-selection,
    .order-summary {
        padding: 20px;
    }
    
    .info-stats {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .function-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .contact-info-section, .contact-form-section {
        padding: 25px 20px;
    }
    
    .contact-item {
        padding: 15px;
    }
    
    .items-table-container {
        overflow-x: auto;
    }
    
    .items-table {
        min-width: 600px;
    }
    
    .account-meta {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    .account-summary-stats {
        gap: 20px;
    }
    
    .account-sidebar, .patient-sidebar {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .compact-form, .section-header {
        padding: 20px;
    }
    
    .status-info, .tracking-info {
        justify-content: center;
    }
    
    .patient-card-compact {
        margin-top: 20px;
    }
    
    .patient-info {
        padding: 15px;
    }
    
    .order-actions .btn {
        width: 100%;
        min-width: auto;
    }
    
    .order-summary-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .patient-orders-list {
        padding: 15px;
    }
    
    .items-list-compact {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .price-toggle-freeform {
        justify-content: center;
        align-self: center;
    }
    
    .selected-patient-header {
        text-align: center;
    }
    
    .selected-patient-main {
        justify-content: center;
        margin-bottom: 15px;
    }
    
    .selected-patient-actions-top {
        margin-bottom: 10px;
    }
    
    .selected-patient-card {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }
    
    .selected-clinic-column,
    .selected-patient-column,
    .selected-address-column {
        grid-column: 1 / -1;
        justify-content: center;
        border: none;
    }
    
    .selected-clinic-column {
        padding-bottom: 12px;
        border-bottom: 2px solid var(--theme-border-light);
    }
    
    .selected-patient-column {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--theme-border-light);
    }
    
    .selected-address-column {
        justify-content: center;
    }
    
    .address-text {
        white-space: normal;
        text-align: center;
    }
    
    .change-patient-btn-small {
        grid-column: 1 / -1;
        justify-self: center;
        margin-top: 8px;
    }
    
    .change-patient-btn-small {
        padding: 10px 14px !important;
        font-size: 0.9rem !important;
    }
    
    .change-patient-btn-small i {
        font-size: 0.8rem !important;
    }
    
    .warning-modal-content {
        padding: 30px 20px;
        margin: 5% auto;
    }
    
    .warning-modal .modal-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .warning-modal .modal-btn {
        width: 100%;
    }
    
    .order-totals {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .total-row {
        min-width: 100%;
    }
}

@media (max-width: 992px) {
    .page-header-section h1 {
        font-size: 1.8rem;
    }
    
    .contact-info-section h2, .contact-form-section h2 {
        font-size: 1.5rem;
    }
    
    .contact-info-section, .contact-form-section {
        padding: 20px 15px;
        border-radius: 20px;
    }
    
    .contact-item {
        padding: 12px 15px;
        margin-bottom: 20px;
    }
    
    .account-container, .view-order-container, .order-container {
        padding: 10px;
    }
    
    .account-status-bar, .order-status-bar {
        padding: 15px 20px;
    }
    
    .account-basic-info {
        flex-direction: column;
        text-align: center;
    }
    
    .account-name-details h2 {
        font-size: 1.5rem;
    }
    
    .compact-form, .section-header {
        padding: 15px;
    }
    
    .section-header h2 {
        font-size: 1.2rem;
    }
    
    .patient-header {
        padding: 15px;
    }
    
    .order-dates {
        width: 100%;
        justify-content: space-around;
    }
    
    .patient-details {
        gap: 10px;
    }
    
    .detail-row .value {
        font-size: 0.85rem;
    }
    
    .form-control, .form-select {
        padding: 12px 14px;
    }
    
    .btn-primary {
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    .patient-order-card {
        padding: 15px;
    }
    
    .order-card-header {
        margin-bottom: 15px;
        padding-bottom: 12px;
    }
}

/* ============================================
   CONTACT-US PAGE - MOBILE STYLES (992px)
   Uses existing mobile-accordion classes from mobile-patients.css
   ============================================ */

/* Hide mobile accordion on desktop */
.contact-mobile-accordion {
    display: none !important;
}

@media screen and (max-width: 992px) {
    
    /* Container adjustments */
    .contact-us-container {
        padding: 15px !important;
        max-width: 100% !important;
    }
    
    /* Page header - compact for mobile */
    .contact-us-page-body .page-header-section {
        margin-bottom: 15px !important;
        padding: 0 !important;
    }
    
    .contact-us-page-body .page-header-section h1 {
        font-size: 1.4rem !important;
        gap: 10px !important;
    }
    
    .contact-us-page-body .page-header-section h1 i {
        font-size: 1.2rem !important;
    }
    
    .contact-us-page-body .page-header-section .subtitle {
        font-size: 0.85rem !important;
        margin-top: 5px !important;
    }
    
    /* Contact content area */
    .contact-us-container .contact-content {
        margin-top: 10px !important;
    }
    
    /* Hide desktop version on mobile */
    .contact-desktop-view {
        display: none !important;
    }
    
    /* Show mobile accordion */
    .contact-mobile-accordion {
        display: block !important;
        width: 100% !important;
    }
    
    /* ==========================================
       CONTACT PAGE - ROW ALIGNMENT
       Left-aligned labels, right-aligned values
       ========================================== */
    
    .contact-mobile-accordion .mobile-detail-row.contact-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    
    .contact-mobile-accordion .mobile-detail-row.contact-row .mobile-detail-label {
        text-align: left !important;
        flex-shrink: 0 !important;
    }
    
    .contact-mobile-accordion .mobile-detail-row.contact-row .mobile-detail-value {
        text-align: right !important;
        flex-grow: 1 !important;
    }
    
    .contact-mobile-accordion .mobile-detail-row.contact-row .mobile-detail-value a {
        color: #4FC3F7 !important;
        text-decoration: none !important;
    }
    
    [data-theme="light"] .contact-mobile-accordion .mobile-detail-row.contact-row .mobile-detail-value a {
        color: #0056a6 !important;
    }
    
    /* Alert messages */
    .contact-us-container .alert {
        padding: 12px 14px !important;
        font-size: 0.85rem !important;
        border-radius: 10px !important;
        margin-bottom: 15px !important;
    }
}

/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   SMOOTH TRANSITIONS AND ACCESSIBILITY
   ============================================ */

* {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease, 
                box-shadow 0.3s ease !important;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Focus states for accessibility */
.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: 2px solid var(--brand-primary) !important;
    outline-offset: 2px !important;
}

/* ============================================
   LOGOUT PAGE & BUTTON FIXES
   ============================================ */

/* Logout page specific button styling */
.login-page-body .btn-danger {
    background: linear-gradient(135deg, var(--brand-danger), #c82333) !important;
    border: none !important;
    color: white !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.3) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.login-page-body .btn-danger:hover {
    background: linear-gradient(135deg, #c82333, #a71e2a) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
}

.login-page-body .btn-danger:focus {
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

.login-page-body .btn-danger * {
    color: white !important;
    position: relative !important;
    z-index: 1 !important;
}

.login-page-body .btn-primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)) !important;
    border: none !important;
    color: white !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(0, 86, 166, 0.3) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.login-page-body .btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 86, 166, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
}

.login-page-body .btn-primary:focus {
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 86, 166, 0.25) !important;
}

.login-page-body .btn-primary * {
    color: white !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Additional button states for logout page */
.login-page-body .btn-danger:active,
.login-page-body .btn-primary:active {
    transform: translateY(0) !important;
}

.login-page-body .btn-danger:visited,
.login-page-body .btn-primary:visited {
    color: white !important;
}

/* Ensure icons in buttons are white */
.login-page-body .btn-danger i,
.login-page-body .btn-primary i {
    color: white !important;
}

/* Cancel/Secondary button on login/logout pages - Light mode: primary color, Dark mode: grey */
.login-page-body .btn-secondary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)) !important;
    border: none !important;
    color: white !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(0, 86, 166, 0.3) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.login-page-body .btn-secondary:hover {
    background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 86, 166, 0.4) !important;
    color: white !important;
}

.login-page-body .btn-secondary i {
    color: white !important;
}

/* Dark mode - grey background with lightblue text */
[data-theme="dark"] .login-page-body .btn-secondary {
    background: linear-gradient(135deg, #4a5568, #2d3748) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    color: #4FC3F7 !important;
}

[data-theme="dark"] .login-page-body .btn-secondary:hover {
    background: linear-gradient(135deg, #5a6578, #3d4758) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    color: #4FC3F7 !important;
}

[data-theme="dark"] .login-page-body .btn-secondary i {
    color: #4FC3F7 !important;
}

/* Footer links - normal in light mode, lightblue in dark mode */
.page-footer-login a {
    color: var(--brand-primary) !important;
}

[data-theme="dark"] .page-footer-login a {
    color: #4FC3F7 !important;
}

[data-theme="dark"] .page-footer-login a:hover {
    color: #81D4FA !important;
}

/* ============================================
   VIEW REGISTRATION FORM BUTTON
   ============================================ */

/* Light Mode */
.view-reg-form-btn {
    font-size: 0.9rem !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    border: 2px solid #6c757d !important;
    color: #6c757d !important;
    background: white !important;
    transition: all 0.3s ease !important;
}

.view-reg-form-btn:hover {
    background: #6c757d !important;
    color: white !important;
    border-color: #6c757d !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.view-reg-form-btn:active {
    transform: translateY(0);
}

/* Dark Mode */
[data-theme="dark"] .view-reg-form-btn {
    border: 2px solid #4FC3F7 !important;
    color: #4FC3F7 !important;
    background: rgba(40, 45, 54, 0.5) !important;
}

[data-theme="dark"] .view-reg-form-btn:hover {
    background: #4FC3F7 !important;
    color: #1a1d23 !important;
    border-color: #4FC3F7 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 195, 247, 0.4);
}

/* Icon animation */
.view-reg-form-btn:hover i {
    animation: pdfPulse 0.6s ease-in-out;
}

@keyframes pdfPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Ensure buttons align properly */
.order-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================
   DYNAMIC ORDER PROGRESS BAR STYLES
   Add this to your existing style.css file
   ============================================ */

/* Order Progress Bar Container - Just Reduced Padding */
.order-progress-bar {
    background: var(--theme-bg-card);
    border-radius: 20px;
    padding: 20px 25px; /* Reduced from 30px */
    margin-bottom: 30px;
    border: 1px solid var(--theme-border-light);
    box-shadow: var(--card-shadow-hover);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
}

.order-progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
    border-radius: 20px 20px 0 0;
    z-index: 1;
}

/* Progress Header - Back to Original Beautiful Styling */
.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* Reduced from 25px */
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.progress-title {
    color: var(--brand-primary);
    font-weight: 700;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Progress Track - Back to Original */
.progress-track {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 25px 0; /* Reduced from 30px */
}

.progress-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 1;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-info));
    border-radius: 2px;
    transition: width 0.8s ease;
    z-index: 2;
}

/* Progress Steps - Back to Original Beautiful Styling */
.progress-steps-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    width: 100%;
}

.progress-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    flex: 1;
    max-width: 200px;
}

/* FIXED: Step circle colors - ensuring solid fills */
.step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    transition: all 0.4s ease;
    border: 3px solid transparent;
    position: relative;
    z-index: 3;
}

.step-circle.completed {
    background-color: #28a745 !important; /* Solid green */
    color: white !important;
    border-color: #28a745 !important;
}

.step-circle.current {
    background-color: #0056a6 !important; /* Solid blue */
    color: white !important;
    border-color: #0056a6 !important;
}

.step-circle.pending {
    background-color: #f8f9fa !important; /* Light gray */
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

/* Dispatch state specific styles */
.step-circle.dispatch-partial {
    background: linear-gradient(135deg, #1976d2, #42a5f5) !important; /* Blue gradient for partial */
    color: white !important;
    border-color: #1976d2 !important;
}

/* Prescription-partial: applied on the CURRENT awaiting_prescription step
   when at least one Rx has come back (BP statuses 4a / 4b). Mirrors the
   dispatch-partial pattern in concept (partial-progress signal) but uses a
   teal gradient to stay distinct from both solid-blue "current" and the
   blue-gradient "dispatch-partial" treatment. The step is still active /
   not ticked — only the colour changes. */
.step-circle.prescription-partial {
    background: linear-gradient(135deg, #0d9488, #2dd4bf) !important;
    color: white !important;
    border-color: #0d9488 !important;
}

.step-circle.dispatch-full {
    background: linear-gradient(135deg, #2e7d32, #66bb6a) !important; /* Green gradient for full */
    color: white !important;
    border-color: #2e7d32 !important;
}

/* Pulsing exclamation while the order sits at "awaiting prescription".
   Applied to the icon only (not the circle) so the step shape stays put
   and just the glyph gently breathes — signals "active, action pending".
   Drops automatically once the step is no longer current (icon becomes a
   tick, no .pulse-attention class). */
.step-circle i.pulse-attention {
    animation: stepIconPulse 1.6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes stepIconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.25);
        opacity: 0.7;
    }
}

/* Respect users who'd rather not see motion. */
@media (prefers-reduced-motion: reduce) {
    .step-circle i.pulse-attention {
        animation: none;
    }
}

.step-label {
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
    line-height: 1.3;
    transition: color 0.3s ease;
}

.step-label.completed {
    color: var(--brand-secondary);
    font-weight: 700;
}

.step-label.current {
    color: var(--brand-primary);
    font-weight: 700;
}

.step-label.pending {
    color: var(--theme-text-muted);
}

/* Dispatch state label styles */
.step-label.dispatch-partial {
    color: #1976d2;
    font-weight: 700;
}

.step-label.dispatch-full {
    color: #2e7d32;
    font-weight: 700;
}

.step-label.prescription-partial {
    color: #0d9488;
    font-weight: 700;
}

.step-date {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    margin-top: 5px;
    font-weight: 500;
}

.step-date.completed {
    color: var(--theme-text-secondary);
    font-weight: 600;
}

.step-date.current {
    color: var(--brand-primary);
    font-weight: 700;
}

/* Dispatch state date styles */
.step-date.dispatch-partial {
    color: #1976d2;
    font-weight: 600;
}

.step-date.dispatch-full {
    color: #2e7d32;
    font-weight: 600;
}

/* Tracking Information - Back to Original */
.tracking-section {
    background: rgba(23, 162, 184, 0.05);
    border: 1px solid rgba(23, 162, 184, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px; /* Reduced from 25px */
    display: none;
    position: relative;
    z-index: 2;
}

.tracking-section.show {
    display: block;
    animation: slideIn 0.5s ease-out;
}

.tracking-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.tracking-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--brand-info), #6f42c1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.tracking-title {
    color: var(--brand-info);
    font-weight: 700;
    font-size: 1.1rem;
}

.tracking-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.tracking-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tracking-label {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tracking-value {
    color: var(--theme-text-primary);
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

/* Redesigned Tracking Panel */
.tracking-header-redesigned {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(23, 162, 184, 0.2);
}

.tracking-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tracking-title-row .tracking-title {
    flex: 1;
    font-weight: 600;
    font-size: 1.1em;
    color: var(--brand-info);
}

.tracking-title-row .status-badge {
    margin-left: auto;
}

.tracking-lines-container {
    padding: 15px 20px;
}

.tracking-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(23, 162, 184, 0.1);
    font-size: 0.95em;
}

.tracking-line:last-child {
    border-bottom: none;
}

.tracking-part {
    color: var(--theme-text-secondary);
}

.tracking-separator {
    color: var(--theme-text-muted);
    font-weight: 300;
}

.tracking-part.tracking-number {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--brand-primary);
}

.tracking-part.carrier {
    font-weight: 500;
}

.tracking-part.est-delivery {
    color: var(--brand-secondary);
}

.shipment-label {
    font-weight: 600;
    color: var(--theme-text-muted);
    margin-right: 8px;
}

.tracking-line.tracking-pending {
    color: var(--theme-text-muted);
    font-style: italic;
}

.tracking-line.tracking-pending i {
    margin-right: 8px;
}

.tracking-footer {
    padding: 10px 20px;
    border-top: 1px solid rgba(23, 162, 184, 0.2);
    background: rgba(23, 162, 184, 0.03);
    font-size: 0.85em;
}

.brightpearl-ref {
    color: var(--theme-text-muted);
}

[data-theme="dark"] .tracking-header-redesigned {
    border-bottom-color: rgba(23, 162, 184, 0.3);
}

[data-theme="dark"] .tracking-line {
    border-bottom-color: rgba(23, 162, 184, 0.15);
}

[data-theme="dark"] .tracking-footer {
    background: rgba(23, 162, 184, 0.08);
    border-top-color: rgba(23, 162, 184, 0.3);
}

/* Section header with metadata */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 25px 30px;
    background: var(--theme-bg-card);
    border-bottom: 1px solid var(--theme-border-light);
    flex-wrap: wrap;
    gap: 15px;
    color: var(--brand-primary);
}

.section-header-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-header h2 {
    color: var(--brand-primary) !important;
    font-weight: 700;
    margin: 0;
    font-size: 1.4rem;
}

.section-header h2 i {
    color: var(--brand-primary) !important;
}

.order-metadata {
    font-size: 1rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
}

.metadata-value {
    color: var(--brand-primary);
    font-weight: 600;
}

.section-header .role-badge {
    background: var(--brand-info) !important;
    color: white !important;
    border: 1px solid transparent;
}

/* Dark Theme Support for Progress Bar and Order Header */
[data-theme="dark"] .order-progress-bar {
    background: var(--theme-bg-card);
    border-color: var(--theme-border-light);
}

[data-theme="dark"] .progress-title {
    color: lightblue;
}

[data-theme="dark"] .section-header h2 {
    color: lightblue !important;
}

[data-theme="dark"] .section-header h2 i {
    color: lightblue !important;
}

[data-theme="dark"] .order-metadata {
    color: var(--theme-text-secondary);
}

[data-theme="dark"] .metadata-value {
    color: lightblue;
}

[data-theme="dark"] .step-label {
    color: var(--theme-text-secondary);
}

[data-theme="dark"] .step-label.completed {
    color: var(--brand-secondary);
}

[data-theme="dark"] .step-label.current {
    color: lightblue;
}

[data-theme="dark"] .step-label.pending {
    color: var(--theme-text-muted);
}

[data-theme="dark"] .step-date {
    color: var(--theme-text-muted);
}

[data-theme="dark"] .step-date.completed {
    color: #FFFFFF;
}

[data-theme="dark"] .step-date.current {
    color: lightblue;
}

[data-theme="dark"] .tracking-section {
    background: rgba(23, 162, 184, 0.1);
    border-color: rgba(23, 162, 184, 0.3);
}

[data-theme="dark"] .tracking-title {
    color: lightblue;
}

[data-theme="dark"] .tracking-value {
    color: #FFFFFF;
}

[data-theme="dark"] .tracking-part.tracking-number {
    color: #8ecae6;
}

[data-theme="dark"] .tracking-part.tracking-link {
    color: #8ecae6;
}

[data-theme="dark"] .tracking-part.tracking-link:hover {
    color: #b8e0f0;
}

[data-theme="dark"] .tracking-part {
    color: #ced4da;
}

[data-theme="dark"] .tracking-part.dispatched-date {
    color: #ced4da;
}

[data-theme="dark"] .tracking-part.carrier {
    color: #ced4da;
}

[data-theme="dark"] .progress-line {
    background: #4b5563;
}

/* FIXED: Dark theme step circle colors */
[data-theme="dark"] .step-circle.completed {
    background-color: #28a745 !important; /* Same green for consistency */
    color: white !important;
    border-color: #28a745 !important;
}

[data-theme="dark"] .step-circle.current {
    background-color: #4FC3F7 !important; /* Light blue for dark theme */
    color: #1a1d23 !important; /* Dark text for visibility */
    border-color: #4FC3F7 !important;
}

[data-theme="dark"] .step-circle.pending {
    background-color: #374151 !important; /* Dark gray */
    border-color: #4b5563 !important;
    color: #9ca3af !important;
}

/* Dark theme dispatch state styles */
[data-theme="dark"] .step-circle.dispatch-partial {
    background: linear-gradient(135deg, #1976d2, #42a5f5) !important; /* Blue gradient */
    color: white !important;
    border-color: #1976d2 !important;
}

[data-theme="dark"] .step-circle.dispatch-full {
    background: linear-gradient(135deg, #2e7d32, #66bb6a) !important; /* Green gradient */
    color: white !important;
    border-color: #2e7d32 !important;
}

[data-theme="dark"] .step-label.dispatch-partial {
    color: #64b5f6;
}

[data-theme="dark"] .step-label.dispatch-full {
    color: #81c784;
}

[data-theme="dark"] .step-date.dispatch-partial {
    color: #64b5f6;
}

[data-theme="dark"] .step-date.dispatch-full {
    color: #81c784;
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design for Progress Bar */
@media (max-width: 992px) {
    .order-progress-bar {
        padding: 25px 20px;
    }
    
    .progress-header {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .section-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 20px;
    }
    
    .section-header-info {
        align-items: center;
    }
}

@media (max-width: 992px) {
    .order-progress-bar {
        padding: 20px 15px;
        margin-bottom: 20px;
    }
    
    .progress-title {
        font-size: 1.2rem;
    }
    
    .progress-track {
        margin: 20px 0;
    }
    
    .step-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 12px;
    }
    
    .step-label {
        font-size: 0.8rem;
    }
    
    .step-date {
        font-size: 0.7rem;
    }
    
    .tracking-details {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .section-header {
        padding: 20px;
    }
    
    .order-metadata {
        font-size: 1rem;
        text-align: center;
    }
    
    .confirmation-modal-content {
        width: 95%;
        max-width: none;
        max-height: 90vh;
        padding: 15px;
        font-size: 0.85rem;
    }

    .confirmation-icon {
        width: 40px;
        height: 40px;
        font-size: 1.5em;
        margin: 0 auto 8px;
    }

    .confirmation-items-list {
        max-height: 150px;
    }
}

@media (max-width: 992px) {
    .order-progress-bar {
        padding: 15px 10px;
    }
    
    .progress-title {
        font-size: 1.1rem;
    }
    
    .step-circle {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
        margin-bottom: 10px;
    }
    
    .step-label {
        font-size: 0.75rem;
    }
    
    .step-date {
        font-size: 0.65rem;
    }
}

@media (max-width: 992px) {
    .progress-track {
        margin: 15px 0;
    }
    
    .step-circle {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        margin-bottom: 8px;
    }
    
    .step-label {
        font-size: 0.7rem;
        line-height: 1.2;
    }
    
    .step-date {
        font-size: 0.6rem;
    }
}

/* Order Attachments Styles - Updated to match unified card styling */
.order-attachments-section {
    /* Use unified card styling */
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--card-shadow-hover);
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 10px;
    margin-bottom: 25px;
}

/* Unified gradient top border */
.order-attachments-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-info), var(--brand-secondary));
    border-radius: 24px 24px 0 0;
    z-index: 1;
}

.order-attachments-section .section-header {
    /* Remove separate background - let card background show through */
    background: none !important;
    padding: 0 0 25px 0 !important;
    border-bottom: 2px solid var(--theme-border-light) !important;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.order-attachments-section .section-header h3 {
    margin: 0;
    color: var(--brand-primary) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-attachments-section .section-header h3 i {
    color: var(--brand-primary) !important;
}

.attachments-metadata {
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
    margin-top: 5px;
    font-weight: 500;
}

/* Compact grid layout */
.attachments-grid {
    padding: 0 !important; /* Remove extra padding since card already has it */
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 15px;
    position: relative;
    z-index: 2;
}

/* Attachment cards matching your theme */
.attachment-card {
    display: flex;
    align-items: center;
    padding: 15px 18px;
    background: var(--theme-bg-card);
    border-radius: 12px;
    border: 2px solid var(--theme-border-light);
    transition: all 0.3s ease;
    position: relative;
}

.attachment-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--theme-shadow-medium);
}

.attachment-icon {
    margin-right: 15px;
    font-size: 1.5rem;
    min-width: 28px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-info);
}

.attachment-info {
    flex: 1;
    min-width: 0;
}

.attachment-filename {
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    line-height: 1.3;
}

.attachment-metadata {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin-bottom: 4px;
    line-height: 1.2;
}

.attachment-separator {
    margin: 0 8px;
    color: var(--theme-text-muted);
}

.attachment-uploader {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    font-style: italic;
    line-height: 1.2;
}

.attachment-actions {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.btn-attachment {
    background: var(--theme-border-light);
    border: 1px solid var(--theme-border-medium);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    min-width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-attachment:hover {
    background: var(--theme-bg-card);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    transform: translateY(-1px);
}

.btn-view:hover {
    background: rgba(var(--brand-primary-rgb), 0.1);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.btn-download:hover {
    background: rgba(40, 167, 69, 0.1);
    border-color: var(--brand-secondary);
    color: var(--brand-secondary);
}

/* Empty state */
.attachments-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--theme-text-muted);
    position: relative;
    z-index: 2;
}

.attachments-empty i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.5;
    color: var(--theme-text-muted);
}

.nhs-unknown {
    color: var(--theme-text-secondary);
    font-style: italic;
    font-weight: normal;
}

/* Dark mode support */
[data-theme="dark"] .order-attachments-section .section-header h3 {
    color: lightblue !important;
}

[data-theme="dark"] .order-attachments-section .section-header h3 i {
    color: lightblue !important;
}

[data-theme="dark"] .attachments-metadata {
    color: var(--theme-text-secondary);
}

[data-theme="dark"] .attachment-filename {
    color: #FFFFFF;
}

[data-theme="dark"] .attachment-metadata {
    color: var(--theme-text-muted);
}

[data-theme="dark"] .attachment-uploader {
    color: var(--theme-text-muted);
}

[data-theme="dark"] .attachment-separator {
    color: var(--theme-text-muted);
}

[data-theme="dark"] .btn-attachment {
    background: var(--theme-bg-card);
    border-color: var(--theme-border-medium);
    color: var(--theme-text-secondary);
}

[data-theme="dark"] .btn-attachment:hover {
    background: var(--theme-border-light);
    border-color: lightblue;
    color: lightblue;
}

[data-theme="dark"] .btn-view:hover {
    background: rgba(79, 195, 247, 0.15);
    border-color: lightblue;
    color: lightblue;
}

[data-theme="dark"] .btn-download:hover {
    background: rgba(40, 167, 69, 0.15);
    border-color: var(--brand-secondary);
    color: var(--brand-secondary);
}

[data-theme="dark"] .attachments-empty {
    color: var(--theme-text-muted);
}

[data-theme="dark"] .attachments-empty i {
    color: var(--theme-text-muted);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .order-attachments-section {
        padding: 30px;
    }
    
    .attachments-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 12px;
        margin-top: 20px;
    }
}

@media (max-width: 992px) {
    .order-attachments-section {
        padding: 25px 20px;
    }
    
    .attachments-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
    }
    
    .attachment-card {
        padding: 12px 15px;
    }
    
    .attachment-filename {
        font-size: 0.9rem;
    }
    
    .attachment-metadata {
        font-size: 0.75rem;
    }
    
    .attachment-uploader {
        font-size: 0.7rem;
    }
    
    .attachment-actions {
        margin-left: 10px;
        gap: 6px;
    }
    
    .btn-attachment {
        min-width: 32px;
        height: 28px;
        font-size: 0.8rem;
        padding: 6px 8px;
    }
}

@media (max-width: 992px) {
    .order-attachments-section {
        padding: 20px 15px;
    }
    
    .order-attachments-section .section-header {
        padding-bottom: 20px !important;
    }
    
    .order-attachments-section .section-header h3 {
        font-size: 1.2rem !important;
    }
    
    .attachments-grid {
        margin-top: 15px;
    }
}

/* Cancel/Danger buttons - matching success button style */
.btn-danger, .view-order-container .btn-danger, .order-actions .btn-danger {
    background: linear-gradient(135deg, #dc3545, #e76b77) !important;
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.3) !important;
    border: none !important;
    color: white !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    min-width: 140px !important;
    height: 44px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transform: translateY(0) !important;
}

.btn-danger::before, .view-order-container .btn-danger::before, .order-actions .btn-danger::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
    transition: left 0.8s ease !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.btn-danger:hover::before, .view-order-container .btn-danger:hover::before, .order-actions .btn-danger:hover::before {
    left: 100% !important;
}

.btn-danger:hover, .view-order-container .btn-danger:hover, .order-actions .btn-danger:hover {
    background: linear-gradient(135deg, #e76b77, #dc3545) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
    border: none !important;
}

.btn-danger *, .view-order-container .btn-danger *, .order-actions .btn-danger * {
    position: relative !important;
    z-index: 1 !important;
}

/* Disabled state for cancel button */
.btn-danger:disabled, .view-order-container .btn-danger:disabled {
    background: linear-gradient(135deg, #6c757d, #868e96) !important;
    box-shadow: 0 4px 16px rgba(108, 117, 125, 0.2) !important;
    cursor: not-allowed !important;
    transform: translateY(0) !important;
    opacity: 0.65 !important;
}

.btn-danger:disabled:hover, .view-order-container .btn-danger:disabled:hover {
    background: linear-gradient(135deg, #6c757d, #868e96) !important;
    box-shadow: 0 4px 16px rgba(108, 117, 125, 0.2) !important;
    transform: translateY(0) !important;
}




/* CANCELLED ORDER STYLES */
.progress-cancelled {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, #ffcdd2 0%, #fce4ec 100%);
    border-radius: 12px;
    border: 2px solid #ffcdd2;
    margin: 20px 0;
}

.cancelled-icon {
    margin-right: 15px;
}

.cancelled-icon i {
    font-size: 48px;
    color: #d32f2f;
    animation: pulse 2s infinite;
}

.cancelled-content {
    text-align: left;
}

.cancelled-title {
    font-size: 24px;
    font-weight: bold;
    color: #d32f2f;
    margin-bottom: 8px;
}

.cancelled-date {
    font-size: 16px;
    color: #666;
    font-weight: 500;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile responsiveness for cancelled display */
@media (max-width: 992px) {
    .progress-cancelled {
        flex-direction: column;
        text-align: center;
        padding: 25px 15px;
    }
    
    .cancelled-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .cancelled-title {
        font-size: 20px;
    }
    
    .cancelled-date {
        font-size: 14px;
    }
}

/* ============================================
   MOBILE ANTI-FLASH FIX
   Disable tap highlight and use solid backgrounds
   ============================================ */
@media (max-width: 992px) {
    /* Disable browser tap highlight globally */
    * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
    }
    
    /* Override glass backgrounds with solid backgrounds on dashboard */
    .stat-item,
    .function-card {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Prevent layer recomposition flash */
        will-change: auto !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    [data-theme="dark"] .stat-item,
    [data-theme="dark"] .function-card {
        background: rgba(30, 35, 44, 0.98) !important;
    }
    
    /* Disable all hover transforms on mobile */
    .stat-item:hover,
    .function-card:hover,
    .account-card:hover,
    .form-container:hover,
    .info-card-compact:hover,
    .patient-card-compact:hover {
        transform: none !important;
    }
    
    /* Ensure no outline or focus ring causes flash */
    .stat-item:focus,
    .function-card:focus,
    a:focus,
    button:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Navigation links - prevent flash */
    .nav-link {
        background: transparent !important;
        -webkit-tap-highlight-color: transparent !important;
        will-change: auto !important;
    }
    
    .nav-link:active {
        background: rgba(0, 86, 166, 0.1) !important;
    }
    
    [data-theme="dark"] .nav-link:active {
        background: rgba(79, 195, 247, 0.15) !important;
    }
}

/* ============================================
   FUNCTION CARD ANCHOR FIX - FINAL OVERRIDE
   Remove all link styling from function cards
   ============================================ */
a.function-card,
a.function-card:link,
a.function-card:visited,
a.function-card:hover,
a.function-card:active,
a.function-card:focus,
a.function-card *,
a.function-card h3,
a.function-card p,
.function-card,
.function-card:link,
.function-card:visited,
.function-card:hover,
.function-card:active,
.function-card h3,
.function-card p {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* Override browser default and Bootstrap link styling */
a.function-card:-webkit-any-link,
a.function-card:-webkit-any-link * {
    text-decoration: none !important;
    color: inherit !important;
}

a.function-card {
    --bs-link-color-rgb: inherit !important;
    --bs-link-opacity: 1 !important;
    color: inherit !important;
    text-decoration: none !important;
}

a.function-card h3 {
    color: var(--brand-primary) !important;
}

[data-theme="dark"] a.function-card h3 {
    color: #4FC3F7 !important;
}

a.function-card p {
    color: var(--theme-text-secondary) !important;
}

a {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: none !important;
}

/* ============================================
   AUTH PAGES MOBILE STYLES
   Login, Logout, Reset Password
   Breakpoint: 992px
   ============================================ */

@media (max-width: 992px) {
    
    /* ============================================
       LOGIN PAGE BODY - Mobile Adjustments
       ============================================ */
    .login-page-body,
    .reset-password-page-body {
        background-attachment: scroll !important;
    }
    
    /* ============================================
       PAGE HEADER (Logo Area)
       ============================================ */
    .page-header-login {
        padding: 0.75rem 0 !important;
    }
    
    .page-header-login .container {
        padding: 0 15px !important;
    }
    
    .page-header-login .container.py-3 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .page-header-login-logo,
    .page-header-login img {
        max-height: 50px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* Reset password page header image */
    .reset-password-page-layout-wrapper .page-header-login img {
        max-height: 50px !important;
        width: auto !important;
    }
    
    /* ============================================
       LAYOUT WRAPPERS
       ============================================ */
    .login-page-layout-wrapper,
    .reset-password-page-layout-wrapper {
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
    
    /* ============================================
       CONTENT WRAPPERS
       ============================================ */
    .login-page-content-wrapper,
    .reset-password-content-wrapper {
        padding: 1rem !important;
        align-items: flex-start !important;
        padding-top: 2rem !important;
    }
    
    /* ============================================
       LOGIN CONTAINER (Form Card)
       ============================================ */
    .login-container {
        padding: 1.5rem !important;
        border-radius: 16px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    .login-container::before {
        border-radius: 16px 16px 0 0 !important;
    }
    
    .login-container h2 {
        font-size: 1.4rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    .login-container .form-check {
        margin: 1rem 0 !important;
    }
    
    .login-container .alert {
        padding: 0.75rem 1rem !important;
        margin-bottom: 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* ============================================
       RESET PASSWORD CONTAINER
       ============================================ */
    .reset-password-container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 1.5rem !important;
        border-radius: 16px !important;
        margin: 0 !important;
    }
    
    .reset-password-container h2 {
        font-size: 1.4rem !important;
    }
    
    /* ============================================
       FORM CONTROLS
       ============================================ */
    .login-container .form-control,
    .reset-password-container .form-control {
        padding: 0.75rem 1rem !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        border-radius: 10px !important;
    }
    
    .login-container .form-label,
    .reset-password-container .form-label {
        font-size: 0.9rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    /* ============================================
       PASSWORD VISIBILITY TOGGLE
       ============================================ */
    .password-wrapper .toggle-password {
        top: 42px !important;
        right: 15px !important;
    }
    
    /* ============================================
       BUTTONS
       ============================================ */
    .login-container .btn-lg,
    .reset-password-container .btn-lg,
    .login-page-body .btn-lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
    }
    
    .login-page-body .d-grid.gap-3 {
        gap: 0.75rem !important;
    }
    
    /* ============================================
       ALERTS & MESSAGES
       ============================================ */
    .login-container .alert,
    .reset-password-container .alert {
        border-radius: 10px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    .login-container .alert i,
    .reset-password-container .alert i {
        margin-right: 0.5rem !important;
    }
    
    /* ============================================
       SUCCESS/ERROR ICONS (Logout Confirmation)
       ============================================ */
    .login-container .text-center > i[class*="fa-"],
    .login-container .fa-sign-out-alt,
    .login-container .fa-check-circle,
    .reset-password-container .fa-envelope,
    .reset-password-container .fa-key,
    .reset-password-container .fa-check-circle {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
        display: inline !important;
    }
    
    /* Override inline font-size on paragraphs */
    .login-container p[style*="font-size"],
    .login-container p[style*="font-size: 1.1rem"] {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    .login-container .text-center.mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .login-container .text-muted.mt-3 {
        margin-top: 0.75rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Alert info box (logout page note) */
    .login-container .alert-info {
        padding: 0.75rem 1rem !important;
        font-size: 0.85rem !important;
        border-radius: 10px !important;
        margin-bottom: 1rem !important;
    }
    
    .login-container .alert-info i {
        font-size: 0.9rem !important;
    }
    
    /* Button grid on logout page */
    .login-container .d-grid.gap-3 {
        gap: 0.75rem !important;
    }
    
    .login-container .d-grid.gap-3 .btn-lg {
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }
    
    .login-container .mt-4 {
        margin-top: 1rem !important;
    }
    
    /* ============================================
       PASSWORD REQUIREMENTS LIST (Reset Password)
       ============================================ */
    .password-requirements {
        font-size: 0.8rem !important;
        padding: 0.75rem !important;
    }
    
    .password-requirements ul {
        padding-left: 1.25rem !important;
        margin-bottom: 0 !important;
    }
    
    .password-requirements li {
        margin-bottom: 0.25rem !important;
    }
    
    /* ============================================
       FORGOT PASSWORD LINK
       ============================================ */
    .forgot-password-link {
        font-size: 0.9rem !important;
    }
    
    .login-container .form-group.text-center {
        margin: 1rem 0 !important;
    }
    
    /* ============================================
       PAGE FOOTER
       ============================================ */
    .page-footer-login {
        padding: 1rem 0 !important;
        font-size: 0.8rem !important;
    }
    
    .page-footer-login .container {
        padding: 0 15px !important;
    }
    
    .page-footer-login p {
        margin-bottom: 0.5rem !important;
    }
    
    .page-footer-login a {
        display: inline-block !important;
        margin: 0.25rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Stack footer links on very small screens */
    .page-footer-login > .container > div {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.25rem 0.75rem !important;
    }
    
    /* ============================================
       STEP INDICATOR (Reset Password)
       ============================================ */
    .step-indicator {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .step-indicator .step {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.75rem !important;
    }
    
    /* ============================================
       ADDITIONAL RESET PASSWORD ELEMENTS
       ============================================ */
    
    /* Success state container */
    .reset-password-container .text-center .fa-envelope,
    .reset-password-container .text-center .fa-check-circle {
        font-size: 2.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Info text sizing */
    .reset-password-container p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* Form spacing */
    .reset-password-container .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    .reset-password-container .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .reset-password-container .mt-4 {
        margin-top: 1rem !important;
    }
    
    /* ============================================
       DARK MODE MOBILE ADJUSTMENTS
       ============================================ */
    [data-theme="dark"] .login-container,
    [data-theme="dark"] .reset-password-container {
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
}

/* ============================================
   AUTH PAGES - EXTRA SMALL SCREENS (max-width: 480px)
   Additional refinements for very small devices
   ============================================ */
@media (max-width: 480px) {
    
    .login-page-content-wrapper,
    .reset-password-content-wrapper {
        padding: 0.75rem !important;
        padding-top: 1.5rem !important;
    }
    
    .login-container,
    .reset-password-container {
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }
    
    .login-container h2,
    .reset-password-container h2 {
        font-size: 1.25rem !important;
    }
    
    .page-header-login-logo,
    .page-header-login img {
        max-height: 42px !important;
    }
    
    .reset-password-page-layout-wrapper .page-header-login img {
        max-height: 42px !important;
    }
    
    /* Logout page specific - extra small */
    .login-container .text-center > i[class*="fa-"] {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
    }
    
    .login-container .alert-info {
        font-size: 0.8rem !important;
        padding: 0.6rem 0.8rem !important;
    }
    
    .login-container .d-grid.gap-3 .btn-lg {
        padding: 0.65rem 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    .page-footer-login {
        padding: 0.75rem 0 !important;
    }
    
    .page-footer-login a {
        font-size: 0.75rem !important;
        margin: 0.2rem 0.4rem !important;
    }
}

/* ============================================
   CHANGE ADDRESS BUTTON - FINAL OVERRIDE
   Added at end for maximum specificity
   ============================================ */
button.change-address-btn,
button[type="button"].change-address-btn,
.warning-modal button.change-address-btn,
.confirmation-modal-content button.change-address-btn,
#order-confirmation-modal button.change-address-btn,
.delivery-section button.change-address-btn,
.section-header-with-action button.change-address-btn,
div.confirmation-section button.change-address-btn {
    background: linear-gradient(135deg, var(--brand-primary, #0056a6), var(--brand-secondary, #28a745)) !important;
    border: none !important;
    color: #fff !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 86, 166, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

button.change-address-btn:hover,
button[type="button"].change-address-btn:hover,
.warning-modal button.change-address-btn:hover,
.confirmation-modal-content button.change-address-btn:hover,
#order-confirmation-modal button.change-address-btn:hover {
    background: linear-gradient(135deg, var(--brand-primary-dark, #003d73), var(--brand-secondary, #28a745)) !important;
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(0, 86, 166, 0.4) !important;
    color: #fff !important;
}

button.change-address-btn i,
.warning-modal button.change-address-btn i,
.confirmation-modal-content button.change-address-btn i {
    font-size: 0.85rem !important;
    color: #fff !important;
}

/* ============================================
   LOADING OVERLAY - Shared between new-patient and new-order
   ============================================ */

/* Animations for loading overlay only - using unique names */
@keyframes loadingPulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); 
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 0 0 12px rgba(40, 167, 69, 0); 
    }
}

@keyframes loadingBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes loadingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Base overlay - hidden by default, shown when JS sets display:flex */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Content card */
.loading-content {
    background: var(--surface, #ffffff);
    border-radius: 16px;
    padding: 35px 40px;
    text-align: center;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border, #e5e7eb);
}

[data-theme="dark"] .loading-content,
.dark-mode .loading-content,
body.dark .loading-content {
    background: rgba(30, 35, 44, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Header - NO background, compact spacing */
.loading-header {
    margin-bottom: 25px;
}

/* Icon circle - centered, moderate size */
.loading-icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #28a745, #20c997);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    animation: loadingPulse 2s infinite;
}

.loading-icon-circle i {
    font-size: 1.75rem;
    color: white;
    animation: loadingBounce 1s infinite;
}

/* Title - clean, no special background */
.loading-content h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text, #1f2937);
    font-weight: 600;
}

[data-theme="dark"] .loading-content h2,
.dark-mode .loading-content h2,
body.dark .loading-content h2 {
    color: #e0e0e0;
}

/* Progress bar */
.loading-progress-container {
    margin: 20px 0;
}

.loading-progress-bar {
    height: 6px;
    background: var(--border, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
}

[data-theme="dark"] .loading-progress-bar {
    background: #374151;
}

.loading-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0056a6, #28a745);
    border-radius: 3px;
    transition: width 0.5s ease;
    width: 0%;
}

/* Steps list */
.loading-steps {
    text-align: left;
    margin: 20px 0;
}

.loading-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    opacity: 0.5;
}

[data-theme="dark"] .loading-step {
    background: rgba(255, 255, 255, 0.05);
}

.loading-step.active {
    opacity: 1;
    background: rgba(40, 167, 69, 0.1);
    border-left: 3px solid #28a745;
}

.loading-step.active span {
    font-weight: 600;
}

.loading-step.active .step-icon i {
    animation: loadingSpin 1s linear infinite;
}

.loading-step.completed {
    opacity: 1;
    background: rgba(40, 167, 69, 0.15);
}

.loading-step.completed .step-icon {
    color: #28a745;
}

.loading-step .step-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
}

.loading-step span {
    font-size: 0.85rem;
    color: var(--text, #1f2937);
}

[data-theme="dark"] .loading-step span {
    color: #e0e0e0;
}

/* Footer */
.loading-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8rem;
}

[data-theme="dark"] .loading-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}

.loading-footer i {
    color: #28a745;
}

/* Mobile-specific fixes for loading overlay */
@media (max-width: 992px) {
    .loading-content {
        padding: 25px 20px;
        width: 92%;
        max-width: 360px;
    }
    
    .loading-header {
        margin-bottom: 20px;
    }
    
    .loading-icon-circle {
        width: 60px;
        height: 60px;
        margin-bottom: 12px;
    }
    
    .loading-icon-circle i {
        font-size: 1.5rem;
    }
    
    .loading-content h2 {
        font-size: 1.1rem;
    }
    
    .loading-step {
        padding: 8px 10px;
        margin-bottom: 5px;
    }
    
    .loading-step span {
        font-size: 0.8rem;
    }
    
    .loading-step .step-icon {
        width: 22px;
        height: 22px;
        font-size: 0.85rem;
    }
    
    .loading-footer {
        font-size: 0.75rem;
        margin-top: 15px;
        padding-top: 12px;
    }
}