@import url('theme.css');

/* Preferência: ocultar bordas coloridas (tailwind border-l-4 / border-t-4) */
.hide-colored-borders .border-l-4 {
  border-left-width: 0 !important;
}

.hide-colored-borders .border-t-4 {
  border-top-width: 0 !important;
}

/* Utilitárias da paleta (Cor da Paleta) — botões, links, bordas, etc. */
.btn-palette { background-color: var(--color-primary); color: #fff; transition: opacity 0.2s; }
.btn-palette:hover { opacity: 0.9; }
#btnDownloadZip.btn-palette { background-color: var(--color-primary); }
/* Links do sistema: normal gray-500, visitado gray-600, hover = cor primária */
a { color: #6b7280; text-decoration: underline; transition: color 0.2s; }
a:visited { color: #4b5563; }
a:hover { color: var(--color-primary); }

.link-palette { color: #6b7280; text-decoration: underline; font-weight: bold; transition: color 0.2s; }
.link-palette:visited { color: #4b5563; }
.link-palette:hover { color: var(--color-primary); }

.dark a { color: #9ca3af; }
.dark a:visited { color: #6b7280; }
.dark .link-palette { color: #9ca3af; }
.dark .link-palette:visited { color: #6b7280; }

/* Link Changelog / Termos / Licença na modal Sobre */
.about-changelog-link { color: #6b7280; text-decoration: underline; font-weight: bold; transition: color 0.2s; }
.about-changelog-link:visited { color: #4b5563; }
.about-changelog-link:hover { color: var(--color-primary); }
.dark .about-changelog-link { color: #9ca3af; }
.dark .about-changelog-link:visited { color: #6b7280; }

/* Brand (logo + nome) — sempre na paleta primária, hover 90% */
.brand-link {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}
.brand-link:visited {
  color: var(--color-primary) !important;
}
.brand-link:hover {
  color: var(--color-primary) !important;
}
.brand-link .brand-fade {
  transition: opacity 0.2s;
}
.brand-link:hover .brand-fade {
  opacity: 0.9;
}
.bg-palette { background-color: var(--color-primary); }
.bg-palette-light { background-color: var(--color-primary-bg); }
.border-palette { border-color: var(--color-primary); }
.text-palette { color: var(--color-primary); }

.nav-config-active { background-color: var(--color-primary-bg); }

::selection { background-color: var(--color-primary-light); color: #fff; }

/* Spinner denso: anel completo (rastro) + segmento ativo, com sombra definindo o caminho */
.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 6px solid var(--color-loader-track);
  border-top-color: var(--color-loader-spinner);
  animation: spin 0.9s linear infinite;
  box-shadow: var(--color-loader-shadow);
}
@keyframes spin { to { transform: rotate(360deg); } }

input[type=range] { -webkit-appearance: none; width: 100%; height: 10px; background: var(--color-slider-track); border-radius: 5px; outline: none; opacity: 0.9; transition: opacity .2s; }
input[type=range]:hover { opacity: 1; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-slider-thumb); cursor: pointer; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
input[type=range]:disabled { background: var(--color-slider-disabled); cursor: not-allowed; }

input[type="checkbox"] { accent-color: var(--color-primary); }

/* Campos de formulário padronizados (Dados, Pacotes, ADMIN, Configurações e modais) */
input:not([type="checkbox"]):not([type="range"]):not([type="hidden"]),
select,
textarea {
  background-color: var(--color-field-bg);
  border-color: var(--color-field-border);
  color: var(--color-field-text);
}
input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--color-field-disabled-bg);
}

/* Toolbar Styles */
.toolbar-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s; color: var(--color-toolbar-text); }
.toolbar-btn:hover { background-color: var(--color-toolbar-bg-hover); }
.toolbar-btn.active { background-color: var(--color-toolbar-active-bg); color: var(--color-toolbar-active-text); }

.icon-sm svg { width: 1.0rem; height: 1.0rem; }
.icon-md svg { width: 1.5rem; height: 1.5rem; }
.icon-lg svg { width: 2.0rem; height: 2.0rem; }

/* ===== Modal Universal Styles ===== */
.modal-overlay {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.modal-overlay.modal-visible {
    opacity: 1;
}

.modal-content {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    transition: all 0.2s ease-out;
}

.modal-content.modal-content-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Animação de shake para erros de validação */
@keyframes modal-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.modal-shake {
    animation: modal-shake 0.5s ease-in-out;
}

/* Focus ring para inputs do modal */
.modal-content input:focus {
    box-shadow: 0 0 0 3px var(--color-modal-focus-ring);
}

/* Animação de fade in para o backdrop */
@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animação de slide up para o conteúdo */
@keyframes modal-slide-up {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ===== About Modal Social Icons ===== */
.about-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.about-social-icon:hover {
    color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dark .about-social-icon:hover {
    color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Header: bloco Usuário e Saldo — tipografia e tamanhos coerentes com o tema */
.header-user-block {
  font-size: 0.75rem; /* 12px, alinhado ao texto secundário do header */
  line-height: 1.25;
}
.header-user-label {
  font-weight: 500;
  color: var(--color-toolbar-text);
  font-size: 0.6875rem; /* 11px, um degrau abaixo do valor */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.header-user-value {
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  color: var(--color-field-text);
}
.dark .header-user-value {
  color: var(--color-field-text);
}
.header-user-credits {
  color: #059669;
  font-variant-numeric: tabular-nums;
}
.dark .header-user-credits {
  color: #34d399;
}
.header-user-credits-suffix {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #ca8a04;
}
.dark .header-user-credits-suffix {
  color: #facc15;
}

/* Auth tabs (Entrar | Cadastrar) */
.auth-tab {
    color: var(--color-toolbar-text, #6b7280);
    cursor: pointer;
}
.auth-tab.auth-tab-active {
    background-color: var(--color-primary);
    color: #fff;
}
.dark .auth-tab.auth-tab-active {
    background-color: var(--color-primary);
    color: #fff;
}