/* Adminita - Django Admin Theme using Tailwind CSS v4 */

@import "tailwindcss";

/* Enable class-based dark mode */
@custom-variant dark (&:where(.dark, .dark *));

/* Theme customization for Adminita */
@theme {
  /* Primary colors - Blue theme for admin */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;

  /* Custom gray shades for better dark mode */
  --color-gray-750: #2d3748;
}

/* Custom component styles */
@layer components {

  /* Django admin form field overrides */
  .admin-input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors;
  }

  .admin-textarea {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors min-h-24;
  }

  .admin-select {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors;
  }

  .admin-checkbox {
    @apply rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500 focus:ring-offset-0;
  }

  .admin-radio {
    @apply border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500 focus:ring-offset-0;
  }

  .admin-link {
    @apply text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 underline transition-colors;
  }

  .admin-btn-primary {
    @apply inline-flex items-center px-6 py-2.5 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500;
  }

  .admin-btn-secondary {
    @apply inline-flex items-center px-4 py-2.5 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors;
  }

  .admin-btn-danger {
    @apply inline-flex items-center px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors;
  }

  .admin-btn-outline {
    @apply inline-flex items-center px-4 py-2.5 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium transition-colors;
  }

  .admin-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
  }

  .errorlist {
    @apply text-red-600 dark:text-red-400 text-sm mt-1;
  }

  .errorlist li {
    @apply mb-1;
  }

  .help,
  .helptext {
    @apply text-sm text-gray-600 dark:text-gray-400 mt-1 block;
  }

  /* Django admin specific class mappings */
  .vTextField,
  .vURLField,
  .vIntegerField,
  .vBigIntegerField,
  .vPositiveIntegerField,
  .vSmallIntegerField,
  .vEmailField {
    @apply max-w-lg px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors;
  }

  .vLargeTextField,
  .vXMLLargeTextField {
    @apply max-w-3xl px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors min-h-24;
  }

  select:not([multiple]) {
    @apply max-w-md px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors;
  }

  input[type="checkbox"]:not(.action-select) {
    @apply rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500 focus:ring-offset-0;
  }

  input[type="radio"] {
    @apply border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500 focus:ring-offset-0;
  }

  .action-select {
    @apply rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500 focus:ring-offset-0;
  }

  .submit-row {
    @apply flex items-center justify-between bg-gray-50 dark:bg-gray-800 px-6 py-4 rounded-lg border border-gray-200 dark:border-gray-700;
  }

  .deletelink {
    @apply inline-flex items-center px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors;
  }

  .addlink {
    @apply inline-flex items-center px-6 py-2.5 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500;
  }

  .changelink,
  .viewlink {
    @apply text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 underline transition-colors;
  }
}

/* Result list table styling */
@layer components {
  #result_list {
    @apply w-full border-collapse;
  }

  #result_list thead th {
    @apply px-4 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700;
  }

  #result_list thead th a {
    @apply text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 no-underline;
  }

  #result_list tbody tr {
    @apply border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors;
  }

  #result_list tbody td {
    @apply px-4 py-3 text-sm text-gray-900 dark:text-gray-100;

  }

  #result_list tbody td a {
    @apply text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 no-underline;
  }

  /* Force admin title column to be left-aligned */
  #result_list tbody th,
  #result_list tbody th.field-title,
  #result_list tbody th a {
    text-align: left !important;
    justify-content: flex-start !important;
  }

  #result_list tbody th a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start !important;
  }


  /* Action checkboxes column */
  #result_list .action-checkbox {
    @apply w-10;
  }

  /* Make thumbnail images smaller */
  #result_list img {
    @apply max-w-[60px] max-h-[60px] rounded;
  }

  /* Inline form thumbnails (TabularInline, StackedInline) */
  .inline-related img,
  .tabular td img {
    @apply max-h-[80px] w-auto rounded;
  }

  /* Stacked inline thumbnails */
  .inline-stacked img {
    @apply max-h-[100px] w-auto rounded;
  }

  /* Readonly field images in change forms */
  .readonly img,
  .field-box img {
    @apply max-h-[120px] w-auto rounded;
  }

  /* Related widget wrapper (add/edit/delete icons next to ForeignKey fields) */
  .related-widget-wrapper {
    @apply flex items-center gap-2;
  }

  .related-widget-wrapper select {
    @apply flex-1;
  }

  .related-widget-wrapper-link {
    @apply inline-flex items-center justify-center w-6 h-6 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400 transition-colors;
  }

  .related-widget-wrapper-link img {
    @apply w-4 h-4;
  }

  /* Django admin date/time picker icons */
  .datetimeshortcuts {
    @apply inline-flex items-center gap-1 ml-2;
  }

  .datetimeshortcuts a {
    @apply text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300;
  }

  .datetimeshortcuts img {
    @apply inline-block w-4 h-4;
  }

  /* File input styling */
  input[type="file"] {
    @apply block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 dark:file:bg-gray-700 dark:file:text-primary-400 file:cursor-pointer hover:file:bg-primary-100 dark:hover:file:bg-gray-600 file:transition-colors;
  }


  /* Hide TinyMCE metadata / helper blocks under ProseEditorField */
  .tox-tinymce+div {
    display: none !important;
  }

  /* Hide django-prose-editor toolbar labels/metadata */
  .ProseMirror-menubar-wrapper .ProseMirror-menuitem-label,
  .prose-editor-wrapper [class*="format_"],
  .prose-editor [class*="format_"],
  [data-prose-editor] [class*="format_"],
  .field-description [class*="format_"],
  .form-row [class*="format_"] {
    display: none !important;
  }

  /* Alternative: hide any stray text nodes that look like toolbar labels */
  .form-row>div:not([class]) {
    font-size: 0;
  }

  .form-row>div:not([class]) * {
    font-size: 0.875rem;
  }

  /* Django admin calendar widget styling */
  .calendarbox,
  .clockbox {
    @apply bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg z-50;
  }

  .calendar {
    @apply bg-white dark:bg-gray-800;
  }

  .calendar caption {
    @apply bg-primary-600 text-white font-semibold py-2 px-3;
  }

  .calendar th {
    @apply text-xs font-medium text-gray-600 dark:text-gray-400 py-1;
  }

  .calendar td {
    @apply text-center;
  }

  .calendar td a {
    @apply block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:bg-primary-100 dark:hover:bg-primary-900 rounded;
  }

  .calendar td.today a {
    @apply bg-primary-500 text-white font-bold;
  }

  .calendar-shortcuts {
    @apply bg-gray-50 dark:bg-gray-750 px-3 py-2 border-t border-gray-200 dark:border-gray-700;
  }

  .calendar-shortcuts a {
    @apply text-sm text-primary-600 dark:text-primary-400 hover:underline mr-3;
  }

  .calendar-cancel {
    @apply bg-gray-50 dark:bg-gray-750 px-3 py-2 border-t border-gray-200 dark:border-gray-700 text-center;
  }

  .calendar-cancel a {
    @apply text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900;
  }

  /* Clock widget */
  .clockbox h2 {
    @apply bg-primary-600 text-white font-semibold py-2 px-3;
  }

  .clockbox .timelist {
    @apply py-2;
  }

  .clockbox .timelist li a {
    @apply block px-3 py-1 text-sm text-gray-700 dark:text-gray-300 hover:bg-primary-100 dark:hover:bg-primary-900;
  }

  /* Date/time shortcut icons */
  .datetimeshortcuts a {
    @apply text-primary-600 dark:text-primary-400;
  }

  .date-icon,
  .clock-icon {
    @apply inline-block w-4 h-4 cursor-pointer;
  }

  /* Boolean field icons */
  .field-__str__ img,
  img[src*="icon-yes"],
  img[src*="icon-no"],
  img[src*="icon-unknown"] {
    @apply w-4 h-4 inline-block;
  }

  /* Many-to-many selector (filter_horizontal/filter_vertical) */
  .selector {
    @apply flex gap-2;
  }

  .selector select {
    @apply min-h-[150px] border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700;
  }

  .selector-chooser {
    @apply flex flex-col justify-center gap-1;
  }

  .selector-chooser a {
    @apply px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-600;
  }

  /* Action bar above results */
  .actions {
    @apply flex items-center gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700;
  }

  .actions select {
    @apply max-w-xs;
  }

  .actions button {
    @apply px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-colors;
  }

  /* Sortable column indicators */
  th.sorted a {
    @apply font-bold;
  }

  th.ascending a::after {
    content: " ▲";
    @apply text-xs;
  }

  th.descending a::after {
    content: " ▼";
    @apply text-xs;
  }

  /* INLINE FORMS */
  .inline-related input[type="text"],
  .inline-related input[type="number"],
  .inline-related input[type="url"],
  .inline-related input[type="email"],
  .inline-related select,
  .inline-related textarea {
    @apply w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:text-white;
  }

  .inline-related input[type="checkbox"] {
    @apply w-4 h-4 text-primary-600 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-primary-500;
  }

  .collapse-icon.rotate-180 {
    transform: rotate(180deg);
  }

  .empty-form {
    display: none;
  }

  .inline-related.marked-for-deletion {
    opacity: 0.5;
    background-color: rgb(254 242 242) !important;
  }

  .dark .inline-related.marked-for-deletion {
    background-color: rgb(127 29 29 / 0.3) !important;
  }


}

/* ================================================
   FIELDSET LABEL STYLING
   Style Django's default label_tag output
   ================================================ */

/* Style labels rendered by Django's label_tag */
fieldset.module label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
}

/* Inline labels (for multi-field rows) */
fieldset.module label.inline {
  @apply inline-block mr-2;
}

/* Required field indicator */
fieldset.module label .required {
  @apply text-red-600 dark:text-red-400;
}

/* ================================================
   DATE PICKER CALENDAR FIX FOR DARK MODE
   ================================================ */
.calendarbox,
.calendarnav-previous,
.calendarnav-next,
.calendar caption,
.calendar td,
.calendar th {
  color: #1f2937 !important;
}

.calendar td a {
  color: #1f2937 !important;
}

.calendar td a:hover {
  background-color: #3b82f6 !important;
  color: white !important;
}

/* Calendar shortcut links (Yesterday, Today, Tomorrow, Cancel) */
.calendar-shortcuts a,
.calendar-cancel a {
  color: #3b82f6 !important;
}