/*
 * Fix: Input/Textarea/Select borders invisible in Django Admin (Unfold theme)
 * Problem: Border color matches background, making form fields "invisible"
 * Solution: Override border colors for all form elements in both light & dark mode
 */

/* ============================================================
   UNFOLD SEARCH BAR — Reset overrides
   Unfold wraps search inputs in a styled <div> that already
   provides border, border-radius, background and shadow.
   Our global input rules below must NOT apply to these inputs
   or they create an ugly "double border" effect.
   ============================================================ */

/* Changelist search bar */
input#searchbar,
input#searchbar:focus,
input#searchbar:hover,
input#searchbar:hover:not(:focus) {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 8px !important;
    font-size: 14px !important;
}

/* Sidebar navigation search */
input#nav-filter,
input#nav-filter:focus,
input#nav-filter:hover,
input#nav-filter:hover:not(:focus),
input[type="search"]#nav-filter {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 8px !important;
    font-size: 14px !important;
}

/* Knowledge Structure search bar */
input#ksSearchInput,
input#ksSearchInput:focus,
input#ksSearchInput:hover,
input#ksSearchInput:hover:not(:focus) {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 8px !important;
    font-size: 14px !important;
}

/* Dark mode — same resets */
.dark input#searchbar,
.dark input#searchbar:focus,
.dark input#searchbar:hover,
.dark input#searchbar:hover:not(:focus) {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
}

.dark input#nav-filter,
.dark input#nav-filter:focus,
.dark input#nav-filter:hover,
.dark input#nav-filter:hover:not(:focus),
.dark input[type="search"]#nav-filter {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
}

.dark input#ksSearchInput,
.dark input#ksSearchInput:focus,
.dark input#ksSearchInput:hover,
.dark input#ksSearchInput:hover:not(:focus) {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
}


/* ============================================================
   LIGHT MODE - Form field borders
   ============================================================ */

/* Text inputs, number inputs, email, url, password, etc. */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
textarea,
select,
.vTextField,
.vIntegerField,
.vBigIntegerField,
.vForeignKeyRawIdAdminField,
.vURLField {
    border: 1px solid #d1d5db !important;
    /* gray-300 */
    border-radius: 6px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    background-color: #ffffff !important;
}

/* Focus state - light mode */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus,
.vTextField:focus,
.vIntegerField:focus {
    border-color: rgb(14 165 233) !important;
    /* primary-500 */
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
    outline: none !important;
}

/* Hover state - light mode */
input[type="text"]:hover:not(:focus),
input[type="number"]:hover:not(:focus),
input[type="email"]:hover:not(:focus),
input[type="url"]:hover:not(:focus),
input[type="password"]:hover:not(:focus),
input[type="tel"]:hover:not(:focus),
input[type="search"]:hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus) {
    border-color: #9ca3af !important;
    /* gray-400 */
}

/* Read-only / disabled fields - light mode */
input[readonly],
input[disabled],
textarea[readonly],
textarea[disabled],
select[disabled] {
    border: 1px solid #e5e7eb !important;
    /* gray-200 */
    background-color: #f9fafb !important;
    /* gray-50 */
    color: #6b7280 !important;
    /* gray-500 */
}


/* ============================================================
   DARK MODE - Form field borders
   ============================================================ */

.dark input[type="text"],
.dark input[type="number"],
.dark input[type="email"],
.dark input[type="url"],
.dark input[type="password"],
.dark input[type="tel"],
.dark input[type="search"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="time"],
.dark input[type="month"],
.dark input[type="week"],
.dark textarea,
.dark select,
.dark .vTextField,
.dark .vIntegerField,
.dark .vBigIntegerField,
.dark .vForeignKeyRawIdAdminField,
.dark .vURLField {
    border: 1px solid #4b5563 !important;
    /* gray-600 */
    background-color: #1f2937 !important;
    /* gray-800 */
    color: #e5e7eb !important;
    /* gray-200 */
}

/* Focus state - dark mode */
.dark input[type="text"]:focus,
.dark input[type="number"]:focus,
.dark input[type="email"]:focus,
.dark input[type="url"]:focus,
.dark input[type="password"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="search"]:focus,
.dark input[type="date"]:focus,
.dark input[type="datetime-local"]:focus,
.dark input[type="time"]:focus,
.dark input[type="month"]:focus,
.dark input[type="week"]:focus,
.dark textarea:focus,
.dark select:focus,
.dark .vTextField:focus,
.dark .vIntegerField:focus {
    border-color: rgb(56 189 248) !important;
    /* primary-400 */
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
    outline: none !important;
}

/* Hover state - dark mode */
.dark input[type="text"]:hover:not(:focus),
.dark input[type="number"]:hover:not(:focus),
.dark input[type="email"]:hover:not(:focus),
.dark input[type="url"]:hover:not(:focus),
.dark input[type="password"]:hover:not(:focus),
.dark input[type="tel"]:hover:not(:focus),
.dark input[type="search"]:hover:not(:focus),
.dark textarea:hover:not(:focus),
.dark select:hover:not(:focus) {
    border-color: #6b7280 !important;
    /* gray-500 */
}

/* Read-only / disabled fields - dark mode */
.dark input[readonly],
.dark input[disabled],
.dark textarea[readonly],
.dark textarea[disabled],
.dark select[disabled] {
    border: 1px solid #374151 !important;
    /* gray-700 */
    background-color: #111827 !important;
    /* gray-900 */
    color: #9ca3af !important;
    /* gray-400 */
}


/* ============================================================
   Inline forms & tabular inlines
   ============================================================ */

/* Ensure inline form fields also get visible borders */
.inline-group input[type="text"],
.inline-group input[type="number"],
.inline-group textarea,
.inline-group select {
    border: 1px solid #d1d5db !important;
}

.dark .inline-group input[type="text"],
.dark .inline-group input[type="number"],
.dark .inline-group textarea,
.dark .inline-group select {
    border: 1px solid #4b5563 !important;
}


/* ============================================================
   File inputs & special Django admin widgets
   ============================================================ */

input[type="file"] {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    background-color: #f9fafb !important;
}

.dark input[type="file"] {
    border: 1px solid #4b5563 !important;
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}


/* ============================================================
   Autocomplete & Related widgets - BORDERS
   ============================================================ */

.related-widget-wrapper select,
.related-widget-wrapper input {
    border: 1px solid #d1d5db !important;
}

.dark .related-widget-wrapper select,
.dark .related-widget-wrapper input {
    border: 1px solid #4b5563 !important;
}


/* ============================================================
   Select2 / Autocomplete dropdowns (if used)
   ============================================================ */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
}

.dark .select2-container--default .select2-selection--single,
.dark .select2-container--default .select2-selection--multiple {
    border: 1px solid #4b5563 !important;
    background-color: #1f2937 !important;
}


/* ============================================================
   Related Widget Wrapper - Layout Fix
   Fix: Action buttons (view, add, change, delete) stacking
   vertically instead of horizontally next to the dropdown
   ============================================================ */

.related-widget-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

/* Let the select/Select2 dropdown take available space */
.related-widget-wrapper select,
.related-widget-wrapper .select2-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Prevent hidden select from taking space */
.related-widget-wrapper select[hidden],
.related-widget-wrapper select.admin-autocomplete {
    flex: 0 0 0 !important;
    width: 0 !important;
    position: absolute !important;
}


/* ============================================================
   Related Widget Action Buttons - Styled as Friendly Buttons
   ============================================================ */

.related-widget-wrapper-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background-color: #f9fafb !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    position: relative !important;
}

.related-widget-wrapper-link:hover {
    background-color: #eff6ff !important;
    border-color: rgb(14 165 233) !important;
    box-shadow: 0 1px 3px rgba(14, 165, 233, 0.15) !important;
    transform: translateY(-1px) !important;
}

.related-widget-wrapper-link:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* Icon images inside the buttons */
.related-widget-wrapper-link img {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
    filter: none !important;
}

.related-widget-wrapper-link:hover img {
    opacity: 1 !important;
}

/* Specific button type colors on hover */
/* View button - blue tint */
.related-widget-wrapper-link[data-popup="no"]:hover,
.related-widget-wrapper-link.view-related:hover {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
}

/* Add button - green tint */
.related-widget-wrapper-link.add-related:hover {
    background-color: #f0fdf4 !important;
    border-color: #22c55e !important;
}

/* Change button - amber tint */
.related-widget-wrapper-link.change-related:hover {
    background-color: #fffbeb !important;
    border-color: #f59e0b !important;
}

/* Delete button - red tint */
.related-widget-wrapper-link.delete-related:hover {
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
}


/* ============================================================
   Related Widget Buttons - DARK MODE
   ============================================================ */

.dark .related-widget-wrapper-link {
    border-color: #374151 !important;
    background-color: #1f2937 !important;
}

.dark .related-widget-wrapper-link:hover {
    background-color: #1e3a5f !important;
    border-color: rgb(56 189 248) !important;
    box-shadow: 0 1px 3px rgba(56, 189, 248, 0.2) !important;
}

.dark .related-widget-wrapper-link img {
    opacity: 0.5 !important;
    filter: invert(1) !important;
}

.dark .related-widget-wrapper-link:hover img {
    opacity: 0.9 !important;
}

/* Specific button type colors - dark mode */
.dark .related-widget-wrapper-link.view-related:hover,
.dark .related-widget-wrapper-link[data-popup="no"]:hover {
    background-color: #1e3a5f !important;
    border-color: #3b82f6 !important;
}

.dark .related-widget-wrapper-link.add-related:hover {
    background-color: #14532d !important;
    border-color: #22c55e !important;
}

.dark .related-widget-wrapper-link.change-related:hover {
    background-color: #451a03 !important;
    border-color: #f59e0b !important;
}

.dark .related-widget-wrapper-link.delete-related:hover {
    background-color: #450a0a !important;
    border-color: #ef4444 !important;
}


/* ============================================================
   Inline forms - Related widget fix
   ============================================================ */

.inline-group .related-widget-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.inline-group .related-widget-wrapper-link {
    width: 30px !important;
    height: 30px !important;
}

.inline-group .related-widget-wrapper-link img {
    width: 14px !important;
    height: 14px !important;
}


/* ============================================================
   Unfold Action Bar - Dropdown & Button Fix
   Problem: Global `select` CSS (line ~25) forces background: #fff
   on ALL selects, but Unfold action bar uses white text on blue bg.
   Result: white text on white background = invisible dropdown.
   Solution: Override styles specifically for action bar elements.
   ============================================================ */

/* ── Light Mode: Action dropdown ── */
#changelist-actions select[name="action"] {
    background-color: #ffffff !important;
    color: #1e293b !important;
    /* slate-800 - dark text on white bg */
    border: 1px solid #cbd5e1 !important;
    /* slate-300 border */
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    min-width: 220px !important;
    cursor: pointer !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

/* Hover state */
#changelist-actions select[name="action"]:hover {
    border-color: #94a3b8 !important;
    /* slate-400 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Focus state */
#changelist-actions select[name="action"]:focus {
    border-color: rgb(14 165 233) !important;
    /* primary-500 */
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2) !important;
    outline: none !important;
}

/* Dropdown options when expanded */
#changelist-actions select[name="action"] option {
    color: #1e293b !important;
    background-color: #ffffff !important;
    padding: 4px 8px !important;
}

/* ── Dark Mode: Action dropdown ── */
.dark #changelist-actions select[name="action"] {
    background-color: #1e293b !important;
    /* slate-800 */
    color: #e2e8f0 !important;
    /* slate-200 - light text on dark bg */
    border: 1px solid #475569 !important;
    /* slate-600 */
}

.dark #changelist-actions select[name="action"]:hover {
    border-color: #64748b !important;
    /* slate-500 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.dark #changelist-actions select[name="action"]:focus {
    border-color: rgb(56 189 248) !important;
    /* primary-400 */
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

.dark #changelist-actions select[name="action"] option {
    color: #e2e8f0 !important;
    background-color: #1e293b !important;
}

/* ── Action Bar Label text ── */
#changelist-actions label {
    color: #ffffff !important;
    /* White label on blue bg */
    font-weight: 500 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ── Submit (Run) Button - Force visibility ── */
#changelist-actions button[type="submit"] {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

#changelist-actions button[type="submit"]:hover {
    background-color: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-1px) !important;
}

#changelist-actions button[type="submit"]:active {
    transform: translateY(0) !important;
}

/* ── Dark Mode: Submit Button ── */
.dark #changelist-actions button[type="submit"] {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.dark #changelist-actions button[type="submit"]:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ── Action counter text ── */
#changelist-actions .action-counter {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
}


/* ============================================================
   CHANGE FORM — Full-Width Container + 2-Column Grid Layout
   ============================================================ */

/* ── Expand main container to fill available width ── */
#content.container,
.container.colM,
.container.mx-auto.colM {
    max-width: none !important;
    width: 100% !important;
}

/* ── Fieldset: block layout (NOT grid)
   The .form-rows inside will handle the 2-column grid.
   If fieldset is also grid, it creates a nested grid problem
   where .form-rows only gets 50% of the fieldset width ── */
fieldset.module {
    display: block !important;
}

/* ── .form-rows: THE 2-column grid ──
   Unfold hardcodes grid-template-columns: 285px 285px
   We override to 1fr 1fr so fields fill all space ── */
.form-rows,
.aligned {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 24px !important;
    width: 100% !important;
    max-width: none !important;
}

/* Heading inside form-rows must span both columns */
fieldset.module>h2,
fieldset.module>.description,
fieldset.module>.collapse-toggle,
.form-rows>h2 {
    grid-column: 1 / -1 !important;
}

/* Each form-row fills its grid column */
.form-row,
.field-row {
    grid-column: span 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* Field-line (inner content wrapper) also fills width */
.field-line {
    width: 100% !important;
    max-width: none !important;
}

/* FK fields with related-widget-wrapper: span full width (need room for buttons) */
.form-row:has(.related-widget-wrapper),
.field-row:has(.related-widget-wrapper) {
    grid-column: 1 / -1 !important;
}

/* Textarea fields: span full width */
.form-row:has(textarea),
.field-row:has(textarea) {
    grid-column: 1 / -1 !important;
}

/* ── Force ALL inputs/selects to fill their container ── */
fieldset.module input[type="text"],
fieldset.module input[type="number"],
fieldset.module input[type="email"],
fieldset.module input[type="url"],
fieldset.module input[type="password"],
fieldset.module input[type="tel"],
fieldset.module input[type="search"],
fieldset.module input[type="date"],
fieldset.module select,
fieldset.module textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Unfold uses max-width classes that restrict input size; override them */
fieldset.module .vTextField,
fieldset.module .vIntegerField,
fieldset.module .vBigIntegerField,
fieldset.module .vURLField,
fieldset.module .vForeignKeyRawIdAdminField {
    max-width: 100% !important;
    width: 100% !important;
}

/* Select dropdowns should also fill width */
fieldset.module select:not([multiple]) {
    width: 100% !important;
    max-width: 100% !important;
}

/* ── Bigger input fields — more padding & font size ── */
fieldset.module input[type="text"],
fieldset.module input[type="number"],
fieldset.module input[type="email"],
fieldset.module input[type="url"],
fieldset.module input[type="password"],
fieldset.module input[type="tel"],
fieldset.module input[type="search"],
fieldset.module input[type="date"] {
    padding: 12px 16px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

fieldset.module select {
    padding: 12px 16px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    height: auto !important;
}

fieldset.module textarea {
    padding: 12px 16px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    min-height: 100px !important;
}

/* ── Labels — slightly bigger ── */
fieldset.module .form-row label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 4px !important;
}

/* ── Inline Groups — also fill full width ── */
.inline-group,
.inline-related {
    max-width: none !important;
    width: 100% !important;
}

.inline-group table {
    width: 100% !important;
}

.inline-group input[type="text"],
.inline-group input[type="number"],
.inline-group select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
}

/* ── Compact vertical spacing ── */
fieldset.module .form-row {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* ── Responsive: 1-column on small screens ── */
@media (max-width: 768px) {
    fieldset.module {
        grid-template-columns: 1fr !important;
    }

    fieldset.module .form-row {
        grid-column: span 1 !important;
    }
}