/* Cupertino UI Style for Django Templates */

/* --- Variables --- */
:root {
    --cupertino-blue: #007AFF; /* Primary Blue */
    --cupertino-blue-dark: #0056b3;
    --cupertino-gray-light: #F2F2F7; /* Light background gray */
    --cupertino-gray-medium: #E5E5EA; /* Border/separator gray */
    --cupertino-gray-dark: #8E8E93; /* Text/inactive element gray */
    --cupertino-white: #FFFFFF;
    --cupertino-text-dark: #1C1C1E; /* Dark text */
    --cupertino-text-medium: #3C3C43; /* Medium text */
    --cupertino-red: #FF3B30; /* Error/destructive */
    --cupertino-green: #34C759; /* Success */
    --cupertino-orange: #FF9500; /* Warning/attention */

    --cupertino-border-radius: 8px;
    --cupertino-spacing-unit: 1rem;
}

/* --- Base Styles --- */
body {
    font-family: "Segoe UI", Arial, "Helvetica Neue", Roboto, sans-serif;
    color: var(--cupertino-text-dark);
    background-color: var(--cupertino-gray-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600; /* Semi-bold for headings */
    color: var(--cupertino-text-dark);
}

.mobile-section h1 {
    font-size: 1.75rem; /* Equivalent to text-2xl */
    line-height: 1.25;
    font-weight: 700; /* Equivalent to font-bold */
    letter-spacing: -0.025em; /* Equivalent to tracking-tight */
    color: var(--cupertino-text-dark);
}
.mobile-section p {
    font-size: 1rem; /* Equivalent to text-base */
    color: var(--cupertino-gray-dark);
    margin-top: 0.5rem;
}

/* --- Cards/Widgets --- */
.mobile-card {
    background-color: var(--cupertino-white);
    border-radius: var(--cupertino-border-radius);
    border: 1px solid var(--cupertino-gray-medium);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    overflow: hidden;
}
.mobile-card .p-4 {
    padding: var(--cupertino-spacing-unit);
}
.mobile-card .p-6 {
    padding: 1.5rem;
}

/* --- Form Elements --- */
.form-group { /* Crispy Forms default wrapper */
    margin-bottom: var(--cupertino-spacing-unit);
}

label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cupertino-text-medium);
    margin-bottom: 0.3rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cupertino-text-dark);
    background-color: var(--cupertino-white);
    border: 1px solid var(--cupertino-gray-medium);
    border-radius: var(--cupertino-border-radius);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none; /* Remove default browser styling */
    -moz-appearance: none;
    appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
    border-color: var(--cupertino-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25); /* Focus ring */
    outline: none;
}

textarea {
    min-height: 80px;
    resize: vertical;
}

/* Select2 overrides for Cupertino style */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--cupertino-gray-medium) !important;
    border-radius: var(--cupertino-border-radius) !important;
    background-color: var(--cupertino-white) !important;
    height: auto !important; /* Allow height to adjust for multiple selections */
    min-height: 38px; /* Match input height */
    padding: 0.25rem 0.5rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px; /* Adjust for single select */
    color: var(--cupertino-text-dark);
    padding-left: 0.25rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0.25rem 0.5rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--cupertino-gray-light);
    border: 1px solid var(--cupertino-gray-medium);
    border-radius: 5px;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    color: var(--cupertino-text-dark);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--cupertino-gray-dark);
    float: none; /* Override default float */
    margin-right: 0;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--cupertino-red);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-selection--multiple .select2-selection__arrow b {
    border-color: var(--cupertino-gray-dark) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    margin-left: -4px !important;
    margin-top: -2px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--cupertino-gray-dark) transparent !important;
    border-width: 0 4px 5px 4px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--cupertino-gray-medium);
    border-radius: var(--cupertino-border-radius);
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cupertino-blue) !important;
    color: var(--cupertino-white) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--cupertino-gray-light);
    color: var(--cupertino-text-dark);
}

/* Checkboxes and Radio Buttons (Custom Styling) */
.form-check {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    border: 1px solid var(--cupertino-gray-medium);
    border-radius: 0.25rem; /* Slightly rounded square for checkbox */
    background-color: var(--cupertino-white);
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
    position: relative;
}

.form-check-input[type="radio"] {
    border-radius: 50%; /* Circle for radio button */
}

.form-check-input:checked {
    background-color: var(--cupertino-blue);
    border-color: var(--cupertino-blue);
}

.form-check-input:focus {
    border-color: var(--cupertino-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
    outline: none;
}

.form-check-input:checked::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Checkmark for checkbox */
    width: 0.6em;
    height: 0.3em;
    border-left: 2px solid var(--cupertino-white);
    border-bottom: 2px solid var(--cupertino-white);
    transform: translate(-50%, -70%) rotate(-45deg);
}

.form-check-input[type="radio"]:checked::before {
    /* Dot for radio button */
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: var(--cupertino-white);
    transform: translate(-50%, -50%);
    border: none;
}

.form-check-label {
    font-size: 1rem;
    color: var(--cupertino-text-dark);
    cursor: pointer;
}

/* --- Buttons --- */
.btn, button[type="submit"], .inline-flex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: var(--cupertino-border-radius);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Primary Button */
.btn-primary, button[type="submit"].bg-blue-600 {
    color: var(--cupertino-white);
    background-color: var(--cupertino-blue);
    border: 1px solid var(--cupertino-blue);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary:hover, button[type="submit"].bg-blue-600:hover {
    background-color: var(--cupertino-blue-dark);
    border-color: var(--cupertino-blue-dark);
}
.btn-primary:focus, button[type="submit"].bg-blue-600:focus {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
    outline: none;
}

/* Secondary/Outline Button */
.btn-secondary, .inline-flex.text-slate-700 {
    color: var(--cupertino-text-dark);
    background-color: var(--cupertino-white);
    border: 1px solid var(--cupertino-gray-medium);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-secondary:hover, .inline-flex.text-slate-700:hover {
    background-color: var(--cupertino-gray-light);
    border-color: var(--cupertino-gray-dark);
}
.btn-secondary:focus, .inline-flex.text-slate-700:focus {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
    outline: none;
}

/* Success Button */
.btn-success {
    color: var(--cupertino-white);
    background-color: var(--cupertino-green);
    border: 1px solid var(--cupertino-green);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-success:hover {
    background-color: #28a745; /* A slightly darker green */
    border-color: #28a745;
}
.btn-success:focus {
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.25); /* Green focus ring */
    outline: none;
}

/* Info Button (using Cupertino Blue as accent) */
.btn-info {
    color: var(--cupertino-white);
    background-color: var(--cupertino-blue);
    border: 1px solid var(--cupertino-blue);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-info:hover {
    background-color: var(--cupertino-blue-dark);
    border-color: var(--cupertino-blue-dark);
}
.btn-info:focus {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25); /* Blue focus ring */
    outline: none;
}

/* Warning Button */
.btn-warning {
    color: var(--cupertino-white);
    background-color: var(--cupertino-orange);
    border: 1px solid var(--cupertino-orange);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-warning:hover {
    background-color: #e69500; /* Darker orange */
    border-color: #e69500;
}
.btn-warning:focus {
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.25); /* Orange focus ring */
    outline: none;
}

/* Dark Button */
.btn-dark {
    color: var(--cupertino-white);
    background-color: var(--cupertino-gray-dark); /* Using dark gray */
    border: 1px solid var(--cupertino-gray-dark);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-dark:hover {
    background-color: #6c757d; /* Slightly darker gray */
    border-color: #6c757d;
}
.btn-dark:focus {
    box-shadow: 0 0 0 3px rgba(142, 142, 147, 0.25); /* Gray focus ring */
    outline: none;
}

/* Danger Button */
.btn-danger {
    color: var(--cupertino-white);
    background-color: var(--cupertino-red);
    border: 1px solid var(--cupertino-red);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-danger:hover {
    background-color: #cc0000; /* Darker red */
    border-color: #cc0000;
}
.btn-danger:focus {
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.25); /* Red focus ring */
    outline: none;
}

/* Purple Button */
.btn-purple {
    color: var(--cupertino-white);
    background-color: #8A2BE2; /* A shade of purple */
    border: 1px solid #8A2BE2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-purple:hover {
    background-color: #6A1BA0; /* Darker purple */
    border-color: #6A1BA0;
}
.btn-purple:focus {
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.25); /* Purple focus ring */
    outline: none;
}

/* Secondary Purple Button */
.btn-secondary-purple {
    color: #8A2BE2;
    background-color: #F3E5FF; /* Light purple background */
    border: 1px solid #D8BFD8; /* Light purple border */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-secondary-purple:hover {
    background-color: #E6CCFF;
    border-color: #C0A0C0;
}
.btn-secondary-purple:focus {
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.25);
    outline: none;
}

/* Link Button (text-only, no background/border) */
.btn-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--cupertino-blue);
    padding: 0.6rem 0.75rem; /* Slightly less padding than regular buttons */
    font-weight: 400; /* Regular weight */
    text-decoration: none;
}
.btn-link:hover {
    color: var(--cupertino-blue-dark);
    text-decoration: underline;
}
.btn-link:focus {
    box-shadow: none; /* No box shadow for link buttons */
    outline: none;
    text-decoration: underline;
}

/* --- Crispy Forms Layout Adjustments --- */
.form-row { /* Crispy Forms row */
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--cupertino-spacing-unit) / 2);
    margin-right: calc(-1 * var(--cupertino-spacing-unit) / 2);
}
.form-row .col-md-6 { /* Crispy Forms column */
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: calc(var(--cupertino-spacing-unit) / 2);
    padding-right: calc(var(--cupertino-spacing-unit) / 2);
}

/* Fieldset styling */
fieldset {
    border: 1px solid var(--cupertino-gray-medium);
    border-radius: var(--cupertino-border-radius);
    padding: var(--cupertino-spacing-unit);
    margin-bottom: var(--cupertino-spacing-unit);
    background-color: var(--cupertino-white);
}
fieldset legend {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cupertino-text-dark);
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
    width: auto; /* Override default legend width */
}

/* Error messages */
.errorlist {
    color: var(--cupertino-red);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    padding-left: 0;
    list-style: none;
}
.errorlist li {
    margin-bottom: 0.2rem;
}
.helptext {
    font-size: 0.8rem;
    color: var(--cupertino-gray-dark);
    margin-top: 0.25rem;
}

/* Non-field errors */
.alert-danger {
    background-color: #ffebeb;
    border-color: #ffb3b3;
    color: #cc0000;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--cupertino-border-radius);
}

/* Horizontal rule */
hr {
    border-top: 1px solid var(--cupertino-gray-medium);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Specific adjustments for the existing Tailwind classes to integrate with Cupertino */
.space-y-6 > *:not(:first-child) {
    margin-top: 1.5rem; /* Tailwind's space-y-6 */
}
.flex.justify-end.items-center.gap-2 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem; /* Tailwind's gap-2 */
}
.pt-6 { padding-top: 1.5rem; }
.mt-6 { margin-top: 1.5rem; }
.border-t { border-top-width: 1px; }
.border-slate-200 { border-color: var(--cupertino-gray-medium); }

/* Crispy Forms Fieldset overrides */
.mb-4.p-4.border.rounded-lg.border-gray-200 {
    margin-bottom: var(--cupertino-spacing-unit);
    padding: var(--cupertino-spacing-unit);
    border: 1px solid var(--cupertino-gray-medium);
    border-radius: var(--cupertino-border-radius);
    background-color: var(--cupertino-white);
}

/* Crispy Forms Row/Column overrides */
.flex.flex-col.md\:flex-row.mb-4 {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--cupertino-spacing-unit);
}
@media (min-width: 768px) { /* md breakpoint */
    .md\:flex-row { flex-direction: row; }
}
.md\:w-1\/2 {
    flex: 0 0 50%;
    max-width: 50%;
}
.pr-2 { padding-right: 0.5rem; }
.pl-2 { padding-left: 0.5rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.mb-4 { margin-bottom: var(--cupertino-spacing-unit); }
.md\:mb-0 { margin-bottom: 0; }

/* Specific styling for photo formset */
.photo-form {
    border: 1px solid var(--cupertino-gray-medium);
    border-radius: var(--cupertino-border-radius);
    background-color: var(--cupertino-white);
    padding: var(--cupertino-spacing-unit);
    position: relative;
    transition: all 0.15s ease-in-out;
}
.photo-form.border-red-500 {
    border-color: var(--cupertino-red);
}
.photo-form label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cupertino-text-medium);
}
.photo-form img {
    border-radius: var(--cupertino-border-radius);
    border: 1px solid var(--cupertino-gray-medium);
}
.photo-form .text-xs {
    font-size: 0.75rem;
    color: var(--cupertino-gray-dark);
}
.photo-form .text-red-600 {
    color: var(--cupertino-red);
}
.photo-form .group-hover\:opacity-100 {
    opacity: 1;
}
.photo-form .opacity-75 {
    opacity: 0.75;
}
.photo-form .transition-opacity {
    transition: opacity 0.15s ease-in-out;
}
.photo-form .bg-blue-50 {
    background-color: #e0f2fe; /* Light blue for file input button */
}
.photo-form .text-blue-700 {
    color: #007AFF; /* Cupertino blue */
}
.photo-form .hover\:file\:bg-blue-100:hover {
    background-color: #bfdbfe;
}

/* Flatpickr overrides */
.flatpickr-calendar {
    border: 1px solid var(--cupertino-gray-medium);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    border-radius: var(--cupertino-border-radius);
    font-family: "Segoe UI", Arial, "Helvetica Neue", Roboto, sans-serif;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: var(--cupertino-blue);
    border-color: var(--cupertino-blue);
}
.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
    border-color: var(--cupertino-blue);
    color: var(--cupertino-blue);
}
.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange):hover {
    background: var(--cupertino-blue-dark);
    color: var(--cupertino-white);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-month, .flatpickr-current-month .flatpickr-numInputWrapper {
    color: var(--cupertino-text-dark);
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    color: var(--cupertino-blue);
}
.flatpickr-time input.flatpickr-hour, .flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second {
    font-weight: 500;
}
.flatpickr-time .flatpickr-am-pm {
    color: var(--cupertino-text-dark);
}