@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    background-color: #f9fafb;
}

/* File Picker Styles */
.stored-file-picker {
    /* Container styles */
}

.stored-file-picker .selected-file-item {
    @apply inline-flex items-center gap-2 bg-blue-50 border border-blue-200 rounded p-2 text-sm;
}

.stored-file-picker .selected-file-item img {
    @apply w-8 h-8 object-cover rounded;
}

.stored-file-picker .selected-file-item .file-name {
    @apply flex-1 truncate text-blue-900;
}

.stored-file-picker .selected-file-item .file-action {
    @apply text-blue-600 hover:text-blue-800 hidden text-xs font-medium;
}

.stored-file-picker .selected-file-item:hover .file-action {
    @apply inline;
}

.stored-file-picker .selected-file-item .file-remove {
    @apply text-red-600 hover:text-red-800 text-xs font-bold px-1;
}

/* Loader Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ============================================================
   NEWS ITEM FORM IMPROVEMENTS
   Enhanced styling for better UX and visual distinction
   ============================================================ */

/* Form Section Styling */
.form-section {
    @apply bg-white border border-gray-200 rounded-lg shadow-sm p-6 mb-6;
}

.form-section h3 {
    @apply text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2;
}

.form-section > p.text-sm {
    @apply text-gray-600 italic mb-4;
}

/* Subsection dividers in multi-part sections */
.form-section > div {
    @apply pb-4;
}

.form-section > div:not(:last-child) {
    @apply border-b border-gray-200;
}

/* Enhanced Help Text */
.form-group .help-block, .form-group small.form-text {
    @apply text-gray-600 text-xs italic mt-1 block;
}

/* Form Row */
.form-group {
    @apply mb-6;
}

.form-group:last-child {
    @apply mb-0;
}

/* Form Labels */
label {
    @apply block text-sm font-semibold text-gray-800 mb-2;
}

label * {
    @apply font-normal;
}

/* Input Focus States */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
input[type="tel"],
textarea,
select {
    @apply focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 focus:border-blue-500 transition-colors;
}

/* Checkbox Styling */
input[type="checkbox"] {
    @apply w-4 h-4 rounded cursor-pointer;
    accent-color: #3b82f6;
}

input[type="checkbox"] + label {
    @apply inline-flex items-center gap-2 font-medium text-gray-800 cursor-pointer;
}

/* Expanded choice styling (for multiple checkboxes) */
.form-group fieldset {
    @apply border-0 p-0 m-0;
}

.form-group fieldset legend {
    @apply hidden;
}

.form-group fieldset > div {
    @apply flex flex-col gap-3;
}

.form-group fieldset > div > div {
    @apply flex items-center;
}

.form-group fieldset > div > div input[type="checkbox"] {
    @apply mr-2;
}

.form-group fieldset > div > div label {
    @apply m-0 inline;
}

.role-permissions-panel fieldset > div {
    @apply grid gap-2 sm:grid-cols-2;
}

.role-permissions-panel fieldset > div > div {
    @apply rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 transition hover:border-slate-300 hover:bg-white;
}

.role-permissions-panel fieldset > div > div label {
    @apply m-0 block cursor-pointer;
}

.role-permissions-panel input[type="checkbox"] {
    @apply mr-2 align-middle;
}

/* ===== COVER IMAGE SECTION - DISTINCT STYLE ===== */
.form-section > div:has(> h3:contains("Immagine")) {
    @apply bg-gradient-to-br from-yellow-50 to-yellow-100 border-l-4 border-yellow-500;
}

/* Fallback for cover picture field wrapper */
.form-group:has(input[id*="coverPicture"]) {
    @apply bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-500 border;
}

.form-group:has(input[id*="coverPicture"]) label {
    @apply text-yellow-900 font-semibold flex items-center gap-2;
}

.form-group:has(input[id*="coverPicture"]) label::before {
    content: "🖼️";
}

.form-group:has(input[id*="coverPicture"]) .help-block {
    @apply text-yellow-800;
}

/* ===== ATTACHMENTS SECTION - DISTINCT STYLE ===== */
.form-group:has(input[id*="attachments"]) {
    @apply bg-orange-50 p-4 rounded-lg border-l-4 border-orange-500 border;
}

.form-group:has(input[id*="attachments"]) label {
    @apply text-orange-900 font-semibold flex items-center gap-2;
}

.form-group:has(input[id*="attachments"]) label::before {
    content: "📎";
}

.form-group:has(input[id*="attachments"]) .help-block {
    @apply text-orange-800;
}

/* ===== TITLE FIELD - EMPHASIS ===== */
.form-group:has(input[id*="title"]) {
    @apply bg-blue-50 p-4 rounded-lg border-l-4 border-blue-600 border;
}

.form-group:has(input[id*="title"]) input {
    @apply text-lg font-bold;
}

/* ===== RELATION SELECTS - EXPANDED CHECKBOXES ===== */
.form-group:has(select[id*="creator"]),
.form-group:has(select[id*="authors"]),
.form-group:has(select[id*="cities"]),
.form-group:has(select[id*="tags"]) {
    @apply bg-green-50 p-3 rounded-lg border-l-4 border-green-500;
}

.form-group:has(select[id*="creator"]) label::before {
    content: "";
}

.form-group:has(select[id*="authors"]) label::before {
    content: "";
}

.form-group:has(select[id*="cities"]) label::before {
    content: "";
}

.form-group:has(select[id*="tags"]) label::before {
    content: "";
}

/* ===== BODY/CONTENT FIELD ===== */
.form-group:has(textarea[id*="body"]) {
    @apply bg-purple-50 p-4 rounded-lg border-l-4 border-purple-500;
}

.form-group:has(textarea[id*="body"]) textarea {
    @apply min-h-[400px] font-mono text-sm;
}

/* ===== STATUS FIELD ===== */
.form-group:has(select[id*="status"]) {
    @apply bg-indigo-50 p-3 rounded-lg border-l-4 border-indigo-600;
}

.form-group:has(select[id*="status"]) select {
    @apply font-semibold;
}

/* ===== DATE FIELDS ===== */
.form-group:has(input[id*="Date"]),
.form-group:has(input[id*="At"]) {
    @apply bg-gray-50 p-2 rounded-lg;
}

/* Validation States */
.form-control.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    @apply border-red-500 bg-red-50 focus:ring-red-500;
}

.invalid-feedback {
    @apply text-red-600 text-sm mt-2 block font-medium;
}

.valid-feedback {
    @apply text-green-600 text-sm mt-2 block font-medium;
}

/* Breadcrumb/Section Separator */
.form-section > .divider {
    @apply border-t-2 border-gray-200 my-4;
}

/* Responsive */
@media (max-width: 768px) {
    .form-section {
        @apply p-4;
    }

    select[multiple] {
        @apply min-h-[150px];
    }

    .form-group:has(textarea[id*="body"]) textarea {
        @apply min-h-[250px];
    }

    label {
        @apply text-xs;
    }
}

/* Print styles */
@media print {
    .form-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* TinyMCE integration */
.tox-tinymce {
    @apply rounded-lg border border-gray-300;
}

.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-menubar {
    @apply bg-gray-50;
}