/*
 * File: page_styles/shareAddins.css
 * Purpose: Universal Header Structure & Share Button Styling
 * Version: 2.0
 * Date: 2025-11-01
 * Author: Claude AI Assistant
 * 
 * Used on: records.html, my-symptoms.html, appointments.html, medications.html, providers.html
 * 
 * Header Structure: Tip | AI Tip | Page Name
 *                   VOICE INPUT banner (if enabled)
 *                   ReadMe-AI icon
 *                   Share | START HERE → | Add Button(s)
 * 
 * Mobile @media section will be added after desktop testing is complete.
 */

/* ============================================================================
   PAGE HEADER CONTAINERS
   ============================================================================ */

.records-header,
.symptoms-header,
.appointments-header,
.medications-header,
.providers-header {
    text-align: center;
    margin-bottom: 30px;
}

/* Header H3/H1 with Tip icons */
.records-header h3,
.symptoms-header h1,
.appointments-header h1,
.medications-header h1,
.providers-header h1 {
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 24px;
    color: #2c3e50;
    flex-wrap: wrap;
}

/* Tooltip icons in header */
.records-header i.fa-info-circle,
.records-header i.fa-brain,
.symptoms-header i.fa-question-circle,
.symptoms-header i.fa-brain,
.appointments-header i.fa-calendar-check,
.appointments-header i.fa-brain,
.medications-header i.fa-pills,
.medications-header i.fa-brain,
.providers-header i.fa-user-md,
.providers-header i.fa-brain {
    cursor: help;
    font-size: 18px;
    margin: 0 4px;
}

/* Vertical separator pipes */
.records-header h3 > span,
.symptoms-header h1 > span {
    margin: 0 8px;
}

/* ============================================================================
   WORKFLOW ICON (ReadMe-AI)
   ============================================================================ */

.records-header a[onclick*="openWorkflow"],
.symptoms-header a[onclick*="openWorkflow"],
.appointments-header a[onclick*="openWorkflow"],
.medications-header a[onclick*="openWorkflow"],
.providers-header a[onclick*="openWorkflow"] {
    display: inline-block;
    margin: 10px;
    vertical-align: middle;
}

/* ============================================================================
   HEADER ACTIONS ROW (Share + START HERE + Add Buttons)
   ============================================================================ */

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.header-actions h3 {
    margin: 0;
    font-size: 18px;
    color: #2c3e50;
    font-weight: 600;
}

/* ============================================================================
   SHARE BUTTON CONTAINER
   ============================================================================ */

.share-button-container {
    display: inline-block;
}

/* Note: Share button styling (.share-button-new) is injected by ShareComponent_share.js */

/* ============================================================================
   ACTION BUTTONS (Add Record, Add Symptom, etc.)
   ============================================================================ */

.add-record-btn,
.add-symptom-btn,
.use-body-chart-btn,
.add-appointment-btn,
.add-medication-btn,
.add-provider-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important;
    border: none;
    padding: 12px 24px;
    border-radius: 8px !important;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.add-record-btn:hover,
.add-symptom-btn:hover,
.use-body-chart-btn:hover,
.add-appointment-btn:hover,
.add-medication-btn:hover,
.add-provider-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.add-record-btn:disabled,
.add-symptom-btn:disabled,
.add-appointment-btn:disabled,
.add-medication-btn:disabled,
.add-provider-btn:disabled,
.use-body-chart-btn:disabled {
    background: #95a5a6;
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
    transform: none;
}

.add-record-btn i,
.add-symptom-btn i,
.use-body-chart-btn i,
.add-appointment-btn i,
.add-medication-btn i,
.add-provider-btn i {
    font-size: 14px;
}

/* ============================================================================
   PAGE-SPECIFIC ADDITIONAL BUTTONS CONTAINER
   ============================================================================ */

.page-specific-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    flex-wrap: wrap;
}

/* ============================================================================
   SEARCH BUTTON STYLING
   ============================================================================ */

#search-btn,
.search-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-radius: 8px !important;
}

/* ============================================================================
   MOBILE RESPONSIVENESS - TO BE ADDED AFTER DESKTOP TESTING
   ============================================================================ */

/*
 * @media (max-width: 768px) {
 *     // Mobile styles will be added here after desktop testing
 *     // This will include:
 *     // - Vertical stacking of header-actions
 *     // - Full-width buttons
 *     // - Adjusted font sizes
 *     // - Modified tooltip placement
 * }
 */