@import "tailwindcss";
@plugin "daisyui" {
  themes: corporate --default, business --prefersDark;
}
@source "../../templates/**/*.html";
@source "../../../attire_report_steps/templates/**/*.html";
@source "../../../assets_in_locations/templates/**/*.html";
@source "../../../attire_service_checks/templates/**/*.html";
@source "../../../attire_users/templates/**/*.html";
@source "../../../attire_reports/templates/**/*.html";
@source "../../../attire_assets/templates/**/*.html";

/* Custom Attire-specific styles that don't map to Tailwind utilities */
@layer components {
  /* Tire drawing styles */
  .tire_button {
    @apply min-w-[40px] min-h-[50px];
  }
  .tire_old,
  .tire_new {
    @apply bg-neutral text-neutral-content border-black;
  }
  .btn_tire_empty,
  .btn_tire_empty:focus,
  .btn_tire_empty:active {
    @apply bg-neutral text-neutral-content border-black;
  }
  .btn_tire_empty:hover {
    @apply bg-base-300 border-base-content/50;
  }
  .tire_hidden {
    @apply invisible min-w-[1px];
  }
  .tiredraw {
    @apply text-center;
  }
  .tire_button.tiredraw {
    @apply max-w-[32px] w-8 p-1 h-12;
  }
  .tire_mm.tiredraw {
    @apply text-base-content/70 text-xs;
  }

  /* Inspection traffic lights */
  .inspection_lights {
    @apply bg-black rounded shadow-md overflow-hidden p-0 pb-1 w-[19px];
  }
  .inspection_lights span {
    @apply rounded-full block h-[11px] mt-1 mx-auto opacity-20 w-[13px];
  }
  .i_red { @apply bg-red-500; }
  .i_orange { @apply bg-orange-400; }
  .i_green { @apply bg-green-300; }
  .inspection_lights span.active { @apply opacity-100; }
  .inspection_lights .i_red.active { box-shadow: 0 0 10px red; }
  .inspection_lights .i_orange.active { box-shadow: 0 0 10px orange; }
  .inspection_lights .i_green.active { box-shadow: 0 0 10px #80ff80; }

  /* Quality control radio buttons */
  .quality_control .radio_container {
    @apply block relative pl-9 mb-3 cursor-pointer text-xl select-none;
  }
  .quality_control .radio_container input {
    @apply absolute opacity-0;
  }
  .quality_control .checkmark {
    @apply absolute top-2 left-1 h-6 w-6 bg-white border border-base-300 rounded-full;
  }
  .quality_control .radio_container:hover input ~ .checkmark {
    @apply bg-base-300;
  }
  .quality_control .radio_container input:checked ~ .checkmark {
    @apply bg-primary;
  }
  .quality_control .radio_container input:checked ~ .checkmark.success {
    @apply bg-success;
  }
  .quality_control .radio_container input:checked ~ .checkmark.danger {
    @apply bg-error;
  }
  .quality_control .checkmark:after {
    content: "";
    @apply absolute hidden;
  }
  .quality_control .radio_container input:checked ~ .checkmark:after {
    @apply block;
  }
  .quality_control .radio_container .checkmark:after {
    @apply top-[7px] left-[7px] w-[9px] h-[9px] rounded-full bg-white;
  }

  /* Spinner/loader: daisyUI loading component is now used */

  /* Axle background for tire tables */
  td.axle {
    background-image: url("{{ STATIC_URL }}images/attire/axle_bg.png");
    background-repeat: repeat-x;
  }
  td.axle_side_LEFT { @apply text-left; }
  td.axle_side_RIGHT { @apply text-right; }

  /* Responsive table for mobile */
  @media only screen and (max-width: 640px) {
    #no_more_tables1 table,
    #no_more_tables1 thead,
    #no_more_tables1 tbody,
    #no_more_tables1 th,
    #no_more_tables1 td,
    #no_more_tables1 tr { @apply block; }
    #no_more_tables1 thead tr { @apply absolute -top-[9999px] -left-[9999px]; }
    #no_more_tables1 tr { @apply border border-base-300; }
    #no_more_tables1 td {
      @apply border-none border-b border-base-200 relative pl-[50%] whitespace-normal text-left;
    }
    #no_more_tables1 td:before {
      @apply absolute top-1.5 left-1.5 w-[45%] pr-2.5 whitespace-nowrap text-left font-bold;
    }
  }
}