@import "tailwindcss";
@import "trix/dist/trix.css";

@layer components {
  .home-page {
    background: #0d0d0d;
    color: #f2f0eb;
  }

  .home-page select {
    color-scheme: dark;
  }

  .home-page select option {
    background: #121212;
    color: #f2f0eb;
  }

  .public-page:not(.home-page) {
    background: #0d0d0d;
    color: #f2f0eb;
  }

  .public-page:not(.home-page) > header,
  .public-page:not(.home-page) .bg-white,
  .public-page:not(.home-page) .bg-slate-50,
  .public-page:not(.home-page) .bg-slate-100,
  .public-page:not(.home-page) .bg-slate-200 {
    background-color: #1c1c1c !important;
  }

  .public-page:not(.home-page) > header {
    border-color: rgb(255 255 255 / 0.1) !important;
    color: #f2f0eb;
  }

  .public-page:not(.home-page) > header .text-slate-950,
  .public-page:not(.home-page) > header .text-slate-700,
  .public-page:not(.home-page) > header .text-slate-600,
  .public-page:not(.home-page) > header .text-slate-500,
  .public-page:not(.home-page) > header [class~="text-[#343638]"],
  .admin-page > header [class~="text-[#202223]"] {
    color: #f2f0eb !important;
  }

  .public-page:not(.home-page) > header .bg-white {
    border-color: rgb(255 255 255 / 0.1) !important;
  }

  .public-page:not(.home-page) .text-slate-950,
  .public-page:not(.home-page) .text-slate-900,
  .public-page:not(.home-page) .text-slate-800,
  .public-page:not(.home-page) .text-slate-700 {
    color: #f2f0eb !important;
  }

  .public-page:not(.home-page) .text-slate-600,
  .public-page:not(.home-page) .text-slate-500,
  .public-page:not(.home-page) .text-slate-400 {
    color: rgb(242 240 235 / 0.55) !important;
  }

  .public-page:not(.home-page) [class~="border-slate-200"],
  .public-page:not(.home-page) [class~="border-slate-300"],
  .public-page:not(.home-page) [class~="border-slate-100"] {
    border-color: rgb(255 255 255 / 0.1) !important;
  }

  .public-page:not(.home-page) input,
  .public-page:not(.home-page) select,
  .public-page:not(.home-page) textarea {
    border-color: #64748b;
    background: #292929;
    color: #f2f0eb;
    color-scheme: dark;
  }

  .public-page:not(.home-page) input::placeholder,
  .public-page:not(.home-page) textarea::placeholder {
    color: rgb(242 240 235 / 0.5);
  }

  .public-page:not(.home-page) input:focus,
  .public-page:not(.home-page) select:focus,
  .public-page:not(.home-page) textarea:focus {
    border-color: #e6a04a;
    box-shadow: 0 0 0 2px rgb(230 160 74 / 0.25);
    outline: none;
  }

  .public-page [class~="bg-[#ef002a]"] {
    background-color: #e6a04a !important;
    color: #17130e !important;
  }

  .public-page [class~="text-[#ef002a]"] {
    color: #e6a04a !important;
  }

  .admin-page {
    background: #0d0d0d !important;
    color: #f2f0eb;
  }

  .admin-page > header,
  .admin-page main .bg-white,
  .admin-page main .bg-slate-50,
  .admin-page main .bg-slate-100 {
    background-color: #1c1c1c !important;
    border-color: rgb(255 255 255 / 0.1) !important;
  }

  .admin-page .text-slate-950,
  .admin-page .text-slate-900,
  .admin-page .text-slate-800,
  .admin-page .text-slate-700,
  .admin-page main .text-slate-950 {
    color: #f2f0eb !important;
  }

  .admin-page .text-slate-600,
  .admin-page .text-slate-500,
  .admin-page .text-slate-400 {
    color: rgb(242 240 235 / 0.55) !important;
  }

  .admin-page main [class~="text-slate-950"],
  .admin-page main [class~="text-slate-900"],
  .admin-page main [class~="text-slate-800"],
  .admin-page main [class~="text-slate-700"] {
    color: #f2f0eb !important;
  }

  .admin-page main [class~="text-slate-600"],
  .admin-page main [class~="text-slate-500"],
  .admin-page main [class~="text-slate-400"] {
    color: rgb(242 240 235 / 0.65) !important;
  }

  .admin-page main [class~="text-blue-950"],
  .admin-page main [class~="text-blue-900"] {
    color: #dbeafe !important;
  }

  .admin-page main [class~="bg-blue-50"] {
    background-color: rgb(30 58 138 / 0.35) !important;
    border-color: rgb(96 165 250 / 0.35) !important;
  }

  .admin-page main [class~="bg-red-50"] {
    background-color: rgb(127 29 29 / 0.35) !important;
    border-color: rgb(248 113 113 / 0.35) !important;
  }

  .admin-page main [class~="text-red-700"],
  .admin-page main [class~="text-red-600"] {
    color: #fca5a5 !important;
  }

  .admin-page main tbody tr:hover,
  .admin-page main tbody tr:focus-within {
    background-color: #303233 !important;
  }

  .admin-page main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .admin-page main select,
  .admin-page main textarea,
  .admin-page main .ts-control,
  .admin-page main trix-editor {
    border-color: #94a3b8;
    background: #ffffff;
    color: #0f172a;
    color-scheme: light;
  }

  .admin-page main .admin-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .admin-page main .admin-form select {
    min-height: 2.75rem;
    border-radius: 0.75rem;
    padding: 0.625rem 0.75rem;
  }

  .admin-page main .admin-form textarea {
    border-radius: 0.75rem;
    padding: 0.625rem 0.75rem;
  }

  .admin-page main .admin-form .ts-control {
    min-height: 2.75rem;
    border-color: #94a3b8;
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 0.625rem 0.75rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
  }

  .admin-form .ts-wrapper.focus .ts-control {
    border-color: #ef002a;
    box-shadow: 0 0 0 3px rgb(239 0 42 / 0.12);
  }

  .admin-form .ts-dropdown {
    z-index: 50;
    border-color: #cbd5e1;
    border-radius: 0.75rem;
    overflow: hidden;
  }

  .admin-form .ts-dropdown .dropdown-input {
    border-color: #cbd5e1;
    border-radius: 0.5rem;
    margin: 0.5rem;
    width: calc(100% - 1rem);
  }

  .admin-form .ts-dropdown .option.active {
    background: #fff1f2;
    color: #be123c;
  }

  .admin-form input:not([type="checkbox"]):not([type="file"]):focus,
  .admin-form select:focus,
  .admin-form textarea:focus,
  .admin-form trix-editor:focus {
    border-color: #ef002a;
    box-shadow: 0 0 0 3px rgb(239 0 42 / 0.12);
    outline: none;
  }

  .admin-form textarea,
  .admin-form trix-editor {
    resize: both;
    overflow: auto;
  }

  .admin-form trix-toolbar {
    border: 1px solid #94a3b8;
    border-bottom: 0;
    border-radius: 0.75rem 0.75rem 0 0;
    background: #f8fafc;
    padding: 0.5rem;
  }

  .admin-form trix-toolbar .trix-button-group {
    margin-bottom: 0;
    border-color: #cbd5e1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #ffffff;
  }

  .admin-form trix-toolbar .trix-button {
    border-bottom: 0;
    border-color: #e2e8f0;
    color: #334155;
  }

  .admin-form trix-toolbar .trix-button:hover,
  .admin-form trix-toolbar .trix-button.trix-active {
    background: #fff1f2;
    color: #be123c;
  }

  .admin-form trix-editor {
    min-height: 20rem;
    border-radius: 0 0 0.75rem 0.75rem;
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    line-height: 1.75;
  }

  .admin-form trix-editor h1 {
    margin: 1.25rem 0 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
  }

  .admin-form trix-editor ul,
  .admin-form trix-editor ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
  }

  .admin-form trix-editor blockquote {
    margin: 1rem 0;
    border-left: 3px solid #ef002a;
    padding-left: 1rem;
    color: #475569;
  }

  aside summary::-webkit-details-marker {
    display: none;
  }

  aside details[open] > summary svg {
    transform: rotate(180deg);
  }

  .specification-row {
    transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }

  .specification-row.is-dragging {
    opacity: 0.55;
    border-color: #ef002a;
    box-shadow: 0 8px 20px rgb(15 23 42 / 0.12);
    transform: scale(1.01);
  }

  .specification-row.is-drop-target {
    border-color: #ef002a;
    transform: translateY(3px);
  }

  .specification-drag-handle:active {
    cursor: grabbing;
  }

  .admin-table-row {
    transition: filter 160ms ease;
  }

  .admin-table-row:hover > td,
  .admin-table-row:focus > td {
    background-color: rgb(255 241 242 / 0.72);
    box-shadow: inset 0 1px 0 rgb(239 0 42 / 0.5), inset 0 -1px 0 rgb(239 0 42 / 0.5);
  }

  .admin-table-row:hover > td:first-child,
  .admin-table-row:focus > td:first-child {
    box-shadow: inset 3px 0 0 #ef002a, inset 0 1px 0 rgb(239 0 42 / 0.5), inset 0 -1px 0 rgb(239 0 42 / 0.5);
  }

  .admin-table-row:hover > td:last-child,
  .admin-table-row:focus > td:last-child {
    box-shadow: inset -3px 0 0 #ef002a, inset 0 1px 0 rgb(239 0 42 / 0.5), inset 0 -1px 0 rgb(239 0 42 / 0.5);
  }
}