/* ============================================================
   MELPER ERP — Design System Base
   Padrão visual estabelecido na Fase 04
   Reutilizar em todos os módulos subsequentes
   ============================================================ */

/* ── Variáveis ─────────────────────────────────────────────── */
:root {
  --color-primary:       #1a6fc4;
  --color-primary-dark:  #145aa0;
  --color-primary-light: #e8f1fb;
  --sidebar-bg:          #0f172a;
  --sidebar-accent:      #60a5fa;
  --sidebar-accent-bg:   rgba(26,111,196,.2);
  --color-danger:        #d9363e;
  --color-danger-light:  #fce8e9;
  --color-success:       #1a7f4b;
  --color-success-light: #e6f4ec;
  --color-warning:       #b45309;
  --color-warning-light: #fef3cd;

  --color-bg:            #f4f6f9;
  --color-surface:       #ffffff;
  --color-border:        #dde2ea;
  --color-text:          #1e293b;
  --color-text-muted:    #64748b;
  --color-text-light:    #94a3b8;

  --sidebar-width:       240px;
  --header-height:       56px;

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

  --shadow-sm:           0 1px 3px rgba(0,0,0,.08);
  --shadow-md:           0 4px 12px rgba(0,0,0,.12);
  --shadow-lg:           0 8px 24px rgba(0,0,0,.15);

  --font-sans:           'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', monospace;
  --font-size-sm:        13px;
  --font-size-base:      14px;
  --font-size-md:        15px;
  --font-size-lg:        18px;
  --font-size-xl:        22px;

  --transition:          150ms ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-base);
  color:          var(--color-text);
  background:     var(--color-bg);
  line-height:    1.5;
  min-height:     100vh;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

/* ── Layout ─────────────────────────────────────────────────── */
.app-layout {
  display:  grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows:    var(--header-height) 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  grid-area:     sidebar;
  background:    var(--sidebar-bg);
  color:         #cbd5e1;
  display:       flex;
  flex-direction: column;
  position:      sticky;
  top:           0;
  height:        100vh;
  overflow-y:    auto;
}

.sidebar__brand {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        16px 12px 12px;
  border-bottom:  1px solid rgba(255,255,255,.06);
  flex-shrink:    0;
}
.sidebar-logo-img {
  display:        block;
  max-width:      75%;
  max-height:     52px;
  object-fit:     contain;
  margin:         0 auto;
}
.sidebar__brand-logo {
  min-width:  30px;
  min-height: 30px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  letter-spacing: -.5px;
  overflow: hidden;
}
.sidebar__brand-name {
  font-weight: 700;
  font-size:   var(--font-size-md);
  color:       #f1f5f9;
  letter-spacing: -.3px;
}

.sidebar__nav { flex: 1; padding: 12px 0; }
.sidebar__section-title {
  font-size:     10px;
  font-weight:   600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:         #475569;
  padding:       16px 20px 6px;
}
.sidebar__item {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        9px 20px;
  color:          #94a3b8;
  font-size:      var(--font-size-sm);
  font-weight:    500;
  border-radius:  0;
  transition:     background var(--transition), color var(--transition);
  cursor:         pointer;
}
.sidebar__item:hover { background: rgba(255,255,255,.05); color: #e2e8f0; text-decoration: none; }
.sidebar__item.active { background: var(--sidebar-accent-bg); color: var(--sidebar-accent); }
.sidebar__item-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: .75;
}
.sidebar__item.active .sidebar__item-icon { opacity: 1; }

/* ── Header ─────────────────────────────────────────────────── */
.header {
  grid-area:      header;
  background:     var(--color-surface);
  border-bottom:  1px solid var(--color-border);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        0 24px;
  position:       sticky;
  top:            0;
  z-index:        10;
}
.header__title {
  font-size:   var(--font-size-lg);
  font-weight: 600;
  color:       var(--color-text);
  letter-spacing: -.3px;
}
.header__actions { display: flex; align-items: center; gap: 12px; }
.header__user {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
}
.header__avatar {
  width:          32px;
  height:         32px;
  background:     var(--color-primary-light);
  color:          var(--color-primary);
  border-radius:  50%;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-weight:    700;
  font-size:      13px;
}

/* ── Main Content ───────────────────────────────────────────── */
.main {
  grid-area: main;
  padding:   24px;
  overflow:  auto;
}

/* ── Page Header ────────────────────────────────────────────── */
.page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   20px;
}
.page-header__info h2 {
  font-size:   var(--font-size-xl);
  font-weight: 700;
  color:       var(--color-text);
  letter-spacing: -.4px;
}
.page-header__info p {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
  margin-top: 2px;
}

/* ── Botões ─────────────────────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        8px 16px;
  font-size:      var(--font-size-sm);
  font-weight:    500;
  border-radius:  var(--radius-sm);
  border:         1px solid transparent;
  transition:     background var(--transition), border-color var(--transition), color var(--transition);
  white-space:    nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color:      #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary {
  background:   var(--color-surface);
  color:        var(--color-text-muted);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-bg); }
.btn-danger {
  background: var(--color-danger);
  color:      #fff;
}
.btn-danger:hover { background: #b91c24; }
.btn-icon {
  padding:       6px;
  background:    transparent;
  border:        1px solid transparent;
  border-radius: var(--radius-sm);
  color:         var(--color-text-muted);
}
.btn-icon:hover { background: var(--color-bg); color: var(--color-text); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ── Toolbar / Filtros ──────────────────────────────────────── */
.toolbar {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 16px;
  flex-wrap:     wrap;
}
.toolbar__search {
  flex:          1;
  min-width:     200px;
  max-width:     360px;
  position:      relative;
}
.toolbar__search input {
  width:         100%;
  padding:       7px 12px 7px 36px;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size:     var(--font-size-sm);
  background:    var(--color-surface);
  color:         var(--color-text);
  transition:    border-color var(--transition);
}
.toolbar__search input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.toolbar__search-icon {
  position:  absolute;
  left:      10px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--color-text-light);
  width:     16px;
  height:    16px;
}
.toolbar__filter select {
  padding:       7px 10px;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size:     var(--font-size-sm);
  background:    var(--color-surface);
  color:         var(--color-text);
  cursor:        pointer;
}
.toolbar__filter select:focus { outline: none; border-color: var(--color-primary); }

/* ── Card / Surface ─────────────────────────────────────────── */
.card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-sm);
}
.card__body { padding: 20px; }

/* ── Tabela ─────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }
table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
}
thead th {
  padding:          10px 14px;
  text-align:       left;
  font-weight:      600;
  font-size:        11px;
  text-transform:   uppercase;
  letter-spacing:   .5px;
  color:            var(--color-text-muted);
  border-bottom:    1px solid var(--color-border);
  white-space:      nowrap;
  background:       var(--color-bg);
}
tbody td {
  padding:       11px 14px;
  border-bottom: 1px solid var(--color-border);
  color:         var(--color-text);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--color-bg); }
.td-actions { display: flex; gap: 6px; }
.td-code {
  font-family: var(--font-mono);
  font-size:   12px;
  color:       var(--color-text-muted);
}
.td-name { font-weight: 500; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  padding:        2px 8px;
  border-radius:  99px;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .2px;
}
.badge-success { background: var(--color-success-light); color: var(--color-success); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-light);  color: var(--color-danger);  }
.badge-muted   { background: #f1f5f9; color: var(--color-text-muted); }

/* ── Paginação ──────────────────────────────────────────────── */
.pagination {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 16px;
  border-top:      1px solid var(--color-border);
  font-size:       var(--font-size-sm);
  color:           var(--color-text-muted);
}
.pagination__controls { display: flex; gap: 4px; }
.pagination__btn {
  padding:       4px 10px;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background:    var(--color-surface);
  color:         var(--color-text);
  font-size:     var(--font-size-sm);
  cursor:        pointer;
}
.pagination__btn:hover:not(:disabled) { background: var(--color-bg); }
.pagination__btn:disabled { opacity: .45; cursor: default; }
.pagination__btn.active {
  background:    var(--color-primary);
  border-color:  var(--color-primary);
  color:         #fff;
}

/* ── Estado vazio ───────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding:    48px 24px;
}
.empty-state__icon {
  width:         48px;
  height:        48px;
  margin:        0 auto 12px;
  color:         var(--color-text-light);
}
.empty-state__title {
  font-size:   var(--font-size-md);
  font-weight: 600;
  color:       var(--color-text);
  margin-bottom: 4px;
}
.empty-state__desc {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
}

/* ── Loading ────────────────────────────────────────────────── */
.loading {
  text-align: center;
  padding:    40px;
  color:      var(--color-text-muted);
  font-size:  var(--font-size-sm);
}
.spinner {
  display:       inline-block;
  width:         20px;
  height:        20px;
  border:        2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation:     spin .7s linear infinite;
  vertical-align: middle;
  margin-right:  8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-backdrop {
  position:   fixed;
  inset:      0;
  background: rgba(15, 23, 42, .45);
  display:    flex;
  align-items: center;
  justify-content: center;
  z-index:    100;
  padding:    20px;
}
.modal-backdrop.hidden { display: none; }
.modal {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  width:         100%;
  max-width:     640px;
  max-height:    90vh;
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
  animation:     modal-in .15s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(.96) translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.modal__header {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        18px 20px;
  border-bottom:  1px solid var(--color-border);
  flex-shrink:    0;
}
.modal__title {
  font-size:   var(--font-size-lg);
  font-weight: 700;
  color:       var(--color-text);
  letter-spacing: -.3px;
}
.modal__close {
  background:    transparent;
  border:        none;
  color:         var(--color-text-muted);
  padding:       4px;
  border-radius: var(--radius-sm);
  display:       flex;
}
.modal__close:hover { background: var(--color-bg); color: var(--color-text); }
.modal__body {
  padding:              20px;
  overflow-y:           auto;
  flex:                 1;
  overscroll-behavior:  contain;
}
.modal__footer {
  display:         flex;
  gap:             8px;
  justify-content: flex-end;
  padding:         16px 20px;
  border-top:      1px solid var(--color-border);
  flex-shrink:     0;
}
.modal form {
  display:        flex;
  flex-direction: column;
  flex:           1;
  overflow:       hidden;
  min-height:     0;
}

/* ── Formulários ────────────────────────────────────────────── */
.form-section {
  margin-bottom: 20px;
}
.form-section__title {
  font-size:     11px;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: .7px;
  color:          var(--color-text-muted);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom:  1px solid var(--color-border);
}
.form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
}
.form-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.form-group--full { grid-column: 1 / -1; }
label {
  font-size:   var(--font-size-sm);
  font-weight: 500;
  color:       var(--color-text);
}
label .required { color: var(--color-danger); margin-left: 2px; }
.form-control {
  padding:       8px 10px;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size:     var(--font-size-sm);
  color:         var(--color-text);
  background:    var(--color-surface);
  width:         100%;
  transition:    border-color var(--transition);
}
.form-control:focus { outline: none; border-color: var(--color-primary); }
.form-control.invalid { border-color: var(--color-danger); }
.form-control::placeholder { color: var(--color-text-light); }
textarea.form-control { resize: vertical; min-height: 72px; }
select.form-control { cursor: pointer; }
.form-hint {
  font-size: 11px;
  color:     var(--color-text-muted);
}
.form-error {
  font-size: 11px;
  color:     var(--color-danger);
  display:   none;
}
.form-group.has-error .form-error { display: block; }
.form-group.has-error .form-control { border-color: var(--color-danger); }

/* ── Password toggle ─────────────────────────────────────── */
.pw-wrapper { position: relative; display: block; }
.pw-wrapper .form-control { padding-right: 36px; }
.pw-toggle {
  position:    absolute;
  right:       6px;
  top:         50%;
  transform:   translateY(-50%);
  background:  none;
  border:      none;
  padding:     4px;
  cursor:      pointer;
  color:       var(--color-text-muted);
  display:     flex;
  align-items: center;
  line-height: 1;
}
.pw-toggle:hover { color: var(--color-text); }
.pw-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* ── Toast ──────────────────────────────────────────────────── */
.toast-container {
  position:   fixed;
  bottom:     24px;
  right:      24px;
  display:    flex;
  flex-direction: column;
  gap:        8px;
  z-index:    9999;
}
.toast {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 16px;
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-md);
  font-size:     var(--font-size-sm);
  font-weight:   500;
  min-width:     280px;
  max-width:     380px;
  animation:     toast-in .2s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
.toast-success  { background: var(--color-success); color: #fff; }
.toast-error    { background: var(--color-danger);  color: #fff; }
.toast-info     { background: var(--color-primary); color: #fff; }
.toast-warning  { background: #d97706;              color: #fff; }

/* ── Confirm dialog ─────────────────────────────────────────── */
.confirm-dialog {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  padding:       24px;
  max-width:     400px;
  width:         100%;
  animation:     modal-in .15s ease;
}
.confirm-dialog__icon {
  width:         44px;
  height:        44px;
  background:    var(--color-danger-light);
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--color-danger);
  margin:        0 auto 16px;
}
.confirm-dialog__title {
  font-size:   var(--font-size-md);
  font-weight: 700;
  text-align:  center;
  margin-bottom: 6px;
}
.confirm-dialog__desc {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-muted);
  text-align: center;
  margin-bottom: 20px;
}
.confirm-dialog__actions {
  display:         flex;
  gap:             8px;
  justify-content: center;
}

/* ── Bulk selection bar ─────────────────────────────────────── */
.bulk-bar {
  position:   fixed;
  bottom:     -80px;
  left:       0; right: 0;
  z-index:    200;
  background: var(--color-primary);
  color:      #fff;
  padding:    0 24px;
  height:     56px;
  display:    flex;
  align-items: center;
  gap:        16px;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
  transition: bottom .25s ease;
}
.bulk-bar.is-visible { bottom: 0; }
.bulk-bar__count { flex: 1; font-weight: 600; }
.bulk-bar__btn-delete {
  background:    #d9363e;
  color:         #fff;
  border:        none;
  border-radius: var(--radius-md);
  padding:       8px 18px;
  cursor:        pointer;
  font-weight:   600;
  display:       flex;
  align-items:   center;
  gap:           6px;
}
.bulk-bar__btn-delete:hover { background: #b52b32; }
.bulk-bar__btn-cancel {
  background:    transparent;
  color:         #fff;
  border:        1.5px solid rgba(255,255,255,.5);
  border-radius: var(--radius-md);
  padding:       8px 14px;
  cursor:        pointer;
}
.bulk-bar__btn-cancel:hover { background: rgba(255,255,255,.12); }

/* Checkbox column */
.col-check { width: 40px; text-align: center; }
table thead th.col-check input[type=checkbox],
table tbody td.col-check input[type=checkbox] {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--color-primary);
}

/* ── Sidebar header (logo dinâmico via sidebar.js) ──────────── */
.sidebar-header {
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px;
}
.sidebar-header img {
  max-width: 80%;
  max-height: 56px;
  object-fit: contain;
  display: block;
}
.sidebar-badge {
  display: inline-block;
  background: rgba(26,111,196,.3);
  color: #60a5fa;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
}

/* ── Sino de notificações (header) ──────────────────────────── */
.notif-bell {
  position: relative;
  display:  flex;
  align-items: center;
  justify-content: center;
  width:  36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.notif-bell:hover { background: var(--color-bg); color: var(--color-text); }

.notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

@keyframes bell-pulse {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-15deg); }
  75%       { transform: rotate(15deg); }
}
.bell-active { animation: bell-pulse 1s ease-in-out 3; }

/* ── Dropdown de notificações ───────────────────────────────── */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: -8px;
  width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 500;
  overflow: hidden;
}
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}
.notif-mark-all-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.notif-mark-all-btn:hover { text-decoration: underline; }
.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.notif-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-bg); }
.notif-item.notif-unread { background: rgba(var(--color-primary-rgb, 26,111,196),.04); }
.notif-item-title { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 2px; }
.notif-item-msg   { font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.notif-item-date  { font-size: 11px; color: var(--color-text-muted); }
.notif-loading, .notif-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--color-text-muted); margin: 0; }
.notif-see-all {
  display: block;
  text-align: center;
  padding: 9px;
  font-size: 12px;
  color: var(--color-primary);
  border-top: 1px solid var(--color-border);
  text-decoration: none;
}
.notif-see-all:hover { background: var(--color-bg); }

/* ── Toast de notificação ───────────────────────────────────── */
.notif-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 12px 18px;
  font-size: 13px;
  color: var(--color-text);
  z-index: 9000;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s;
  max-width: 300px;
}
.notif-toast.notif-toast-visible { opacity: 1; transform: translateY(0); }

/* ── Sidebar toggle (hamburger) ──────────────────────────────── */
#sidebar-toggle { display: none; }
#sidebar-toggle:hover { background: var(--color-border); }

/* ── Sidebar overlay (mobile drawer) ────────────────────────── */
.sidebar-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.4);
  z-index:    999;
}
.sidebar-overlay.is-open { display: block; }

/* ── Responsividade ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .app-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }
  .form-grid { grid-template-columns: 1fr; }

  #sidebar-toggle {
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    background:      none;
    border:          none;
    cursor:          pointer;
    color:           var(--color-text);
    border-radius:   var(--radius-sm);
    flex-shrink:     0;
    margin-right:    8px;
    z-index:         1001;
  }

  .sidebar {
    position:   fixed;
    top:        0;
    left:       0;
    height:     100vh;
    z-index:    1000;
    transform:  translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.is-open { transform: translateX(0); }
}

/* ── Per-page selector (M-17) ───────────────────────────────────────────── */
.per-page-wrap { display:flex; align-items:center; gap:.5rem; }
.per-page-label { font-size:.8125rem; color:var(--color-text-secondary,#64748b); white-space:nowrap; user-select:none; }
.per-page-select { padding:.25rem .5rem; font-size:.8125rem; border:1px solid var(--color-border,#e2e8f0); border-radius:var(--radius-sm,4px); background:#fff; color:var(--color-text,#1e293b); cursor:pointer; min-width:64px; }
.per-page-select:focus { outline:none; border-color:var(--color-primary,#3b82f6); box-shadow:0 0 0 2px rgba(59,130,246,.15); }
.toolbar-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.toolbar-left { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; flex:1; }
.toolbar-right { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }

/* ── Rodapé da aplicação ────────────────────────────────────────────── */
#app-footer {
  grid-area: footer;
  width: 100%;
  padding: 10px 20px;
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  background: var(--color-bg, #f8fafc);
  border-top: 1px solid var(--color-border, #e5e7eb);
  box-sizing: border-box;
}

#app-footer span#app-footer-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#app-footer .footer-left {
  flex: 1 1 auto;
  line-height: 1.6;
}

#app-footer .footer-right {
  flex: 0 0 auto;
}

#app-footer .footer-subtitle {
  font-size: 0.7rem;
  color: var(--color-text-muted, #aaa);
  font-weight: 400;
}

.footer-version-badge {
  display: inline-flex;
  align-items: center;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── Toggle switch (reutilizável) ────────────────────────────── */
.toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #94a3b8;
  border-radius: 99px;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.toggle input:checked + .toggle-slider { background: var(--color-primary, #2563eb); }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }