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

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

@layer base {
    :root {
        color-scheme: light;
    }

    html {
        @apply scroll-smooth bg-slate-100;
    }

    body {
        @apply bg-slate-100 text-slate-900 antialiased;
    }

    button,
    a,
    input,
    select,
    textarea {
        @apply transition duration-150;
    }

    button:disabled,
    input:disabled,
    select:disabled,
    textarea:disabled {
        @apply cursor-not-allowed;
    }

    ::selection {
        @apply bg-indigo-200 text-indigo-950;
    }

    :focus-visible {
        @apply outline-none ring-2 ring-indigo-500 ring-offset-2 ring-offset-white;
    }

    #conteudo-principal:focus {
        outline: none;
        box-shadow: none;
    }
}

@layer components {
    /*
    |--------------------------------------------------------------------------
    | Estrutura principal
    |--------------------------------------------------------------------------
    */

    .app-shell {
        @apply min-h-screen;
    }

    .app-content {
        @apply flex min-h-screen min-w-0 flex-col lg:pl-72;
    }

    .app-page {
        @apply mx-auto w-full max-w-screen-2xl px-4 sm:px-6 lg:px-8;
    }

    .app-skip-link {
        @apply fixed left-4 top-4 z-[100] -translate-y-24 rounded-xl
               bg-slate-950 px-4 py-3 text-sm font-bold text-white
               shadow-xl focus:translate-y-0;
    }

    .app-footer {
        @apply flex flex-col items-center justify-center gap-1
               border-t border-slate-200 py-5 text-center
               text-xs text-slate-400 sm:flex-row sm:gap-2;
    }

    /*
    |--------------------------------------------------------------------------
    | Sidebar
    |--------------------------------------------------------------------------
    */

    .app-sidebar-overlay {
        @apply fixed inset-0 z-40 bg-slate-950/70 backdrop-blur-sm lg:hidden;
    }

    .app-sidebar {
        @apply fixed inset-y-0 left-0 z-50 flex w-72 flex-col
               overflow-hidden border-r border-white/10 text-white
               shadow-2xl transition-transform duration-300;
        background:
            radial-gradient(
                circle at 10% 0%,
                rgba(79, 70, 229, 0.22),
                transparent 32%
            ),
            radial-gradient(
                circle at 100% 70%,
                rgba(14, 165, 233, 0.10),
                transparent 36%
            ),
            #020617;
    }

    .app-sidebar::before {
        content: "";
        @apply pointer-events-none absolute -right-24 -top-24 h-64 w-64
               rounded-full border-[34px] border-white/[0.025];
    }

    .app-sidebar > * {
        @apply relative z-10;
    }

    .app-sidebar-brand {
        @apply flex h-20 flex-none items-center justify-between
               border-b border-white/10 px-4;
    }

    .app-sidebar-brand-link {
        @apply flex min-w-0 flex-1 items-center gap-3 rounded-xl
               px-1 py-1 hover:bg-white/[0.04];
    }

    .app-sidebar-logo {
        @apply h-14 w-auto flex-none object-contain
               drop-shadow-[0_5px_18px_rgba(255,255,255,0.22)];
    }

    .app-sidebar-close {
        @apply ml-2 flex h-10 w-10 flex-none items-center justify-center
               rounded-xl text-slate-400 hover:bg-white/10 hover:text-white;
    }

    .app-sidebar-nav {
        @apply flex-1 space-y-5 overflow-y-auto px-4 py-5;
        scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
        scrollbar-width: thin;
    }

    .app-sidebar-nav::-webkit-scrollbar {
        width: 6px;
    }

    .app-sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .app-sidebar-nav::-webkit-scrollbar-thumb {
        border-radius: 9999px;
        background: rgba(148, 163, 184, 0.28);
    }

    .app-sidebar-group {
        @apply rounded-2xl border border-white/[0.07]
               bg-white/[0.035] p-2;
    }

    .app-sidebar-section {
        @apply mb-1 px-3 pb-1 pt-2 text-[10px] font-extrabold
               uppercase tracking-[0.2em] text-slate-500;
    }

    .app-sidebar-link {
        @apply relative flex min-h-11 items-center gap-3 overflow-hidden
               rounded-xl px-3 py-2.5 text-sm font-semibold text-slate-300
               hover:bg-white/[0.08] hover:text-white;
    }

    .app-sidebar-link-active {
        @apply bg-indigo-600 text-white shadow-lg shadow-indigo-950/30
               hover:bg-indigo-600 hover:text-white;
    }

    .app-sidebar-link-active::after {
        content: "";
        @apply absolute inset-y-2 left-0 w-0.5 rounded-full bg-white/70;
    }

    .app-sidebar-icon-wrap {
        @apply flex h-8 w-8 flex-none items-center justify-center rounded-lg
               bg-white/[0.055] text-slate-400;
    }

    .app-sidebar-link:hover .app-sidebar-icon-wrap {
        @apply bg-white/10 text-white;
    }

    .app-sidebar-link-active .app-sidebar-icon-wrap {
        @apply bg-white/15 text-white;
    }

    .app-sidebar-icon {
        @apply h-5 w-5;
    }

    .app-sidebar-badge {
        @apply flex-none rounded-full bg-white/10 px-2 py-0.5
               text-[10px] font-bold uppercase tracking-wide text-slate-300;
    }

    .app-sidebar-footer {
        @apply flex-none border-t border-white/10 px-4 py-4;
    }

    /*
    |--------------------------------------------------------------------------
    | Topbar
    |--------------------------------------------------------------------------
    */

    .app-topbar {
        @apply sticky top-0 z-30 h-20 border-b border-slate-200/80
               bg-white/90 shadow-[0_1px_0_rgba(15,23,42,0.02)]
               backdrop-blur-xl;
    }

    .app-topbar-inner {
        @apply flex h-full items-center justify-between gap-4;
    }

    .app-topbar-menu-button {
        @apply flex h-11 w-11 flex-none items-center justify-center
               rounded-xl border border-slate-200 bg-white text-slate-600
               shadow-sm hover:border-slate-300 hover:bg-slate-50
               hover:text-slate-900;
    }

    .app-topbar-eyebrow {
        @apply text-[10px] font-extrabold uppercase tracking-[0.2em]
               text-indigo-600;
    }

    .app-topbar-site-link {
        @apply inline-flex min-h-10 items-center justify-center gap-2
               rounded-xl border border-slate-200 bg-white px-3
               text-sm font-semibold text-slate-600 shadow-sm
               hover:border-indigo-200 hover:bg-indigo-50
               hover:text-indigo-700;
    }

    .app-profile-button {
        @apply flex min-h-12 items-center gap-3 rounded-2xl border
               border-transparent px-1.5 py-1.5 hover:border-slate-200
               hover:bg-slate-50 sm:px-2.5;
    }

    .app-profile-photo {
        @apply h-10 w-10 flex-none rounded-xl object-cover
               ring-2 ring-slate-100;
    }

    .app-profile-menu {
        @apply absolute right-0 mt-3 origin-top-right overflow-hidden
               rounded-2xl border border-slate-200 bg-white shadow-2xl
               shadow-slate-900/10;
        width: 19rem;
        max-width: calc(100vw - 2rem);
    }

    .app-profile-menu-header {
        @apply border-b border-slate-100 bg-slate-50/80 px-4 py-4;
    }

    .app-profile-menu-link {
        @apply flex min-h-11 items-center gap-3 rounded-xl px-3 py-2.5
               text-left text-sm font-semibold text-slate-700
               hover:bg-slate-100 hover:text-slate-950;
    }

    .app-profile-menu-link-danger {
        @apply text-red-600 hover:bg-red-50 hover:text-red-700;
    }

    /*
    |--------------------------------------------------------------------------
    | Cabeçalho das páginas
    |--------------------------------------------------------------------------
    */

    .ui-page-header {
        @apply relative overflow-hidden rounded-3xl border border-slate-200
               bg-white px-5 py-6 shadow-sm sm:px-7 sm:py-7;
        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(248, 250, 252, 1) 70%,
                rgba(238, 242, 255, 0.9) 100%
            );
    }

    .ui-page-header::before {
        content: "";
        @apply absolute inset-y-0 left-0 w-1.5 bg-indigo-600;
    }

    .ui-page-header::after {
        content: "";
        @apply pointer-events-none absolute -right-14 -top-20 h-52 w-52
               rounded-full border-[28px] border-indigo-500/[0.035];
    }

    .ui-page-header-title {
        @apply text-2xl font-extrabold tracking-tight text-slate-950
               sm:text-3xl;
    }

    .ui-page-header-description {
        @apply mt-1.5 max-w-3xl text-sm leading-6 text-slate-500;
    }

    .ui-page-header-eyebrow {
        @apply mb-1 text-[11px] font-extrabold uppercase
               tracking-[0.2em] text-indigo-600;
    }

    /*
    |--------------------------------------------------------------------------
    | Cards
    |--------------------------------------------------------------------------
    */

    .ui-card {
        @apply overflow-hidden rounded-2xl border border-slate-200
               bg-white shadow-sm;
    }

    .ui-card-header {
        @apply flex flex-col gap-3 border-b border-slate-200/80
               bg-white px-5 py-4 sm:flex-row sm:items-center
               sm:justify-between sm:px-6;
    }

    .ui-card-title {
        @apply text-base font-bold text-slate-900;
    }

    .ui-card-description {
        @apply mt-1 text-sm leading-6 text-slate-500;
    }

    .ui-card-body {
        @apply p-5 sm:p-6;
    }

    .ui-card-footer {
        @apply border-t border-slate-200/80 bg-slate-50/80
               px-5 py-4 sm:px-6;
    }

    .ui-form-actions {
        @apply sticky bottom-4 z-20 rounded-2xl border border-slate-200
               bg-white/95 p-4 shadow-xl shadow-slate-900/10
               backdrop-blur-xl;
    }

    /*
    |--------------------------------------------------------------------------
    | Botões
    |--------------------------------------------------------------------------
    */

    .ui-btn {
        @apply inline-flex items-center justify-center gap-2 rounded-xl
               border text-sm font-bold shadow-sm outline-none
               focus-visible:ring-2 focus-visible:ring-offset-2
               disabled:pointer-events-none disabled:opacity-60;
    }

    .ui-btn-sm {
        @apply min-h-9 px-3 py-2;
    }

    .ui-btn-md {
        @apply min-h-11 px-4 py-2.5;
    }

    .ui-btn-lg {
        @apply min-h-12 px-5 py-3;
    }

    .ui-btn-primary {
        @apply border-indigo-600 bg-indigo-600 text-white
               hover:border-indigo-700 hover:bg-indigo-700
               focus-visible:ring-indigo-500;
    }

    .ui-btn-secondary {
        @apply border-slate-300 bg-white text-slate-700
               hover:border-slate-400 hover:bg-slate-50
               hover:text-slate-900 focus-visible:ring-slate-400;
    }

    .ui-btn-success {
        @apply border-emerald-600 bg-emerald-600 text-white
               hover:border-emerald-700 hover:bg-emerald-700
               focus-visible:ring-emerald-500;
    }

    .ui-btn-danger {
        @apply border-red-600 bg-red-600 text-white
               hover:border-red-700 hover:bg-red-700
               focus-visible:ring-red-500;
    }

    .ui-btn-warning {
        @apply border-amber-500 bg-amber-500 text-white
               hover:border-amber-600 hover:bg-amber-600
               focus-visible:ring-amber-400;
    }

    .ui-btn-ghost {
        @apply border-transparent bg-transparent text-slate-600 shadow-none
               hover:bg-slate-100 hover:text-slate-900
               focus-visible:ring-slate-300;
    }

    /*
    |--------------------------------------------------------------------------
    | Formulários
    |--------------------------------------------------------------------------
    */

    .ui-label {
        @apply mb-1.5 block text-sm font-bold text-slate-700;
    }

    .ui-required {
        @apply text-red-500;
    }

    .ui-input,
    .ui-select,
    .ui-textarea {
        @apply block w-full rounded-xl border-slate-300 bg-white
               text-sm text-slate-900 shadow-sm placeholder:text-slate-400
               hover:border-slate-400 focus:border-indigo-500
               focus:ring-indigo-500 disabled:bg-slate-100
               disabled:text-slate-500;
    }

    .ui-input,
    .ui-select {
        @apply min-h-11;
    }

    .ui-textarea {
        @apply min-h-28 resize-y;
    }

    .ui-input-error {
        @apply border-red-300 focus:border-red-500 focus:ring-red-500;
    }

    .ui-field-error {
        @apply mt-1.5 text-sm font-semibold text-red-600;
    }

    .ui-field-help {
        @apply mt-1.5 text-xs leading-5 text-slate-500;
    }

    /*
    |--------------------------------------------------------------------------
    | Tabelas
    |--------------------------------------------------------------------------
    */

    .ui-table-wrapper {
        @apply overflow-hidden rounded-2xl border border-slate-200
               bg-white shadow-sm;
    }

    .ui-table-scroll {
        @apply overflow-x-auto;
    }

    .ui-table {
        @apply min-w-full divide-y divide-slate-200;
    }

    .ui-table thead {
        @apply bg-slate-50/90;
    }

    .ui-table th {
        @apply whitespace-nowrap px-5 py-3.5 text-left text-xs
               font-extrabold uppercase tracking-wider text-slate-500;
    }

    .ui-table td {
        @apply px-5 py-4 text-sm text-slate-700;
    }

    .ui-table tbody {
        @apply divide-y divide-slate-100 bg-white;
    }

    .ui-table tbody tr {
        @apply transition-colors hover:bg-slate-50/80;
    }

    /*
    |--------------------------------------------------------------------------
    | Badges
    |--------------------------------------------------------------------------
    */

    .ui-badge {
        @apply inline-flex items-center gap-1.5 rounded-full border
               px-2.5 py-1 text-xs font-bold;
    }

    .ui-badge-success {
        @apply border-emerald-200 bg-emerald-50 text-emerald-700;
    }

    .ui-badge-warning {
        @apply border-amber-200 bg-amber-50 text-amber-700;
    }

    .ui-badge-danger {
        @apply border-red-200 bg-red-50 text-red-700;
    }

    .ui-badge-info {
        @apply border-sky-200 bg-sky-50 text-sky-700;
    }

    .ui-badge-primary {
        @apply border-indigo-200 bg-indigo-50 text-indigo-700;
    }

    .ui-badge-neutral {
        @apply border-slate-200 bg-slate-100 text-slate-700;
    }

    /*
    |--------------------------------------------------------------------------
    | Alertas
    |--------------------------------------------------------------------------
    */

    .ui-alert {
        @apply flex items-start gap-3 rounded-2xl border px-4 py-3.5
               text-sm shadow-sm sm:px-5;
    }

    .ui-alert-icon {
        @apply mt-0.5 flex h-8 w-8 flex-none items-center justify-center
               rounded-xl bg-white/60;
    }

    .ui-alert-close {
        @apply -mr-1 flex h-8 w-8 flex-none items-center justify-center
               rounded-lg opacity-60 hover:bg-black/5 hover:opacity-100;
    }

    .ui-alert-success {
        @apply border-emerald-200 bg-emerald-50 text-emerald-800;
    }

    .ui-alert-error {
        @apply border-red-200 bg-red-50 text-red-800;
    }

    .ui-alert-warning {
        @apply border-amber-200 bg-amber-50 text-amber-800;
    }

    .ui-alert-info {
        @apply border-sky-200 bg-sky-50 text-sky-800;
    }

    /*
    |--------------------------------------------------------------------------
    | Estados vazios e cartões mobile
    |--------------------------------------------------------------------------
    */

    .ui-empty-state {
        @apply flex min-h-64 flex-col items-center justify-center
               px-6 py-14 text-center;
    }

    .ui-empty-state-title {
        @apply mt-4 text-lg font-bold text-slate-900;
    }

    .ui-empty-state-description {
        @apply mt-1.5 max-w-lg text-sm leading-6 text-slate-500;
    }

    .ui-mobile-card {
        @apply rounded-2xl border border-slate-200 bg-white p-5 shadow-sm;
    }

    .ui-detail-label {
        @apply text-xs font-bold uppercase tracking-wide text-slate-500;
    }

    .ui-detail-value {
        @apply mt-1 font-semibold text-slate-900;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@layer components {
    /*
    |--------------------------------------------------------------------------
    | Extensões da biblioteca de componentes
    |--------------------------------------------------------------------------
    */

    .ui-page-header-content {
        @apply relative z-10 flex flex-col gap-5 sm:flex-row
               sm:items-center sm:justify-between;
    }

    .ui-page-header-icon {
        @apply flex h-12 w-12 flex-none items-center justify-center
               rounded-2xl bg-indigo-100 text-indigo-600;
    }

    .ui-page-header-icon > svg {
        @apply h-6 w-6;
    }

    .ui-page-header-meta {
        @apply mt-3 flex flex-wrap items-center gap-2 text-xs text-slate-500;
    }

    .ui-page-header-actions {
        @apply flex w-full flex-col gap-2 sm:w-auto sm:flex-row
               sm:flex-wrap sm:items-center sm:justify-end;
    }

    .ui-page-header-actions > * {
        @apply w-full sm:w-auto;
    }

    .ui-card-actions {
        @apply flex flex-wrap items-center gap-2;
    }

    .ui-card-soft {
        @apply bg-slate-50/80;
    }

    .ui-card-primary {
        @apply border-indigo-200 bg-indigo-50/60;
    }

    .ui-card-success {
        @apply border-emerald-200 bg-emerald-50/60;
    }

    .ui-card-warning {
        @apply border-amber-200 bg-amber-50/60;
    }

    .ui-card-danger {
        @apply border-red-200 bg-red-50/60;
    }

    .ui-card-info {
        @apply border-sky-200 bg-sky-50/60;
    }

    .ui-btn-info {
        @apply border-sky-600 bg-sky-600 text-white
               hover:border-sky-700 hover:bg-sky-700
               focus-visible:ring-sky-500;
    }

    .ui-btn-icon,
    .ui-btn-icon > svg {
        @apply h-4 w-4 flex-none;
    }

    .ui-badge-sm {
        @apply px-2 py-0.5 text-[10px];
    }

    .ui-badge-md {
        @apply px-2.5 py-1 text-xs;
    }

    .ui-badge-lg {
        @apply px-3 py-1.5 text-sm;
    }

    .ui-badge-dot {
        @apply h-1.5 w-1.5 rounded-full bg-current;
    }

    .ui-table-embedded {
        @apply rounded-none border-0 shadow-none;
    }

    .ui-table-compact .ui-table th {
        @apply px-4 py-3;
    }

    .ui-table-compact .ui-table td {
        @apply px-4 py-3;
    }

    .ui-table-pagination {
        @apply border-t border-slate-200 bg-white px-5 py-4;
    }

    .ui-empty-state-icon {
        @apply flex h-16 w-16 items-center justify-center rounded-3xl;
    }

    .ui-empty-state-icon > svg {
        @apply h-8 w-8;
    }

    .ui-empty-state-actions {
        @apply mt-5 flex flex-col gap-2 sm:flex-row;
    }

    .ui-form-actions-static {
        @apply rounded-2xl border border-slate-200 bg-white p-4;
    }

    .ui-form-actions-inner {
        @apply flex flex-col-reverse gap-3 sm:flex-row sm:items-center
               sm:justify-end;
    }

    .ui-form-actions-secondary,
    .ui-form-actions-primary {
        @apply flex flex-col gap-2 sm:flex-row;
    }

    .ui-form-actions-secondary > *,
    .ui-form-actions-primary > * {
        @apply w-full sm:w-auto;
    }

    .ui-filter-actions {
        @apply flex flex-col-reverse gap-2 pt-5 sm:flex-row
               sm:items-center sm:justify-end;
    }

    .ui-filter-actions-divider {
        @apply mt-5 border-t border-slate-100;
    }

    .ui-filter-actions-secondary,
    .ui-filter-actions-primary {
        @apply flex flex-col gap-2 sm:flex-row;
    }

    .ui-filter-actions-secondary > *,
    .ui-filter-actions-primary > * {
        @apply w-full sm:w-auto;
    }

    .ui-checkbox-card {
        @apply flex cursor-pointer items-start gap-3 rounded-2xl border
               border-slate-200 bg-slate-50 p-4 hover:border-slate-300
               hover:bg-slate-100/70;
    }

    .ui-checkbox {
        @apply mt-0.5 h-5 w-5 flex-none rounded border-slate-300
               text-indigo-600 focus:ring-indigo-500
               disabled:cursor-not-allowed disabled:opacity-60;
    }

    .ui-checkbox-label {
        @apply block text-sm font-bold text-slate-800;
    }

    .ui-checkbox-help {
        @apply mt-1 block text-xs leading-5 text-slate-500;
    }

    .ui-switch-card {
        @apply flex cursor-pointer items-center gap-4 rounded-2xl border
               border-slate-200 bg-slate-50 p-4 hover:border-slate-300
               hover:bg-slate-100/70;
    }

    .ui-switch-label {
        @apply block text-sm font-bold text-slate-800;
    }

    .ui-switch-help {
        @apply mt-1 block text-xs leading-5 text-slate-500;
    }

    .ui-switch-control {
        @apply relative flex flex-none items-center;
    }

    .ui-switch-track {
        @apply relative h-7 w-12 rounded-full bg-slate-300
               transition-colors peer-checked:bg-indigo-600
               peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-500
               peer-focus-visible:ring-offset-2 peer-disabled:opacity-60;
    }

    .ui-switch-thumb {
        @apply absolute left-1 top-1 h-5 w-5 rounded-full bg-white
               shadow-sm transition-transform;
    }

    .ui-switch-control input:checked + .ui-switch-track .ui-switch-thumb {
        transform: translateX(1.25rem);
    }

    .ui-status-panel {
        @apply overflow-hidden rounded-3xl border;
    }

    .ui-status-panel-content {
        @apply flex flex-col gap-5 p-5 sm:p-6 lg:flex-row
               lg:items-center lg:justify-between;
    }

    .ui-status-panel-title {
        @apply text-lg font-extrabold text-slate-950;
    }

    .ui-status-panel-description {
        @apply mt-2 max-w-3xl text-sm leading-6 text-slate-700;
    }

    .ui-status-panel-icon {
        @apply flex h-12 w-12 flex-none items-center justify-center
               rounded-2xl bg-white/70 shadow-sm;
    }

    .ui-status-panel-icon > svg {
        @apply h-6 w-6;
    }

    .ui-status-panel-details {
        @apply mt-4 grid gap-3 sm:grid-cols-2;
    }

    .ui-status-panel-actions {
        @apply flex w-full flex-col gap-3 sm:w-auto sm:flex-row
               lg:flex-col;
    }

    .ui-status-panel-actions > * {
        @apply w-full;
    }

    .ui-status-panel-neutral {
        @apply border-slate-200 bg-slate-50;
    }

    .ui-status-panel-primary {
        @apply border-indigo-200 bg-indigo-50;
    }

    .ui-status-panel-success {
        @apply border-emerald-200 bg-emerald-50;
    }

    .ui-status-panel-warning {
        @apply border-amber-200 bg-amber-50;
    }

    .ui-status-panel-danger {
        @apply border-red-200 bg-red-50;
    }

    .ui-status-panel-info {
        @apply border-sky-200 bg-sky-50;
    }

    .ui-copy-field-label {
        @apply mb-1.5 block text-sm font-bold text-slate-700;
    }

    .ui-copy-field-control {
        @apply flex flex-col gap-2 sm:flex-row;
    }

    .ui-copy-field-value {
        @apply block min-h-11 min-w-0 flex-1 rounded-xl border-slate-300
               bg-slate-50 font-mono text-sm text-slate-900 shadow-sm
               focus:border-indigo-500 focus:ring-indigo-500;
    }

    .ui-copy-field-button {
        @apply inline-flex min-h-11 flex-none items-center justify-center
               gap-2 rounded-xl border border-slate-300 bg-white px-4
               text-sm font-bold text-slate-700 shadow-sm
               hover:border-indigo-300 hover:bg-indigo-50
               hover:text-indigo-700 focus-visible:ring-2
               focus-visible:ring-indigo-500 focus-visible:ring-offset-2;
    }
}