/* ==========================================================================
   Sistema de Gestão Financeira — Design System
   Tokens + shell (topbar/sidebar) + shared components.
   Loaded after Bootstrap 5.3 + Bootstrap Icons — every rule below overrides
   or extends the Bootstrap defaults, no Sass build available in this project.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --color-primary: #2453d6;
  --color-primary-rgb: 36, 83, 214;
  --color-primary-dark: #17348c;
  --color-primary-light: #eef2ff;

  --color-success: #15803d;
  --color-success-bg: #ecfdf3;
  --color-success-border: #bbf0cf;
  --color-danger: #dc2626;
  --color-danger-rgb: 220, 38, 38;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;
  --color-warning: #b45309;
  --color-warning-bg: #fffbeb;
  --color-info: #0e7490;
  --color-info-bg: #ecfeff;

  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-muted-bg: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-subtle: #94a3b8;

  --sidebar-width: 256px;
  --topbar-height: 60px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, .08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* Bridge into Bootstrap's own CSS variables so components that reference
     them (focus rings, links, RGB-based tints) pick up our palette too. */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-link-color: var(--color-primary);
  --bs-link-color-rgb: var(--color-primary-rgb);
  --bs-link-hover-color: var(--color-primary-dark);
  --bs-link-hover-color-rgb: var(--color-primary-rgb);
  --bs-focus-ring-color: rgba(var(--color-primary-rgb), .25);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-border-color: var(--color-border);
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: var(--color-danger-rgb);
  --bs-success: var(--color-success);
}

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

/* ---------- Base ---------- */
html, body { height: 100%; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
.text-muted { color: var(--color-text-muted) !important; }

a { text-decoration: none; }
a:not(.btn):not(.nav-link):not(.dropdown-item):hover { text-decoration: underline; }

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

/* Consistent, visible keyboard focus everywhere — never remove outlines,
   only restyle them to match the brand. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link — hidden until keyboard-focused */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 2000;
  background: var(--color-primary);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition-base);
}
.skip-link:focus {
  top: 0.75rem;
  color: #fff;
  text-decoration: none;
}

.cursor-pointer { cursor: pointer; }

/* Tabular figures for anything money/quantity so digits align in columns */
.kpi-value,
.tabular-nums,
table.table td.text-end,
table.table th.text-end {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Topbar ---------- */
.topbar {
  height: var(--topbar-height);
  background: var(--color-text);
  background: linear-gradient(90deg, #0b1220, var(--color-primary-dark) 65%, var(--color-primary));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), var(--shadow-sm);
}

.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.topbar .fw-semibold { letter-spacing: -0.01em; }

#sidebarToggle {
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
#sidebarToggle:hover { background: rgba(255, 255, 255, .12); }

.user-menu-btn {
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background var(--transition-fast);
}
.user-menu-btn:hover,
.user-menu-btn:focus { background: rgba(255, 255, 255, .12); color: #fff; }

.user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.role-chip {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ---------- Sidebar ---------- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 1035;
}
.sidebar-backdrop.show { display: block; }

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  min-height: calc(100vh - var(--topbar-height));
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: var(--topbar-height);
  padding: 1rem 0;
}

.sidebar .nav-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-subtle);
  padding: .5rem 1.25rem .4rem;
}

.sidebar .nav-link {
  color: #3d4759;
  font-weight: 500;
  font-size: .92rem;
  border-radius: var(--radius-sm);
  padding: .6rem .85rem;
  margin: .1rem .7rem;
  display: flex;
  align-items: center;
  gap: .1rem;
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar .nav-link i { font-size: 1.05rem; width: 1.5rem; color: var(--color-text-subtle); transition: color var(--transition-fast); }

.sidebar .nav-link.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 600;
}
.sidebar .nav-link.active i { color: var(--color-primary); }

.sidebar .nav-link:hover:not(.active) { background-color: var(--color-muted-bg); color: var(--color-text); }
.sidebar .nav-link:hover:not(.active) i { color: var(--color-text-muted); }

.main-content {
  flex: 1;
  padding: 1.75rem;
  min-width: 0;
}

/* Off-canvas sidebar is for phones only. Every iPad — even the smallest, in
   portrait — has a CSS width of 768px or more, so the breakpoint sits at
   767.98px (Bootstrap's own sm/md cutoff) to guarantee no tablet ever lands
   in this collapsed state; tablets and up always get the persistent sidebar
   below instead of a hidden-behind-a-button one. */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    left: -280px;
    height: 100%;
    top: 0;
    padding-top: calc(var(--topbar-height) + 1rem);
    transition: left var(--transition-base);
    z-index: 1040;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { left: 0; }
  .main-content { padding: 1.1rem; }
}

/* #sidebarToggle only exists to open the sidebar in its off-canvas state —
   this breakpoint has to match the one above (767.98px) exactly, or there's
   a width range where the sidebar is hidden and the button to open it is
   also hidden. */
@media (min-width: 768px) {
  #sidebarToggle { display: none; }
}

/* Tablets get the persistent sidebar, but with less room than a desktop —
   trim the width and padding a bit so content doesn't feel squeezed. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root { --sidebar-width: 216px; }
  .main-content { padding: 1.35rem; }
}

/* ---------- Page header ---------- */
.page-title { font-size: 1.4rem; margin-bottom: .1rem; }
.page-subtitle { color: var(--color-text-muted); font-size: .9rem; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.kpi-card {
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.kpi-card:hover { box-shadow: var(--shadow-md); }

.kpi-card .kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }

.kpi-card .kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 1rem;
  flex-shrink: 0;
}
.kpi-card .kpi-icon.icon-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.kpi-card .kpi-icon.icon-success { background: var(--color-success-bg); color: var(--color-success); }
.kpi-card .kpi-icon.icon-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.kpi-card .kpi-icon.icon-neutral { background: var(--color-muted-bg); color: var(--color-text-muted); }

.kpi-card .kpi-value { font-size: 1.55rem; font-weight: 700; line-height: 1.2; margin-top: .6rem; }
.kpi-card .kpi-label { color: var(--color-text-muted); font-size: .8rem; font-weight: 500; }

.kpi-card.kpi-highlight {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  border: none;
  color: #fff;
}
.kpi-card.kpi-highlight .kpi-label { color: rgba(255, 255, 255, .78); }
.kpi-card.kpi-highlight .kpi-value { color: #fff; }
.kpi-card.kpi-highlight .kpi-icon { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- Tables ---------- */
.table-responsive-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: .25rem;
  box-shadow: var(--shadow-sm);
}

table.table { margin-bottom: 0; }

table.table thead th {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-muted-bg);
  padding: .8rem 1rem;
  white-space: nowrap;
  text-align: center !important;
}
table.table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-md); }
table.table thead tr:first-child th:last-child { border-top-right-radius: var(--radius-md); }

/* Todas as tabelas do sistema centralizadas — títulos e conteúdo. O !important é
   necessário pra vencer as utilities do Bootstrap (.text-end/.text-start), que
   também usam !important e são aplicadas via ItemStyle-CssClass em vários GridViews. */
table.table td { padding: .75rem 1rem; vertical-align: middle; border-bottom-color: var(--color-border); color: var(--color-text); text-align: center !important; }
table.table tbody tr:last-child td { border-bottom: none; }
table.table tbody tr:hover td { background-color: var(--color-muted-bg); }

table.table td.empty-row { padding: 3rem 1rem; }

.empty-state { text-align: center; color: var(--color-text-muted); padding: 2.25rem 1rem; }
.empty-state i { font-size: 2rem; color: var(--color-text-subtle); display: block; margin-bottom: .6rem; }
.empty-state .empty-title { font-weight: 600; color: var(--color-text); margin-bottom: .2rem; }
.empty-state .empty-hint { font-size: .85rem; }

/* GridView pager */
table.table td[colspan] table td { border: none; padding: .25rem .5rem; }
table.table td[colspan] table a { color: var(--color-primary); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 500; transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-dark);
  --bs-btn-hover-border-color: var(--color-primary-dark);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
  box-shadow: 0 1px 2px rgba(var(--color-primary-rgb), .25);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
}

.btn-outline-danger {
  --bs-btn-color: var(--color-danger);
  --bs-btn-border-color: var(--color-danger);
  --bs-btn-hover-bg: var(--color-danger);
  --bs-btn-hover-border-color: var(--color-danger);
  --bs-btn-focus-shadow-rgb: var(--color-danger-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--color-text-muted);
  --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-bg: var(--color-text-muted);
  --bs-btn-hover-border-color: var(--color-text-muted);
}

/* Row action buttons: comfortable but compact touch targets */
.btn-sm { padding: .35rem .65rem; }
.table .btn-sm { min-width: 34px; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; font-size: .72rem; letter-spacing: .01em; border-radius: 999px; padding: .38em .72em; }
.badge-status { font-weight: 600; font-size: .72rem; }

.text-bg-primary { background-color: var(--color-primary-light) !important; color: var(--color-primary-dark) !important; }
.text-bg-secondary { background-color: var(--color-muted-bg) !important; color: var(--color-text-muted) !important; }
.text-bg-success { background-color: var(--color-success-bg) !important; color: var(--color-success) !important; }
.text-bg-danger { background-color: var(--color-danger-bg) !important; color: var(--color-danger) !important; }
.text-bg-warning { background-color: var(--color-warning-bg) !important; color: var(--color-warning) !important; }

.text-primary { color: var(--color-primary) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-success { color: var(--color-success) !important; }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: .85rem; color: var(--color-text); margin-bottom: .35rem; }
.form-label .required-mark { color: var(--color-danger); margin-left: .15rem; }

.form-text-helper { font-size: .8rem; color: var(--color-text-muted); margin-top: .3rem; }

.form-control, .form-select {
  border-color: var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: .55rem .75rem;
  font-size: .92rem;
  min-height: 42px;
}
.form-control::placeholder { color: var(--color-text-subtle); }

.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--color-primary-rgb), .18);
}

textarea.form-control { min-height: unset; }

/* Field-level validator messages rendered by asp:RequiredFieldValidator etc. */
.text-danger.small.d-block {
  display: flex !important;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  margin-top: .3rem;
}

/* ---------- Alerts / flash messages ---------- */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: .92rem;
}
.alert-danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: #7f1d1d; }
.alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: #14532d; }

/* Bootstrap ValidationSummary renders as a <div class="alert alert-danger"><ul>...</ul></div> */
.alert ul { margin-bottom: 0; padding-left: 1.15rem; }

/* ---------- Nav tabs (report sub-navigation) ---------- */
.nav-tabs { border-bottom-color: var(--color-border); gap: .25rem; }
.nav-tabs .nav-link {
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--color-text-muted);
  font-weight: 500;
  padding: .6rem 1rem;
}
.nav-tabs .nav-link:hover { background: var(--color-muted-bg); border-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-primary);
}

/* ---------- Dropdown ---------- */
.dropdown-menu { border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: .4rem; }
.dropdown-item { border-radius: var(--radius-sm); padding: .5rem .7rem; font-size: .88rem; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--color-muted-bg); }
.dropdown-item i { width: 1.2rem; }

/* ---------- Login page ---------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-muted-bg);
  padding: 1.5rem;
}

.login-shell {
  width: 100%;
  max-width: 960px;
  min-height: 600px;
  display: flex;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Left brand panel — hidden on small screens, see media query below */
.login-aside {
  flex: 0 0 42%;
  position: relative;
  overflow: hidden;
}

.login-aside-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right form panel */
.login-form-panel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
}

.login-form-inner { width: 100%; max-width: 340px; }

.login-brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--color-primary-light);
}

.login-password-wrap { position: relative; }
.login-password-wrap .form-control { padding-right: 2.75rem; }
.login-password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.login-password-toggle:hover { color: var(--color-text-muted); }

.login-seed-hint {
  background: var(--color-muted-bg);
  border-radius: var(--radius-sm);
  padding: .65rem .85rem;
  font-size: .78rem;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .login-aside { display: none; }
  .login-shell { max-width: 420px; min-height: 0; box-shadow: var(--shadow-lg); }
  .login-form-panel { padding: 2.25rem 1.75rem; }
}

/* ---------- Utilities ---------- */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-card { background: var(--color-surface); }

.chart-card canvas { max-height: 320px; }