/* CryptoGateway — Shadcn-consistent Global Styles
   All colors reference CSS custom properties from the active theme.
   This ensures every view, panel, and component stays in sync. */

/* ===== RESET / BASE ===== */
*, *::before, *::after {
    border-color: rgb(var(--card-border));
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.011em;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    color: rgb(var(--foreground));
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.025em;
    color: rgb(var(--foreground));
}
h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3, h4 { font-weight: 600; }

.text-sm { line-height: 1.43; }
.text-xs { line-height: 1.5; letter-spacing: 0.01em; }

/* ===== TEXT COLOR OVERRIDES — replace hardcoded grays with theme tokens ===== */
.text-gray-900,
.text-zinc-900,
.text-slate-900 {
    color: rgb(var(--foreground)) !important;
}
.dark .text-gray-100,
.dark .text-zinc-100,
.dark .text-slate-100 {
    color: rgb(var(--foreground)) !important;
}
.dark .text-gray-900,
.dark .text-zinc-900,
.dark .text-slate-900 {
    color: rgb(var(--foreground)) !important;
}
.text-gray-500,
.text-gray-400,
.text-zinc-500,
.text-zinc-400,
.text-slate-500,
.text-slate-400 {
    color: rgb(var(--muted-fg)) !important;
}
.dark .text-gray-500,
.dark .text-gray-400,
.dark .text-gray-300,
.dark .text-zinc-500,
.dark .text-zinc-400,
.dark .text-zinc-300,
.dark .text-slate-500,
.dark .text-slate-400,
.dark .text-slate-300 {
    color: rgb(var(--muted-fg)) !important;
}
.text-gray-700,
.text-zinc-700,
.text-slate-700 {
    color: rgb(var(--foreground) / 0.85) !important;
}
.dark .text-gray-700,
.dark .text-zinc-700,
.dark .text-slate-700 {
    color: rgb(var(--foreground) / 0.85) !important;
}
.text-gray-600,
.text-zinc-600,
.text-slate-600 {
    color: rgb(var(--muted-fg)) !important;
}
.dark .text-gray-600,
.dark .text-zinc-600,
.dark .text-slate-600 {
    color: rgb(var(--muted-fg)) !important;
}

/* ===== BACKGROUND OVERRIDES ===== */
.bg-gray-50,
.bg-zinc-50,
.bg-slate-50 {
    background-color: rgb(var(--body-bg)) !important;
}
.dark .bg-gray-50,
.dark .bg-zinc-50,
.dark .bg-slate-50 {
    background-color: rgb(var(--body-bg)) !important;
}
.bg-gray-100,
.bg-zinc-100,
.bg-slate-100 {
    background-color: rgb(var(--secondary-bg)) !important;
}
.dark .bg-gray-100,
.dark .bg-zinc-100,
.dark .bg-slate-100 {
    background-color: rgb(var(--secondary-bg)) !important;
}
.dark .bg-gray-700,
.dark .bg-zinc-700,
.dark .bg-slate-700,
.dark .bg-gray-800,
.dark .bg-zinc-800,
.dark .bg-slate-800 {
    background-color: rgb(var(--secondary-bg)) !important;
}
.hover\:bg-gray-50:hover,
.hover\:bg-zinc-50:hover,
.hover\:bg-slate-50:hover {
    background-color: rgb(var(--secondary-bg)) !important;
}
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-zinc-50:hover,
.dark .hover\:bg-gray-700:hover,
.dark .hover\:bg-zinc-700:hover,
.dark .hover\:bg-slate-700:hover {
    background-color: rgb(var(--secondary-bg)) !important;
}

/* ===== BORDER OVERRIDES ===== */
.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-zinc-100,
.border-zinc-200,
.border-zinc-300,
.border-slate-100,
.border-slate-200,
.border-slate-300 {
    border-color: rgb(var(--card-border)) !important;
}
.dark .border-gray-600,
.dark .border-gray-700,
.dark .border-gray-800,
.dark .border-zinc-600,
.dark .border-zinc-700,
.dark .border-zinc-800,
.dark .border-slate-600,
.dark .border-slate-700,
.dark .border-slate-800 {
    border-color: rgb(var(--card-border)) !important;
}

/* ===== DIVIDE OVERRIDES ===== */
.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.divide-zinc-100 > :not([hidden]) ~ :not([hidden]),
.divide-zinc-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--card-border));
}
.dark .divide-gray-700 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-600 > :not([hidden]) ~ :not([hidden]),
.dark .divide-zinc-700 > :not([hidden]) ~ :not([hidden]),
.dark .divide-zinc-600 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--card-border));
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: rgb(var(--muted-fg) / 0.3);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--muted-fg) / 0.5);
}

/* ===== FORM ELEMENTS — base defaults applied to every input/select/textarea =====
   These are intentionally NOT marked !important so the .field/.field-compact
   utility classes below remain the single source of truth and can override
   them. Bare elements (no class) still render correctly via these defaults. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: var(--radius, 0.5rem);
    border: 1px solid rgb(var(--field-border, var(--input-border)));
    padding: 0.5rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-color: rgb(var(--field-bg, var(--card-bg)));
    color: rgb(var(--foreground));
    min-height: 2.5rem;
    width: 100%;
    box-sizing: border-box;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
    border-color: rgb(var(--ring-color));
    box-shadow: 0 0 0 3px rgb(var(--ring-color) / 0.15);
    outline: none;
}

/* ===== UNIFIED FIELD UTILITY CLASSES =====
   Single source of truth for every form input across the project.
   Use .field on every <input>, <textarea>, <select> in views.
   Use .field-compact for dense admin tables / inline filters.
   Use .field-checkbox on checkboxes/radios. */
.field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 1rem;            /* px-4 py-2.5 */
    font-family: inherit;
    font-size: 0.875rem;               /* text-sm */
    line-height: 1.25rem;
    border-radius: var(--radius, 0.5rem);  /* rounded-lg */
    border: 1px solid rgb(var(--field-border, var(--input-border)));
    background-color: rgb(var(--field-bg, var(--card-bg)));
    color: rgb(var(--foreground));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    min-height: 2.5rem;
}
.field:focus {
    border-color: rgb(var(--ring-color));
    box-shadow: 0 0 0 3px rgb(var(--ring-color) / 0.18);
    outline: none;
}
.field::placeholder {
    color: rgb(var(--muted-fg) / 0.7);
    opacity: 1;
}
.field:disabled,
.field[readonly] {
    background-color: rgb(var(--secondary-bg));
    color: rgb(var(--muted-fg));
    cursor: not-allowed;
}
textarea.field {
    min-height: 7rem;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
    font-size: 0.875rem;
}
.field-compact {
    display: block;
    width: 100%;
    padding: 0.375rem 0.625rem;        /* px-2.5 py-1.5 — for dense admin tools */
    font-size: 0.8125rem;
    line-height: 1.25rem;
    border-radius: calc(var(--radius, 0.5rem) * 0.7);
    border: 1px solid rgb(var(--field-border, var(--input-border)));
    background-color: rgb(var(--field-bg, var(--card-bg)));
    color: rgb(var(--foreground));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    min-height: 2rem;
}
.field-compact:focus {
    border-color: rgb(var(--ring-color));
    box-shadow: 0 0 0 2px rgb(var(--ring-color) / 0.18);
    outline: none;
}

/* ===== USER DASHBOARD COMPACT FILTER TOOLBARS =====
   Use these for list/search/filter controls. They keep controls in one tidy
   row on wide screens, wrap naturally on tablets, and stack only on phones. */
.dashboard-filter-card {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: calc(var(--radius, 0.5rem) * 1.25);
    border: 1px solid rgb(var(--card-border));
    background-color: rgb(var(--card-bg));
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}
.dashboard-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.625rem;
}
.dashboard-filter-field {
    flex: 1 1 12rem;
    min-width: 10rem;
}
.dashboard-filter-field--xs { flex: 0 1 8.5rem; }
.dashboard-filter-field--sm { flex: 0 1 11rem; }
.dashboard-filter-field--md { flex: 1 1 13rem; }
.dashboard-filter-field--wide { flex: 2 1 16rem; }
.dashboard-filter-field--checkbox {
    flex: 1 1 16rem;
    min-height: 2rem;
    display: flex;
    align-items: center;
}
.dashboard-filter-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 600;
    color: rgb(var(--muted-fg));
}
.dashboard-filter-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dashboard-filter-btn {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.875rem;
    border-radius: calc(var(--radius, 0.5rem) * 0.75);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.dashboard-filter-btn--primary {
    border: 1px solid rgb(var(--brand-primary));
    background-color: rgb(var(--brand-primary));
    color: #fff;
}
.dashboard-filter-btn--primary:hover {
    background-color: rgb(var(--brand-primary-hover));
    border-color: rgb(var(--brand-primary-hover));
}
.dashboard-filter-btn--secondary {
    border: 1px solid rgb(var(--card-border));
    background-color: rgb(var(--card-bg));
    color: rgb(var(--foreground));
}
.dashboard-filter-btn--secondary:hover {
    background-color: rgb(var(--secondary-bg));
}
@media (max-width: 640px) {
    .dashboard-filter-card { padding: 0.875rem; }
    .dashboard-filter-field,
    .dashboard-filter-field--xs,
    .dashboard-filter-field--sm,
    .dashboard-filter-field--md,
    .dashboard-filter-field--wide,
    .dashboard-filter-field--checkbox,
    .dashboard-filter-actions {
        flex: 1 1 100%;
        min-width: 100%;
    }
    .dashboard-filter-actions > * {
        flex: 1 1 0;
    }
}
.field-checkbox,
.field-radio {
    width: 1rem;
    height: 1rem;
    accent-color: rgb(var(--brand-primary));
    border: 1px solid rgb(var(--input-border));
    border-radius: 0.25rem;
    cursor: pointer;
    vertical-align: middle;
}
.field-radio { border-radius: 9999px; }
.field-checkbox:focus,
.field-radio:focus {
    outline: 2px solid rgb(var(--ring-color) / 0.4);
    outline-offset: 1px;
}
input::placeholder,
textarea::placeholder {
    color: rgb(var(--muted-fg) / 0.7);
    opacity: 1;
}
.dark option {
    background-color: rgb(var(--field-bg, var(--card-bg)));
    color: rgb(var(--foreground));
}

/* Select dropdown arrow — !important overrides conflicting Tailwind utilities */
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    background-color: rgb(var(--field-bg, var(--card-bg))) !important;
    padding: 0.5rem 2.5rem 0.5rem 0.875rem !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    min-height: 2.5rem !important;
    color: rgb(var(--foreground)) !important;
    border: 1px solid rgb(var(--field-border, var(--input-border))) !important;
    border-radius: var(--radius, 0.5rem) !important;
}
select:hover {
    border-color: rgb(var(--ring-color) / 0.5) !important;
}
/* Dark mode: brighter arrow for contrast */
.dark select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* ===== NUMBER INPUT SPINNERS ===== */
/* Webkit (Chrome, Safari, Edge) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    height: 2rem;
    width: 1.4rem;
    background-color: rgb(var(--secondary-bg));
    border-radius: 0 0.375rem 0.375rem 0;
    border: none;
    border-left: 1px solid rgb(var(--input-border));
    cursor: pointer;
    transition: background-color 0.15s ease;
}
input[type="number"]::-webkit-inner-spin-button:hover,
input[type="number"]::-webkit-outer-spin-button:hover {
    background-color: rgb(var(--card-border));
}
input[type="number"]::-webkit-inner-spin-button:active,
input[type="number"]::-webkit-outer-spin-button:active {
    background-color: rgb(var(--brand-primary) / 0.15);
}
.dark input[type="number"]::-webkit-inner-spin-button,
.dark input[type="number"]::-webkit-outer-spin-button {
    background-color: rgb(var(--body-bg));
    border-left-color: rgb(var(--card-border));
}
.dark input[type="number"]::-webkit-inner-spin-button:hover,
.dark input[type="number"]::-webkit-outer-spin-button:hover {
    background-color: rgb(var(--card-border));
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]::-moz-input-spin-button {
    opacity: 1;
    height: 2rem;
    width: 1.4rem;
    background-color: rgb(var(--secondary-bg));
    border-radius: 0 0.375rem 0.375rem 0;
    border: none;
    border-left: 1px solid rgb(var(--input-border));
    cursor: pointer;
    transition: background-color 0.15s ease;
}
input[type="number"]::-moz-input-spin-button:hover {
    background-color: rgb(var(--card-border));
}
input[type="number"]::-moz-input-spin-button:active {
    background-color: rgb(var(--brand-primary) / 0.15);
}
.dark input[type="number"]::-moz-input-spin-button {
    background-color: rgb(var(--body-bg));
    border-left-color: rgb(var(--card-border));
}
.dark input[type="number"]::-moz-input-spin-button:hover {
    background-color: rgb(var(--card-border));
}

/* File input */
input[type="file"] { font-size: 0.875rem; cursor: pointer; }
input[type="file"]::file-selector-button {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    margin-right: 0.75rem;
    border-radius: var(--radius, 0.375rem);
    border: 1px solid rgb(var(--card-border));
    background-color: rgb(var(--secondary-bg));
    color: rgb(var(--foreground));
    cursor: pointer;
    transition: background-color 0.15s ease;
}
input[type="file"]::file-selector-button:hover {
    background-color: rgb(var(--card-border));
}

/* Checkbox & radio */
input[type="checkbox"],
input[type="radio"] {
    accent-color: rgb(var(--brand-primary));
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

/* ===== CARD & SURFACE ===== */
.bg-th-card {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.dark .bg-th-card {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4);
}

/* ===== DROPDOWNS ===== */
/* Global dropdown styling for all dropdown menus */
.user-dropdown-menu,
[id$="Dropdown"],
[class*="dropdown-menu"] {
    padding: 0.375rem 0;
    backdrop-filter: blur(8px);
    animation: dropdown-enter 0.15s ease-out;
}
.user-dropdown-menu a,
[id$="Dropdown"] a {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
    border-radius: 0;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.user-dropdown-menu a:hover,
[id$="Dropdown"] a:hover {
    background-color: rgb(var(--secondary-bg) / 0.6);
}
.dark .user-dropdown-menu a:hover,
.dark [id$="Dropdown"] a:hover {
    background-color: rgb(var(--secondary-bg) / 0.5);
}
/* Dropdown header (user info, notification header) */
.user-dropdown-menu > div:first-child,
[id$="Dropdown"] > div:first-child {
    padding: 0.875rem 1.25rem;
}
/* Dropdown items container */
.user-dropdown-menu > div:not(:first-child):not(:last-child),
[id$="Dropdown"] > div:not(:first-child):not(:last-child) {
    padding: 0.25rem 0;
}
/* Dropdown divider */
.user-dropdown-menu > .border-t,
[id$="Dropdown"] > .border-t {
    margin: 0.25rem 0;
}
/* Dropdown animation */
@keyframes dropdown-enter {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== BUTTONS ===== */
button,
[type="submit"],
[type="button"],
a[class*="px-"][class*="py-"][class*="rounded"] {
    transition: all 0.15s ease;
}
button:active:not(:disabled),
[type="submit"]:active:not(:disabled),
[type="button"]:active:not(:disabled) {
    transform: scale(0.98);
}
.bg-brand-primary,
.bg-admin-accent {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
    font-weight: 500;
}
.bg-brand-primary:hover,
.bg-admin-accent:hover {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.15);
}

/* ===== TABLE ===== */
table {
    font-size: 0.875rem;
    width: 100%;
}
table th {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: rgb(var(--muted-fg));
    padding: 0.75rem 1.5rem;
    text-align: left;
    background-color: rgb(var(--secondary-bg) / 0.5);
    border-bottom: 1px solid rgb(var(--card-border));
    white-space: nowrap;
}
table td {
    padding: 0.75rem 1.5rem;
    color: rgb(var(--foreground));
    vertical-align: middle;
}
table tbody tr {
    transition: background-color 0.1s ease;
    border-bottom: 1px solid rgb(var(--card-border));
}
table tbody tr:last-child {
    border-bottom: none;
}
table tbody tr:hover {
    background-color: rgb(var(--secondary-bg) / 0.4);
}
/* Table mono text (addresses, hashes) */
table .font-mono {
    color: rgb(var(--muted-fg));
    font-size: 0.75rem;
}

/* ===== STATUS BADGES ===== */
.bg-green-100 {
    background-color: rgb(22 163 74 / 0.12) !important;
}
.text-green-800 {
    color: rgb(22 163 74) !important;
}
.dark .bg-green-900\/30,
.dark .bg-green-900 {
    background-color: rgb(74 222 128 / 0.15) !important;
}
.dark .text-green-300,
.dark .text-green-400 {
    color: rgb(74 222 128) !important;
}
.bg-yellow-100 {
    background-color: rgb(234 179 8 / 0.12) !important;
}
.dark .bg-yellow-900\/30,
.dark .bg-yellow-900 {
    background-color: rgb(234 179 8 / 0.15) !important;
}
.bg-red-100 {
    background-color: rgb(var(--destructive) / 0.1) !important;
}
.text-red-800 {
    color: rgb(var(--destructive)) !important;
}
.dark .bg-red-900\/30,
.dark .bg-red-900 {
    background-color: rgb(var(--destructive) / 0.15) !important;
}
.dark .text-red-300,
.dark .text-red-400 {
    color: rgb(var(--destructive)) !important;
}

/* ===== ACTION TEXT COLORS ===== */
.text-red-600 {
    color: rgb(var(--destructive)) !important;
}
.dark .text-red-600 {
    color: rgb(var(--destructive)) !important;
}
.text-green-600 {
    color: rgb(22 163 74) !important;
}
.dark .text-green-600 {
    color: rgb(74 222 128) !important;
}
.text-yellow-600 {
    color: rgb(202 138 4) !important;
}
.dark .text-yellow-600 {
    color: rgb(250 204 21) !important;
}
.text-orange-600 {
    color: rgb(234 88 12) !important;
}
.dark .text-orange-600 {
    color: rgb(251 146 60) !important;
}
.text-blue-600 {
    color: rgb(var(--brand-primary)) !important;
}
.dark .text-blue-600 {
    color: rgb(var(--brand-primary)) !important;
}
.text-purple-600 {
    color: rgb(147 51 234) !important;
}
.dark .text-purple-600 {
    color: rgb(192 132 252) !important;
}

/* ===== HOVER TEXT OVERRIDES ===== */
.hover\:text-gray-600:hover,
.hover\:text-gray-700:hover {
    color: rgb(var(--foreground)) !important;
}
.dark .hover\:text-gray-600:hover,
.dark .hover\:text-gray-700:hover,
.dark .hover\:text-gray-300:hover,
.dark .hover\:text-gray-200:hover {
    color: rgb(var(--foreground)) !important;
}
.hover\:text-red-500:hover,
.hover\:text-red-900:hover {
    color: rgb(var(--destructive)) !important;
}
.dark .hover\:text-red-500:hover,
.dark .hover\:text-red-900:hover {
    color: rgb(var(--destructive)) !important;
}

/* ===== RING/FOCUS OVERRIDES ===== */
.focus\:ring-th-ring:focus,
.focus\:ring-th-admin-ring:focus {
    --tw-ring-color: rgb(var(--ring-color));
}
.ring-blue-500,
.ring-indigo-500 {
    --tw-ring-color: rgb(var(--ring-color)) !important;
}

/* ===== SIDEBAR ===== */
.sidebar-link {
    transition: all 0.15s ease;
    border-radius: var(--radius, 0.5rem);
    color: rgb(var(--foreground) / 0.7);
}
.sidebar-link:hover {
    background-color: rgb(var(--sidebar-hover));
    color: rgb(var(--foreground));
}
.sidebar-link.active {
    font-weight: 500;
}
.sidebar-link svg {
    color: rgb(var(--muted-fg));
}
.sidebar-link.active svg {
    color: inherit;
}

/* ===== ALERT / BANNER BOXES ===== */
.bg-yellow-50 {
    background-color: rgb(234 179 8 / 0.08) !important;
}
.dark .bg-yellow-50,
.dark .bg-yellow-900\/20 {
    background-color: rgb(234 179 8 / 0.1) !important;
}
.border-yellow-200 {
    border-color: rgb(234 179 8 / 0.3) !important;
}
.dark .border-yellow-800 {
    border-color: rgb(234 179 8 / 0.25) !important;
}

/* ===== ICON CONTAINERS ===== */
.bg-blue-50,
.bg-indigo-50,
.bg-purple-50 {
    background-color: rgb(var(--brand-primary) / 0.1) !important;
}
.dark .bg-blue-900\/20,
.dark .bg-indigo-900\/20,
.dark .bg-purple-900\/20 {
    background-color: rgb(var(--brand-primary) / 0.15) !important;
}
.bg-green-50 {
    background-color: rgb(22 163 74 / 0.08) !important;
}
.dark .bg-green-900\/20 {
    background-color: rgb(22 163 74 / 0.12) !important;
}

/* ===== ANIMATIONS ===== */
.fade-in { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}
.pulse-dot { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slideUp 0.25s ease-out; }

/* ===== CODE BLOCKS ===== */
pre code {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
}
code:not(pre code) {
    font-size: 0.8125rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background-color: rgb(var(--secondary-bg));
    border: 1px solid rgb(var(--card-border));
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    color: rgb(var(--foreground));
}

/* ===== DISABLED STATE ===== */
button:disabled,
[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== RESPONSIVE TABLE ===== */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== FOCUS-VISIBLE ===== */
:focus-visible {
    outline: 2px solid rgb(var(--ring-color));
    outline-offset: 2px;
    border-radius: 0.25rem;
}
button:focus-visible,
a:focus-visible {
    outline: 2px solid rgb(var(--ring-color));
    outline-offset: 2px;
}

/* ===== SMOOTH DARK MODE TRANSITION ===== */
html.transitioning, html.transitioning *, html.transitioning *::before, html.transitioning *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ===== PRINT ===== */
@media print {
    nav, .sidebar, .no-print { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    body { background: white !important; color: black !important; }
}
/* CryptoGateway — Shadcn-inspired Global Styles */

/* ===== BASE / TYPOGRAPHY ===== */
*, *::before, *::after {
    border-color: rgb(var(--card-border));
}
.dark *, .dark *::before, .dark *::after {
    border-color: rgb(var(--card-border));
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.011em;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Refined heading hierarchy */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.025em; }
h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3, h4 { font-weight: 600; }

/* Muted helper text */
.text-sm { line-height: 1.43; }
.text-xs { line-height: 1.5; letter-spacing: 0.01em; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgb(212 212 216);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgb(161 161 170);
}
.dark ::-webkit-scrollbar-thumb {
    background-color: rgb(63 63 70);
}
.dark ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(82 82 91);
}

/* ===== CARD & SURFACE SHADOWS ===== */
.bg-th-card {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
}
.dark .bg-th-card {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3);
}

/* ===== BUTTONS — Universal polish ===== */
button,
[type="submit"],
[type="button"],
a[class*="px-"][class*="py-"][class*="rounded"] {
    transition: all 0.15s ease;
}
button:active,
[type="submit"]:active,
[type="button"]:active {
    transform: scale(0.98);
}

/* Primary style buttons */
.bg-brand-primary,
.bg-admin-accent,
[class*="bg-blue-600"],
[class*="bg-indigo-600"],
[class*="bg-violet-600"],
[class*="bg-green-600"] {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
}

/* ===== TABLE REFINEMENT ===== */
table {
    font-size: 0.875rem;
}
table th {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: rgb(113 113 122);
}
.dark table th {
    color: rgb(161 161 170);
}
table tbody tr {
    transition: background-color 0.1s ease;
}
.dark table tbody td {
    color: rgb(212 212 216);
}
.dark table tbody td .text-gray-900 {
    color: rgb(250 250 250);
}
.dark table tbody td a {
    color: rgb(var(--brand-primary-text));
}

/* ===== BADGE/TAG PILLS ===== */
[class*="rounded-full"][class*="text-xs"][class*="font-"] {
    letter-spacing: 0.02em;
}

/* ===== ANIMATIONS ===== */
.fade-in {
    animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

.pulse-dot {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Slide-in for cards */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slideUp 0.25s ease-out; }

/* ===== CODE BLOCKS ===== */
pre code {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
}
code:not(pre code) {
    font-size: 0.8125rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background-color: rgb(244 244 245);
    border: 1px solid rgb(228 228 231);
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}
.dark code:not(pre code) {
    background-color: rgb(39 39 42);
    border-color: rgb(63 63 70);
    color: rgb(228 228 231);
}

/* ===== SIDEBAR LINK POLISH ===== */
.sidebar-link {
    transition: all 0.15s ease;
    border-radius: 0.5rem;
}
.sidebar-link:hover {
    background-color: rgb(var(--sidebar-hover, 244 244 245));
}
.sidebar-link.active {
    font-weight: 500;
}

/* ===== RESPONSIVE TABLE ===== */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== TOOLTIP-LIKE TITLE ===== */
[title] { position: relative; }

/* ===== PRINT ===== */
@media print {
    nav, .sidebar, .no-print { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    body { background: white !important; color: black !important; }
}

/* ===== FOCUS-VISIBLE for keyboard users ===== */
:focus-visible {
    outline: 2px solid rgb(var(--ring-color, 59 130 246));
    outline-offset: 2px;
    border-radius: 0.25rem;
}
button:focus-visible,
a:focus-visible {
    outline: 2px solid rgb(var(--ring-color, 59 130 246));
    outline-offset: 2px;
}

/* ===== DARK MODE: semantic color overrides ===== */
.dark .text-green-600 { color: rgb(74 222 128); }
.dark .text-red-600 { color: rgb(248 113 113); }
.dark .text-blue-600 { color: rgb(96 165 250); }
.dark .text-purple-600 { color: rgb(192 132 252); }
.dark .text-yellow-600 { color: rgb(250 204 21); }
.dark .text-orange-600 { color: rgb(251 146 60); }
.dark .hover\:text-gray-600:hover { color: rgb(212 212 216); }
.dark .hover\:text-gray-700:hover { color: rgb(212 212 216); }
.dark .hover\:text-red-500:hover { color: rgb(252 165 165); }
.dark .hover\:text-red-900:hover { color: rgb(252 165 165); }
.dark .hover\:text-green-500:hover { color: rgb(134 239 172); }
.dark pre, .dark code:not(.dark code:not(pre code)) {
    background-color: rgb(24 24 27);
    color: rgb(228 228 231);
}

/* ===== CHECKBOX / RADIO — match active theme ===== */
input[type="checkbox"],
input[type="radio"] {
    accent-color: rgb(var(--brand-primary));
    background-color: rgb(var(--card-bg));
    border: 1px solid rgb(var(--input-border));
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 2px solid rgb(var(--ring-color) / 0.4);
    outline-offset: 1px;
}

/* ===== FILE INPUT ===== */
input[type="file"] {
    background-color: rgb(var(--card-bg));
    color: rgb(var(--foreground));
    border: 1px solid rgb(var(--input-border));
    border-radius: var(--radius, 0.5rem);
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
}
input[type="file"]::file-selector-button {
    background-color: rgb(var(--secondary-bg));
    color: rgb(var(--foreground));
    border: 0;
    padding: 0.35rem 0.75rem;
    border-radius: calc(var(--radius, 0.5rem) * 0.7);
    margin-right: 0.6rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
input[type="file"]::file-selector-button:hover {
    background-color: rgb(var(--card-border));
}

/* ===== CLOUDFLARE TURNSTILE / CAPTCHA WRAPPER =====
   Force the widget to render against the card surface so it doesn't show a
   pale rectangle inside dark theme cards. */
.cf-turnstile,
.cf-turnstile iframe,
.h-captcha,
.g-recaptcha {
    color-scheme: light dark;
}
.dark .cf-turnstile {
    border-radius: var(--radius, 0.5rem);
    overflow: hidden;
}

/* =================================================================
   CODE HIGHLIGHTING — VS Code-style, theme-aware (dependency-free)
   Used by /public/js/code-highlight.js. Wraps every <pre><code>.
   ================================================================= */
.cg-code-wrap {
    --cg-bg:        #0f1117;
    --cg-bg-head:   #161922;
    --cg-border:    #1f2330;
    --cg-fg:        #e4e7ef;
    --cg-muted:     #6b7185;
    --cg-com:       #6b7185;
    --cg-str:       #a3e635;
    --cg-num:       #fb923c;
    --cg-kw:        #c084fc;
    --cg-fn:        #60a5fa;
    --cg-var:       #f472b6;
    --cg-prop:      #38bdf8;
    --cg-op:        #f472b6;
    --cg-meta:      #facc15;
    --cg-tag:       #fb7185;
    --cg-radius:    var(--radius, 0.5rem);
    margin: 1rem 0;
    border-radius: var(--cg-radius);
    overflow: hidden;
    border: 1px solid var(--cg-border);
    background: var(--cg-bg);
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(15,17,23,.08);
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cg-code-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    background: var(--cg-bg-head);
    border-bottom: 1px solid var(--cg-border);
    font-size: 0.75rem;
    color: var(--cg-muted);
    user-select: none;
}
.cg-code-dots { display: inline-flex; gap: 5px; }
.cg-code-dots i {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
    background: #3a3f4d;
}
.cg-code-dots i:nth-child(1) { background: #ff5f56; }
.cg-code-dots i:nth-child(2) { background: #ffbd2e; }
.cg-code-dots i:nth-child(3) { background: #27c93f; }
.cg-code-lang {
    margin-left: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #9ca3af;
}
.cg-code-copy {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255,255,255,.04);
    color: #cbd5e1;
    border: 1px solid var(--cg-border);
    border-radius: 6px;
    font: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all .15s ease;
}
.cg-code-copy:hover { background: rgba(255,255,255,.08); color: #fff; }
.cg-code-copy.is-copied {
    background: rgba(74,222,128,.15);
    border-color: rgba(74,222,128,.4);
    color: #86efac;
}
.cg-code-wrap pre.cg-code,
.cg-code-wrap pre {
    margin: 0;
    padding: 1rem 1.125rem;
    background: transparent !important;
    color: var(--cg-fg) !important;
    font-size: 0.8125rem;
    line-height: 1.65;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    -moz-tab-size: 2;
    tab-size: 2;
}
.cg-code-wrap pre code {
    background: transparent !important;
    color: inherit !important;
    padding: 0;
    border: 0;
    font-size: inherit;
    font-family: inherit;
    white-space: pre;
}
.cg-code-wrap pre::-webkit-scrollbar { height: 8px; }
.cg-code-wrap pre::-webkit-scrollbar-thumb {
    background: var(--cg-border);
    border-radius: 4px;
}
.cg-code-wrap pre::-webkit-scrollbar-thumb:hover { background: #2c3142; }
.cg-code-wrap ::selection { background: rgba(96,165,250,.35); }

/* token colors */
.cg-code .tok-com  { color: var(--cg-com);  font-style: italic; }
.cg-code .tok-str  { color: var(--cg-str); }
.cg-code .tok-num  { color: var(--cg-num); }
.cg-code .tok-kw   { color: var(--cg-kw);  font-weight: 600; }
.cg-code .tok-fn   { color: var(--cg-fn); }
.cg-code .tok-var  { color: var(--cg-var); }
.cg-code .tok-prop { color: var(--cg-prop); }
.cg-code .tok-op   { color: var(--cg-op); }
.cg-code .tok-meta { color: var(--cg-meta); }
.cg-code .tok-tag  { color: var(--cg-tag); }

/* light-mode variant for users who prefer it (still dark code, just softer chrome) */
html:not(.dark) .cg-code-wrap {
    box-shadow: 0 1px 2px rgba(15,17,23,.06), 0 6px 18px rgba(15,17,23,.08);
}

/* HTTP-method badge (for endpoint headers) */
.cg-method {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.4;
}
.cg-method.get    { background: #2563eb; }
.cg-method.post   { background: #16a34a; }
.cg-method.put    { background: #d97706; }
.cg-method.patch  { background: #ca8a04; }
.cg-method.delete { background: #dc2626; }

/* Endpoint card */
.cg-endpoint {
    margin-bottom: 1.5rem;
    border-radius: var(--radius, 0.5rem);
    border: 1px solid rgb(var(--card-border, 228 228 231));
    background: rgb(var(--card-bg, 255 255 255));
    overflow: hidden;
}
.cg-endpoint-head {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid rgb(var(--card-border, 228 228 231));
    background: rgb(var(--secondary-bg, var(--card-bg, 250 250 250)));
}
.cg-endpoint-head code {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--foreground, 17 24 39));
}
.cg-scope-pill {
    display: inline-block;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: rgba(99,102,241,.1);
    color: #6366f1;
    border: 1px solid rgba(99,102,241,.25);
}
.dark .cg-scope-pill {
    background: rgba(165,180,252,.12);
    color: #c7d2fe;
    border-color: rgba(165,180,252,.25);
}
.cg-endpoint-body { padding: 1rem 1.125rem; }

/* Appearance — hex input validation feedback */
.cg-color-hex.cg-hex-invalid {
    border-color: rgb(220 38 38);
    background-color: rgba(254, 226, 226, 0.5);
}
.dark .cg-color-hex.cg-hex-invalid {
    background-color: rgba(127, 29, 29, 0.25);
}
.cg-color-row + .cg-color-row {
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(0,0,0,0.05);
}
.dark .cg-color-row + .cg-color-row {
    border-top-color: rgba(255,255,255,0.05);
}