/* Dark-mode compatibility for legacy templates that use fixed light Tailwind
   utility classes or inline page styles without matching dark variants. */
.theme-toggle-button .theme-icon-dark,
.dark .theme-toggle-button .theme-icon-light {
  display: none;
}

.dark .theme-toggle-button .theme-icon-dark {
  display: block;
}

.theme-toggle-button {
  color: #4b5563;
  background: transparent;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle-button:hover {
  color: #111827;
  background: rgba(17, 24, 39, 0.06);
}

.theme-toggle-button svg {
  flex: none;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.theme-toggle-button:active svg {
  transform: scale(0.92);
}

.dark .theme-toggle-button {
  color: #d1d5db;
}

.dark .theme-toggle-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.dark body {
  color: #f3f4f6;
  background-color: #0b0f19;
}

.dark .bg-white,
.dark .bg-gray-50,
.dark .bg-gray-100 {
  background-color: #111827 !important;
}

.dark .bg-red-50,
.dark .bg-red-100,
.dark .bg-pink-50,
.dark .bg-pink-100,
.dark .bg-rose-50,
.dark .bg-rose-100,
.dark .bg-yellow-50,
.dark .bg-yellow-100,
.dark .bg-blue-50,
.dark .bg-blue-100,
.dark .bg-green-50,
.dark .bg-green-100,
.dark .bg-purple-50,
.dark .bg-purple-100,
.dark .bg-indigo-50,
.dark .bg-indigo-100 {
  background-color: rgba(31, 41, 55, 0.82) !important;
}

.dark .text-black,
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-neutral-900,
.dark .text-neutral-800,
.dark .text-zinc-900,
.dark .text-zinc-800 {
  color: #f3f4f6 !important;
}

.dark .text-gray-600,
.dark .text-gray-500,
.dark .text-slate-600,
.dark .text-slate-500,
.dark .text-neutral-600,
.dark .text-neutral-500,
.dark .text-zinc-600,
.dark .text-zinc-500 {
  color: #d1d5db !important;
}

.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300,
.dark .border-slate-100,
.dark .border-slate-200,
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #374151 !important;
}

.dark .hover\:bg-white:hover,
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-100:hover,
.dark .hover\:bg-red-50:hover,
.dark .hover\:bg-pink-50:hover,
.dark .hover\:bg-blue-50:hover,
.dark .hover\:bg-green-50:hover,
.dark .group:hover .group-hover\:bg-white,
.dark .group:hover .group-hover\:bg-gray-100,
.dark .cursor-pointer.hover\:bg-gray-100:hover {
  background-color: #1f2937 !important;
}

.dark .hover\:text-black:hover,
.dark .hover\:text-gray-900:hover,
.dark .hover\:text-gray-800:hover,
.dark .hover\:text-gray-700:hover {
  color: #f9fafb !important;
}

.dark .from-gray-50,
.dark .from-gray-100,
.dark .from-indigo-100,
.dark .from-slate-50,
.dark .from-purple-50,
.dark .from-blue-50 {
  --tw-gradient-from: #111827 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(17, 24, 39, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.dark .via-white,
.dark .via-orange-50 {
  --tw-gradient-to: rgba(17, 24, 39, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #111827 var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.dark .to-white,
.dark .to-gray-100 {
  --tw-gradient-to: #0b0f19 var(--tw-gradient-to-position) !important;
}

.dark input,
.dark textarea,
.dark select {
  background-color: #111827;
  color: #f3f4f6;
  border-color: #374151;
}

.dark pre,
.dark code,
.dark .bgcolor {
  color: #e5e7eb !important;
  background-color: transparent !important;
  border-color: #374151 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #6b7280;
}

.dark .modal-content,
.dark .agreement-modal,
.dark .dialog,
.dark [role="dialog"] {
  background-color: #111827 !important;
  color: #f3f4f6 !important;
  border-color: #374151 !important;
}

.dark .modal-header,
.dark .modal-body,
.dark .modal-body h3,
.dark .agreement-text {
  color: #f3f4f6 !important;
}

.dark .modal-header {
  border-bottom-color: #374151 !important;
}

.dark .modal-close {
  color: #d1d5db !important;
}

.dark .modal-close:hover {
  color: #fff !important;
}

.dark .tooltip-circle {
  color: #f9fafb !important;
  background-color: #374151 !important;
}

.dark .tooltip-circle::after {
  color: #f9fafb !important;
  background-color: #020617 !important;
  border: 1px solid #374151;
}

.dark #deleteModal,
.dark #deleteModal > div,
.dark #deleteModal .bg-white,
.dark #permissionModal > div {
  background-color: #111827 !important;
  color: #f3f4f6 !important;
  border-color: #374151 !important;
}

.dark #deleteModal button.bg-white {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
  border-color: #4b5563 !important;
}

.dark #deleteModal button.bg-white:hover {
  background-color: #374151 !important;
}

.dark #userList li {
  color: #f3f4f6 !important;
}

.dark .user-box {
  background-color: #111827 !important;
  border-color: #374151 !important;
  color: #f3f4f6 !important;
}

.dark .shop-subscription-card {
  background-color: rgba(17, 24, 39, 0.92) !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

.dark .shop-subscription-card:hover {
  background-color: #111827 !important;
}

.dark .shop-subscription-card .text-gray-800,
.dark .shop-subscription-card .text-gray-700 {
  color: #f3f4f6 !important;
}

.dark .shop-subscription-card .text-gray-600,
.dark .shop-subscription-card .text-gray-500,
.dark .shop-subscription-card .text-gray-400 {
  color: #d1d5db !important;
}

.dark .shop-subscription-card .line-through {
  color: #9ca3af !important;
}

.dark .shop-subscription-card .bg-gradient-to-r.from-yellow-500\/5 {
  background-image: linear-gradient(to right, rgba(250, 204, 21, 0.08), rgba(17, 24, 39, 0)) !important;
}

.dark .shop-subscription-card .h-px {
  background-image: linear-gradient(to left, rgba(75, 85, 99, 0.12), rgba(75, 85, 99, 0.26), rgba(75, 85, 99, 0.12)) !important;
}

.dark .shop-subscription-card .text-black {
  color: #f3f4f6 !important;
}

.dark .overview-card-wrapper {
  background-color: rgba(17, 24, 39, 0.78) !important;
  border-color: #4b5563 !important;
  color: #e5e7eb !important;
}

.dark .overview-card-wrapper:hover {
  background-color: #111827 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.35), 0 0 0 1px rgba(96, 165, 250, 0.18) !important;
}

.dark .billing-table {
  background-color: #111827 !important;
  color: #f3f4f6 !important;
}

.dark .billing-table-row:hover {
  background-color: #1f2937 !important;
}

.dark .billing-credit {
  color: #86efac !important;
}

.dark .billing-debit {
  color: #fdba74 !important;
}

.dark .prices-page-shell {
  background-color: #0b0f19 !important;
  background-image: none !important;
}

.dark .prices-page-copy {
  background-color: rgba(17, 24, 39, 0.82) !important;
  border: 1px solid #374151;
  border-radius: 0.75rem;
  color: #e5e7eb !important;
  padding: 1rem;
}

.dark .prices-page-copy a {
  color: #93c5fd !important;
}

.dark .prices-table-wrapper {
  background-color: rgba(17, 24, 39, 0.86) !important;
  border-color: #374151 !important;
}

.dark .prices-table {
  background-color: #111827 !important;
  color: #f3f4f6 !important;
}

.dark .prices-table thead,
.dark .prices-table th {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

.dark .prices-table tbody tr {
  border-color: #374151 !important;
}

.dark .prices-table tbody tr:hover {
  background-color: #1f2937 !important;
}

.dark .prices-table td {
  color: #e5e7eb !important;
  border-color: #374151 !important;
}

.dark .copy-btn {
  color: #f3f4f6 !important;
}

.dark .copy-btn:hover {
  color: #93c5fd !important;
}

.dark .copy-btn svg,
.dark .copy-btn svg path {
  fill: currentColor !important;
  color: inherit !important;
}

.dark svg [stroke="#000"],
.dark svg [stroke="#000000"],
.dark svg [stroke="#333"],
.dark svg [stroke="#333333"],
.dark svg [stroke="#111827"],
.dark svg [stroke="#1f2937"],
.dark svg [stroke="#374151"],
.dark svg [stroke="black"] {
  stroke: #f3f4f6 !important;
}

.dark svg [fill="#000"],
.dark svg [fill="#000000"],
.dark svg [fill="#333"],
.dark svg [fill="#333333"],
.dark svg [fill="#111827"],
.dark svg [fill="#1f2937"],
.dark svg [fill="#374151"],
.dark svg [fill="black"] {
  fill: #f3f4f6 !important;
}

.dark svg[style*="fill: #000000"],
.dark svg[style*="fill:#000000"],
.dark svg[style*="fill: black"],
.dark svg[style*="fill:black"] {
  fill: #f3f4f6 !important;
}

.dark .octicon {
  color: #f3f4f6 !important;
  fill: currentColor !important;
}

.dark .octicon path:not([fill]) {
  fill: currentColor !important;
}