:root{
  --primary:#a31226;
  --canvas:#f6f7fb;
  --border:#e5e7eb;
}

/* Sidebar */
.sidebar-nav-scroll{
  overflow:auto;
  height:calc(100vh - 72px);
  padding-bottom:24px;
}

/* Sidebar responsivo (drawer no mobile) */
.sidebar-drawer{
  z-index:50;
  transform:translateX(-100%);
  transition:transform .2s ease;
}
.sidebar-overlay{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.45);
  z-index:40;
  display:none;
}
body.sidebar-open .sidebar-drawer{
  transform:translateX(0);
}
body.sidebar-open .sidebar-overlay{
  display:block;
}
body.sidebar-open{
  overflow:hidden;
}
@media (min-width:1024px){
  .sidebar-drawer{ transform:none; }
  .sidebar-overlay{ display:none !important; }
  body.sidebar-open{ overflow:auto; }
}

.sidebar-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:12px;
  color:#4b5563;
  font-size:14px;
  line-height:1;
  transition:background .15s ease,color .15s ease;
}
.sidebar-link:hover{
  background:#f3f4f6;
  color:#111827;
}
.sidebar-link-active{
  background:rgba(163,18,38,.08);
  color:var(--primary);
}
.sidebar-icon{
  width:20px;
  display:inline-flex;
  justify-content:center;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.55rem .9rem;
  border-radius:.6rem;
  font-size:.875rem;
  font-weight:600;
  border:1px solid transparent;
}
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ filter:brightness(.95); }
.btn-outline{ background:#fff; border-color:var(--border); color:#374151; }
.btn-outline:hover{ background:#f9fafb; }
.btn-ghost{ background:#fff; color:#6b7280; }

/* Inputs */
.input, .select, .textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:.6rem;
  padding:.55rem .75rem;
  font-size:.875rem;
  background:#fff;
  outline:none;
}
.input:focus, .select:focus, .textarea:focus{
  border-color:rgba(163,18,38,.45);
  box-shadow:0 0 0 3px rgba(163,18,38,.12);
}
.label{
  font-size:.75rem;
  color:#6b7280;
  margin-bottom:.25rem;
  display:block;
}

/* Cards / panels */
.panel{
  background:#fff;
  border:1px solid #eef0f4;
  border-radius:14px;
}
.panel-header{
  padding:14px 16px;
  border-bottom:1px solid #f1f3f7;
}
.panel-body{ padding:16px; }

/* Table */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.875rem;
}
.table thead th{
  text-transform:uppercase;
  font-size:11px;
  color:#6b7280;
  font-weight:700;
  padding:10px 12px;
  border-bottom:1px solid #f1f3f7;
}
.table tbody td{
  padding:12px;
  border-bottom:1px solid #f6f7fb;
  color:#374151;
}
.table tbody tr:hover td{ background:#fafafa; }

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  line-height:1.4;
}
.badge-blue{ background:#e8f1ff; color:#2563eb; }
.badge-green{ background:#e9f9ef; color:#16a34a; }
.badge-red{ background:#ffe8e8; color:#dc2626; }
.badge-gray{ background:#f3f4f6; color:#6b7280; }

/* Icon buttons */
.icon-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid #f1f3f7;
  background:#fff;
}
.icon-btn:hover{ background:#f9fafb; }

/* Modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:60;
}
.modal-backdrop[data-open="true"]{ display:flex; }
.modal{
  width:min(520px, 100%);
  background:#fff;
  border-radius:14px;
  border:1px solid #eef0f4;
  box-shadow:0 20px 50px rgba(0,0,0,.20);
}
.modal-header{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #f1f3f7;
}
.modal-title{ font-weight:700; }
.modal-body{ padding:16px; }
.modal-footer{
  padding:14px 16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid #f1f3f7;
}

/* Modal responsivo: mobile com formulário longo (corpo rola, botões sempre visíveis) */
@media (max-width:640px){
  .modal-backdrop{ padding:0; align-items:flex-start; }
  .modal--mobile-fit{
    width:100%;
    max-width:100%;
    max-height:92vh;
    border-radius:0 0 16px 16px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-sizing:border-box;
  }
  .modal--mobile-fit form{
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
    min-width:0;
  }
  .modal--mobile-fit .modal-body{
    flex:1;
    min-height:0;
    min-width:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    max-height:none;
  }
  .modal--mobile-fit .modal-footer{
    flex-shrink:0;
    padding:12px 16px;
    gap:8px;
    flex-direction:column;
  }
  .modal--mobile-fit .modal-footer .btn{
    width:100%;
  }
}

/* Empty state (igual cards vazios dos prints) */
.empty-state{
  padding:56px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#6b7280;
}
.empty-state .empty-icon{
  width:44px;
  height:44px;
  border-radius:999px;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  color:#9ca3af;
  font-weight:800;
}
.empty-state .empty-title{
  font-weight:700;
  color:#111827;
  margin-top:4px;
}
.empty-state .empty-subtitle{
  margin-top:4px;
  font-size:13px;
  color:#6b7280;
}

/* Desativa o utilitário .flex do Tailwind para evitar quebra do modal no mobile */
.flex{
  display:block !important;
}
/* Restaura layout flex onde for necessário (barra de ações, topbar, sidebar) */
.d-flex{ display:flex !important; }