/**
 * Project Forms Custom Styles - Dark Theme
 * Unified styling for readonly and fillable form fields throughout the application
 * Based on dark theme variables: body-bg: #070d19, input-bg: #0c1427
 */

:root {
    /* Dark Theme Color Variables - Aligned with theme-dark/_variables.scss */
    --input-bg-fillable: #0c1427;          /* Standard fillable input background */
    --input-bg-readonly: #0f1629;          /* Readonly input background (slightly lighter) */
    --input-bg-select: #0c1427;            /* Select dropdown background */
    --input-bg-readonly-select: #0f1629;   /* Readonly select background */
    --input-bg-secondary: #091122;        /* Secondary textarea background */
    --input-bg-calculated: #132f6b;       /* Calculated/budget summary fields */

    /* Text Colors */
    --text-color-primary: #d0d6e1;        /* Primary text color (body-color) */
    --text-color-readonly: #b8c3d9;       /* Readonly text (slightly muted) */
    --text-color-placeholder: #7987a1;   /* Placeholder text (gray-600) */

    /* Border Colors */
    --border-color-default: #172340;      /* Default border color */
    --border-color-fillable: #567c57;     /* Fillable field border (green) */
    --border-color-focus: #567c57;        /* Focus border (green - same as fillable) */
    --border-color-readonly: #212a3a;     /* Readonly border (gray-800) */

    /* Focus Shadow */
    --focus-shadow: 0 0 0 0.2rem rgba(86, 124, 87, 0.25);  /* Green shadow for fillable fields */

    /* Transitions */
    --transition-speed: 0.2s;
    --transition-easing: ease;
}

/* ============================================
   GLOBAL FORM CONTROL STYLING
   ============================================ */

/* Base form control styling - applies to all inputs, selects, textareas */
/* Fillable fields get green border, readonly/disabled will be overridden below */
.form-control:not([readonly]):not([disabled]),
input[type="text"]:not([readonly]):not([disabled]),
input[type="email"]:not([readonly]):not([disabled]),
input[type="number"]:not([readonly]):not([disabled]),
input[type="date"]:not([readonly]):not([disabled]),
input[type="time"]:not([readonly]):not([disabled]),
input[type="datetime-local"]:not([readonly]):not([disabled]),
input[type="password"]:not([readonly]):not([disabled]),
input[type="tel"]:not([readonly]):not([disabled]),
input[type="url"]:not([readonly]):not([disabled]),
input[type="search"]:not([readonly]):not([disabled]),
select:not([readonly]):not([disabled]),
textarea:not([readonly]):not([disabled]) {
    background-color: var(--input-bg-fillable) !important;
    color: var(--text-color-primary) !important;
    border: 1px solid var(--border-color-fillable) !important;
    border-radius: 0.25rem;
    padding: 0.469rem 0.8rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: all var(--transition-speed) var(--transition-easing);
}

/* Fallback for form-control class without readonly/disabled attributes */
.form-control {
    background-color: var(--input-bg-fillable) !important;
    color: var(--text-color-primary) !important;
    border: 1px solid var(--border-color-fillable) !important;
    border-radius: 0.25rem;
    padding: 0.469rem 0.8rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: all var(--transition-speed) var(--transition-easing);
}

/* Input elements without readonly/disabled (for JavaScript-generated fields) */
input:not([readonly]):not([disabled]),
select:not([readonly]):not([disabled]),
textarea:not([readonly]):not([disabled]) {
    border-color: var(--border-color-fillable) !important;
}

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

/* Focus states for fillable fields - maintain green border with enhanced shadow */
.form-control:focus:not([readonly]):not([disabled]),
input:focus:not([readonly]):not([disabled]),
select:focus:not([readonly]):not([disabled]),
textarea:focus:not([readonly]):not([disabled]) {
    background-color: var(--input-bg-fillable) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-fillable) !important;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(86, 124, 87, 0.25) !important;
}

/* Hover states for fillable fields - maintain green border */
.form-control:hover:not([readonly]):not([disabled]),
input:hover:not([readonly]):not([disabled]),
select:hover:not([readonly]):not([disabled]),
textarea:hover:not([readonly]):not([disabled]) {
    border-color: var(--border-color-fillable) !important;
    border-width: 1px;
}

/* ============================================
   READONLY FIELD STYLING
   ============================================ */

/* Readonly inputs and textareas */
.form-control[readonly],
input[readonly],
textarea[readonly],
.readonly-input {
    background-color: var(--input-bg-readonly) !important;
    color: var(--text-color-readonly) !important;
    border-color: var(--border-color-readonly) !important;
    cursor: not-allowed;
    opacity: 0.9;
}

/* Readonly selects */
select[readonly],
select:disabled,
.readonly-select {
    background-color: var(--input-bg-readonly-select) !important;
    color: var(--text-color-readonly) !important;
    border-color: var(--border-color-readonly) !important;
    cursor: not-allowed;
    opacity: 0.9;
}

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

/* ============================================
   SELECT DROPDOWN STYLING
   ============================================ */

/* Standard select inputs - fillable selects get green border */
select.form-control:not([readonly]):not([disabled]),
.select-input:not([readonly]):not([disabled]) {
    background-color: var(--input-bg-select) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-fillable) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d0d6e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

select.form-control:focus:not([readonly]):not([disabled]),
.select-input:focus:not([readonly]):not([disabled]) {
    background-color: var(--input-bg-select) !important;
    border-color: var(--border-color-fillable) !important;
    box-shadow: 0 0 0 0.2rem rgba(86, 124, 87, 0.25) !important;
}

/* Secondary select styling - fillable selects get green border */
.select-input-secondary:not([readonly]):not([disabled]) {
    background-color: var(--input-bg-select) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-fillable) !important;
}

/* ============================================
   TEXTAREA STYLING
   ============================================ */

/* Standard textarea */
textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

/* Secondary textarea background - fillable textareas get green border */
.textarea-secondary:not([readonly]):not([disabled]) {
    background-color: var(--input-bg-secondary) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-fillable) !important;
}

.textarea-secondary:focus:not([readonly]):not([disabled]) {
    background-color: var(--input-bg-secondary) !important;
    border-color: var(--border-color-fillable) !important;
    box-shadow: 0 0 0 0.2rem rgba(86, 124, 87, 0.25) !important;
}

/* ============================================
   SPECIAL FIELD TYPES
   ============================================ */

/* Budget summary (calculated) fields - fillable calculated fields get green border */
.budget-summary-input:not([readonly]):not([disabled]),
input.budget-summary-input:not([readonly]):not([disabled]) {
    background-color: var(--input-bg-calculated) !important;
    color: #ffffff !important;
    border: 1px solid var(--border-color-fillable) !important;
    font-weight: 600;
}

.budget-summary-input:focus:not([readonly]):not([disabled]),
input.budget-summary-input:focus:not([readonly]):not([disabled]) {
    border-color: var(--border-color-fillable) !important;
    box-shadow: 0 0 0 0.2rem rgba(86, 124, 87, 0.25) !important;
}

/* File inputs - fillable file inputs get green border */
input[type="file"].form-control:not([readonly]):not([disabled]),
input[type="file"]:not([readonly]):not([disabled]) {
    background-color: var(--input-bg-fillable) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-fillable) !important;
    padding: 0.375rem 0.75rem;
}

/* ============================================
   AUTOFILL STYLING
   ============================================ */

/* Webkit autofill styling - fillable fields get green border */
input:not([readonly]):not([disabled]):-webkit-autofill,
input:not([readonly]):not([disabled]):-webkit-autofill:hover,
input:not([readonly]):not([disabled]):-webkit-autofill:focus,
input:not([readonly]):not([disabled]):-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input-bg-fillable) inset !important;
    -webkit-text-fill-color: var(--text-color-primary) !important;
    border-color: var(--border-color-fillable) !important;
}

input[readonly]:-webkit-autofill,
input[readonly]:-webkit-autofill:hover,
input[readonly]:-webkit-autofill:focus,
input[readonly]:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input-bg-readonly) inset !important;
    -webkit-text-fill-color: var(--text-color-readonly) !important;
    border-color: var(--border-color-readonly) !important;
}

/* ============================================
   LEGACY CLASS SUPPORT (for backward compatibility)
   ============================================ */

/* Legacy class names - maintaining backward compatibility */
.select-input:not([readonly]):not([disabled]),
.select-input:not(.readonly-select) {
    background-color: var(--input-bg-select) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-fillable) !important;
}

.readonly-input {
    background-color: var(--input-bg-readonly) !important;
    color: var(--text-color-readonly) !important;
    border-color: var(--border-color-readonly) !important;
    cursor: not-allowed;
}

.readonly-select {
    background-color: var(--input-bg-readonly-select) !important;
    color: var(--text-color-readonly) !important;
    border-color: var(--border-color-readonly) !important;
    cursor: not-allowed;
}

/* Budget summary (calculated) fields - already defined above */

/* Table Cell Wrapping */
.table-cell-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.table-cell-wrap textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

/* Budget Table Cell Wrapping */
.budget-rows td:first-child {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 200px;
}

/* Activities Table Styles */
.activities-table {
    table-layout: fixed;
    width: 100%;
}

.activities-table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 0;
}

.activities-table td textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    resize: vertical;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.activities-table th {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Table Responsive Container */
.activities-container {
    overflow-x: auto;
    max-width: 100%;
}

.activities-container .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Responsive Table Styles */
@media (max-width: 768px) {
    .table-responsive table {
        min-width: 800px;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Auto-resize textarea for sustainability section - fillable gets green border */
.sustainability-textarea:not([readonly]):not([disabled]) {
    resize: vertical;
    min-height: 80px;
    height: auto;
    overflow-y: hidden;
    line-height: 1.5;
    padding: 8px 12px;
    border-color: var(--border-color-fillable) !important;
}

.sustainability-textarea:focus:not([readonly]):not([disabled]) {
    overflow-y: auto;
    border-color: var(--border-color-fillable) !important;
    box-shadow: 0 0 0 0.2rem rgba(86, 124, 87, 0.25) !important;
}

/* Auto-resize textarea for logical framework section - fillable gets green border */
.logical-textarea:not([readonly]):not([disabled]) {
    resize: vertical;
    min-height: 50px;
    height: auto;
    overflow-y: hidden;
    line-height: 1.5;
    padding: 8px 12px;
    border-color: var(--border-color-fillable) !important;
}

.logical-textarea:focus:not([readonly]):not([disabled]) {
    overflow-y: auto;
    border-color: var(--border-color-fillable) !important;
    box-shadow: 0 0 0 0.2rem rgba(86, 124, 87, 0.25) !important;
}

/* Preserve line breaks in show/view pages for textarea content */
.info-value {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
    color: var(--text-color-primary);
}

/* Ensure textarea-like content displays properly with line breaks */
.info-value,
.card-body .info-value,
.info-grid .info-value {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
    color: var(--text-color-primary);
}

/* ============================================
   FORM VALIDATION STATES
   ============================================ */

/* Valid state - keep green border for valid fillable fields */
.form-control.is-valid:not([readonly]):not([disabled]),
input.is-valid:not([readonly]):not([disabled]),
select.is-valid:not([readonly]):not([disabled]),
textarea.is-valid:not([readonly]):not([disabled]) {
    border-color: var(--border-color-fillable) !important;
}

.form-control.is-valid:focus:not([readonly]):not([disabled]) {
    border-color: var(--border-color-fillable) !important;
    box-shadow: 0 0 0 0.2rem rgba(86, 124, 87, 0.25) !important;
}

/* Invalid state */
.form-control.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #ff3366 !important; /* danger color */
}

.form-control.is-invalid:focus {
    border-color: #ff3366 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 51, 102, 0.25) !important;
}

/* ============================================
   INPUT GROUPS
   ============================================ */

.input-group-text {
    background-color: var(--input-bg-readonly) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-default) !important;
}

.input-group .form-control:focus:not([readonly]):not([disabled]) {
    border-color: var(--border-color-fillable) !important;
    box-shadow: 0 0 0 0.2rem rgba(86, 124, 87, 0.25) !important;
}

/* Input group fillable fields should have green border */
.input-group .form-control:not([readonly]):not([disabled]) {
    border-color: var(--border-color-fillable) !important;
}

/* ============================================
   ENHANCED VISUAL APPEARANCE
   ============================================ */

/* Smooth transitions for all form elements */
.form-control,
input,
select,
textarea {
    transition: background-color var(--transition-speed) var(--transition-easing),
                border-color var(--transition-speed) var(--transition-easing),
                color var(--transition-speed) var(--transition-easing),
                box-shadow var(--transition-speed) var(--transition-easing);
}

/* Better visual distinction for readonly fields */
.form-control[readonly]:hover,
input[readonly]:hover,
textarea[readonly]:hover,
.readonly-input:hover {
    border-color: var(--border-color-readonly) !important;
    /* No background change on hover for readonly */
}

/* Enhanced focus ring visibility - green for fillable fields */
.form-control:focus-visible:not([readonly]):not([disabled]),
input:focus-visible:not([readonly]):not([disabled]),
select:focus-visible:not([readonly]):not([disabled]),
textarea:focus-visible:not([readonly]):not([disabled]) {
    outline: 2px solid var(--border-color-fillable);
    outline-offset: 2px;
}

/* ============================================
   RESPONSIVE ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
    .form-control,
    input,
    select,
    textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* ============================================
   JAVASCRIPT-GENERATED FIELDS
   ============================================ */

/* Ensure JavaScript-generated/dynamically created form fields also get green borders */
/* This applies to fields created via innerHTML, createElement, jQuery, etc. */
[class*="form-control"]:not([readonly]):not([disabled]),
[id*="input"]:not([readonly]):not([disabled])[type="text"],
[id*="input"]:not([readonly]):not([disabled])[type="number"],
[id*="input"]:not([readonly]):not([disabled])[type="email"],
[id*="input"]:not([readonly]):not([disabled])[type="date"],
form input:not([readonly]):not([disabled]),
form select:not([readonly]):not([disabled]),
form textarea:not([readonly]):not([disabled]) {
    border-color: var(--border-color-fillable) !important;
}

/* Additional catch-all for any dynamically added input elements */
input.form-control:not([readonly]):not([disabled]),
select.form-control:not([readonly]):not([disabled]),
textarea.form-control:not([readonly]):not([disabled]),
input[class*="input"]:not([readonly]):not([disabled]),
select[class*="select"]:not([readonly]):not([disabled]),
textarea[class*="textarea"]:not([readonly]):not([disabled]) {
    border-color: var(--border-color-fillable) !important;
}