/*
 * Base layer: page defaults and the Bootstrap bridge.
 *
 * Bootstrap 5 stays as the widget library (modals, dropdowns, grid), but its
 * variables are pointed at the Hautomatize tokens so every existing .btn,
 * .card, .table and .form-control inherits the new look without per-page CSS.
 */
:root,
html[data-bs-theme="dark"],
body.dark-mode {
  --bs-body-font-family: var(--hz-font);
  --bs-body-font-size: var(--hz-text-md);
  --bs-body-color: var(--hz-ink);
  --bs-body-bg: var(--hz-bg);
  --bs-secondary-color: var(--hz-muted);
  --bs-tertiary-color: var(--hz-muted);
  --bs-secondary-bg: var(--hz-surface-2);
  --bs-tertiary-bg: var(--hz-surface-3);
  --bs-emphasis-color: var(--hz-ink);
  --bs-heading-color: var(--hz-ink);
  --bs-border-color: var(--hz-line);
  --bs-border-color-translucent: var(--hz-line);
  --bs-border-radius: var(--hz-radius);
  --bs-border-radius-sm: var(--hz-radius-sm);
  --bs-border-radius-lg: var(--hz-radius-lg);
  --bs-primary: var(--hz-brand);
  --bs-success: var(--hz-ok);
  --bs-danger: var(--hz-danger);
  --bs-warning: var(--hz-warn);
  --bs-info: var(--hz-info);
  --bs-link-color: var(--hz-brand-text);
  --bs-link-hover-color: var(--hz-brand);
  --bs-link-color-rgb: 11, 106, 58;
  --bs-focus-ring-color: color-mix(in srgb, var(--hz-brand) 28%, transparent);
  --bs-primary-bg-subtle: var(--hz-brand-soft);
  --bs-success-bg-subtle: var(--hz-ok-bg);
  --bs-danger-bg-subtle: var(--hz-danger-bg);
  --bs-warning-bg-subtle: var(--hz-warn-bg);
  --bs-info-bg-subtle: var(--hz-info-bg);
  --bs-primary-text-emphasis: var(--hz-brand-text);
  --bs-success-text-emphasis: var(--hz-ok);
  --bs-danger-text-emphasis: var(--hz-danger);
  --bs-warning-text-emphasis: var(--hz-warn);
  --bs-info-text-emphasis: var(--hz-info);
  --bs-primary-border-subtle: var(--hz-brand-line);
}

html { font-size: 15px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--hz-font);
  font-size: var(--hz-text-md);
  line-height: 1.55;
  color: var(--hz-ink);
  background: var(--hz-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--hz-font);
  color: var(--hz-ink);
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--hz-text-3xl); font-weight: 800; }
h2, .h2 { font-size: var(--hz-text-2xl); font-weight: 800; }
h3, .h3 { font-size: var(--hz-text-xl); font-weight: 700; }
h4, .h4 { font-size: var(--hz-text-lg); font-weight: 700; }
h5, .h5, h6, .h6 { font-size: var(--hz-text-md); font-weight: 700; }

a { color: var(--hz-brand-text); text-decoration: none; }
a:hover { color: var(--hz-brand); }
p a:not(.btn):hover, li a:not(.btn):not(.dropdown-item):not(.hz-panel-link):hover, td a:not(.btn):hover { text-decoration: underline; }

code, kbd, pre, samp, .font-monospace { font-family: var(--hz-mono); }
.text-muted, .text-secondary { color: var(--hz-muted) !important; }
.text-body-secondary { color: var(--hz-muted) !important; }
.tabular, .num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--hz-brand); outline-offset: 2px; }

::selection { background: color-mix(in srgb, var(--hz-brand) 24%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Bootstrap components on tokens ------------------------------------ */
.btn {
  --bs-btn-font-family: var(--hz-font);
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: var(--hz-text-sm);
  --bs-btn-padding-x: .9rem;
  --bs-btn-padding-y: .45rem;
  --bs-btn-border-radius: var(--hz-radius-sm);
  --bs-btn-focus-box-shadow: var(--hz-focus);
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.btn-sm { --bs-btn-padding-x: .65rem; --bs-btn-padding-y: .28rem; --bs-btn-font-size: var(--hz-text-xs); }
.btn-lg { --bs-btn-padding-x: 1.15rem; --bs-btn-padding-y: .6rem; --bs-btn-font-size: var(--hz-text-md); }
.btn-primary, .btn-success {
  --bs-btn-color: var(--hz-brand-ink); --bs-btn-bg: var(--hz-brand); --bs-btn-border-color: var(--hz-brand);
  --bs-btn-hover-color: var(--hz-brand-ink); --bs-btn-hover-bg: var(--hz-brand-hover); --bs-btn-hover-border-color: var(--hz-brand-hover);
  --bs-btn-active-color: var(--hz-brand-ink); --bs-btn-active-bg: var(--hz-brand-hover); --bs-btn-active-border-color: var(--hz-brand-hover);
  --bs-btn-disabled-color: var(--hz-brand-ink); --bs-btn-disabled-bg: var(--hz-brand); --bs-btn-disabled-border-color: var(--hz-brand);
}
.btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-light, .btn-outline-dark, .btn-secondary {
  --bs-btn-color: var(--hz-ink); --bs-btn-bg: var(--hz-surface); --bs-btn-border-color: var(--hz-line-strong);
  --bs-btn-hover-color: var(--hz-ink); --bs-btn-hover-bg: var(--hz-surface-2); --bs-btn-hover-border-color: var(--hz-line-strong);
  --bs-btn-active-color: var(--hz-ink); --bs-btn-active-bg: var(--hz-surface-3); --bs-btn-active-border-color: var(--hz-line-strong);
  --bs-btn-disabled-color: var(--hz-muted); --bs-btn-disabled-bg: var(--hz-surface); --bs-btn-disabled-border-color: var(--hz-line);
}
.btn-outline-primary, .btn-outline-success { --bs-btn-color: var(--hz-brand-text); --bs-btn-hover-color: var(--hz-brand-text); --bs-btn-border-color: var(--hz-brand-line); --bs-btn-hover-bg: var(--hz-brand-soft); }
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: var(--hz-danger); --bs-btn-border-color: var(--hz-danger);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--hz-danger) 86%, #000); --bs-btn-hover-border-color: transparent;
}
.btn-outline-danger {
  --bs-btn-color: var(--hz-danger); --bs-btn-bg: var(--hz-surface); --bs-btn-border-color: color-mix(in srgb, var(--hz-danger) 40%, transparent);
  --bs-btn-hover-color: var(--hz-danger); --bs-btn-hover-bg: var(--hz-danger-bg); --bs-btn-hover-border-color: var(--hz-danger);
}
.btn-warning { --bs-btn-color: #1f1500; --bs-btn-bg: #f2b650; --bs-btn-border-color: #f2b650; --bs-btn-hover-bg: #e8a93b; --bs-btn-hover-border-color: #e8a93b; }
.btn-link { --bs-btn-color: var(--hz-brand-text); --bs-btn-hover-color: var(--hz-brand); --bs-btn-font-weight: 700; text-decoration: none; }

.card {
  --bs-card-bg: var(--hz-surface);
  --bs-card-border-color: var(--hz-line);
  --bs-card-border-radius: var(--hz-radius-lg);
  --bs-card-inner-border-radius: calc(var(--hz-radius-lg) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: .8rem;
  --bs-card-spacer-y: 1rem;
  box-shadow: none;
}
.card-header { font-weight: 700; border-bottom-color: var(--hz-line); }
.card-footer { background: var(--hz-surface-2); border-top-color: var(--hz-line); }

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--hz-ink);
  --bs-table-border-color: var(--hz-line);
  --bs-table-striped-bg: var(--hz-surface-2);
  --bs-table-hover-bg: var(--hz-surface-2);
  --bs-table-hover-color: var(--hz-ink);
  font-size: var(--hz-text-sm);
}
.table > thead th, .table > thead td {
  font-family: var(--hz-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--hz-muted); background: var(--hz-surface-2);
  border-bottom-color: var(--hz-line); white-space: nowrap;
}
.table > :not(caption) > * > * { padding: .65rem .85rem; }

.form-control, .form-select {
  font-family: var(--hz-font); font-size: var(--hz-text-md);
  color: var(--hz-ink); background-color: var(--hz-surface);
  border-color: var(--hz-line-strong); border-radius: var(--hz-radius-sm);
}
.form-control::placeholder { color: var(--hz-muted); opacity: .85; }
.form-control:focus, .form-select:focus { border-color: var(--hz-brand); box-shadow: var(--hz-focus); background-color: var(--hz-surface); color: var(--hz-ink); }
.form-control:disabled, .form-select:disabled { background-color: var(--hz-surface-3); }
.form-label { font-weight: 700; font-size: var(--hz-text-sm); color: var(--hz-ink-2); margin-bottom: .3rem; }
.form-text { color: var(--hz-muted); font-size: var(--hz-text-xs); }
.form-check-input:checked { background-color: var(--hz-brand); border-color: var(--hz-brand); }
.form-check-input:focus { box-shadow: var(--hz-focus); border-color: var(--hz-brand); }
.input-group-text { background: var(--hz-surface-2); border-color: var(--hz-line-strong); color: var(--hz-muted); }

.badge { font-weight: 700; border-radius: var(--hz-radius-pill); letter-spacing: 0; }
.bg-success, .text-bg-success { background-color: var(--hz-ok) !important; color: #fff !important; }
.bg-primary, .text-bg-primary { background-color: var(--hz-brand) !important; color: var(--hz-brand-ink) !important; }
.bg-light, .text-bg-light { background-color: var(--hz-surface-2) !important; color: var(--hz-ink) !important; }
.text-success { color: var(--hz-ok) !important; }
.text-primary { color: var(--hz-brand-text) !important; }
.text-danger { color: var(--hz-danger) !important; }
.border { border-color: var(--hz-line) !important; }

.alert { border-radius: var(--hz-radius); border-width: 1px; font-size: var(--hz-text-sm); }
.alert-success { --bs-alert-bg: var(--hz-ok-bg); --bs-alert-color: var(--hz-ok); --bs-alert-border-color: color-mix(in srgb, var(--hz-ok) 25%, transparent); }
.alert-danger { --bs-alert-bg: var(--hz-danger-bg); --bs-alert-color: var(--hz-danger); --bs-alert-border-color: color-mix(in srgb, var(--hz-danger) 25%, transparent); }
.alert-warning { --bs-alert-bg: var(--hz-warn-bg); --bs-alert-color: var(--hz-warn); --bs-alert-border-color: color-mix(in srgb, var(--hz-warn) 25%, transparent); }
.alert-info, .alert-primary { --bs-alert-bg: var(--hz-info-bg); --bs-alert-color: var(--hz-info); --bs-alert-border-color: color-mix(in srgb, var(--hz-info) 25%, transparent); }

.modal { --bs-modal-bg: var(--hz-surface); --bs-modal-border-color: var(--hz-line); --bs-modal-border-radius: var(--hz-radius-lg); --bs-modal-header-border-color: var(--hz-line); --bs-modal-footer-border-color: var(--hz-line); --bs-modal-box-shadow: var(--hz-shadow-lg); }
.modal-title { font-weight: 800; }
.modal-backdrop { --bs-backdrop-bg: #07110d; --bs-backdrop-opacity: .5; }
.dropdown-menu { --bs-dropdown-bg: var(--hz-surface); --bs-dropdown-border-color: var(--hz-line); --bs-dropdown-link-color: var(--hz-ink); --bs-dropdown-link-hover-bg: var(--hz-surface-2); --bs-dropdown-link-active-bg: var(--hz-brand-soft); --bs-dropdown-link-active-color: var(--hz-brand-text); --bs-dropdown-border-radius: var(--hz-radius); --bs-dropdown-box-shadow: var(--hz-shadow); box-shadow: var(--hz-shadow); font-size: var(--hz-text-sm); }
.nav-tabs { --bs-nav-tabs-border-color: var(--hz-line); --bs-nav-tabs-link-active-color: var(--hz-ink); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent transparent var(--hz-brand); }
.nav-tabs .nav-link { font-weight: 700; color: var(--hz-muted); border-width: 0 0 2px; }
.nav-tabs .nav-link.active { border-bottom-color: var(--hz-brand); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--hz-ink); --bs-nav-pills-link-active-color: var(--hz-bg); --bs-nav-pills-border-radius: var(--hz-radius-pill); }
.nav-pills .nav-link { font-weight: 700; color: var(--hz-ink-2); }
.pagination { --bs-pagination-color: var(--hz-ink-2); --bs-pagination-bg: var(--hz-surface); --bs-pagination-border-color: var(--hz-line); --bs-pagination-hover-bg: var(--hz-surface-2); --bs-pagination-active-bg: var(--hz-brand); --bs-pagination-active-border-color: var(--hz-brand); --bs-pagination-focus-box-shadow: var(--hz-focus); }
.list-group { --bs-list-group-bg: var(--hz-surface); --bs-list-group-border-color: var(--hz-line); --bs-list-group-color: var(--hz-ink); --bs-list-group-action-hover-bg: var(--hz-surface-2); --bs-list-group-active-bg: var(--hz-brand-soft); --bs-list-group-active-color: var(--hz-brand-text); --bs-list-group-active-border-color: var(--hz-brand-line); }
.progress { --bs-progress-bg: var(--hz-surface-3); --bs-progress-bar-bg: var(--hz-brand); --bs-progress-border-radius: var(--hz-radius-pill); }
.toast { --bs-toast-bg: var(--hz-surface); --bs-toast-border-color: var(--hz-line); }
.offcanvas { --bs-offcanvas-bg: var(--hz-surface); --bs-offcanvas-border-color: var(--hz-line); }
.accordion { --bs-accordion-bg: var(--hz-surface); --bs-accordion-border-color: var(--hz-line); --bs-accordion-active-bg: var(--hz-surface-2); --bs-accordion-active-color: var(--hz-ink); --bs-accordion-btn-focus-box-shadow: var(--hz-focus); }
.popover, .tooltip { --bs-popover-bg: var(--hz-surface); --bs-popover-border-color: var(--hz-line); font-family: var(--hz-font); }
input[type=checkbox], input[type=radio], progress, input[type=range] { accent-color: var(--hz-brand); }

/* Atalho de teclado para pular a navegação: só aparece com foco. */
.skip-to-content { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-to-content:focus, .skip-to-content:active {
  position: fixed; left: 12px; top: 12px; z-index: 3000; width: auto; height: auto; padding: 6px 10px;
  border-radius: var(--hz-radius-sm); background: var(--hz-surface); color: var(--hz-ink); box-shadow: var(--hz-shadow);
}