/* ============================================================================
   CREATE PROJECT PAGE - ENHANCED STYLES
   ============================================================================

   This file contains the enhanced styling for the CreateProject page,
   implementing Medtronic Design System specifications and UX improvements.

   Version: 2.0 (Enhanced)
   Previous Version: create-project.css (v1.0)
   Reference: /docs/design/ui-design-system-spec.md

   IMPROVEMENTS:
   - Medtronic Design System integration (design tokens)
   - Optimized grid layout (70%-30%)
   - Sticky sidebar with elevation
   - Enhanced progress indicator
   - Reduced vertical space usage
   - Improved visual hierarchy
   - Better accessibility (WCAG 2.1 AA)

   ============================================================================ */

/* ============================================================================
   LAYOUT - GRID CONTAINER
   ============================================================================ */

.create-project-container {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: var(--spacing-md); /* 16px */
    padding: var(--spacing-md); /* 16px */
    max-width: 1600px;
    margin: 0 auto;
}

/* Responsive breakpoints */
@media (max-width: 1199px) {
    .create-project-container {
        grid-template-columns: 65% 35%;
    }
}

@media (max-width: 1023px) {
    .create-project-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 767px) {
    .create-project-container {
        padding: var(--spacing-sm);
    }
}

/* ============================================================================
   MAIN CONTENT AREA (LEFT COLUMN)
   ============================================================================ */

.main-content {
    /* Removed max-height to allow natural flow */
    /* overflow-y will be handled by individual sections if needed */
}

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

.page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--medtronic-gray-dark);
    margin: 0;
    line-height: 32px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.auto-save-status {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-lighter);
    border-radius: var(--radius-sm);
}

/* ============================================================================
   PROGRESS INDICATOR - ENHANCED
   ============================================================================ */

.progress-indicator-enhanced {
    background-color: #E7F3FF; /* Light blue background */
    border-left: 4px solid var(--medtronic-blue-interactive);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md); /* Reduced vertical padding */
    margin-bottom: var(--spacing-md); /* Reduced margin */
    box-shadow: var(--shadow-sm);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.progress-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--medtronic-gray-dark);
}

.progress-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--medtronic-blue-interactive);
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #D0E7FF;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--medtronic-blue-interactive);
    border-radius: var(--radius-sm);
    transition: width var(--transition-base);
}

/* ============================================================================
   FORM SECTIONS - ENHANCED CARDS
   ============================================================================ */

.form-section-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm); /* Reduced from md to sm */
    box-shadow: var(--shadow-sm);
    overflow: visible; /* Changed from hidden to allow dropdowns to overflow */
    transition: box-shadow var(--transition-base);
}

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

/* Section header - IMPROVED with better contrast */
.form-section-header {
    background: linear-gradient(135deg, #F0F4F8 0%, #E8EEF4 100%); /* Subtle gradient */
    border-bottom: 2px solid var(--medtronic-blue-interactive); /* Blue accent */
    border-left: 4px solid var(--medtronic-blue-interactive); /* Left accent bar */
    padding: var(--spacing-sm) var(--spacing-md); /* Reduced padding */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-fast);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.form-section-header:hover {
    background: linear-gradient(135deg, #E8EEF4 0%, #E0E8F0 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transform: translateX(2px);
}

.form-section-header h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 700; /* Bolder */
    color: var(--medtronic-blue-primary); /* Blue color */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    letter-spacing: 0.3px;
}

/* Completion indicator - ENHANCED */
.section-complete-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--status-success);
    background-color: rgba(40, 167, 69, 0.15);
    padding: 6px 12px;
    border-radius: 12px; /* More rounded */
    border: 1px solid var(--status-success);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Chevron icon for collapsible sections */
.section-chevron {
    transition: transform var(--transition-base);
    color: var(--medtronic-gray-light);
}

.section-chevron.expanded {
    transform: rotate(180deg);
}

/* Section body */
.form-section-body {
    padding: var(--spacing-md); /* Reduced from lg to md */
}

/* Optimize form field layouts - 2-column grid for better space usage */
.form-section-body .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: 0;
}

/* Full width for single fields */
.form-section-body .row .col-12,
.form-section-body .row .col-md-12 {
    grid-column: 1 / -1; /* Span all columns */
}

/* Half width for paired fields */
.form-section-body .row .col-md-6 {
    grid-column: span 1;
}

/* Stack on smaller screens */
@media (max-width: 767px) {
    .form-section-body .row {
        grid-template-columns: 1fr;
    }

    .form-section-body .row .col-md-6 {
        grid-column: 1 / -1;
    }
}

/* Optimize DynamicFieldsRenderer layout */
.form-section-body .dynamic-fields-container .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

/* Responsive for dynamic fields */
@media (max-width: 991px) {
    .form-section-body .dynamic-fields-container .row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   AUTO-POPULATED FIELDS - METADATA BADGES
   ============================================================================ */

.asset-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-light);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--medtronic-blue-interactive);
}

.metadata-badge {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.metadata-badge strong {
    color: var(--medtronic-blue-primary);
    font-weight: 600;
}

/* Optional: Icon for metadata badges */
.metadata-badge-icon {
    width: 14px;
    height: 14px;
    color: var(--medtronic-blue-interactive);
}

/* ============================================================================
   FORM CONTROLS - ENHANCED STYLING
   ============================================================================ */

/* Form labels */
label,
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--medtronic-gray-dark);
    margin-bottom: 6px;
}

/* Required field indicator */
.required-asterisk,
.text-danger {
    color: var(--status-error);
    font-weight: 700;
    margin-left: 2px;
}

/* Input fields, selects, textareas */
.form-control,
.form-select,
input[type="text"],
input[type="date"],
input[type="number"],
textarea,
select {
    width: 100%;
    font-family: var(--font-family-primary);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary) !important;
    background-color: var(--bg-white) !important;
    border: 1px solid var(--border-color-dark) !important;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Placeholder styling */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

/* Focus state */
/* 2026-08-27 — `input:focus` a secas atrapaba TAMBIÉN checkboxes y radios de TODA la app
   (la hoja carga global): el background-color blanco con !important pisaba el fondo azul del
   estado :checked de Bootstrap y la palomita —SVG blanco— quedaba blanco sobre blanco mientras
   el control tenía el focus (reporte del admin de roles, permiso TASK_EDIT_DATES). Un checkbox
   pinta su estado CON el fondo; se excluye del reset de focus. */
.form-control:focus,
.form-select:focus,
input:focus:not([type="checkbox"]):not([type="radio"]),
textarea:focus,
select:focus {
    color: var(--text-primary) !important;
    background-color: var(--bg-white) !important;
    border-color: var(--medtronic-blue-interactive) !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(16, 16, 235, 0.15);
}

/* El anillo de focus sí aplica a checkbox/radio — solo el fondo y el color estaban mal. */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    border-color: var(--medtronic-blue-interactive);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(16, 16, 235, 0.15);
}

/* Disabled/readonly state */
.form-control:disabled,
.form-control.readonly,
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--bg-light) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Error state */
.form-control.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--status-error) !important;
    background-image: none;
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Validation messages */
.validation-message,
.text-danger {
    display: block;
    font-size: 12px;
    color: var(--status-error);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Helper text */
.form-text,
.text-muted {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Dropdown select styling */
select option {
    color: var(--text-primary);
    background-color: var(--bg-white);
}

/* ============================================================================
   PROJECT TYPE DESCRIPTION (Helper Text)
   ============================================================================ */

.project-type-description {
    margin-top: 6px;
    padding: var(--spacing-sm);
    background-color: rgba(16, 16, 235, 0.05);
    border-left: 3px solid var(--medtronic-blue-interactive);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.project-type-description .icon {
    flex-shrink: 0;
    color: var(--medtronic-blue-interactive);
    margin-top: 2px;
}

/* ============================================================================
   ACTION BUTTONS
   ============================================================================ */

/* Primary button (Create/Update) */
.btn-primary {
    background-color: var(--medtronic-blue-interactive);
    border-color: var(--medtronic-blue-interactive);
    color: var(--text-light);
    font-weight: 600;
    padding: 12px 30px;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--medtronic-blue-medium);
    border-color: var(--medtronic-blue-medium);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Secondary button (Cancel/Back) */
.btn-secondary,
.btn-outline-secondary {
    background-color: transparent;
    border: 1px solid var(--medtronic-gray-lighter);
    color: var(--medtronic-gray-dark);
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-secondary:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--bg-light);
    border-color: var(--medtronic-gray-light);
}

/* Button sizes */
.btn-lg {
    padding: 14px 36px;
    font-size: 16px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* ============================================================================
   ALERTS & ERROR MESSAGES
   ============================================================================ */

.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 4px solid;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-left-color: var(--status-error);
    color: #721c24;
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-left-color: var(--status-warning);
    color: #856404;
}

.alert-info {
    background-color: rgba(23, 162, 184, 0.1);
    border-left-color: var(--status-info);
    color: #0c5460;
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.1);
    border-left-color: var(--status-success);
    color: #155724;
}

.alert .btn-close {
    margin-left: auto;
    padding: var(--spacing-xs);
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.alert .btn-close:hover {
    opacity: 1;
}

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

.loading-spinner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    gap: var(--spacing-md);
}

/* Feedback 2026-08-13 (Iván) — esta regla estaba SIN ACOTAR y esta hoja se carga en TODAS las
   páginas desde _Layout. Resultado: cualquier `.spinner-border` de la aplicación —los de dentro de
   los botones, los de los renglones de tarea, los `spinner-border-sm` que piden 16px— se volvía un
   aro de 48px con borde de 4px. En el detalle de proyecto se veía como una rueda enorme encima del
   botón de omitir.

   Los 48px son correctos para lo que este bloque describe: el cargador de PÁGINA, el de
   `.loading-spinner`, que ya reserva 200px de alto. Así que la regla se acota a ese contenedor y
   deja de secuestrar a los demás. Fuera de aquí, el tamaño lo ponen Bootstrap (2rem, y 1rem con
   `-sm`) o la hoja del componente que corresponda. */
.loading-spinner .spinner-border {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(16, 16, 235, 0.1);
    border-top-color: var(--medtronic-blue-interactive);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loading-spinner .text-muted {
    font-size: 14px;
    color: var(--text-muted);
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.no-fields-message {
    padding: var(--spacing-xxl);
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    background-color: var(--bg-lighter);
    border-radius: var(--radius-md);
}

.no-fields-message .icon {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: var(--spacing-md);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 1023px) {
    .main-content {
        order: 1;
    }

    .project-overview-sidebar {
        order: 2;
        position: relative !important;
        top: 0 !important;
        max-height: none !important;
    }
}

@media (max-width: 767px) {
    .page-title {
        font-size: 20px;
    }

    .header-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .form-section-body {
        padding: var(--spacing-md);
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-control,
    .form-select,
    input,
    select,
    textarea {
        border-width: 2px !important;
    }

    .form-section-card {
        border-width: 2px;
    }
}

/* Focus visible for keyboard navigation */
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 2px solid var(--medtronic-blue-interactive);
    outline-offset: 2px;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .create-project-container {
        display: block;
    }

    .header-actions,
    .btn,
    .auto-save-status {
        display: none !important;
    }

    .form-section-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
}