* { box-sizing: border-box; }
body { margin: 0; padding: 0; overflow-x: hidden; }
.hidden { display: none !important; }

/* Login Overlay */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-main); z-index: 9999; }
.login-card { background: var(--bg-surface); padding: 32px; border-radius: 16px; width: 340px; box-shadow: var(--shadow-soft); border: 1px solid var(--border-color); }
.login-card h2 { margin: 0 0 4px; color: var(--color-primary); }
.login-card p { margin: 0 0 24px; color: var(--text-secondary); }
.login-card label { display: block; margin: 12px 0 6px; font-size: 14px; color: var(--text-primary); font-weight: 500; }
.login-card input { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-main); color: var(--text-primary); outline: none; transition: border 0.2s; }
.login-card input:focus { border-color: var(--color-primary); }
.login-card button { width: 100%; margin-top: 24px; padding: 12px; border: 0; border-radius: 8px; background: var(--color-primary); color: #fff; font-weight: 600; cursor: pointer; transition: background 0.2s; font-family: var(--font-body); font-size: 15px; }
.login-card button:hover { background: var(--color-primary-hover); }
.error-msg { color: var(--color-danger); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* App Layout Structure */
.app-layout { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

/* Sidebar Retrátil & Pill Indicators */
.app-sidebar { width: 260px; min-width: 260px; background: var(--bg-surface); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; position: relative; }
.app-sidebar.collapsed { width: 80px; min-width: 80px; }
.app-sidebar.collapsed .brand-text, .app-sidebar.collapsed .nav-item-text { display: none; }
.app-sidebar.collapsed .nav-item { justify-content: center; padding: 12px 0; }

.app-sidebar .brand { height: 72px; padding: 0 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-color); }
.app-sidebar.collapsed .brand { justify-content: center; padding: 0; }
.app-sidebar .brand-logo { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--shadow-sm); }
.app-sidebar .brand-text { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.5px; }

.sidebar-toggle { position: absolute; right: -14px; top: 24px; width: 28px; height: 28px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); box-shadow: var(--shadow-sm); z-index: 101; transition: transform 0.3s; }
.sidebar-toggle:hover { color: var(--color-primary); }
.app-sidebar.collapsed .sidebar-toggle { transform: rotate(180deg); }

.nav-menu { flex: 1; padding: 24px 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 9999px; text-decoration: none; color: var(--text-secondary); font-weight: 600; font-size: 14px; transition: all 0.2s ease; position: relative; }
.nav-item svg { width: 20px; height: 20px; transition: color 0.2s; }
.nav-item:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.nav-item.active { background: var(--color-primary-light); color: var(--color-primary-hover); }
.nav-item.active svg { color: var(--color-primary); }

.sidebar-footer { padding: 20px 16px; border-top: 1px solid var(--border-color); }
.user-info { display: flex; align-items: center; gap: 12px; padding: 8px; color: var(--text-primary); font-weight: 500; }
.app-sidebar.collapsed .user-info { display: none; }

/* Main Content Area */
.app-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-main); }

/* Header com Glassmorphism */
.app-header { height: 72px; min-height: 72px; padding: 0 32px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; transition: background 0.3s, border 0.3s; z-index: 10; }
[data-theme="dark"] .app-header { background: rgba(17, 24, 39, 0.7); }

.header-left { display: flex; align-items: center; gap: 24px; flex: 1; }
.app-header h2 { margin: 0; font-size: 20px; color: var(--text-primary); }

.header-search { display: flex; align-items: center; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 9999px; padding: 8px 16px; width: 320px; gap: 8px; color: var(--text-tertiary); box-shadow: var(--shadow-sm); }
.header-search svg { width: 18px; height: 18px; }
.header-search input { border: none; background: transparent; outline: none; flex: 1; font-family: var(--font-body); font-size: 14px; color: var(--text-primary); padding: 0; }

.header-actions { display: flex; align-items: center; gap: 16px; }

.header-btn { background: var(--bg-surface); border: 1px solid var(--border-color); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; box-shadow: var(--shadow-sm); }
.header-btn:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--bg-surface-hover); }

.date-selector { display: flex; align-items: center; gap: 8px; background: var(--bg-surface); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 9999px; font-size: 14px; font-weight: 500; color: var(--text-secondary); box-shadow: var(--shadow-sm); cursor: pointer; }
.date-selector:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.date-selector svg { width: 16px; height: 16px; }

.user-profile { display: flex; align-items: center; gap: 12px; padding-left: 16px; border-left: 1px solid var(--border-color); }
.user-profile .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-hover); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; position: relative; }
.user-profile .avatar::after { content: ''; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background: var(--color-success); border: 2px solid var(--bg-surface); border-radius: 50%; }

/* Dashboard Content (Home Bento Grid) */
.dashboard-content { padding: 32px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 24px; }
.dashboard-content .page-header { display: flex; flex-direction: column; gap: 4px; }
.dashboard-content .page-title { font-size: 28px; margin: 0; }
.dashboard-content .subtitle { color: var(--text-secondary); margin: 0; font-size: 15px; }

.bento-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.glass-card { background: var(--bg-surface); border-radius: 16px; padding: 24px; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; color: inherit; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.glass-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-light); }

.kpi-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }
.kpi-value { font-size: 36px; margin: 16px 0; color: var(--text-primary); font-family: var(--font-heading); font-weight: 700; letter-spacing: -1px; }
.kpi-badge { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 20px; display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; }
.kpi-badge svg { width: 14px; height: 14px; }
.kpi-badge.success { background: var(--color-primary-light); color: var(--color-primary-hover); }
.kpi-badge.warning { background: var(--color-warning-light); color: var(--color-warning); }
.kpi-badge.danger { background: var(--color-danger-light); color: var(--color-danger-hover); }
.kpi-badge.neutral { background: var(--bg-surface-hover); color: var(--text-secondary); }

/* ===== Responsividade global (tablet / mobile) =====
   Aproveita o estado visual de .collapsed: abaixo de 1024px a sidebar
   vira um trilho de icones automaticamente; abaixo de 640px o header
   e o conteudo compactam para caber em telas pequenas. */
@media (max-width: 1024px) {
  .app-sidebar { width: 80px; min-width: 80px; }
  .app-sidebar .brand-text,
  .app-sidebar .nav-item-text,
  .app-sidebar .user-info .username { display: none; }
  .app-sidebar .brand { justify-content: center; padding: 0; }
  .app-sidebar .nav-item { justify-content: center; padding: 12px 0; }
  .app-sidebar .user-info { justify-content: center; }
  .header-search { display: none; }
  .app-header { padding: 0 16px; }
}

@media (max-width: 640px) {
  .app-header { height: 64px; min-height: 64px; padding: 0 12px; }
  .header-actions { gap: 8px; }
  .date-selector { display: none; }
  .user-profile { padding-left: 8px; gap: 8px; }
  .dashboard-content { padding: 16px; gap: 16px; }
  .dashboard-content .page-title { font-size: 22px; }
  .bento-grid { grid-template-columns: 1fr; }
  /* Tabelas largas rolam horizontalmente em vez de estourar o layout */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll > table { min-width: 560px; }
}