/* Merchant portal theme tokens & shared surfaces */
:root {
  --portal-bg: #f8fafc;
  --portal-surface: #ffffff;
  --portal-surface-muted: #f1f5f9;
  --portal-border: #e2e8f0;
  --portal-text: #0f172a;
  --portal-text-muted: #64748b;
  --portal-sidebar: #ffffff;
  --portal-primary: #4f46e5;
  --portal-primary-hover: #6366f1;
  --portal-primary-ring: rgb(99 102 241 / 0.45);
  --portal-danger: #dc2626;
  --portal-danger-hover: #ef4444;
}

html.dark {
  --portal-bg: #020617;
  --portal-surface: #0f172a;
  --portal-surface-muted: #1e293b;
  --portal-border: #334155;
  --portal-text: #f1f5f9;
  --portal-text-muted: #94a3b8;
  --portal-sidebar: #0f172a;
  --portal-primary-ring: rgb(129 140 248 / 0.35);
}

html {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

.portal-card {
  background-color: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
}
html.dark .portal-card {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.2);
}

.portal-input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--portal-border);
  background-color: var(--portal-surface);
  color: var(--portal-text);
  padding: 0.5rem 0.75rem;
}
.portal-input:focus {
  outline: 2px solid var(--portal-primary-ring);
  border-color: var(--portal-primary);
}

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

/* Skeleton loaders (async form fields) */
.portal-skeleton-line {
  background: linear-gradient(
    90deg,
    var(--portal-surface-muted) 0%,
    rgb(226 232 240 / 0.9) 50%,
    var(--portal-surface-muted) 100%
  );
  background-size: 200% 100%;
  animation: portal-shimmer 1.2s ease-in-out infinite;
}
html.dark .portal-skeleton-line {
  background: linear-gradient(
    90deg,
    rgb(30 41 59) 0%,
    rgb(51 65 85) 50%,
    rgb(30 41 59) 100%
  );
  background-size: 200% 100%;
}
@keyframes portal-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Shared action buttons */
.portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}
.portal-btn:focus-visible {
  outline: 2px solid var(--portal-primary-ring);
  outline-offset: 2px;
}
.portal-btn svg {
  flex-shrink: 0;
}

.portal-btn--md {
  padding: 0.625rem 1rem;
}
.portal-btn--sm {
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
}
.portal-btn--block {
  width: 100%;
}

.portal-btn--primary {
  background-color: var(--portal-primary);
  color: #fff;
  box-shadow: 0 1px 2px 0 rgb(79 70 229 / 0.25);
}
.portal-btn--primary:hover:not(:disabled) {
  background-color: var(--portal-primary-hover);
}
.portal-btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.portal-btn--secondary {
  background-color: var(--portal-surface);
  color: rgb(55 65 81);
  border: 1px solid var(--portal-border);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
}
.portal-btn--secondary:hover:not(:disabled) {
  background-color: var(--portal-surface-muted);
}
html.dark .portal-btn--secondary {
  color: rgb(226 232 240);
}

.portal-btn--on-accent {
  background-color: rgb(255 255 255 / 0.18);
  color: #fff;
  box-shadow: none;
}
.portal-btn--on-accent:hover:not(:disabled) {
  background-color: rgb(255 255 255 / 0.28);
}

.portal-btn--on-accent-solid {
  background-color: #fff;
  color: var(--portal-primary);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
}
.portal-btn--on-accent-solid:hover:not(:disabled) {
  background-color: rgb(238 242 255);
}

.portal-btn--danger {
  background-color: var(--portal-danger);
  color: #fff;
  box-shadow: 0 1px 2px 0 rgb(220 38 38 / 0.25);
}
.portal-btn--danger:hover:not(:disabled) {
  background-color: var(--portal-danger-hover);
}

.portal-btn--danger-outline {
  background-color: #fff;
  color: var(--portal-danger);
  border: 1px solid rgb(254 202 202);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
}
.portal-btn--danger-outline:hover:not(:disabled) {
  background-color: rgb(254 242 242);
  border-color: rgb(252 165 165);
}
html.dark .portal-btn--danger-outline {
  background-color: rgb(127 29 29 / 0.15);
  border-color: rgb(248 113 113 / 0.35);
  color: rgb(252 165 165);
}
html.dark .portal-btn--danger-outline:hover:not(:disabled) {
  background-color: rgb(127 29 29 / 0.28);
}

.portal-btn--warning {
  background-color: #ea580c;
  color: #fff;
  box-shadow: 0 1px 2px 0 rgb(234 88 12 / 0.3);
}
.portal-btn--warning:hover:not(:disabled) {
  background-color: #f97316;
}
.portal-btn--warning:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Smooth theme transition on shell elements */
body,
aside,
header,
.portal-card {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}

/* Dark mode: auto-adapt common Tailwind patterns in portal content */
.dark main .bg-white {
  background-color: rgb(15 23 42 / 0.92) !important;
}
.dark main .bg-gray-50 {
  background-color: rgb(30 41 59 / 0.5) !important;
}
.dark main .bg-gray-100 {
  background-color: rgb(51 65 85 / 0.5) !important;
}
.dark main .border-gray-100,
.dark main .border-gray-200 {
  border-color: rgb(51 65 85 / 0.65) !important;
}
.dark main .text-gray-900 {
  color: rgb(241 245 249) !important;
}
.dark main .text-gray-800 {
  color: rgb(226 232 240) !important;
}
.dark main .text-gray-700 {
  color: rgb(203 213 225) !important;
}
.dark main .text-gray-600 {
  color: rgb(148 163 184) !important;
}
.dark main .text-gray-500 {
  color: rgb(100 116 139) !important;
}
.dark main .hover\:bg-gray-50:hover {
  background-color: rgb(30 41 59 / 0.8) !important;
}
.dark main .hover\:bg-gray-100:hover {
  background-color: rgb(51 65 85 / 0.6) !important;
}
.dark main thead.bg-gray-50 {
  background-color: rgb(30 41 59 / 0.8) !important;
}
.dark main .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(51 65 85 / 0.5);
}
.dark main input,
.dark main select,
.dark main textarea {
  background-color: rgb(15 23 42);
  border-color: rgb(71 85 105);
  color: rgb(241 245 249);
}
.dark main code.bg-gray-100 {
  background-color: rgb(51 65 85 / 0.6) !important;
  color: rgb(226 232 240) !important;
}