/* 
 * Core Issues CSS - This file contains all styles for core issues
 * IMPORTANT: Status indicator styling for core issues should ONLY be in this file,
 * not in styles.css, to avoid conflicts and ensure consistent appearance.
 */

/* Header Section Layout - Matches Notes/Goals/Wins Pattern */
.notes-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.notes-header-section h3 {
    margin: 0;
    font-weight: 600;
}

.header-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Core Issues Form CSS */

/* Form Container */
.ccc-core-issues-container {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

.ccc-core-issues-container h2 {
    margin-bottom: 20px;
    color: #333;
}

.ccc-core-issues-container .form-row {
    margin-bottom: 20px;
}

.ccc-core-issues-container .form-section {
    margin-bottom: 20px;
}

.ccc-core-issues-container .section-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #333;
}

/* Core Issues Grid - used in both forms */
.core-issues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Core Issue Cards - SHARED BETWEEN BOTH FORMS */
.core-issue-card {
    position: relative;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

/* White background for core issues in add-note-form context - use multiple selectors for higher specificity */
.ccc-note-container #core-issues-section .core-issue-card,
.form-section.toggle-section #core-issues-section .core-issue-card,
.toggle-section #core-issues-section .core-issue-card,
body .ccc-note-container .core-issue-card {
    background-color: #ffffff !important;
}

/* Ensure gray background in core-issues-form context */
.ccc-core-issues-container .core-issue-card {
    background-color: #f9f9f9 !important;
}

/* Special styling for core issues container in add-note-form.php */
.form-section.toggle-section #core-issues-section {
    background: transparent;
    padding: 0;
    margin-top: 10px;
}

.core-issue-card:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.core-issue-card h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    padding-right: 60px; /* Space for the icons */
}

/* New Core Issue Highlighting */
.core-issue-card.new-core-issue {
    border: 2px solid #ff9800;
    position: relative;
}

/* Removed ::before pseudo-element - now using JavaScript-created badge */

/* Core Issue Fields - SHARED */
.core-issue-field {
    margin-bottom: 12px;
}

.core-issue-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9em;
    color: #555;
}

.core-issue-field select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
}

/* Read-only description — mirrors goals .goal-description-text;
   fixed height so Severity+ dropdowns align across the card grid */
.core-issue-description-text {
    font-size: 14px;
    line-height: 1.5;
    color: #50575e;
    margin-bottom: 16px;
    padding: 0;
    min-height: 4.5em; /* ~3 lines */
    max-height: 4.5em; /* keep cards level regardless of copy length */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Removed old icon styles - now using CCC Core specific styles below */

/* CCC Ghost Card for Core Issues - Use CCC Core styling */
/* No custom styling needed - CCC Core handles all ghost card styling */

/* Select client message styling - matches Wins exactly */
.select-client-message {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    border: 2px dashed #ddd;
    border-radius: 8px;
    background-color: transparent;
}

.select-client-message p {
    font-size: 1.1em;
    margin: 0;
}

/* Modal - matches session booking modal exactly with center alignment */
.modal {
    display: none;
    position: fixed !important;
    z-index: 999999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.modal.visible {
    display: flex;
}

/* More specific selector to override global notes.css modal-content padding */
#core-issue-modal .modal-content {
    position: relative;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 8px 8px 0 0;
}

.modal-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

#modal-close {
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #777;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-close:hover {
    color: #333;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-footer {
    padding: 15px 20px;
    background-color: #f8f8f8;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-section {
    margin-bottom: 15px;
}

.modal-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.modal-section input[type="text"],
.modal-section select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.date-selects {
    display: flex;
    gap: 10px;
}

.date-selects select {
    flex: 1;
}

/* NO CUSTOM BUTTON STYLING - ALL STYLING COMES FROM CCC CORE */

/* Modal save button disabled state */
#save-core-issue:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed !important;
    opacity: 0.8;
    pointer-events: none;
}

/* Override hover state when disabled */
#save-core-issue:disabled:hover {
    background-color: #cccccc !important;
}



/* Buttons */
.button-container {
    margin-top: 20px;
    text-align: left;
}

/* More specific rule for core issues form to ensure left alignment */
.ccc-core-issues-container .button-container {
    text-align: left !important;
}

/* NO CUSTOM BUTTON STYLING - ALL STYLING COMES FROM CCC CORE */

/* NO CUSTOM NOTIFICATION STYLING - ALL STYLING COMES FROM CCC CORE */
/* Removed conflicting .ccc-notification rule that was overriding CCC Core inline notifications */

/* Responsive Design */
@media (max-width: 768px) {
    .core-issues-grid {
        grid-template-columns: 1fr;
    }
    
    #core-issue-modal .modal-content {
        width: 95%;
    }
} 

/* =============================================== */
/* VIEW CORE ISSUES SPECIFIC STYLES               */
/* =============================================== */

/* Override custom core-issue-card styling when using CCC Core cards in view */
.core-issues-container .ccc-card.core-issue-card {
    background-color: var(--ccc-card-bg, #ffffff) !important;
    border: 1px solid var(--ccc-border-color, #e0e0e0) !important;
    border-radius: var(--ccc-card-border-radius, 8px) !important;
    padding: 0 !important; /* CCC cards handle their own padding */
    box-shadow: var(--ccc-card-box-shadow, 0 2px 4px rgba(0, 0, 0, 0.05)) !important;
    margin-bottom: 20px;
    position: relative;
    transition: all 0.3s ease;
}

.core-issues-container .ccc-card.core-issue-card:hover {
    box-shadow: var(--ccc-card-box-shadow-hover, 0 4px 8px rgba(0, 0, 0, 0.1)) !important;
}

/* Status indicator positioning for CCC cards */
.core-issues-container .ccc-card.core-issue-card .status-indicator {
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid var(--ccc-border-color, #999999);
    color: #333333;
    font-style: normal; /* Ensure non-italic text */
}

.core-issues-container .ccc-card.core-issue-card .status-indicator.active {
    /* No color override - uses default white background with grey border */
}

.core-issues-container .ccc-card.core-issue-card .status-indicator.archived {
    /* No color override - uses default white background with grey border */
}

/* Chart container in CCC card body */
.core-issues-container .ccc-card.core-issue-card .chart-container {
    height: 150px;
    position: relative;
}

/* Grid for core issues using CCC Grid */
.core-issues-container .core-issues-grid {
    /* Use CCC Grid component instead of custom grid */
    /* Removed custom grid styles to use CCC Core grid component */
}

/* Container for the core issues view */
.core-issues-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* Loading indicator and messages */
.loading-indicator {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-style: italic;
}

.select-client-message {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    border: 2px dashed #ddd;
    border-radius: 8px;
    background-color: transparent;
    border: 1px dashed #ddd;
}

/* Add a CSS loader for loading states */
.ccc-loader {
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid #3498db;
    width: 40px;
    height: 40px;
    animation: ccc-spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes ccc-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Text styles for loading indicator */
.loading-indicator p {
    margin: 10px 0;
    font-size: 16px;
}

.loading-indicator .small {
    font-size: 12px;
    opacity: 0.7;
} 

/* =============================================== */
/* CORE ISSUES FORM SPECIFIC STYLES              */
/* =============================================== */

/* Override CCC Card styling for form context - extend, don't override */
.ccc-core-issues-container .ccc-card.core-issue-card {
    background-color: var(--ccc-card-bg, #ffffff) !important;
    border: 1px solid var(--ccc-border-color, #e0e0e0) !important;
    border-radius: var(--ccc-card-border-radius, 8px) !important;
    padding: 0 !important; /* CCC cards handle their own padding */
    box-shadow: var(--ccc-card-box-shadow, 0 2px 4px rgba(0, 0, 0, 0.05)) !important;
    position: relative;
    transition: all 0.3s ease;
    overflow: visible !important; /* Ensure badges can appear outside card bounds */
    z-index: 1;
}

.ccc-core-issues-container .ccc-card.core-issue-card:hover {
    box-shadow: var(--ccc-card-box-shadow-hover, 0 4px 8px rgba(0, 0, 0, 0.1)) !important;
}

/* =============================================
 * UNIVERSAL ICON STYLES - ONE PLACE TO RULE THEM ALL
 * ============================================= */
/* Universal styling for archive and delete icons - EXCEPT core-issue-archive-icon which has custom positioning */
.archive-icon,
.delete-icon,
.core-issue-delete-icon {
    position: absolute !important;
    font-size: 20px !important;
    cursor: pointer !important;
    top: 15px !important;
    right: 15px !important;
    color: #6c757d !important; /* Grey by default */
    transition: all 0.2s ease !important;
    z-index: 10 !important; /* Ensure visibility above card content */
}

.archive-icon:hover,
.delete-icon:hover,
.core-issue-delete-icon:hover {
    color: #dc3545 !important; /* Bootstrap red on hover */
    transform: scale(1.1) !important; /* Slight scale effect */
}

/* Remove old specific styles - replaced by universal styles above */
/* CCC Core badge positioning for core issue cards */
.ccc-core-issues-container .ccc-card.core-issue-card .ccc-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 50 !important; /* Very high z-index to ensure it appears above everything */
    white-space: nowrap;
}

/* Grid for core issues using CCC Grid in form */
.ccc-core-issues-container .ccc-grid {
    /* Use CCC Grid component - no custom overrides needed */
    padding-top: 20px !important; /* Add top padding to accommodate overlaying badges */
}

/* Fix ghost card height to match regular cards */
#core-issues-section .ccc-ghost-card {
    min-height: 380px !important; /* Match typical core issue card height */
}

/* -----------------------------
 * CONTEXT-SPECIFIC OVERRIDES
 * ----------------------------- */
/* Core Issues within Notes Container (add-note-form.php) */
.ccc-note-container .core-issue-card {
    background-color: #ffffff !important; /* White cards on white background - will be styled by notes context */
}

.ccc-note-container #core-issues-section .core-issue-card {
    background-color: #f9f9f9 !important; /* Grey cards within notes form */
}

/* CCC Ghost Cards in notes context - let CCC Core handle styling */
/* No custom styling needed - CCC Core handles all ghost card styling */

/* Hide sections by default in toggle contexts */
.ccc-note-container #core-issues-section.hidden {
    display: none;
}

/* Special styling for core issues container in add-note-form.php */
.form-section.toggle-section #core-issues-section {
    background: transparent;
    padding: 0;
    margin-top: 10px;
}

/* Unfinished core issue cards */
.core-issue-card.unfinished-card {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    position: relative;
}

/* Save button loading state */
#save-core-issues:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed !important;
    opacity: 0.8;
    pointer-events: none;
}

#save-core-issues .fa-spinner {
    margin-right: 8px;
}

/* Ensure spinner animation works smoothly */
.fa-spin {
    animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Override hover state when disabled */
#save-core-issues:disabled:hover {
    background-color: #cccccc !important;
} 

/* =============================================== */
/* FILTER COMPONENT CUSTOMIZATIONS               */
/* =============================================== */

/* NO CUSTOM FILTER STYLING - ALL STYLING COMES FROM CCC CORE */
/* This ensures consistent styling and proper alignment across all pages */

/* Auto-save indicator styles */
.core-issue-auto-save-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 12px;
}

/* Archive icon back in header controls */
.core-issue-archive-icon {
    color: #666;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 4px;
    border-radius: 3px;
}

.core-issue-archive-icon:hover {
    color: #333;
    background-color: rgba(0,0,0,0.1);
}

.auto-save-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 2px 5px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 500;
    transition: all 0.3s ease;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    width: fit-content;
}

.auto-save-indicator.status-pending {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.auto-save-indicator.status-saving {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.auto-save-indicator.status-saved {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.auto-save-indicator.status-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.auto-save-text {
    font-weight: 500;
}

.auto-save-icon {
    font-size: 9px;
}

/* Card header controls layout */
.card-header-controls {
    position: absolute;
    top: 16px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    height: 24px; /* Match typical heading height */
}

/* Archive icon positioning - removed old header positioning */

/* AI Approval Toggle Styles - now in bottom row */
.ai-approval-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: -8px;
}

.ai-approval-toggle .toggle-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
}

/* Use the existing toggle styles from notes.css - just customize the toggle-switch container */
.ai-approval-toggle .toggle-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 19px;
    margin-right: 8px;
}

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

.ai-approval-toggle .toggle-switch .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f8a5a5;
    transition: .4s;
    border-radius: 34px;
}

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

.ai-approval-toggle .toggle-switch input:checked + .toggle-slider {
    background-color: #90c695;
}

.ai-approval-toggle .toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 1px #4CAF50;
}

.ai-approval-toggle .toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(19px);
}

.ai-approval-toggle .toggle-switch .toggle-label {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #666;
}



/* Ensure header has relative positioning for absolute controls */
.ccc-card-header {
    position: relative;
}

/* Card top badge - positioned above card */
.card-top-badge {
    position: absolute !important;
    top: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Add consistent top margin to all cards for badge alignment */
.ccc-card, .ccc-ghost-card {
    margin-top: 15px;
}

/* Remove old badge styles - now using CCC Core badges directly */ 

/* Custom NEW badge styling - faded orange with black text */
.new-badge {
    background-color: #ffe4cc !important;
    color: #000000 !important;
    border: 1px solid #ffcc99 !important;
}

/* Custom AI DRAFT badge styling - faded purple with black text */
.ccc-badge-yellow:not(.new-badge) {
    background-color: #f0e6ff !important;
    color: #000000 !important;
    border: 1px solid #d1c4e9 !important;
}