/* =========================================
AURA MUSIC – TEMA GLOBAL
========================================= */

/* Reset básico */
*,
*::before,
*::after {
box-sizing: border-box;
}

html,
body {
margin: 0;
padding: 0;
}

/* =========================================
VARIÁVEIS – TEMA ÚNICO (DARK)
========================================= */

:root {
/* Fundo geral */
--aura-bg: #020617;
--aura-bg-page: #020617;
--aura-bg-page-soft: #020617;

/* Header */
--aura-header-bg: rgba(10, 20, 40, 0.94);
--aura-header-border: rgba(148, 163, 184, 0.35);

/* Cards */
--aura-card-bg: radial-gradient(circle at top, #051427, #020617 60%);
--aura-card-bg-soft: rgba(15, 23, 42, 0.95);
--aura-card-border: rgba(148, 163, 184, 0.35);

/* Tipografia */
--aura-text-main: #f9fafb;
--aura-text-muted: #e5e7eb;
--aura-text-soft: #94a3b8;

/* Acentos (neon) */
--aura-accent: #00ff84;
--aura-accent-soft: rgba(0, 255, 132, 0.18);
--aura-accent-strong: rgba(0, 255, 132, 0.55);

/* Perigo / apagar */
--aura-danger: #ff4d6a;
--aura-danger-soft: rgba(255, 77, 106, 0.18);

/* Sombra padrão dos cards */
--aura-shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.75);

--aura-radius-card: 26px;
--aura-radius-pill: 999px;
}

/* =========================================
CORPO DAS PÁGINAS INTERNAS (DASHBOARD)
========================================= */

/* bodyClass = "dashboard-body" vindo do layout.ejs */
body.dashboard-body {
min-height: 100vh;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: radial-gradient(circle at top, var(--aura-bg) 0, #020617 65%);
color: var(--aura-text-main);
-webkit-font-smoothing: antialiased;
}

/* Wrapper geral da página (espaço pro header fixo) */
.page {
padding-top: 80px;
}

/* =========================================
HEADER / TOPBAR
========================================= */

.topbar {
position: sticky;
top: 0;
z-index: 40;
backdrop-filter: blur(18px);
background: linear-gradient(
to bottom,
var(--aura-header-bg),
rgba(10, 20, 40, 0.7),
transparent
);
border-bottom: 1px solid var(--aura-header-border);
transition:
background 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease,
border-color 0.2s ease;
}

.topbar--scrolled {
background: var(--aura-header-bg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
transform: translateY(-2px);
}

.topbar-inner {
max-width: 1200px;
margin: 0 auto;
padding: 14px 32px;
display: flex;
align-items: center;
justify-content: space-between;
}

/* Logo */
.topbar-left {
display: flex;
align-items: center;
}

.topbar-logo-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: none;
box-shadow: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}

.topbar-logo-wrap:hover {
transform: translateY(-1px);
opacity: 0.85;
}

.topbar-logo {
height: 52px;
width: auto;
}

/* Navegação */
.topbar-nav {
display: flex;
align-items: center;
gap: 18px;
font-size: 14px;
}

.topbar-user {
color: var(--aura-text-muted);
font-size: 14px;
margin-right: 12px;
}

/* Links do menu */
.topbar-link {
position: relative;
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
font-size: 14px;
text-decoration: none;
color: var(--aura-text-soft);
border: 1px solid transparent;
transition:
color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease,
border-color 0.18s ease;
}

.topbar-link::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 3px;
height: 2px;
border-radius: 999px;
background: radial-gradient(circle at center, var(--aura-accent), transparent);
opacity: 0;
transform: scaleX(0.4);
transition:
opacity 0.2s ease,
transform 0.2s ease;
}

.topbar-link:hover {
color: var(--aura-text-main);
background: rgba(148, 163, 184, 0.08);
box-shadow: 0 0 16px rgba(148, 163, 184, 0.25);
transform: translateY(-1px);
}

.topbar-link:hover::after {
opacity: 1;
transform: scaleX(1);
}

.topbar-link.is-active {
color: #020617;
background: var(--aura-accent);
border-color: var(--aura-accent-strong);
box-shadow: 0 0 22px rgba(0, 255, 132, 0.5);
font-weight: 600;
}

.topbar-link.is-active::after {
opacity: 0;
}

/* Botão sair */
.topbar-link-logout {
background: var(--aura-danger-soft);
color: #fff;
border-color: rgba(248, 113, 113, 0.7);
box-shadow: 0 0 22px rgba(248, 113, 113, 0.45);
}

.topbar-link-logout:hover {
background: var(--aura-danger);
color: #fff;
}

/* Botão hamburguer (mobile) – agora botão MENU */
.topbar-menu-toggle {
display: none; /* só aparece no mobile no @media */
border: none;
background: transparent;
cursor: pointer;
padding: 4px 10px;
margin-left: 10px;
}

/* Texto dentro do botão */
.topbar-menu-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid var(--aura-accent-strong);
background: radial-gradient(circle at top, var(--aura-accent), #00c96a);
color: #020617;
box-shadow: 0 0 20px rgba(0, 255, 132, 0.6);
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
opacity 0.18s ease;
}

/* Hover / toque */
.topbar-menu-toggle:hover .topbar-menu-label {
transform: translateY(-1px);
box-shadow: 0 0 26px rgba(0, 255, 132, 0.85);
}

/* Estado aberto – fica mais “fechar menu” visualmente */
.topbar-menu-toggle.is-open .topbar-menu-label {
background: radial-gradient(circle at top, #0f172a, #020617);
color: var(--aura-accent);
border-color: var(--aura-accent-strong);
box-shadow: 0 0 18px rgba(0, 255, 132, 0.5);
}

/* =========================================
   CONTEÚDO / TIPOGRAFIA
   ========================================= */

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
}

.page-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 4px;
}

.page-subtitle {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--aura-text-soft);
}

.card-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}

.card-subtitle {
  font-size: 14px;
  margin: 0 0 16px;
  color: var(--aura-text-soft);
}

/* =========================================
   CARDS
   ========================================= */

.card {
  background: var(--aura-card-bg);
  border-radius: var(--aura-radius-card);
  border: 1px solid var(--aura-card-border);
  box-shadow: var(--aura-shadow-soft);
  padding: 24px 24px 26px;
  position: relative;
  overflow: hidden;
  animation: card-in 0.4s ease forwards;
  opacity: 0;
}

.card::before {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: 0;
  background:
    radial-gradient(circle at top left, rgba(0, 255, 132, 0.12), transparent 55%),
    radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.12), transparent 55%);
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.card:hover::before {
  opacity: 1;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   BOTÕES
   ========================================= */

button {
  font-family: inherit;
}

.btn-primary,
.btn-save-month,
.btn-save,
.btn-filter,
.btn-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: var(--aura-radius-pill);
  border: 1px solid var(--aura-accent-strong);
  background: radial-gradient(circle at top left, #00ff84, #12b981);
  color: #020617;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow:
    0 0 20px rgba(0, 255, 132, 0.6),
    0 18px 30px rgba(0, 0, 0, 0.7);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.btn-save-month {
  width: 100%;
  margin-top: 16px;
}

.btn-primary:hover,
.btn-save-month:hover,
.btn-save:hover,
.btn-filter:hover,
.btn-apply:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 0 26px rgba(0, 255, 132, 0.8),
    0 18px 40px rgba(0, 0, 0, 0.85);
}

.btn-cancel,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--aura-radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(15, 23, 42, 0.75);
  color: var(--aura-text-main);
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-cancel:hover,
.btn-ghost:hover {
  background: rgba(30, 64, 175, 0.8);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.btn-delete-month,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--aura-radius-pill);
  padding: 8px 16px;
  border: 1px solid rgba(248, 113, 113, 0.8);
  background: var(--aura-danger-soft);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(248, 113, 113, 0.65);
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-delete-month:hover,
.btn-danger:hover {
  background: var(--aura-danger);
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(248, 113, 113, 0.85);
}

/* =========================================
FORMULÁRIOS
========================================= */

.field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
}

.field label {
font-size: 13px;
color: var(--aura-text-muted);
}

/* Base (tema DARK) – inputs e textarea escuros */
input,
select,
textarea {
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.5);
background: rgba(15, 23, 42, 0.9);
color: var(--aura-text-main);
padding: 10px 14px;
font-size: 14px;
outline: none;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background 0.15s ease;
}

/* Select bonitão – base no dark */
select {
color: var(--aura-text-main) !important;
background-color: rgba(15, 23, 42, 0.95) !important;
}


select option {
background-color: rgba(15, 23, 42, 0.95);
color: #ffffff;
padding: 12px;
font-size: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


select option:hover,
select option:focus,
select option:checked {
background-color: #00ff84 !important;
color: #000 !important;
}

/* Foco */
input:focus,
select:focus,
textarea:focus {
border-color: var(--aura-accent);
box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.8);
}

/* =========================================
FILTROS – AJUSTE POR TEMA
========================================= */

/* DARK – card escuro e campos escuros */
body.theme-dark .filters-card .field-input-wrapper {
background: rgba(15, 23, 42, 0.96);
border: 1px solid rgba(148, 163, 184, 0.5);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.85);
}

body.theme-dark .filters-card input,
body.theme-dark .filters-card select,
body.theme-dark .filters-card textarea {
background: transparent;
color: var(--aura-text-main);
}

body.theme-dark .filters-card input::placeholder,
body.theme-dark .filters-card textarea::placeholder {
color: rgba(148, 163, 184, 0.85);
}


/* =========================================
   PÁGINA FINANCEIRO
   ========================================= */

.finance-page {
  padding-top: 24px;
}

.finance-grid {
  max-width: 1200px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: flex-start;
}

.card-finance-form,
.card-finance-chart {
  background: var(--aura-card-bg);
  border-radius: var(--aura-radius-card);
  border: 1px solid var(--aura-card-border);
  box-shadow: var(--aura-shadow-soft);
  padding: 24px 24px 28px;
}

/* Últimos lançamentos */
.last-records {
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

.finance-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.finance-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.finance-item:last-child {
  border-bottom: none;
}

.finance-item-label {
  font-size: 13px;
  color: var(--aura-text-muted);
}

.finance-item-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--aura-accent);
}

.finance-delete-form {
  margin: 0;
}

/* Card do gráfico */
.card-finance-chart {
  min-height: 380px;
  max-height: 450px;
  display: flex;
  flex-direction: column;
}

.card-finance-chart .card-title {
  margin: 0 0 4px;
}

.card-finance-chart .card-subtitle {
  margin: 0 0 16px;
}

.card-finance-chart canvas#financeChart {
  flex: 1;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  display: block;
}

/* =========================================
PÁGINA OBRAS CADASTRADAS (DASHBOARD)
========================================= */

.content-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}

.content-header > div {
display: flex;
flex-direction: column;
gap: 4px;
}

/* Botão "Nova obra" com ícone */
.btn-primary--icon {
display: inline-flex;
align-items: center;
gap: 8px;
}

.btn-icon-circle,
.btn-icon-circle-small {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.5);
font-weight: 700;
color: #ffffff; /* ++ fica branco brilhante */
text-shadow: 0 0 6px rgba(255, 255, 255, 0.75); /* glow suave */
box-shadow: 0 0 12px rgba(255, 255, 255, 0.15); /* leve iluminação */
transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-icon-circle {
width: 24px;
height: 24px;
font-size: 16px;
}

.btn-icon-circle-small {
width: 22px;
height: 22px;
font-size: 12px;
}

/* Efeito no hover do botão inteiro */
.btn-primary--icon:hover .btn-icon-circle,
.btn-primary--icon:hover .btn-icon-circle-small {
transform: scale(1.08);
opacity: 1;
}

/* --------- CARDS DE ESTATÍSTICAS ---------- */

.stats-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-bottom: 24px;
}

.stats-card {
background: var(--aura-card-bg);
border-radius: var(--aura-radius-card);
border: 1px solid var(--aura-card-border);
box-shadow: var(--aura-shadow-soft);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 4px;
}

.stats-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--aura-text-soft);
}

.stats-value {
font-size: 22px;
font-weight: 700;
}

.stats-value--green {
color: var(--aura-accent);
}

.stats-value--yellow {
color: #facc15;
}

/* --------- CARD DE FILTROS ---------- */

.filters-card {
background: var(--aura-card-bg);
border-radius: var(--aura-radius-card);
border: 1px solid var(--aura-card-border);
box-shadow: var(--aura-shadow-soft);
padding: 18px 20px 20px;
margin-bottom: 24px;
transition: padding-bottom 0.18s ease, border-color 0.18s ease;
}

.filters-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}

.filters-title-group {
display: flex;
align-items: center;
gap: 10px;
}

.filters-title {
margin: 0;
font-size: 18px;
font-weight: 600;
}

.filters-subtitle {
margin: 2px 0 0;
font-size: 13px;
color: var(--aura-text-soft);
}

/* Botão de abrir/fechar filtros */
.filters-toggle {
border: none;
background: rgba(15, 23, 42, 0.95);
border-radius: 999px;
padding: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 14px rgba(148, 163, 184, 0.4);
}

.filters-toggle .chevron {
width: 10px;
height: 10px;
border-left: 2px solid #e5e7eb;
border-bottom: 2px solid #e5e7eb;
transform: rotate(-45deg) translateY(-1px);
transition: transform 0.18s ease;
}

.filters-card.is-collapsed .chevron {
transform: rotate(135deg) translateY(1px);
}

/* Ações de filtros (aplicar / limpar) */
.filters-actions {
display: flex;
align-items: center;
gap: 8px;
}

.btn-apply-filters {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--aura-radius-pill);
border: 1px solid var(--aura-accent-strong);
background: var(--aura-accent-soft);
color: var(--aura-text-main);
font-size: 13px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.btn-apply-filters:hover {
background: var(--aura-accent);
color: #020617;
}

.btn-clear-filters {
padding: 8px 14px;
border-radius: var(--aura-radius-pill);
border: 1px solid rgba(148, 163, 184, 0.5);
background: rgba(15, 23, 42, 0.8);
color: var(--aura-text-main);
font-size: 13px;
cursor: pointer;
}

.btn-clear-filters:hover {
background: rgba(30, 64, 175, 0.9);
}

/* Grid dos filtros */
.filters-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px 16px;
margin-top: 6px;
}

/* Campo com ícone à esquerda */
.icon-field .field-input-wrapper {
position: relative;
display: flex;
align-items: center;
}

.field-icon {
position: absolute;
left: 10px;
font-size: 14px;
opacity: 0.8;
}

.icon-field input,
.icon-field select {
padding-left: 30px;
}

/* Wrapper do select tipo iOS */
.filters-select-wrapper {
position: relative;
}

.ios-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 32px;
background-image: linear-gradient(45deg, transparent 50%, #ffffff 50%),
linear-gradient(135deg, #ffffff 50%, transparent 50%);
background-position: calc(100% - 18px) 13px, calc(100% - 13px) 13px;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}

/* --------- TABELA DE OBRAS ---------- */

.table-wrapper {
background: rgba(15, 23, 42, 0.4);
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: var(--aura-shadow-soft);
padding: 12px 18px 18px;
overflow-x: auto;
}

.songs-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}

.songs-table thead th {
text-align: left;
padding: 10px 8px;
font-weight: 500;
font-size: 13px;
color: var(--aura-text-soft);
border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.songs-table tbody td {
padding: 10px 8px;
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.songs-table tbody tr:last-child td {
border-bottom: none;
}

.empty-row {
text-align: center;
padding: 22px 8px;
color: var(--aura-text-soft);
}

/* Título + "avatar" da música */
.song-main {
display: flex;
align-items: center;
gap: 10px;
}

.song-cover {
width: 32px;
height: 32px;
border-radius: 999px;
background: radial-gradient(circle at top, #22c55e, #16a34a);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #020617;
box-shadow: 0 0 16px rgba(34, 197, 94, 0.8);
}

.song-main-text {
display: flex;
flex-direction: column;
gap: 2px;
}

.song-title {
font-weight: 600;
}

.song-sub-tag {
font-size: 12px;
color: var(--aura-text-soft);
}

.song-sub-tag--muted {
color: rgba(148, 163, 184, 0.7);
}

/* Badges de status */
.status-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
border: 1px solid transparent;
}

.status-badge--green {
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.6);
color: #bbf7d0;
}

.status-badge--gray {
background: rgba(148, 163, 184, 0.15);
border-color: rgba(148, 163, 184, 0.7);
color: #e5e7eb;
}

/* Ações */
.col-actions {
width: 150px;
}

.actions-cell {
display: flex;
align-items: center;
gap: 8px;
}

/* Botões de ação (Ver / Editar) – ícone + texto na mesma linha */
.btn-action {
display: inline-flex; /* deixa lado a lado */
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px; /* espaço entre ícone e texto */
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
line-height: 1;
text-decoration: none;
border: 1px solid transparent;
white-space: nowrap; /* impede quebra de linha */
}

.btn-action-icon,
.btn-action-text {
display: inline-block;
line-height: 1;
}

/* VER (verde neon) */
.btn-action-view {
background: rgba(0, 255, 132, 0.18);
color: #00ff84;
border-color: rgba(0, 255, 132, 0.35);
}

/* EDITAR (azul) */
.btn-action-edit {
background: rgba(37, 99, 235, 0.18);
color: #93c5fd;
border-color: rgba(37, 99, 235, 0.4);
}

/* Botões de ação (Ver / Editar) – ícone + texto na mesma linha */
.actions-cell .btn-link {
display: inline-flex; /* ícone + texto lado a lado */
align-items: center;
justify-content: center;
gap: 6px; /* espaço entre 👁 / ✏️ e o texto */
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
line-height: 1;
text-decoration: none;
border: 1px solid transparent;
}

/* VER */
.actions-cell .btn-link {
background: rgba(0, 255, 132, 0.18);
color: #00ff84;
border-color: rgba(0, 255, 132, 0.35);
}

/* EDITAR (usa a classe extra btn-link--secondary) */
.actions-cell .btn-link.btn-link--secondary {
background: rgba(37, 99, 235, 0.18);
color: #93c5fd;
border-color: rgba(37, 99, 235, 0.4);
}

/* ==== AÇÕES DA TABELA DE OBRAS ==== */
.songs-table .actions-cell {
display: flex;
flex-direction: row; /* força FICAR lado a lado */
gap: 10px; /* espaço entre Ver / Editar */
justify-content: flex-start;
align-items: center;
}

.songs-table .actions-cell .btn-action {
display: inline-flex; /* tira comportamento de "botão de linha inteira" */
align-items: center;
justify-content: center;
width: auto; /* garante que NÃO ocupe 100% da coluna */
}

/* --------- RESPONSIVO PARA OBRAS ---------- */

@media (max-width: 960px) {
.stats-row {
grid-template-columns: 1fr;
}

.filters-card {
padding: 16px;
}

.filters-card-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}

.filters-actions {
align-self: stretch;
justify-content: flex-start;
}

.filters-grid {
grid-template-columns: 1fr;
}

.table-wrapper {
padding-inline: 12px;
}
}

/* =========================================
   PÁGINA GRÁFICOS
   ========================================= */

.analytics-page {
  padding-top: 24px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 32px;
}

.card-analytics {
  background: var(--aura-card-bg);
  border-radius: var(--aura-radius-card);
  border: 1px solid var(--aura-card-border);
  box-shadow: var(--aura-shadow-soft);
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
}

.card-analytics .card-title {
  margin-bottom: 4px;
}

.card-analytics .card-subtitle {
  margin-bottom: 16px;
}

.chart-wrapper {
  position: relative;
  flex: 1;
  min-height: 260px;
}

.chart-wrapper canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* =========================================
PÁGINA DETALHE DA OBRA (song-view)
========================================= */

.song-view-page {
padding-top: 24px;
}

/* HERO / CABEÇALHO */

.song-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}

.song-hero-main {
display: flex;
gap: 18px;
align-items: flex-start;
}

.song-hero-cover {
width: 72px;
height: 72px;
border-radius: 24px;
background: radial-gradient(circle at top left, var(--aura-accent-strong), #0f172a);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 24px;
letter-spacing: 0.12em;
color: #020617;
box-shadow: 0 18px 40px rgba(0, 255, 132, 0.55);
}

.song-hero-text {
display: flex;
flex-direction: column;
gap: 4px;
}

.song-hero-breadcrumb {
font-size: 12px;
color: var(--aura-text-soft);
margin-bottom: 4px;
}

.link-breadcrumb {
color: var(--aura-accent);
text-decoration: none;
}

.link-breadcrumb:hover {
text-decoration: underline;
}

.breadcrumb-separator {
margin: 0 4px;
opacity: 0.6;
}

.song-hero-title {
font-size: 26px;
font-weight: 700;
margin: 0;
}

.song-hero-meta {
margin: 2px 0 6px;
font-size: 13px;
color: var(--aura-text-soft);
}

.song-hero-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 4px;
}

.song-hero-created {
font-size: 12px;
color: var(--aura-text-soft);
}

.song-hero-created strong {
color: var(--aura-text-muted);
}

/* Status pills (Spotify vibe) */

.status-pill {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid rgba(148, 163, 184, 0.5);
}

.status-pill--green {
background: rgba(22, 163, 74, 0.18);
border-color: rgba(34, 197, 94, 0.85);
color: #bbf7d0;
}

.status-pill--gray {
background: rgba(15, 23, 42, 0.8);
border-color: rgba(148, 163, 184, 0.6);
color: var(--aura-text-soft);
}

/* Ações do hero */

.song-hero-actions {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
}

.song-hero-back {
font-size: 13px;
}

/* GRID PRINCIPAL */

.song-view-grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
gap: 24px;
align-items: flex-start;
}

/* Cards genéricos da página */

.song-card {
display: flex;
flex-direction: column;
}

.song-card-header {
margin-bottom: 12px;
}

.song-card-title {
font-size: 18px;
font-weight: 600;
margin: 0 0 2px;
}

.song-card-subtitle {
font-size: 13px;
margin: 0;
color: var(--aura-text-soft);
}

/* Letra */

.song-lyrics-body {
border-radius: 18px;
background: rgba(15, 23, 42, 0.64);
border: 1px solid rgba(148, 163, 184, 0.35);
padding: 16px 18px;
max-height: 420px;
overflow: auto;
}

.song-lyrics-text {
margin: 0;
white-space: pre-wrap;
font-family: inherit;
font-size: 14px;
line-height: 1.6;
}

.song-lyrics-empty {
font-size: 13px;
color: var(--aura-text-soft);
}

/* Sidebar */

.song-sidebar {
display: flex;
flex-direction: column;
gap: 16px;
}

/* Compositores */

.song-composers-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.composer-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 14px;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(30, 64, 175, 0.5);
}

.composer-avatar {
width: 32px;
height: 32px;
border-radius: 999px;
background: radial-gradient(circle at top left, var(--aura-accent), #0f172a);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #020617;
}

.composer-main {
flex: 1;
display: flex;
flex-direction: column;
}

.composer-name {
font-size: 14px;
}

.composer-role {
font-size: 11px;
color: var(--aura-text-soft);
}

.composer-share {
font-size: 13px;
font-weight: 600;
color: var(--aura-accent);
}

/* Guia / áudio */

.song-audio-body {
display: flex;
flex-direction: column;
gap: 10px;
}

.song-audio-player {
width: 100%;
}

.song-audio-download {
font-size: 13px;
color: var(--aura-accent);
text-decoration: none;
}

.song-audio-download:hover {
text-decoration: underline;
}

/* Informações */

.song-info-list {
margin: 0;
padding: 0;
}

.song-info-item {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
font-size: 13px;
}

.song-info-item:last-child {
border-bottom: none;
}

.song-info-item dt {
font-weight: 500;
color: var(--aura-text-muted);
}

.song-info-item dd {
margin: 0;
text-align: right;
}

/* Responsivo para a página de detalhes */

@media (max-width: 960px) {
.song-hero {
flex-direction: column;
align-items: stretch;
}

.song-hero-actions {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}

.song-view-grid {
grid-template-columns: 1fr;
}
}

/* Bloco de ações na página Ver Obra */
.song-view-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 18px;
}

/* Botões principais (Editar / Apagar) */
.song-btn-main {
min-width: 150px;
text-align: center;
}

/* Botão de voltar, estilo mais discreto */
.song-btn-secondary {
border-radius: 999px;
padding: 8px 18px;
font-size: 14px;
text-decoration: none;
border: 1px solid rgba(148, 163, 184, 0.5);
color: var(--aura-text-main);
background: transparent;
transition:
background 0.18s ease,
color 0.18s ease,
border-color 0.18s ease;
}

.song-btn-secondary:hover {
background: rgba(15, 23, 42, 0.9);
border-color: var(--aura-accent-strong);
}

/* MOBILE: deixa tudo em coluna, full width */
@media (max-width: 720px) {
.song-view-actions {
flex-direction: column;
align-items: stretch;
}

.song-view-actions .btn,
.song-view-actions .song-btn-main,
.song-view-actions form button {
width: 100%;
justify-content: center;
}

.song-btn-secondary {
width: 100%;
text-align: center;
}
}

/* =========================================
PÁGINA NOVA / EDITAR OBRA
========================================= */

.song-form-page {
padding-top: 24px;
padding-bottom: 40px;
}

.song-form-page .form-card {
max-width: 960px;
margin: 0 auto 40px;
background: var(--aura-card-bg);
border-radius: var(--aura-radius-card);
border: 1px solid var(--aura-card-border);
box-shadow: var(--aura-shadow-soft);
padding: 28px 26px 30px;
position: relative;
overflow: hidden;
}

/* Glow suave no card */
.song-form-page .form-card::before {
content: "";
position: absolute;
inset: -25%;
opacity: 0;
background:
radial-gradient(circle at top left, rgba(0, 255, 132, 0.2), transparent 60%),
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.18), transparent 60%);
pointer-events: none;
transition: opacity 0.25s ease;
}

.song-form-page .form-card:hover::before {
opacity: 1;
}

.form-title {
font-size: 26px;
font-weight: 700;
margin: 0 0 6px;
}

.form-subtitle {
margin: 0 0 22px;
font-size: 14px;
color: var(--aura-text-soft);
max-width: 560px;
}

/* Títulos das seções internas */
.form-section-title {
font-size: 16px;
font-weight: 600;
margin: 24px 0 8px;
}

/* Dica de texto abaixo de títulos */
.form-hint {
margin: 0 0 10px;
font-size: 13px;
color: var(--aura-text-soft);
}

/* Radios "SIM / NÃO" em estilo pill */
.radio-group {
display: inline-flex;
gap: 8px;
margin-bottom: 8px;
}

.radio-group label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--aura-radius-pill);
border: 1px solid rgba(148, 163, 184, 0.6);
background: rgba(15, 23, 42, 0.9);
color: var(--aura-text-main);
font-size: 13px;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}

.radio-group input {
accent-color: var(--aura-accent);
}

.radio-group input[type="radio"] {
margin: 0;
}

.radio-group label:hover {
background: rgba(30, 64, 175, 0.9);
border-color: var(--aura-accent);
box-shadow: 0 0 18px rgba(0, 255, 132, 0.45);
transform: translateY(-1px);
}

/* Compositores */
#composer-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}

.composer-row {
display: grid;
grid-template-columns: minmax(0, 1.4fr) 90px auto;
gap: 10px;
align-items: center;
}

.composer-row input[type="text"],
.composer-row input[type="number"] {
width: 100%;
}

/* Botão remover autor */
.btn-remove {
border-radius: var(--aura-radius-pill);
border: 1px solid rgba(248, 113, 113, 0.85);
background: var(--aura-danger-soft);
color: #fff;
padding: 8px 12px;
font-size: 12px;
cursor: pointer;
box-shadow: 0 0 14px rgba(248, 113, 113, 0.7);
transition:
background 0.15s ease,
transform 0.15s ease,
box-shadow 0.15s ease;
}

.btn-remove:hover {
background: var(--aura-danger);
transform: translateY(-1px);
box-shadow: 0 0 20px rgba(248, 113, 113, 0.9);
}

/* Botão adicionar autor */
.btn-add-author {
margin-top: 4px;
margin-bottom: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 16px;
border-radius: var(--aura-radius-pill);
border: 1px dashed var(--aura-accent-strong);
background: rgba(15, 23, 42, 0.85);
color: var(--aura-accent);
font-size: 13px;
font-weight: 500;
cursor: pointer;
gap: 6px;
transition:
background 0.15s ease,
transform 0.15s ease,
box-shadow 0.15s ease,
border-color 0.15s ease;
}

.btn-add-author:hover {
background: var(--aura-accent-soft);
border-style: solid;
transform: translateY(-1px);
box-shadow: 0 0 18px rgba(0, 255, 132, 0.7);
}

/* Campo de upload de guia */
.file-field {
margin-bottom: 8px;
}

.file-upload {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 18px;
border: 1px dashed rgba(148, 163, 184, 0.7);
background: rgba(15, 23, 42, 0.9);
color: var(--aura-text-muted);
cursor: pointer;
font-size: 14px;
transition:
background 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}

.file-upload:hover {
background: rgba(30, 64, 175, 0.9);
border-color: var(--aura-accent);
box-shadow: 0 0 20px rgba(0, 255, 132, 0.6);
transform: translateY(-1px);
}

.file-upload-icon {
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at top left, var(--aura-accent), #22c55e);
color: #020617;
font-size: 16px;
}

/* Mensagem de erro */
.form-error {
margin-top: 16px;
padding: 10px 14px;
border-radius: 14px;
border: 1px solid rgba(248, 113, 113, 0.8);
background: rgba(127, 29, 29, 0.85);
color: #fee2e2;
font-size: 13px;
}

/* Ações finais */
.form-actions {
margin-top: 26px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

/* Botão salvar já herda .btn-save global, só refinando um pouco */
.btn-save {
min-width: 170px;
}

/* Responsivo */
@media (max-width: 768px) {
.song-form-page .form-card {
padding: 22px 18px 24px;
}

.composer-row {
grid-template-columns: 1fr 90px auto;
}

.form-actions {
flex-direction: column;
align-items: stretch;
}

.form-actions .btn-save,
.form-actions .btn-cancel {
width: 100%;
justify-content: center;
}
}

/* =========================================
   AJUSTE CARD GRÁFICO FINANCEIRO
   ========================================= */
.finance-chart-wrapper {
position: relative;
height: 260px; /* ajuste aqui se quiser mais alto ou mais baixo */
max-height: 260px;
}

.finance-chart-wrapper canvas {
width: 100% !important;
height: 100% !important;
display: block;
}

/* =========================================
   LOGIN – TELA INICIAL
   ========================================= */

/* centraliza tudo e reaproveita o mesmo fundo do dashboard */
body.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* container da página de login */
.login-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* card do login */
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--aura-card-bg);
  border-radius: var(--aura-radius-card);
  border: 1px solid var(--aura-card-border);
  box-shadow: var(--aura-shadow-soft);
  padding: 28px 26px 24px;
  text-align: left;
}

/* logo dentro do card */
.login-card .logo {
  display: block;
  margin: 0 auto 18px;
  height: 40px;
  width: auto;
}

/* formulário */
.login-form {
  margin-top: 4px;
}

.login-form .field {
  margin-bottom: 14px;
}

/* botão de login aproveita o mesmo estilo base de botão primário */
.btn-login {
  width: 100%;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: var(--aura-radius-pill);
  border: 1px solid var(--aura-accent-strong);
  background: radial-gradient(circle at top left, #00ff84, #12b981);
  color: #020617;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow:
    0 0 20px rgba(0, 255, 132, 0.6),
    0 18px 30px rgba(0, 0, 0, 0.7);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.btn-login:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 0 26px rgba(0, 255, 132, 0.8),
    0 18px 40px rgba(0, 0, 0, 0.85);
}

/* mensagens do login */
.error-msg {
  min-height: 18px;
  margin-top: 8px;
  font-size: 13px;
  color: #fecaca;
}

.login-note {
  margin-top: 18px;
  font-size: 12px;
  color: var(--aura-text-soft);
  text-align: center;
}

.success-msg{
margin-top: 12px;
color: rgba(0,255,170,.95);
text-align: center;
font-weight: 600;
}



/* =========================================
   PRELOADER
   ========================================= */

.aura-preloader {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, #020617, #020617 60%, #000000);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.aura-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.aura-preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.aura-preloader-logo {
  font-size: 26px;
  letter-spacing: 0.3em;
  color: #ffffff;
  text-indent: 0.3em;
}

.aura-preloader-bar {
  width: 160px;
  height: 4px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  overflow: hidden;
  position: relative;
  background: rgba(15, 23, 42, 0.9);
}

.aura-preloader-bar span {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 132, 0.8),
    rgba(59, 130, 246, 0.85),
    transparent
  );
  animation: preloader-slide 1.2s linear infinite;
}

@keyframes preloader-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* =========================================
AJUSTE DOS CAMPOS DE FILTRO (ICON-FIELD)
========================================= */

/* Cápsula externa dos campos com ícone (Filtros) */
.icon-field .field-input-wrapper {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(148, 163, 184, 0.55);
box-shadow:
inset 0 0 0 1px rgba(15, 23, 42, 0.9),
0 18px 30px rgba(0, 0, 0, 0.8);
}

/* Ícone à esquerda (🎵, 👤, 📅, etc.) */
.icon-field .field-icon {
font-size: 14px;
color: var(--aura-text-soft);
opacity: 0.9;
}

/* Mata a “caixa de dentro” (input/select) */
.icon-field .field-input-wrapper input,
.icon-field .field-input-wrapper select {
border: none;
background: transparent;
box-shadow: none;
padding: 0;
margin: 0;
width: 100%;
color: var(--aura-text-main);
}

/* Placeholder dentro do wrapper */
.icon-field .field-input-wrapper input::placeholder {
color: rgba(148, 163, 184, 0.8);
}

/* Foco sem criar borda dupla */
.icon-field .field-input-wrapper input:focus,
.icon-field .field-input-wrapper select:focus {
outline: none;
box-shadow: none;
}

/* =========================================
Ações da tabela (Ver / Editar) – ícone + texto na mesma linha
========================================= */

/* Alinha os links de ação na mesma linha (emoji + texto) */
.actions-cell .btn-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px; /* espaço entre 👁 / ✏️ e o texto */
padding: 6px 14px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
line-height: 1;
}

/* Estilo do botão VER */
.actions-cell .btn-link {
background: rgba(0, 255, 132, 0.18);
color: #00ff84;
border: 1px solid rgba(0, 255, 132, 0.35);
}

/* Estilo do botão EDITAR (usa a classe extra btn-link--secondary) */
.actions-cell .btn-link.btn-link--secondary {
background: rgba(15, 23, 42, 0.85);
color: #8fb4ff;
border: 1px solid rgba(148, 163, 184, 0.45);
}

/* Card de filtros recolhível */
.filter-card-body {
overflow: hidden;
max-height: 600px; /* altura suficiente para abrir normal */
transition: max-height 0.35s ease, opacity 0.25s ease;
opacity: 1;
}

.filter-card-body.is-collapsed {
max-height: 0;
opacity: 0;
}

/* Ícone / seta do toggle */
.filter-toggle-btn {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
transition: transform 0.25s ease;
}

.filter-toggle-btn .arrow {
display: inline-block;
transition: transform 0.25s ease;
}

/* Quando abre */
.filter-toggle-btn.is-open .arrow {
transform: rotate(180deg);
}

/* =========================================
   RESPONSIVO
   ========================================= */

@media (max-width: 960px) {
  .topbar-inner {
    padding-inline: 16px;
  }

  .topbar-nav {
    position: absolute;
    top: 100%;
    right: 16px;
    margin-top: 8px;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(51, 65, 85, 0.9);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease;
  }

  .topbar-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .topbar-menu-toggle {
    display: inline-flex;
  }

  .topbar-link {
    width: 100%;
    text-align: left;
  }

  .topbar-user {
    margin-bottom: 4px;
  }

  .content {
    padding: 24px 16px 32px;
  }

  .finance-grid,
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .card-finance-chart {
    min-height: 320px;
  }

  /* login no mobile */
  .login-card {
    padding-inline: 20px;
  }
}

/* Corrige alinhamento dos ícones nos inputs (Nova/Editar obra) */
.icon-field {
position: relative;
display: flex;
flex-direction: column;
}

.icon-field .field-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
opacity: 0.85;
pointer-events: none;
}

.icon-field .field-input-wrapper {
position: relative;
width: 100%;
}

.icon-field input,
.icon-field textarea,
.icon-field select {
padding-left: 40px !important; /* espaço pro ícone */
}

/* Login sempre no visual dark */
body.login-body {
background: radial-gradient(circle at top, #020617 0, #020617 50%, #020617 100%);
color: #f9fafb;
}

/* ================================
MOBILE FIXES (iPhone + Android)
================================ */
@media (max-width: 768px) {

/* HEADER */
.content-header {
flex-direction: column;
gap: 20px;
text-align: left;
}

/* Botão Nova Obra */
.btn-primary--icon {
padding: 10px 18px;
font-size: 14px;
width: auto;
max-width: 160px;
justify-content: center;
}

.btn-icon-circle {
width: 26px;
height: 26px;
font-size: 18px;
}

/* Ajustar menu hamburguer */
.topnav-menu {
right: 12px !important;
top: 18px !important;
}

/* Logo e menu alinhados */
.topnav {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 15px;
}

/* ========================
FILTER CARD
======================== */
.filters-card {
padding: 18px 12px;
}

.filters-actions {
flex-direction: column;
gap: 8px;
}

.btn-apply-filters,
.btn-clear-filters {
width: 100%;
justify-content: center;
}

/* Inputs */
.filters-grid {
display: flex;
flex-direction: column;
gap: 14px;
}

/* ========================
TABELA → MODO CARD
======================== */
table {
display: block;
width: 100%;
border-spacing: 0;
}

thead {
display: none; /* esconder cabeçalho no mobile */
}

tbody tr {
display: block;
background: rgba(255,255,255,0.03);
padding: 14px;
border-radius: 14px;
margin-bottom: 15px;
}

tbody td {
display: flex;
justify-content: space-between;
padding: 6px 0;
}

tbody td::before {
content: attr(data-label);
font-weight: 600;
opacity: 0.6;
}

/* Botões Ver / Editar */
.table-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}

.btn-view,
.btn-edit {
padding: 8px 12px;
}
}

/* Tabela de obras em modo CARD no mobile */
@media (max-width: 768px) {
.songs-table-wrapper {
padding: 0;
}

.songs-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 16px;
}

.songs-table thead {
display: none;
}

.songs-table tbody {
display: block;
width: 100%;
}

.songs-table tbody .songs-row {
display: block;
width: 100%;
background: var(--aura-card-bg-soft);
border-radius: 22px;
padding: 14px 16px 16px;
box-shadow: var(--aura-shadow-soft);
}

.songs-table tbody .songs-row td {
display: block;
width: 100%;
padding: 4px 0;
}

/* labelzinho em cima de cada linha (Título, Criada em, etc) */
.songs-table tbody .songs-row td[data-label]::before {
content: attr(data-label);
display: block;
font-size: 12px;
font-weight: 500;
color: var(--aura-text-soft);
margin-bottom: 2px;
}

.songs-row .song-main {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}

.songs-row .song-title {
font-size: 15px;
}

.songs-col-status,
.songs-col-date {
margin-top: 4px;
}

.songs-col-actions .table-actions {
display: flex;
justify-content: flex-start;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
}

/* Ações na tabela de obras (lista de músicas) */
.songs-table .actions-cell {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.75rem; /* distância entre Ver e Editar */
}

.songs-table .actions-cell .btn-action {
display: inline-flex;
align-items: center;
}

/* No mobile, pode alinhar mais pra esquerda se quiser */
@media (max-width: 768px) {
.songs-table .actions-cell {
justify-content: flex-start;
}
}

/* --- Layout horizontal do card de faturamento --- */
.card-finance-form {
margin-bottom: 24px;
}

.card-finance-header {
margin-bottom: 16px;
}

.card-finance-body {
display: flex;
align-items: flex-start;
gap: 32px;
}

.finance-form {
flex: 1;
}

.last-records {
flex: 1;
margin-top: 0; /* tira o espaço extra que já tinha antes */
}

/* Campos lado a lado */
.field-group-horizontal {
display: flex;
flex-wrap: wrap;
gap: 16px;
}

.field-group-horizontal .small-field {
flex: 1 1 140px;
}

.field-group-horizontal .field-amount {
flex: 2 1 220px;
}

.finance-form .btn-save-month {
margin-top: 16px;
}

/* Responsivo: em telas pequenas volta pra coluna */
@media (max-width: 900px) {
.card-finance-body {
flex-direction: column;
}

.last-records {
width: 100%;
}

.field-group-horizontal {
flex-direction: column;
}
}

/* ============================
FINANCEIRO - LAYOUT NOVO
============================ */

.finance-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
gap: 24px;
margin-top: 24px;
align-items: stretch;
}

/* Garante que os dois cards ocupam a mesma altura visual */
.card-finance-form,
.card-finance-chart {
height: 100%;
}

/* Cabeçalho do card "Lançar faturamento" */
.card-finance-header {
margin-bottom: 16px;
}

/* Corpo do card: formulário + últimos lançamentos lado a lado */
.card-finance-body {
display: flex;
gap: 24px;
align-items: flex-start;
}

/* Formulário em coluna */
.finance-form {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}

/* Linha com ano / mês / valor lado a lado */
.field-group-horizontal {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.field-group-horizontal .small-field {
flex: 1 1 0;
min-width: 120px;
}

/* Campo do valor pode ser um pouco maior */
.field-group-horizontal .field-amount {
flex: 1.2 1 0;
}

/* Bloco de últimos lançamentos ocupa o outro lado do card */
.last-records {
flex: 1;
max-height: 260px;
display: flex;
flex-direction: column;
}

.finance-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
overflow-y: auto;
}

/* Responsivo: abaixo de 1024px empilha os cards (form + gráfico) */
@media (max-width: 1024px) {
.finance-layout {
grid-template-columns: 1fr;
}

.card-finance-body {
flex-direction: column;
}

.last-records {
max-height: none;
}
}

/* === OBRAS: botões Ver / Editar lado a lado === */
.songs-table td.actions-cell {
display: flex;
flex-wrap: wrap;
gap: 0.5rem; /* espaço entre os botões */
justify-content: flex-start;
align-items: center;
}

.songs-table td.actions-cell .btn-action {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}

@media (max-width: 768px) {
.songs-table td.actions-cell {
justify-content: flex-start; /* no mobile também lado a lado */
}
}

/* === FINANCEIRO: layout em 2 colunas === */
.finance-layout {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.45fr); /* form + últimos / gráfico */
gap: 32px;
align-items: stretch;
}

/* cards ocupam toda a altura disponível da linha */
.card-finance-form,
.card-finance-chart {
height: 100%;
}

/* corpo do card de lançamento (form + últimos lançamentos) lado a lado */
.card-finance-body {
display: flex;
gap: 24px;
margin-top: 16px;
align-items: flex-start;
}

/* formulário à esquerda */
.finance-form {
flex: 1 1 50%;
}

/* últimos lançamentos à direita, sem scrollbar interno baixinho */
.last-records {
flex: 1 1 50%;
max-height: none;
overflow: visible;
}

/* lista com respiro */
.finance-list {
margin-top: 12px;
}

/* responsivo: em telas menores volta pra 1 coluna (form em cima, gráfico embaixo) */
@media (max-width: 900px) {
.finance-layout {
grid-template-columns: 1fr;
}

.card-finance-body {
flex-direction: column;
}
}

/* LAYOUT HORIZONTAL DOS CARDS DO FINANCEIRO */
.finance-layout {
display: flex;
gap: 32px;
align-items: stretch;
margin-top: 24px;
}

.card-finance-form,
.card-finance-chart {
flex: 1;
}

/* Grupo de campos Ano / Mês / Valor na mesma linha */
.field-group-horizontal {
display: flex;
gap: 16px;
flex-wrap: wrap;
}

.field-group-horizontal .small-field {
flex: 1;
min-width: 140px;
}

.field-group-horizontal .field-amount {
min-width: 180px;
}

/* Lista de últimos lançamentos mais “solta” */
.last-records {
margin-top: 24px;
}

.finance-list {
max-height: 260px;
overflow-y: auto; /* scroll só se precisar */
}

/* ===================== */
/* FINANCEIRO – MOBILE */
/* ===================== */
@media (max-width: 768px) {
/* Empilha os 2 cards (form + gráfico) */
.finance-layout {
flex-direction: column;
align-items: stretch;
gap: 24px;
}

.card-finance-form,
.card-finance-chart {
width: 100%;
max-width: 100%;
}

/* Dentro do card de faturamento, deixa tudo em coluna */
.card-finance-body {
flex-direction: column;
gap: 20px;
}

/* Campos Ano / Mês / Faturamento um embaixo do outro */
.field-group-horizontal {
flex-direction: column;
gap: 12px;
}

.small-field,
.field-amount {
width: 100%;
}

/* “Últimos lançamentos” ocupa toda a largura embaixo do botão */
.last-records {
margin-top: 20px;
width: 100%;
}

/* Remove qualquer limite de altura e scrollzinho feio no mobile */
.finance-list {
max-height: none;
overflow-y: visible;
}

/* Dá um respiro pra lista de lançamentos */
.finance-item {
padding: 8px 0;
}

/* Gráfico mais alto no mobile pra ficar legível */
.finance-chart-wrapper {
min-height: 260px;
}
}

.song-actions {
display: flex;
gap: 12px;
align-items: center;
}

/* botão base */
.btn-action {
padding: 10px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.4px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
text-decoration: none;
border: none;
cursor: pointer;
}

/* editar */
.btn-edit {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #041b0f;
}

.btn-edit:hover {
filter: brightness(1.1);
}

/* apagar */
.btn-delete {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
}

.btn-delete:hover {
filter: brightness(1.1);
}

/* desativado (viewer) */
.is-disabled {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.35);
cursor: not-allowed;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* remover hover dos desativados */
.is-disabled:hover {
filter: none;
}

/* form inline */
.inline-form {
margin: 0;
}

/* ===== Admin Users (Premium Table) ===== */
.users-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}

.users-table thead th {
text-align: left;
padding: 14px 14px;
color: rgba(255,255,255,.70);
font-weight: 600;
border-bottom: 1px solid rgba(255,255,255,.10);
}

.users-table tbody td {
padding: 16px 14px;
border-bottom: 1px solid rgba(255,255,255,.06);
vertical-align: middle;
}

.users-table tbody tr:hover {
background: rgba(0, 255, 170, 0.06);
box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.12);
}

/* Role badges */
.role-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
font-weight: 700;
letter-spacing: .2px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
}

.role-badge--admin {
border-color: rgba(0,255,170,.35);
background: rgba(0,255,170,.12);
color: rgba(0,255,170,.95);
box-shadow: 0 0 18px rgba(0,255,170,.15);
}

.role-badge--editor {
border-color: rgba(80,180,255,.35);
background: rgba(80,180,255,.10);
color: rgba(160,220,255,.95);
}

.role-badge--viewer {
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.82);
}

.role-subtext {
margin-left: 10px;
font-size: 12px;
opacity: .65;
}

/* Created column */
.created-col {
opacity: .75;
white-space: nowrap;
}

/* ===== USERS TABLE: hover verde neon (forçado) ===== */

/* garante stacking previsível por linha (IMPORTANTE pro kebab ficar na frente) */
.songs-table tbody tr{
position: relative;
z-index: 1;
}

/* quando hover, a linha sobe de camada */
.songs-table tbody tr:hover{
z-index: 5;
background: rgba(0,255,160,.07) !important;
box-shadow:
0 0 0 1px rgba(0,255,160,.18) inset,
0 0 26px rgba(0,255,160,.10) !important;
transform: translateY(-1px);
}

/* hover nas células (pra não “quebrar” se td tiver background próprio) */
.songs-table tbody tr:hover td{
background: transparent !important;
}

/* transição suave */
.songs-table tbody tr,
.songs-table tbody td{
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* ===== MUITO IMPORTANTE: não cortar o menu (overflow) ===== */
.table-wrapper,
.songs-table-wrapper,
.songs-table{
overflow: visible !important;
}

/* td precisa permitir o dropdown “vazar” */
.songs-table tbody td{
overflow: visible !important;
}

/* ===== Admin Users: alinhamento do botão Criar Convite ===== */
.filters-grid{
align-items: end; /* faz todos os itens “sentarem” na mesma base */
}

.filters-grid .field-actions{
grid-column: 1 / -1; /* ocupa a linha inteira (3 colunas) */
display: flex;
justify-content: flex-start; /* pode trocar pra center se quiser */
align-items: center;
margin-top: 14px; /* distancia dos inputs */
}

@media (max-width: 900px){
.filters-grid .field-actions{
justify-content: stretch;
}
.filters-grid .field-actions .btn-apply-filters{
width: 100%;
}
}

/* ===== USERS: AÇÕES (layout final) ===== */
.actions-cell{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
position: relative; /* ancora o kebab corretamente */
z-index: 10; /* garante que a célula inteira fique acima do hover */
overflow: visible; /* deixa o menu aparecer */
}

.actions-primary{
display:flex;
align-items:center;
gap:10px;
}

/* Select compacto */
.ios-select--compact{
height:34px;
padding: 6px 34px 6px 12px;
border-radius: 999px;
}

/* Botão ícone salvar */
.btn-icon{
width:38px;
height:34px;
border-radius:12px;
border:1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
color:#eaf7ff;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn-icon:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.09);
border-color: rgba(0,255,170,.35);
}
.btn-icon--save{
box-shadow: 0 0 0 1px rgba(0,255,170,.10), 0 12px 30px rgba(0,255,170,.08);
}

/* === Kebab menu (⋯) === */
.kebab{
position:relative;
display:inline-flex;
align-items:center;
z-index: 9998; /* camada alta por padrão */
}

.kebab.open{
z-index: 9999; /* quando abre, sobe ainda mais */
}

.kebab-btn{
width:38px;
height:34px;
border-radius:12px;
border:1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
color:#eaf7ff;
font-size:20px;
line-height:0;
cursor:pointer;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.kebab-btn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.09);
border-color: rgba(0,255,170,.35);
}

.kebab-menu{
position:absolute;
right:0;
top:calc(100% + 10px);
min-width: 190px;
padding:10px;
border-radius:14px;
border:1px solid rgba(255,255,255,.14);
background: rgba(10,16,26,.92);
backdrop-filter: blur(14px);
box-shadow: 0 18px 50px rgba(0,0,0,.45);
display:none;
z-index: 10000; /* o menu SEMPRE acima de tudo */
}

.kebab.open .kebab-menu{ display:block; }

.kebab-item{ margin:0; }

.kebab-action{
width:100%;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color:#eaf7ff;
border-radius:12px;
padding:10px 12px;
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
font-weight:600;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.kebab-action:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.08);
border-color: rgba(0,255,170,.35);
}

.kebab-dot{
width:8px;
height:8px;
border-radius:999px;
box-shadow: 0 0 16px rgba(0,255,170,.25);
}
.kebab-dot--success{ background: rgba(0,255,170,.95); }
.kebab-dot--danger{ background: rgba(255,70,120,.95); box-shadow: 0 0 16px rgba(255,70,120,.25); }

.kebab-action--success:hover{
border-color: rgba(0,255,170,.55);
}
.kebab-action--danger:hover{
border-color: rgba(255,70,120,.55);
}

/* Excluir mais chamativo */
.kebab-action--danger-strong{
border-color: rgba(255,70,120,.35);
background: rgba(255,70,120,.08);
}
.kebab-action--danger-strong:hover{
border-color: rgba(255,70,120,.75);
background: rgba(255,70,120,.14);
}

/* ===== Micro animações premium (users) ===== */

/* melhora sensação de clique */
.btn-icon,
.kebab-btn,
.kebab-action,
.user-actions__iconbtn,
.user-actions__pill{
-webkit-tap-highlight-color: transparent;
will-change: transform, box-shadow, border-color, background;
}

/* hover mais "premium" (subida leve) */
.btn-icon:hover,
.kebab-btn:hover,
.user-actions__iconbtn:hover,
.user-actions__pill:hover{
transform: translateY(-1px);
}

/* estado pressionado */
.btn-icon:active,
.kebab-btn:active,
.kebab-action:active,
.user-actions__iconbtn:active,
.user-actions__pill:active{
transform: translateY(0px) scale(0.98);
}

/* foco acessível (quando navega por teclado) */
.btn-icon:focus-visible,
.kebab-btn:focus-visible{
outline: none;
border-color: rgba(0,255,170,.45);
box-shadow: 0 0 0 3px rgba(0,255,170,.12);
}

/* salvar: glow mais "limpo" */
.btn-icon--save:hover{
box-shadow:
0 0 0 1px rgba(0,255,170,.16),
0 14px 34px rgba(0,255,170,.12);
}

/* kebab menu: entrada suave (sem JS) */
.kebab-menu{
transform-origin: top right;
transform: translateY(-4px) scale(0.98);
opacity: 0;
transition: opacity .12s ease, transform .12s ease;
}
.kebab.open .kebab-menu{
opacity: 1;
transform: translateY(0) scale(1);
}

/* itens do menu: hover mais claro */
.kebab-action:hover{
box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

/* botão perigo: hover mais forte */
.kebab-action--danger-strong:hover{
box-shadow: 0 12px 30px rgba(255,70,120,.12);
}

/* linha das ações na mesma altura */
.actions-row{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
}

/* ===== USERS TABLE: versão compacta mobile ===== */
@media (max-width: 900px){

/* some com o header e vira “cards” */
.songs-table thead{ display:none; }

.songs-table,
.songs-table tbody,
.songs-table tr,
.songs-table td{
display:block;
width:100%;
}

.songs-table tbody tr{
margin: 12px 0;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(10,16,28,.35);
box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

/* desliga o hover “linha inteira” no mobile (fica estranho no toque) */
.songs-table tbody tr:hover{
transform:none;
box-shadow: 0 18px 40px rgba(0,0,0,.22);
background: rgba(10,16,28,.35) !important;
}

/* cada célula vira “linha” com label */
.songs-table td{
padding: 10px 0;
border: 0 !important;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 14px;
}

.songs-table td::before{
content: attr(data-label);
font-weight: 700;
opacity: .70;
flex: 0 0 92px;
}

.songs-table td > *{
max-width: calc(100% - 92px);
}

/* ações ocupam a linha toda e alinham bonito */
.actions-cell{
justify-content: flex-start;
}

.actions-primary{
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
gap: 10px;
}

/* select + botões com largura mais confortável */
.ios-select--compact{
min-width: 120px;
}

.kebab-menu{
right: 0;
}
}

/* ============================================================
MOBILE FIX — ADMIN USERS (/admin/users)
(só afeta telas pequenas)
============================================================ */
@media (max-width: 700px){

/* ---------- Card "Criar usuário (convite)" ---------- */
.filters-card{
padding: 16px !important;
}

/* força 1 coluna no mobile */
.filters-grid{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
align-items: stretch !important;
}

.filters-grid .field{
width: 100% !important;
}

.filters-grid input,
.filters-grid select{
width: 100% !important;
min-width: 0 !important;
}

/* botão ocupa a largura toda no mobile */
.filters-grid .field-actions{
grid-column: 1 / -1 !important;
display: flex !important;
justify-content: stretch !important;
align-items: center !important;
margin-top: 8px !important;
}
.filters-grid .field-actions .btn-apply-filters{
width: 100% !important;
justify-content: center !important;
}

/* ---------- Lista de usuários: “card” limpo (sem card dentro de card) ---------- */
.songs-table-wrapper,
.table-wrapper{
overflow: visible !important;
}

/* esconde cabeçalho da tabela no mobile */
.songs-table thead{
display: none !important;
}

/* transforma linhas em cards */
.songs-table,
.songs-table tbody,
.songs-table tr,
.songs-table td{
display: block !important;
width: 100% !important;
}

.songs-table tbody tr{
margin: 12px 0 !important;
padding: 14px !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(10,16,28,.35) !important;
box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
transform: none !important;
}

/* evita “camadas” duplicadas dentro do card */
.songs-table tbody td{
background: transparent !important;
border: 0 !important;
padding: 8px 0 !important;
}

/* desliga o hover/glow no mobile (não faz sentido em touch e atrapalha layers) */
.songs-table tbody tr:hover{
background: rgba(10,16,28,.35) !important;
box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
transform: none !important;
}

/* ---------- Ações no mobile: tudo juntinho ---------- */
.actions-cell{
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 10px !important;
padding-top: 10px !important;
}

.actions-row{
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important; /* mantém tudo “junto” */
gap: 10px !important;
flex-wrap: nowrap !important; /* NÃO quebra linha */
}

/* select NÃO pode esticar e jogar o kebab pra longe */
.ios-select--compact,
.user-actions__select{
width: 132px !important;
min-width: 132px !important;
flex: 0 0 auto !important;
}

.btn-icon,
.kebab-btn,
.user-actions__iconbtn{
flex: 0 0 auto !important;
}

/* menu do kebab alinhado dentro do card no mobile */
.kebab-menu{
right: 0 !important;
left: auto !important;
top: calc(100% + 8px) !important;
min-width: 200px !important;
}
}

/* ===== PATCH MOBILE (continuação) ===== */
@media (max-width: 700px){

/* 1) tira o "card grande" do wrapper pra não ficar card dentro de card */
.table-wrapper,
.songs-table-wrapper,
.table-wrapper.songs-table-wrapper{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}

/* se tiver um container interno “card” envolvendo a tabela */
.table-wrapper > .songs-table,
.songs-table-wrapper > .songs-table{
margin: 0 !important;
}

/* 2) AÇÕES no mobile: kebab colado no select+save */
.actions-cell{
justify-content: flex-start !important;
}

.actions-row{
justify-content: flex-start !important; /* evita space-between */
width: auto !important;
}

/* isso aqui é o que geralmente está jogando o kebab pra longe */
.kebab{
margin-left: 0 !important;
}

/* se você tiver esse wrapper, ele também pode estar empurrando */
.actions-primary{
width: auto !important;
flex: 0 0 auto !important;
}
}