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

* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #e2e8f0;
}

*::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    border-radius: 999px;
    border: 2px solid #e2e8f0;
}

.dark * {
    scrollbar-color: #52525b #18181b;
}

.dark *::-webkit-scrollbar-track {
    background: #18181b;
}

.dark *::-webkit-scrollbar-thumb {
    background-color: #52525b;
    border-color: #18181b;
}

.glass-card {
    @apply bg-white/95 dark:bg-zinc-900/85 backdrop-blur border border-gray-200 dark:border-zinc-800 rounded-3xl shadow-xl px-4 py-4;
}

.input-field {
    @apply bg-gray-50/90 dark:bg-zinc-900/80 border border-gray-200 dark:border-zinc-700 text-sm rounded-2xl focus:ring-2 focus:ring-blue-400 focus:border-blue-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 block w-full p-2.5 text-gray-900 dark:text-gray-100 transition;
}

.primary-chip {
    @apply inline-flex items-center gap-x-2 rounded-full bg-blue-600/90 px-3 py-1.5 text-xs font-semibold text-white shadow hover:bg-blue-500 transition;
}

.secondary-chip {
    @apply inline-flex items-center gap-x-2 rounded-full border border-gray-300 dark:border-zinc-700 px-3 py-1.5 text-xs font-semibold text-gray-700 dark:text-gray-100 bg-white/80 dark:bg-zinc-900/70 hover:border-blue-400 dark:hover:border-blue-500 transition;
}

.glass-label {
    @apply mb-1 text-sm font-semibold text-gray-800 dark:text-gray-200;
}

.monospace-field {
    @apply font-mono tracking-tight text-gray-900 dark:text-white;
}

.metric-row {
    @apply grid gap-3 sm:grid-cols-2 text-gray-800 dark:text-gray-100;
}

.metric-value {
    @apply text-lg font-semibold text-gray-900 dark:text-white;
}

.address-card {
    @apply relative border border-gray-200 dark:border-zinc-800 rounded-2xl bg-white/80 dark:bg-zinc-900/70 p-4 space-y-2;
}
.address-card__label {
    @apply text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400;
}
.address-card__value {
    @apply text-sm text-gray-900 dark:text-white break-words pr-16;
}
.address-card__action {
    @apply absolute top-3 right-3 inline-flex items-center gap-1 rounded-full border border-gray-200 dark:border-zinc-700 px-3 py-1 text-xs font-semibold text-gray-700 dark:text-gray-100 bg-white/70 dark:bg-zinc-900/60 hover:border-blue-400 dark:hover:border-blue-500 transition;
}
