/*
 * FarmAssist Design System
 * Color palette derived from farmassist.pt branding
 * Uses Tailwind CSS via CDN + Flowbite components
 *
 * To customize these colors, update the Tailwind config in base.html
 */

/* ──────────────────────────────────────────────
   Color Palette
   ──────────────────────────────────────────────
   Primary:    #8dc63f (green)      - Main brand color
   Primary-L:  #9ed14a              - Lighter variant
   Primary-D:  #7ab632              - Darker variant
   Secondary:  #6d6e71              - Gray
   Accent:     #F59E0B (amber-500)  - Call to action highlights
   Success:    #10B981 (emerald-500)
   Warning:    #F59E0B (amber-500)
   Error:      #EF4444 (red-500)
   Info:       #3B82F6 (blue-500)

   Neutral:
   - Background: #F9FAFB (gray-50)
   - Surface:    #FFFFFF
   - Border:     #E5E7EB (gray-200)
   - Text:       #111827 (gray-900)
   - Text-muted: #6B7280 (gray-500)
   ────────────────────────────────────────────── */

:root {
    --color-primary: #8dc63f;
    --color-primary-light: #9ed14a;
    --color-primary-dark: #7ab632;
    --color-secondary: #6d6e71;
    --color-accent: #F59E0B;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;
    --color-bg: #F9FAFB;
    --color-surface: #FFFFFF;
    --color-border: #E5E7EB;
    --color-text: #111827;
    --color-text-muted: #6B7280;
}

/* ──────────────────────────────────────────────
   Flowbite-style form inputs
   Applied globally to Django-rendered form widgets
   ────────────────────────────────────────────── */

input[type="text"]:not([datepicker]),
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 0.625rem /* 10px */;
    font-size: 0.875rem /* 14px */;
    line-height: 1.25rem;
    color: #111827;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="text"]:not([datepicker]):focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #8dc63f;
    box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.25);
}

/* Checkbox styling (exclude toggle switches) */
input[type="checkbox"]:not(.toggle-switch-input) {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

input[type="checkbox"]:not(.toggle-switch-input):focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.25);
}

input[type="checkbox"]:not(.toggle-switch-input):checked {
    background-color: #8dc63f;
    border-color: #8dc63f;
}

input[type="checkbox"]:not(.toggle-switch-input):checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Buttons - pointer cursor */
button,
[type="submit"],
[type="button"],
[role="button"] {
    cursor: pointer;
}

/* Error state - applied via Django error classes */
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    border-color: #EF4444;
}

input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* Datepicker: dim days outside the current month */
.datepicker-cell.prev,
.datepicker-cell.next {
    color: #e5e7eb !important;
    opacity: 0.6;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

/* Focus ring for accessibility */
.focus-ring:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch-slider {
    width: 2.75rem;
    height: 1.5rem;
    background-color: #d1d5db;
    border-radius: 9999px;
    position: relative;
    transition: background-color 0.2s ease;
}

.toggle-switch-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.toggle-switch-input:checked + .toggle-switch-slider {
    background-color: #8dc63f;
}

.toggle-switch-input:checked + .toggle-switch-slider::after {
    transform: translateX(1.25rem);
}

.toggle-switch-input:focus + .toggle-switch-slider {
    box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.25);
}