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

[x-cloak] { display: none !important; }

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.capture-date-badge .capture-retake-label { display: none; }
.capture-date-badge:not(:disabled):hover .capture-date,
.capture-date-badge:not(:disabled):focus-visible .capture-date { display: none; }
.capture-date-badge:not(:disabled):hover .capture-retake-label,
.capture-date-badge:not(:disabled):focus-visible .capture-retake-label { display: inline; }
@media (hover: none) {
  .capture-date-badge:not(:disabled) .capture-retake-label { display: inline; }
}

.dmca-status { @apply inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium; }
.dmca-status-neutral { @apply bg-gray-100 text-gray-700; }
.dmca-status-positive { @apply bg-emerald-50 text-emerald-800; }
.dmca-status-attention { @apply bg-amber-50 text-amber-800; }
.dmca-status-response { @apply bg-blue-50 text-blue-800; }
/* The document scrolls; queues and column headings share its sticky header. */
.dmca-table-toolbar { position: sticky; top: 0; z-index: 10; background: #f3f4f6; padding: 12px 0; }
.dmca-grid { table-layout: fixed; min-width: 1380px; }
.dmca-grid .dmca-check-column { width: 40px; }
.dmca-grid .dmca-store-column { width: 280px; }
.dmca-grid .dmca-contact-column { width: 200px; }
.dmca-grid .dmca-evidence-column { width: 135px; }
.dmca-grid .dmca-theme-column { width: 100px; }
.dmca-grid .dmca-stage-column { width: 175px; }
.dmca-grid[data-stage="outreach"] .dmca-stage-column { width: 320px; }
.dmca-grid .dmca-move-column { width: 380px; }
.dmca-grid[data-stage="outreach"] { min-width: 1650px; }
.dmca-grid thead th { position: sticky; top: var(--dmca-toolbar-height, 64px); z-index: 5; background: #f9fafb; }
.dmca-grid td { vertical-align: top; overflow-wrap: anywhere; }
.dmca-store-domain { overflow-wrap: anywhere; }
.dmca-grid dialog { max-width: min(32rem, calc(100vw - 32px)); max-height: 90vh; overflow: auto; }
.dmca-grid td:nth-child(2), .dmca-grid td:nth-child(3) { padding-top: 16px; }
.dmca-grid [data-dmca-move-target="fields"] { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; min-width: 0; max-width: 100%; }
.dmca-grid [data-dmca-move-target="fields"] > [role="radiogroup"] { grid-column: 1; grid-row: 1; }
.dmca-grid [data-dmca-move-target="confirm"] { grid-column: 2; grid-row: 1; justify-self: start; font-size: 12px; }
.dmca-grid [role="radiogroup"] span { font-size: 12px; padding: 6px 8px; }
.dmca-move-details { display: contents; }
.dmca-grid .dmca-move-details { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: start; gap: 8px; min-width: 0; }
.dmca-grid .dmca-move-details:not(:has(input:not([hidden]):not([disabled]), select:not([hidden]):not([disabled]))) { display: none; }
.dmca-grid .dmca-move-details input[name="note"] { width: 150px; flex: 1; }
.dmca-grid [data-dmca-move-target="blockers"]:empty { display: none; }
.dmca-reply-quote { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.dmca-email-dialog { width: min(820px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; }
.dmca-grid dialog::backdrop, .dmca-email-dialog::backdrop { background: rgb(17 24 39 / .35); }
@media (max-width: 2399px) {
  .dmca-grid:is([data-stage="new"], [data-stage="review"]) .dmca-move-column { width: 450px; }
}
@media (min-width: 2400px) {
  .dmca-grid .dmca-store-column { width: 340px; }
  .dmca-grid .dmca-contact-column { width: 240px; }
  .dmca-grid .dmca-stage-column { width: 220px; }
  .dmca-grid[data-stage="outreach"] .dmca-stage-column { width: 380px; }
  .dmca-grid .dmca-move-column { width: 790px; }
  .dmca-grid [data-dmca-move-target="fields"] { display: flex; flex-wrap: nowrap; }
  .dmca-grid .dmca-move-details { display: contents; }
  .dmca-grid .dmca-move-details input[name="note"] { width: 120px; flex: none; }
  .dmca-grid [data-dmca-move-target="fields"]:has([data-dmca-move-target="purchaseFields"]:not([hidden])) { display: grid; }
  .dmca-grid [data-dmca-move-target="fields"]:has([data-dmca-move-target="purchaseFields"]:not([hidden])) .dmca-move-details { display: flex; }
}
@media (min-width: 3200px) {
  .dmca-grid:has([data-dmca-move-target="purchaseFields"]:not([hidden])) .dmca-move-column { width: 1090px; }
  .dmca-grid [data-dmca-move-target="fields"]:has([data-dmca-move-target="purchaseFields"]:not([hidden])) { display: flex; }
  .dmca-grid [data-dmca-move-target="fields"]:has([data-dmca-move-target="purchaseFields"]:not([hidden])) .dmca-move-details { display: contents; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 .percent-change{
  display: block;
 }