@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import "tailwindcss";

@theme {
  --font-primary: 'Roboto', sans-serif;
  /* --font-grold: 'Grold Rounded', sans-serif; */
  --disabled-alpha: 0.57;
}

/* TODOS: 
  - revisit switch to use tailwind more
  - fix disabled styles on input fields with icon
  - [x] login page (I think @ilovas is working on it(?)) - @harisadam taking this. 
  - tooltip on c-status
  - selected row in the table
  - tooltip with image on the table first cell on mouseover (TODO @harisadam)
  - [x] double button lista/kartya
  - make focus highlight global
  - navigation (TODO @harisadam)
  - ... navigation dropdown (TODO @harisadam)
  - dialog (TODO @harisadam)
  - drawer (TODO @harisadam)
  - image gallery (TODO @harisadam)
  - print view (TODO @harisadam)
*/

@layer base {
  body {
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-bodyCopy);
    font-family: 'Roboto', sans-serif;
  }

  .icon {
    @apply inline-block flex-shrink-0 relative align-middle w-[1em] h-[1em] leading-[1];
  }

  .c-sort__button--active {
    @apply text-violet-500;
  }

  .c-filter__button--active {
    @apply text-violet-500;
  }
}

@layer components {
  /*  The Container */
  .dropzone-previews {
    @apply !flex !flex-col !gap-3 !w-full !mt-6;
  }

  /*  The Row */
  .dropzone-previews .dz-preview {
    @apply !flex !flex-row !items-center !bg-white !border !border-gray-200 !rounded-xl !p-3 !m-0 !min-h-0 !w-full !shadow-sm;
  }

  /* The Thumbnail (Anti-Drag) */
  .dropzone-previews .dz-image {
    @apply !w-16 !h-16 !shrink-0 !rounded-lg !overflow-hidden !bg-gray-50 !pointer-events-none !select-none;
  }

  .dropzone-previews .dz-image img {
    @apply !w-full !h-full !object-cover;
    -webkit-user-drag: none;
    user-drag: none;
  }

  /*  The Content (Anti-Selection) */
  .dropzone-previews .dz-details {
    @apply !grow !px-4 !opacity-100 !static !text-left !min-w-0 !select-none !pointer-events-none;
  }

  .dropzone-previews .dz-filename {
    @apply !text-sm !font-semibold !text-gray-900 !truncate;
  }

  .dropzone-previews .dz-size {
    @apply !text-xs !text-gray-500;
  }

 .dropzone-previews .dz-preview .dz-remove,
  .dropzone-previews .dz-preview .dz-cancel {
    @apply !flex !visible !static !opacity-100 !shrink-0 !no-underline !m-0 !pointer-events-auto;
    transition: opacity 0.3s ease; 
  }

  /*  THE PROCESSING STATE (Force White Background) */
  .dz-processing .dz-remove div, 
  .dz-processing .dz-cancel div {
    @apply !bg-white !border-gray-200 !text-red-600 !shadow-none;
    
    /* Fallback using standard CSS syntax if Tailwind utilities are stubborn */
    background-color: white !important;
  }

  /* The "Ghost" Fade */
  .dz-processing .dz-remove,
  .dz-processing .dz-cancel {
    @apply !opacity-20 !pointer-events-none;
    
    /* Standard CSS important syntax is allowed here */
    filter: none !important;
    cursor: not-allowed !important;
  }

  /*  CLEANUP */
  .dz-success-mark, .dz-error-mark, .dz-progress {
    @apply !hidden !opacity-0 !pointer-events-none !absolute !-z-10;
  }
}

lexxy-editor {
  /*  Bold Styling */
  strong, b, .lexxy-content__bold, [style*="font-weight"] {
    font-weight: 700 !important;
  }

  /* Italic Styling */
  em, i, .lexxy-content__italic, [style*="font-style"] {
    font-style: italic !important;
  }

  /* Underline Styling */
  u, ins, .lexxy-content__underline, [style*="text-decoration"] {
    text-decoration: underline !important;
    text-decoration-line: underline !important;
  }

  /* Combined Bold + Italic on the exact same selection */
  strong em, em strong,
  b i, i b,
  .lexxy-content__bold.lexxy-content__italic,
  strong.lexxy-content__italic,
  em.lexxy-content__bold,
  .lexxy-content__bold em,
  .lexxy-content__italic strong {
    font-weight: 700 !important;
    font-style: italic !important;
  }

  /* Lists & Links */
 ul {
    list-style-type: disc !important;
    padding-inline-start: 1.75rem !important;
  }

  ol {
    list-style-type: decimal !important;
    padding-inline-start: 1.75rem !important;
  }

  li {
    display: list-item !important;
  }

  a {
    color: #2563eb !important;
    text-decoration: underline;
    cursor: pointer !important;
  }
}

/* Restrict Lexxy toolbar for Terms & Conditions */
lexxy-editor[preset="tc_limited"] button[name="strikethrough"],
lexxy-editor[preset="tc_limited"] button[name="quote"],
lexxy-editor[preset="tc_limited"] button[name="code"],
lexxy-editor[preset="tc_limited"] button[name="table"],
lexxy-editor[preset="tc_limited"] button[name="horizontal-rule"],
lexxy-editor[preset="tc_limited"] button[name="highlight"],
lexxy-editor[preset="tc_limited"] button[name="format"],
lexxy-editor[preset="tc_limited"] details {
  display: none !important;
}