@tailwind components;

@layer components {
  .card {
    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
  }
  .card-border {
    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
  }
  .card-header {
    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
  }
  .card-footer {
    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
  }

  [data-theme="blue"] {
    --fo-facility-info-flow-year-bg: color-mix(in srgb, var(--chart-4) 16%, var(--background));
    --fo-facility-info-water-year-bg: color-mix(in srgb, var(--chart-3) 16%, var(--background));
    --fo-facility-info-phosphorus-year-bg: color-mix(in srgb, var(--chart-1) 16%, var(--background));
    --fo-facility-info-flow-summer-bg: color-mix(in srgb, var(--chart-4) 24%, var(--background));
    --fo-facility-info-water-summer-bg: color-mix(in srgb, var(--chart-3) 24%, var(--background));
    --fo-facility-info-phosphorus-summer-bg: color-mix(in srgb, var(--chart-1) 24%, var(--background));
    --fo-facility-info-flow-winter-bg: color-mix(in srgb, var(--chart-4) 32%, var(--background));
    --fo-facility-info-water-winter-bg: color-mix(in srgb, var(--chart-3) 32%, var(--background));
    --fo-facility-info-phosphorus-winter-bg: color-mix(in srgb, var(--chart-1) 32%, var(--background));
    --fo-rain-impact-row-bg: color-mix(in srgb, var(--chart-1) 12%, var(--background));
    --fo-facility-info-header-bg: #eaf3fb;
    --fo-facility-info-header-fg: #647784;
    --fo-facility-info-header-border: #e5e5e5;

    .card-border {
      @apply border-[#d8e3eb] bg-white shadow-blur;
    }
    .card-header {
      @apply border-b-[#d8e3eb];
    }

    .card {
      @apply text-[#4b5563];
    }

    .card.card-border {
      box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06);
    }

    .card.card-border .card.card-border {
      @apply border-[#dde6ed] bg-white;
      box-shadow: none;
    }

    .card.card-border input,
    .card.card-border button[role="combobox"] {
      @apply border-[#d8e3eb] bg-white text-[#737373];
    }

    .card.card-border label {
      @apply text-[#666666];
    }



    

    nav[aria-label="pagination"] li a {
      border-color: transparent !important;
      background-color: transparent !important;
      color: #0a0a0a !important;
    }

    nav[aria-label="pagination"] li a:hover {
      background-color: #f6f6f6 !important;
      color: #0a0a0a !important;
    }

    nav[aria-label="pagination"] li a[aria-current="page"] {
      border-color: #2094fa !important;
      background-color: #2094fa !important;
      color: #fafafa !important;
    }

    nav[aria-label="pagination"] li a[aria-label="Go to previous page"],
    nav[aria-label="pagination"] li a[aria-label="Go to next page"] {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 1px solid #e5e7eb !important;
      color: #666666 !important;
    }
  }

  input[type="file"] {
    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
  }
}