/* ROADMAP Model Card Editor - Custom Styles */

/* Global Styles */
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #343a40;
}

/* Header Styles */
header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-radius: 0 0 15px 15px;
    margin-bottom: 2rem;
}

header .display-4 {
    font-weight: 300;
    margin-bottom: 0.5rem;
}

/* Card Hover Effects */
.hover-card {
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    border-color: #007bff;
}

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

.hover-card:hover .fa {
    transform: scale(1.1);
}

/* Button Styles */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-lg {
    padding: 0.75rem 2rem;
}

/* Form Styles */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    margin-bottom: 1.5rem;
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
}

/* Ensure dropdowns can extend outside card boundaries */
#editor-section .card-body {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* JSON Editor Customizations */
#editor_holder,
#editor-holder {
    background-color: #fff;
    border-radius: 8px;
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* ========================================
   CUSTOM JSON EDITOR STYLES - COMMENTED OUT FOR VANILLA APPEARANCE
   Uncomment sections below if you want custom styling
   ======================================== */

/*
Force specific containers to allow dropdown overflow
#editor_holder .json-editor-object,
#editor-holder .json-editor-object,
#editor_holder .well,
#editor-holder .well {
    overflow: visible !important;
}

Fix dropdown overflow issues in Model Information - Enhanced
.json-editor .well,
.json-editor .form-group,
.json-editor [data-schemapath],
.json-editor .object-properties {
    overflow: visible !important;
    position: relative !important;
    z-index: auto !important;
}

Base select styling with proper layering
.json-editor select {
    z-index: 1050 !important;
    position: relative !important;
    margin-bottom: 15px !important;
}

Higher priority when focused
.json-editor select:focus {
    z-index: 2000 !important;
    position: relative !important;
}

Edge browser specific dropdown fixes
.json-editor select option {
    background-color: white !important;
    color: black !important;
    padding: 2px 4px !important;
}

Force dropdown list appearance in Edge
.json-editor select[size="1"] {
    appearance: menulist !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
}

Property name inputs positioning
.json-editor input[placeholder*="Property name"],
.json-editor .property-selector {
    z-index: 999 !important;
    position: relative !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}

Prevent property controls from overlapping dropdowns
.json-editor .property-controls {
    margin-top: 25px !important;
    z-index: 998 !important;
    position: relative !important;
    background: white !important;
    padding: 8px 0 !important;
    border-top: 1px solid #e9ecef !important;
}

Container spacing to prevent overlap
.json-editor .well .form-group:has(select) {
    margin-bottom: 25px !important;
}

Special handling for object property containers
.json-editor .well:has(select) {
    padding-bottom: 25px !important;
}

Ensure object properties container allows overflow
.json-editor .object-properties {
    overflow: visible !important;
    position: relative;
}

Fix for property controls at bottom of objects
.json-editor .property-controls {
    margin-top: 15px;
    z-index: 1000;
    position: relative;
    background: white;
    padding: 5px 0;
}

Custom styling for JSON Editor form elements
.json-editor-btn {
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    font-size: 12px;
}

.json-editor .form-control {
    border-radius: 6px;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.json-editor .form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

Required field indicators
.json-editor label.required::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

Array controls styling
.json-editor .array-controls {
    margin-bottom: 10px;
}

.json-editor .array-controls .btn {
    margin-right: 5px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}

Object properties styling
.json-editor .well {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}
*/

/* Checkbox styling for content codes */
[data-schemapath*="Content"] .checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

[data-schemapath*="Content"] .form-check {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 6px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

[data-schemapath*="Content"] .form-check:hover {
    background-color: #e9ecef;
    border-color: #007bff;
}

[data-schemapath*="Content"] .form-check-input:checked + .form-check-label {
    color: #007bff;
    font-weight: 500;
}

/* JSON Preview Styles */
.json-preview {
    background-color: #2d3748;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    line-height: 1.4;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* File Upload Styling */
.custom-file-label {
    border-radius: 8px;
}

.custom-file-input:focus ~ .custom-file-label {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Navigation Styles */
.navbar {
    border-radius: 12px;
    margin-bottom: 2rem;
}

.navbar-brand {
    font-weight: 500;
}

/* Alert Styles */
.alert {
    border-radius: 8px;
    border: none;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
}

/* Progress Indicators */
.progress {
    border-radius: 10px;
    background-color: #e9ecef;
}

.progress-bar {
    border-radius: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    header {
        margin-bottom: 1.5rem;
    }
    
    header .display-4 {
        font-size: 2rem;
    }
    
    .card-deck {
        flex-direction: column;
    }
    
    .hover-card:hover {
        transform: none;
    }
    
    .btn-group-vertical .btn {
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    header .display-4 {
        font-size: 1.5rem;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    .btn-lg {
        padding: 0.5rem 1.5rem;
    }
}

/* Loading Spinner */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Validation Styles */
.is-invalid {
    border-color: #dc3545 !important;
}

.is-valid {
    border-color: #28a745 !important;
}

.invalid-feedback {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.valid-feedback {
    color: #28a745;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Utility Classes */
.text-primary {
    color: #007bff !important;
}

.text-success {
    color: #28a745 !important;
}

.text-danger {
    color: #dc3545 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.text-info {
    color: #17a2b8 !important;
}

/* Smooth transitions */
* {
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Focus styles for accessibility */
.btn:focus,
.form-control:focus,
.custom-file-input:focus ~ .custom-file-label {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Sticky Right Panel */
#editor-section .col-lg-4 {
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* Ensure proper spacing on smaller screens */
@media (max-width: 991px) {
    #editor-section .col-lg-4 {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}


/* Field Examples Styling */
.field-examples {
    margin-top: 5px !important;
    padding: 8px 12px !important;
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    color: #6c757d !important;
    line-height: 1.4 !important;
}

.field-examples code {
    background: white !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    border: 1px solid #dee2e6 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    margin: 1px 0 !important;
}

.field-examples code:hover {
    background-color: #e9ecef !important;
    border-color: #007bff !important;
    color: #007bff !important;
    transform: translateY(-1px) !important;
}

.field-examples strong {
    color: #495057 !important;
    font-size: 12px !important;
}

/* Button divider */
.btn-divider {
    border-top: 1px solid #dee2e6;
    margin: 0.5rem 0;
}

/* Schema cards hover effect */
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease-in-out;
}

/* DOI code styling */
code.small {
    font-size: 0.75rem;
    word-break: break-all;
}

/* Modal sizing */
.modal-xl {
    max-width: 90%;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .card {
        break-inside: avoid;
    }
    
    .field-examples {
        display: none !important;
    }
}

/* ========================================
   Enhanced UI for Arrays and Tables - COMMENTED OUT FOR VANILLA APPEARANCE
   ======================================== */

/*
Improve readability of array item blocks
.json-editor .well {
    border-left: 3px solid #007bff !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    background-color: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

Add alternating background colors for array items
.json-editor-btn-add + div > .well:nth-child(even),
.json-editor > div > .well:nth-child(even) {
    background-color: #f8f9fa !important;
}

Style for collapsed array items with headers
.json-editor .well > h3 {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #495057 !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e9ecef !important;
}

Table format styling
.json-editor table {
    width: 100% !important;
    margin-bottom: 1rem !important;
    border-collapse: collapse !important;
    background-color: #fff !important;
}

.json-editor table thead th {
    background-color: #e9ecef !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
    padding: 0.75rem !important;
    vertical-align: middle !important;
}

.json-editor table tbody td {
    padding: 0.75rem !important;
    border: 1px solid #dee2e6 !important;
    vertical-align: middle !important;
}

.json-editor table tbody tr:hover {
    background-color: #f8f9fa !important;
}

.json-editor table tbody tr:nth-child(even) {
    background-color: #fdfdfd !important;
}

Table input fields
.json-editor table input[type="text"],
.json-editor table input[type="number"],
.json-editor table select {
    width: 100% !important;
    padding: 0.375rem 0.5rem !important;
    font-size: 0.875rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
}

.json-editor table input[type="text"]:focus,
.json-editor table input[type="number"]:focus,
.json-editor table select:focus {
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important;
}

Table action buttons
.json-editor table button {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    margin: 0 2px !important;
}

Category tabs styling (if JSON Editor supports it)
.json-editor-btn-edit_properties {
    margin-top: 10px !important;
}

Array add button styling
.json-editor-btn-add {
    margin-top: 10px !important;
    margin-bottom: 15px !important;
}

Spacing between array items
.json-editor [data-schemapath] > .row {
    margin-bottom: 10px !important;
}

Better visual separation for nested objects
.json-editor .well .well {
    border-left-color: #6c757d !important;
    background-color: #fefefe !important;
    margin-left: 10px !important;
}

========================================
   Hide Unwanted JSON Editor UI Elements - COMMENTED OUT
   ========================================

Hide type selector dropdowns (object, string, array, etc.)
These dropdowns appear inline next to field labels showing types like "string", "array", "object"
They are typically small selects with gray italic text showing the type

Method 1: Hide selects that only contain JSON type options
.json-editor select:has(option[value="string"]):has(option[value="number"]):has(option[value="object"]):has(option[value="array"]) {
    display: none !important;
}

Method 2: Target by position - type selectors appear after field labels
.json-editor > div > label + select,
.json-editor .form-group > label + select {
    display: none !important;
}

Method 3: More specific - these selects are usually inline with the label
.json-editor label select {
    display: none !important;
}

Hide "Edit Properties" buttons on objects
.json-editor-btn-edit_properties {
    display: none !important;
}

Hide property selector controls
.json-editor .property-selector {
    display: none !important;
}
*/

/* ==========================================================================
   CUSTOM THEME OVERRIDE - BOXY & COMPACT
   ========================================================================== */

/* Remove rounded corners from all major components within the editor */
#editor-holder .card,
#editor-holder .form-control,
#editor-holder .btn,
#editor-holder .alert {
    border-radius: 0 !important;
}

/* Reduce the vertical padding inside the main editor sections */
#editor-holder > .card > .card-body {
    padding: 1rem;
}

/* Reduce padding on nested cards (used for arrays and objects) */
#editor-holder .card .card-body {
    padding: 0.75rem;
}
#editor-holder .card .card-header {
    padding: 0.5rem 0.75rem;
}

/* Make form fields and labels tighter */
#editor-holder .form-group {
    margin-bottom: 0.75rem; /* Reduces space between fields */
    padding-bottom: 0.75rem;
}

#editor-holder .form-control {
    padding: 0.25rem 0.5rem; /* Reduces the height of input boxes */
    height: auto;
}

/* Tighten up button spacing and padding */
#editor-holder .btn {
    padding: 0.25rem 0.6rem;
}

/* Make array item headers more compact */
[data-schematype="array"] .card-header h5 {
    font-size: 0.9rem; /* Smaller font for array item titles */
    margin-bottom: 0;
}