/* Custom Bootstrap overrides and modern styles */
:root {
    --brand: #0d9488; /* Refined Teal */
    --brand-soft: #d6eae5;
    --brand-control: #e9f2f0;
    --muted: #6c757d;
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --text-heading: #1e293b;
    --text-body: #475569;
    --border-soft: #e2e8f0;
}
html,body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  background-color: var(--bg);
  color:#212529;
}
/* Make old .edicao panels look like cards */
.edicao, .tree, .treeProduto{
  background-color: var(--card-bg) !important;
  color: #212529 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
/* DetailsView/Forms spacing */
.detailsView .command a, .command a{
  display:inline-block;
  padding: .35rem .6rem;
  margin: .15rem;
  border-radius: .25rem;
  text-decoration:none;
}
.command a{ background:none; border:1px solid transparent; color:var(--muted); }
.command a:hover{ color:var(--brand); }
/* Tables */
.grelha{ width:100%; }
.grelha th{ background:#f1f3f5; color:#212529; font-weight:600; }
.grelha td, .grelha th{ padding:.5rem .75rem; vertical-align:middle; }
.table-responsive{ margin-top:.5rem; }
/* Forms */
.form-control{ height: calc(1.6em + .75rem + 2px); }
.form-select{ height: calc(1.6em + .75rem + 2px); }
.form-select[size]{ height: auto; }
.form-check-input{ margin-top:.3rem; }
/* CheckBoxList moderno (renderiza como <table class="form-check-input">) */
table.form-check-input{ border:none; }
table.form-check-input td{
  padding:.15rem .35rem;
  border:none;
  display:flex;
  align-items:center;
  white-space:nowrap;
}
table.form-check-input input[type="checkbox"]{
  width:1.05em;
  height:1.05em;
  margin:0 .4rem 0 0;
  accent-color:var(--brand);
  cursor:pointer;
  vertical-align:middle;
  flex:0 0 auto;
}
table.form-check-input label{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.3rem .7rem;
  margin:0;
  border:1px solid #e5e7eb;
  border-radius:999px;
  background:#f9fafb;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
}
table.form-check-input label:hover{
  border-color:var(--brand);
  color:var(--brand);
}
table.form-check-input td:has(input:checked) label{
  background:var(--brand-soft, #d6eae5);
  border-color:var(--brand);
  color:var(--brand);
  font-weight:600;
}
/* Buttons fallback for image buttons (keep server image but make clickable area nicer) */
/*input[type="image"], .btn img{ max-height:1.25rem; }*/
/* Menu */
.menu{ background: linear-gradient(180deg,#ffffff,#f8f9fb); color:#333; border-bottom:1px solid rgba(0,0,0,.06); }
.horizontalcssmenu ul li a{ color:#495057; }
.horizontalcssmenu ul li a:hover{ color:var(--brand); }
/* Error message */
.erro{ background:none; color:#b02a37; font-weight:600; }
/* Make links consistent */
a{ color:var(--brand); }
/* Utility */
.text-muted-custom{ color:var(--muted); }
/* Responsive tweaks */
@media (max-width:767.98px){
  .menu{ font-size:13px; }
  .titulo{ font-size:1rem; }
}
/* Header/logo sizing */
.logo-col{ max-width:300px; }
.logo-col img{ max-width:100%; height:auto; display:block; }

.bg-brand {
    background-color: var(--brand);
}

/* Overlay/edit modal-like container used by some controls */
.overlay-edit{ position: absolute; top: 0; left: 0; z-index: 1003; width: 100%; height: 100%; text-align: center; margin: 0 auto; display: none; }
.overlay-card{ margin: 0 auto; padding: .5rem; width: 800px; min-height: 220px; background-color: #ffffff; text-align: left; }
.p-2{ padding:.5rem !important; }
/* Preserve old dark classes if used elsewhere */
.fundocinza{ background-color:#f1f3f5 !important; color:#212529 !important; }

/* Entity form specifics */
.entity-container{ min-height:300px; }
.details-table{ padding-top:25px; padding-bottom:15px; height:352px; }

/* Print helpers for standalone print pages */
.print-body{ margin:0; font-family: Arial, sans-serif; font-size:11px; }
.print-border{ border:1px solid darkgray; width:600px; margin:0 auto; }
.print-table td{ font-family: Arial; font-size:11px; }
.imp{ font-weight:600; }

/* Centralize legacy inline table typography so files need not carry font styles */
.print-body table, .print-border table, .print-table { font-family: Arial, Helvetica, sans-serif; font-size:11px; }

/* Small fixed-width input used for numeric quantities */
.small-input{ width:4rem; display:inline-block; }

/* Image container used to center/limit product images */
.img-container{ max-width:160px; margin:0 auto; }

/* Overlay/backdrop used for modals/iframes */
.overlay-backdrop{ display:none; background-color:rgba(0,0,0,0.55); position:absolute; top:0; left:0; height:100%; width:100%; z-index:1000; }
.overlay-container{ display:none; position:absolute; top:0; left:0; width:100%; padding-top:10px; text-align:center; z-index:1001; }
.iframe-large{ width:90%; height:550px; max-width:1200px; }

/* WUC container for entity control */
.wuc-container{ max-width:590px; text-align:left; }

/* Print helpers moved from inline styles */
.print-label{ background-color:#dcdcdc; text-align:right; padding:0.15rem .25rem; }
.print-bordered{ border:1px solid silver; padding:.25rem; }
.print-footer{ font-family:Arial; font-size:11px; text-align:center; }

/* Fixed width helpers used during migration */
.w-300{ width:300px; display:inline-block; vertical-align:top; }
.w-320{ width:320px; display:inline-block; vertical-align:top; }
.w-90{ width:90%; }

/* Additional widths used in print lists */
.w-250{ width:250px; display:inline-block; vertical-align:top; }
.w-130{ width:130px; display:inline-block; vertical-align:top; }
.w-40{ width:40px; display:inline-block; vertical-align:top; }

/* Additional fixed widths used by legacy layouts */
.w-590{ width:590px; display:inline-block; }
.w-580{ width:580px; display:inline-block; }
.w-155{ width:155px; display:inline-block; }

/* Small image helper */
.img-sm{ width:24px; height:auto; }

/* Alternate dark row used in legacy lists */
.alt-dark{ background-color:#555; color:#fff; }

/* Additional widths introduced during migration */
.w-150{ width:150px; display:inline-block; vertical-align:top; }
.w-180{ width:180px; display:inline-block; vertical-align:top; }
.w-550{ width:550px; display:inline-block; vertical-align:top; }
.w-600{ width:600px; display:inline-block; vertical-align:top; }

.w-200{ width:200px; display:inline-block; vertical-align:top; }

.w-140{ width:140px; display:inline-block; vertical-align:top; }
.w-98{ width:98%; display:block; }
.w-160{ width:160px; display:inline-block; vertical-align:top; }

/* Additional ad-hoc widths used by print pages */
.w-410{ width:410px; display:inline-block; vertical-align:top; }
.w-80{ width:80px; display:inline-block; vertical-align:top; }
.w-60{ width:60px; display:inline-block; vertical-align:top; }
.w-530{ width:530px; display:inline-block; vertical-align:top; }
.w-100{ width:100px; display:inline-block; vertical-align:top; }
.w-640{ width:640px; display:inline-block; vertical-align:top; }
.w-400{ width:400px; display:inline-block; vertical-align:top; }

/* Fixed height helper used in gallery tiles */
.h-170{ height:170px; }

/* Smaller overlay card variant used by some controls */
.overlay-card-sm{ width:600px; }

/* Additional helpers for Encomenda overlays */
.w-740{ width:740px; display:inline-block; vertical-align:top; }
.w-95{ width:95%; display:block; }
.w-260{ width:260px; display:inline-block; vertical-align:top; }

/* Print-specific rules to replace inline print styles */
@media print {
  body.print-body{ margin:0; font-family: Arial, sans-serif; font-size:11px; color:#000; }
  .print-border{ border:1px solid darkgray; width:600px; margin:0 auto; background:#fff; }
  .print-table{ width:100%; font-family:Arial,Helvetica,sans-serif; font-size:11px; border-collapse:collapse; }
  .print-table td{ padding:4px; }
  .print-label{ background-color:#dcdcdc; text-align:right; padding:0.15rem .25rem; }
  .print-bordered{ border:1px solid silver; padding:.25rem; }
  .imp{ font-weight:600; }
  .no-print{ display:none !important; }
}

/* Admin list+edit pages (lista + edição) */
.breadcrumb-trail{
  font-size:.8rem;
  color:var(--muted);
  margin:0 0 .25rem;
}
.breadcrumb-trail .current{ color:var(--brand); font-weight:600; }
.breadcrumb-trail .sep{ margin:0 .35rem; }

.page-header{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 1rem;
}
.page-header i{ color:var(--brand); font-size:1.4rem; }
.page-header h1{ margin:0; font-weight:600; font-size:1.25rem; color:var(--text-heading); }

.admin-card{
  background:var(--card-bg);
  border:1px solid var(--border-soft);
  border-radius:.5rem;
  box-shadow:none;
  overflow:hidden;
}
.admin-card .card-header{
  background:var(--card-bg);
  border-bottom:1px solid var(--border-soft);
  font-weight:600;
  color:var(--text-heading);
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 1.25rem;
}
.admin-card .card-body{ padding:1.25rem; }
.admin-card .card-footer{
  background:var(--card-bg);
  border-top:1px solid var(--border-soft);
  padding:.75rem 1.25rem;
}

/* Cartões de menu (ex: ModStock/Stocks.aspx) */
.stock-menu-card{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.stock-menu-card .card-body{
  text-align:center;
  padding:2rem 1.25rem;
}
.stock-menu-card:hover{
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}
.stock-menu-icon{
  display:block;
  font-size:2.5rem;
  color:var(--brand);
  margin-bottom:.75rem;
}
.stock-menu-title{
  font-size:1.1rem;
  font-weight:600;
  color:var(--text-heading);
  margin:0 0 .35rem;
}
.stock-menu-desc{
  font-size:.875rem;
  color:var(--bs-secondary-color, #6c757d);
  margin:0;
}

.btn-brand{
  background-color:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.btn-brand:hover, .btn-brand:focus{
  background-color:#0b7c72;
  border-color:#0b7c72;
  color:#fff;
}

.btn-outline-brand{
  background-color:transparent;
  border-color:var(--brand);
  color:var(--brand);
}
.btn-outline-brand:hover, .btn-outline-brand:focus{
  background-color:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

.form-label{
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-body);
}

/* Search input with icon */
.search-input{ position:relative; }
.search-input i{
  position:absolute;
  left:.75rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
}
.search-input input{ padding-left:2.2rem; }

/* Status / entity chips */
.encomenda-stepper{
  gap:1rem;
}
.encomenda-stepper .step-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--text-muted, #6c757d);
}
.encomenda-stepper .step-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid currentColor;
  font-weight:600;
  font-size:.8rem;
}
.encomenda-stepper .step-item.active{
  color:var(--brand);
}
.encomenda-stepper .step-item.active .step-circle{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.encomenda-stepper .step-item.completed{
  color:var(--brand);
}
.encomenda-stepper .step-item.completed .step-circle{
  background:var(--brand-soft, #e6f7f5);
  color:var(--brand);
  border-color:var(--brand);
  font-size:0;
}
.encomenda-stepper .step-item.completed .step-circle::before{
  content:"\f633"; /* bi-check-lg */
  font-family:"bootstrap-icons";
  font-size:.85rem;
}
.encomenda-stepper .step-label{
  font-weight:600;
  font-size:.9rem;
}

.form-section-title{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-top:.5rem;
  padding-bottom:.35rem;
  border-bottom:1px solid #e9ecef;
  font-weight:600;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--brand);
}

/* Passo 3 — Resumo da encomenda */
.resumo-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid #e9ecef;
}
.resumo-header-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:.6rem;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:1.2rem;
}
.resumo-header-titulo{ font-weight:700; font-size:1.05rem; }
.resumo-header-sub{ font-size:.8rem; }

.resumo-item{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
}
.resumo-item > i{
  color:var(--brand);
  font-size:1rem;
  margin-top:.1rem;
}
.resumo-label{
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#8a94a0;
}

/* Tabela admin partilhada */
.aw-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.aw-table thead th{
  padding:.65rem .75rem;
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#8a94a0;
  border-bottom:2px solid #e9ecef;
  white-space:nowrap;
}
.aw-table tbody td{
  padding:.65rem .75rem;
  border-bottom:1px solid #f1f3f5;
}
.aw-table tbody tr:last-child td{ border-bottom:none; }
.aw-table tbody tr:hover{ background:#fafbfc; }

/* Passo 3 — Tabela de produtos */
.produtos-table td{ vertical-align:middle; }
.produtos-table th:first-child,
.produtos-table td:first-child{ width:40%; }
.produtos-table td:not(:first-child){ white-space:nowrap; }
.produto-info{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.produto-foto{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:.5rem;
  border:1px solid #e9ecef;
  background:#f8f9fa;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.produto-foto img{ width:100%; height:100%; object-fit:contain; }
.produto-foto i{ color:#dee2e6; font-size:1.3rem; }
.produto-nome{ font-weight:600; line-height:1.25; }
.produto-marca{ font-size:.78rem; color:#8a94a0; }

.qtd-pill{
  display:inline-block;
  min-width:2.6rem;
  text-align:center;
  background:var(--brand-soft);
  color:var(--brand);
  font-weight:700;
  padding:.25rem .6rem;
  border-radius:999px;
}

.badge-estado{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.75rem;
  font-weight:600;
  padding:.25rem .6rem;
  border-radius:999px;
  white-space:nowrap;
}
.badge-estado.aprovado{ background:#d1e7dd; color:#0f5132; }
.badge-estado.pendente{ background:#fff3cd; color:#997404; }
.badge-estado.neutro{ background:#e9ecef; color:#6c757d; }

.btn-remover-linha{
  border:none;
  background:transparent;
  color:#adb5bd;
  padding:.35rem .5rem;
  border-radius:.375rem;
  transition:color .15s ease, background .15s ease;
}
.btn-remover-linha:hover{ color:#dc3545; background:#f8d7da; }

/* Modal Adicionar Produtos */
.ap-toolbar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:1rem;
  padding:1rem;
  background:#fff;
  border-bottom:1px solid #e9ecef;
}
.ap-toolbar .form-label{
  margin-bottom:.25rem;
  font-weight:600;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--brand);
}
.ap-toolbar-marca{ flex:0 0 240px; }
.ap-toolbar-pesquisa{ flex:1 1 220px; }
.ap-toolbar-resultados{ flex:0 0 auto; padding-bottom:.5rem; font-size:.85rem; white-space:nowrap; }
.ap-pesquisa-wrapper{ position:relative; }
.ap-pesquisa-wrapper i{
  position:absolute;
  left:.75rem;
  top:50%;
  transform:translateY(-50%);
  color:#adb5bd;
  pointer-events:none;
}
.ap-pesquisa-wrapper input{ padding-left:2.2rem; }

.ap-estado{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:320px;
  text-align:center;
  padding:2rem;
}
.ap-estado .spinner-border{ color:var(--brand); }

.ap-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:1rem;
  padding:1rem;
}

.ap-card{
  display:flex;
  flex-direction:column;
  border:1px solid #e9ecef;
  border-radius:.75rem;
  background:#fff;
  overflow:hidden;
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.ap-card:hover{
  border-color:var(--brand);
  box-shadow:0 .5rem 1rem rgba(13,148,136,.12);
  transform:translateY(-2px);
}
.ap-card.ap-adicionado{ border-color:#198754; }

.ap-card-foto{
  position:relative;
  aspect-ratio:4/3;
  background:#f8f9fa;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ap-card-foto img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .2s ease;
}
.ap-card:hover .ap-card-foto img{ transform:scale(1.05); }
.ap-card-foto .ap-sem-foto{ font-size:2.5rem; color:#dee2e6; }

.ap-card-stock{
  position:absolute;
  top:.5rem;
  right:.5rem;
  background:var(--brand-soft);
  color:var(--brand);
  font-weight:600;
  font-size:.72rem;
  padding:.2rem .55rem;
  border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.ap-card-stock.ap-stock-baixo{ background:#fff3cd; color:#997404; }

.ap-card-body{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:.75rem;
  flex:1;
}
.ap-card-nome{
  font-weight:600;
  font-size:.85rem;
  line-height:1.25;
  min-height:2.15em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}

.ap-card-acoes{ display:flex; gap:.5rem; }
.ap-stepper{
  display:flex;
  align-items:stretch;
  border:1px solid #ced4da;
  border-radius:.375rem;
  overflow:hidden;
  flex:0 0 auto;
}
.ap-stepper button{
  border:none;
  background:#f8f9fa;
  color:#495057;
  width:1.9rem;
  font-weight:700;
  line-height:1;
}
.ap-stepper button:hover{ background:var(--brand-soft); color:var(--brand); }
.ap-stepper input{
  width:2.8rem;
  border:none;
  text-align:center;
  font-weight:600;
  font-size:.85rem;
  -moz-appearance:textfield;
}
.ap-stepper input::-webkit-outer-spin-button,
.ap-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ap-stepper input:focus{ outline:none; }

.ap-btn-adicionar{ flex:1; white-space:nowrap; }
.ap-btn-adicionar.btn-success{ pointer-events:none; }

.badge-chip{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  background:var(--brand-soft);
  color:var(--brand);
  font-weight:600;
  font-size:.75rem;
  padding:.2rem .65rem;
  border-radius:9999px;
  white-space:nowrap;
}

.table-modern thead th{
  background-color:var(--card-bg);
  color:var(--muted);
  font-weight:600;
  border-bottom:1px solid var(--border-soft);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
  padding-top:.75rem;
  padding-bottom:.75rem;
}
.table-modern tbody td{
  color:var(--text-body);
  padding-top:.75rem;
  padding-bottom:.75rem;
}
.table-modern tbody tr:hover{ background-color:var(--brand-soft); }
.table-modern td, .table-modern th{ vertical-align:middle; }
.table-modern tbody tr.dragging{ opacity:.5; }
.table-modern tbody tr.drag-over{ border-top:2px solid var(--brand); }

/* Pagination */
.pagination .page-link{
  color:var(--text-body);
  border-color:var(--border-soft);
}
.pagination .page-link:hover{ color:var(--brand); background-color:var(--brand-soft); }
.pagination .page-item.active .page-link{
  background-color:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.pagination .page-item.disabled .page-link{ color:#cbd5e1; background-color:var(--card-bg); }

/* Sidebar menu */
#appLayout{ min-height:100vh; }

.sidebar{
  width:260px;
  flex-shrink:0;
  background-color:var(--card-bg);
  border-right:1px solid var(--border-soft);
  transition:width .2s ease, transform .2s ease;
  overflow-y:auto;
  height:100vh;
  position:sticky;
  top:0;
}
.sidebar.collapsed{ width:64px; }
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-chevron,
.sidebar.collapsed .sidebar-group-body{ display:none; }
.sidebar.collapsed .sidebar-header .sidebar-logo img{ display:none; }
.sidebar.collapsed .sidebar-group-header{ justify-content:center; padding:.6rem; }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem .9rem;
    border-bottom: 1px solid var(--border-soft);
    background-color: var(--brand);
}
.sidebar-logo img{ max-height:36px; }
.sidebar-toggle-btn{
  border:none; background:none; font-size:1.25rem; color:#ffffff; cursor:pointer; padding:.25rem .5rem;
  border-radius:.25rem;
}
.sidebar-toggle-btn:hover{ background-color:rgba(255,255,255,.15); }

.sidebar-group-header{
  display:flex; align-items:center; gap:.65rem; width:100%;
  border:none; background:none; text-align:left; padding:.55rem .9rem;
  font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-body); cursor:pointer; border-radius:.25rem; margin:.1rem .5rem;
  width:calc(100% - 1rem);
}
.sidebar-group-header i:first-child{ color:var(--muted); font-size:1rem; text-transform:none; letter-spacing:0; }
.sidebar-group-header:hover{ background-color:var(--brand-soft); color:var(--brand); }
.sidebar-group-header:hover i:first-child{ color:var(--brand); }
.sidebar-group-header .sidebar-label{ flex:1; }
.sidebar-chevron{ transition:transform .2s ease; font-size:.7rem; }
.sidebar-group-header[aria-expanded="true"] .sidebar-chevron{ transform:rotate(180deg); }

.sidebar-menu-list{ list-style:none; margin:0; padding:.1rem 0 .4rem 0; }
.sidebar-link{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem .4rem 2.6rem; color:var(--text-body); text-decoration:none; font-size:.85rem;
  border-left:3px solid transparent;
}
.sidebar-link::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--border-soft); flex-shrink:0;
}
.sidebar-link:hover{ background-color:var(--brand-soft); color:var(--brand); }
.sidebar-link:hover::before{ background:var(--brand); }
.sidebar-link.active{
  background-color:var(--brand-soft); color:var(--brand); font-weight:600;
  border-left:3px solid var(--brand); padding-left:calc(2.6rem - 3px);
}
.sidebar-link.active::before{ background:var(--brand); }

/* Top bar */
.topbar{ border-bottom:1px solid var(--border-soft); margin-bottom:.5rem; }
.topbar-version{ font-size:.75rem; color:var(--muted); }
.topbar-user{
  display:flex; align-items:center; gap:.4rem;
  font-size:.85rem; font-weight:600; color:var(--text-heading);
  padding:.25rem .6rem; border-radius:9999px; background:var(--brand-soft);
}
.topbar-user i{ color:var(--brand); font-size:1.1rem; }
.topbar-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:2.2rem; height:2.2rem; border-radius:.375rem;
  color:var(--text-body); font-size:1.15rem; text-decoration:none;
  border:1px solid var(--border-soft);
}
.topbar-icon-btn:hover{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand-soft); }

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

#sidebarOverlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1030;
}
#sidebarOverlay.show{ display:block; }

@media (max-width:767.98px){
  .sidebar{
    width:64px;
  }
  .sidebar .sidebar-label,
  .sidebar .sidebar-chevron{ display:none; }
  .sidebar:not(.show) .sidebar-group-body{ display:none !important; }
  .sidebar .sidebar-header .sidebar-logo img{ display:none; }
  .sidebar .sidebar-group-header{ justify-content:center; padding:.6rem; }

  .sidebar.show{
    position:fixed; left:0; top:0; height:100vh; z-index:1040; width:250px;
    box-shadow:2px 0 10px rgba(0,0,0,.15);
  }
  .sidebar.show .sidebar-label,
  .sidebar.show .sidebar-chevron{ display:inline; }
  .sidebar.show .sidebar-header .sidebar-logo img{ display:inline; }
  .sidebar.show .sidebar-group-header{ justify-content:flex-start; padding:.55rem .9rem; }

  .main-content{ padding:0 .75rem; }
}
.form-control {
    background-color: var(--brand-control);
}
.form-select{
    background-color: var(--brand-control);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: var(--brand-control);
    --bs-table-bg-state: var(--brand-control);
}

/* Pré-visualização do produto selecionado */
.produto-preview{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    background-color: var(--brand-control);
    min-height: calc(10 * 1.6em + .75rem + 2px);
}
.produto-preview-img{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    width: 100%;
}
.produto-preview-img img{
    max-height: 130px;
    max-width: 100%;
    object-fit: contain;
    border-radius: .375rem;
}
.produto-preview-img i{
    font-size: 3rem;
}
.produto-preview-nome{
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}
.produto-preview-marca{
    font-size: .85rem;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.produto-preview-sm{
    height: auto;
    min-height: auto;
}
.produto-preview-sm .produto-preview-img{
    height: 90px;
}
.produto-preview-sm .produto-preview-img img{
    max-height: 90px;
}
/* ============================================================
   ANIMAÇÕES E MICRO-INTERAÇÕES — v2026
   ============================================================ */

/* 1. Fade-in na entrada de página */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: none; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes countPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13,148,136,.4); }
    50%       { box-shadow: 0 0 0 6px rgba(13,148,136,0); }
}

/* Página inteira faz fade-in */
#contentor { animation: fadeIn .25s ease both; }

/* admin-card aparece com slide suave */
.admin-card {
    animation: fadeInUp .22s ease both;
    transition: box-shadow .2s ease, transform .2s ease;
}
.admin-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
}

/* 2. Tabela — linha hover mais suave e rápida */
.table-modern tbody tr {
    transition: background-color .12s ease;
}
.table-modern tbody tr[style*="cursor"]:hover,
.table-modern tbody tr.clickable:hover {
    background-color: var(--brand-soft) !important;
    box-shadow: inset 3px 0 0 var(--brand);
}

/* 3. Botões — feedback de clique */
.btn {
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:active {
    transform: scale(.97);
}
.btn-brand:hover {
    box-shadow: 0 3px 10px rgba(13,148,136,.35);
}
.btn-outline-secondary:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.btn-outline-danger:hover {
    box-shadow: 0 2px 6px rgba(220,53,69,.2);
}
.btn-outline-primary:hover {
    box-shadow: 0 2px 6px rgba(13,110,253,.2);
}

/* 4. Inputs — focus glow */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,.15) !important;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control, .form-select {
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
    border-color: #b6c6cf;
}

/* 5. Sidebar — hover mais suave */
.sidebar-link {
    transition: background-color .14s ease, color .14s ease,
                border-left-color .14s ease, padding-left .14s ease;
}
.sidebar-group-header {
    transition: background-color .14s ease, color .14s ease;
}
.sidebar-link::before {
    transition: background-color .14s ease, transform .14s ease;
}
.sidebar-link:hover::before {
    transform: scale(1.5);
}

/* 6. Topbar icons */
.topbar-icon-btn {
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease, transform .1s ease;
}
.topbar-icon-btn:hover {
    transform: translateY(-1px);
}

/* 7. Cards de dashboard / KPI */
.kpi-card {
    border-radius: .65rem;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: fadeInUp .28s ease both;
    text-decoration: none;
    color: inherit;
}
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.09);
    border-color: var(--brand);
    color: inherit;
    text-decoration: none;
}
.kpi-card:nth-child(1) { animation-delay: .04s; }
.kpi-card:nth-child(2) { animation-delay: .08s; }
.kpi-card:nth-child(3) { animation-delay: .12s; }
.kpi-card:nth-child(4) { animation-delay: .16s; }

.kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .65rem;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.kpi-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: .2rem;
}
.kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}
.kpi-sub {
    font-size: .75rem;
    color: var(--muted);
    margin-top: .2rem;
}

/* 8. Quick-access cards */
.quick-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: .5rem;
    background: var(--card-bg);
    text-decoration: none;
    color: var(--text-body);
    transition: transform .15s ease, box-shadow .15s ease,
                border-color .15s ease, color .15s ease;
    animation: fadeInUp .25s ease both;
}
.quick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    border-color: var(--brand);
    color: var(--brand);
    text-decoration: none;
}
.quick-card i {
    font-size: 1.25rem;
    color: var(--brand);
    transition: transform .15s ease;
}
.quick-card:hover i { transform: scale(1.15); }
.quick-card-label { font-weight: 600; font-size: .875rem; }

/* 9. Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 400px 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: .35rem;
    height: 1.1em;
    display: inline-block;
}

/* 10. Badge com pulso para alertas */
.badge-alert {
    animation: badgePulse 2s infinite;
}

/* 11. Page header animado */
.page-header { animation: slideInLeft .2s ease both; }
.breadcrumb-trail { animation: fadeIn .2s ease .05s both; }

/* 12. Pagination smooth */
.pagination .page-link {
    transition: background-color .13s ease, color .13s ease,
                border-color .13s ease, transform .1s ease;
}
.pagination .page-link:hover:not(.active) {
    transform: translateY(-1px);
}

/* 13. Sidebar collapse animation */
.sidebar { transition: width .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1); }

/* 14. Modal fade — in sync with Bootstrap's transitionend timing */
.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translateY(-10px);
}
.modal.show .modal-dialog {
    transform: none;
}

/* 15. Alert dismiss animation */
.alert { animation: fadeInUp .2s ease both; }

/* 16. Dual-list items */
#listaNaoAprovam div, #listaAprovam div {
    transition: background-color .12s ease, color .12s ease;
}

/* 17. Hover state para linhas clicáveis nos admin-cards */
.table-modern tbody tr[style*="cursor: pointer"]:active td {
    background-color: var(--brand-soft);
}

/* 18. Tooltip-like hover on breadcrumb links */
.breadcrumb-trail a {
    text-decoration: none;
    color: var(--muted);
    transition: color .13s ease;
}
.breadcrumb-trail a:hover { color: var(--brand); }

/* 19. Card header button hover */
.admin-card .card-header .btn {
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, transform .1s ease;
}
.admin-card .card-header .btn:hover { transform: translateY(-1px); }

/* 20. Progress bar para dashboard */
.kpi-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--border-soft);
    margin-top: .5rem;
    overflow: hidden;
}
.kpi-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--brand);
    transition: width .6s cubic-bezier(.4,0,.2,1);
    width: 0;
}

/* Dashboard section headers */
.dash-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0 0 .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.dash-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}
.table-modern thead th {
    background-color: var(--brand-soft);
}
.modal{z-index:2000!important}