/*
  MotelWeb - Identidade visual (sem degradê)
  Objetivo: visual limpo, legível, profissional e com boa hierarquia.
*/

:root{
  /* Paleta sólida */
  --mw-bg: #f1f5f9;          /* fundo */
  --mw-surface: #ffffff;     /* cartões/áreas */
  --mw-border: #cbd5e1;      /* bordas */
  --mw-text: #0f172a;        /* texto */
  --mw-muted: #475569;       /* texto secundário */
  --mw-primary: #2563eb;     /* cor principal */
  --mw-success: #16a34a;
  --mw-danger: #dc2626;
  --mw-warning: #f59e0b;
  --mw-info: #0ea5e9;
  --mw-gray: #64748b;

  --mw-radius: 12px;
  --mw-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --mw-shadow-hover: 0 16px 40px rgba(15, 23, 42, .12);
}

body {
  background: var(--mw-bg);
  color: var(--mw-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tela de login */
.mw-auth-card{
  border-radius: 16px;
  box-shadow: var(--mw-shadow);
}
.mw-auth-logo{
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(37, 99, 235, .12);
  color: var(--mw-primary);
  font-size: 1.7rem;
}

/* Superfícies */
.card,
.table,
.alert,
.modal-content,
.dropdown-menu{
  border-color: var(--mw-border) !important;
}

.card{
  border-radius: var(--mw-radius);
}

.card-quarto{
  background: var(--mw-surface);
  box-shadow: var(--mw-shadow);
  transition: transform .08s ease-in-out, box-shadow .08s ease-in-out;
}
.card-quarto:hover{
  transform: translateY(-1px);
  box-shadow: var(--mw-shadow-hover);
}

/* Botões suaves (dashboard/cards)
   Objetivo: reduzir agressividade visual sem perder contraste. */
.btn-mw-iniciar{
  --bs-btn-color: var(--bs-success-text-emphasis);
  --bs-btn-bg: rgba(var(--bs-success-rgb), .14);
  --bs-btn-border-color: rgba(var(--bs-success-rgb), .35);
  --bs-btn-hover-color: var(--bs-success-text-emphasis);
  --bs-btn-hover-bg: rgba(var(--bs-success-rgb), .22);
  --bs-btn-hover-border-color: rgba(var(--bs-success-rgb), .45);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-active-color: var(--bs-success-text-emphasis);
  --bs-btn-active-bg: rgba(var(--bs-success-rgb), .28);
  --bs-btn-active-border-color: rgba(var(--bs-success-rgb), .55);
}

.btn-mw-liberar{
  --bs-btn-color: var(--bs-success-text-emphasis);
  --bs-btn-bg: rgba(var(--bs-success-rgb), .10);
  --bs-btn-border-color: rgba(var(--bs-success-rgb), .30);
  --bs-btn-hover-color: var(--bs-success-text-emphasis);
  --bs-btn-hover-bg: rgba(var(--bs-success-rgb), .18);
  --bs-btn-hover-border-color: rgba(var(--bs-success-rgb), .40);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-active-color: var(--bs-success-text-emphasis);
  --bs-btn-active-bg: rgba(var(--bs-success-rgb), .24);
  --bs-btn-active-border-color: rgba(var(--bs-success-rgb), .50);
}

.btn-mw-limpando{
  --bs-btn-color: var(--bs-warning-text-emphasis);
  --bs-btn-bg: rgba(var(--bs-warning-rgb), .18);
  --bs-btn-border-color: rgba(var(--bs-warning-rgb), .45);
  --bs-btn-hover-color: var(--bs-warning-text-emphasis);
  --bs-btn-hover-bg: rgba(var(--bs-warning-rgb), .26);
  --bs-btn-hover-border-color: rgba(var(--bs-warning-rgb), .55);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
  --bs-btn-active-color: var(--bs-warning-text-emphasis);
  --bs-btn-active-bg: rgba(var(--bs-warning-rgb), .32);
  --bs-btn-active-border-color: rgba(var(--bs-warning-rgb), .65);
}

/* Dashboard: card selecionado via teclado (Etapa 2) */
.card-quarto.mw-selected{
  outline: 3px solid rgba(37, 99, 235, .55);
  outline-offset: 2px;
  box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .12), var(--mw-shadow-hover);
  transform: none;
}

.badge-status { font-weight: 600; white-space: nowrap; }

/* Destaque de status no card (borda lateral sólida) */
.status-Livre { border-left: 6px solid var(--mw-success); }
.status-Ocupado { border-left: 6px solid var(--mw-danger); }
.status-Limpando { border-left: 6px solid var(--mw-warning); }
.status-Manutencao { border-left: 6px solid var(--mw-primary); }
.status-Inativo { border-left: 6px solid var(--mw-gray); }

/* Ajuste fino de tipografia dentro dos cards */
.card-quarto .h5{ font-weight: 700; letter-spacing: .2px; }
.card-quarto .text-muted{ color: var(--mw-muted) !important; }

.table thead th { white-space: nowrap; }

/* Tabelas: cabeçalho com fundo sólido e melhor contraste
   Observação: algumas telas usam <thead class="table-dark"> do Bootstrap.
   Se não forçado, o Bootstrap aplica fundo escuro no TH, e nosso texto escuro
   acaba ficando ilegível. Por isso, padronizamos o cabeçalho de todas as tabelas
   para um fundo claro + texto escuro. */
.table thead th{
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Links de ordenação em cabeçalhos de tabelas (Quartos/Produtos) */
.mw-sort-link{
  color: #0f172a !important;
}
.mw-sort-link:hover,
.mw-sort-link:focus{
  color: #0f172a !important;
  text-decoration: underline;
}

/* Histórico do Caixa: destaque para registro informativo de locação cancelada */
tr.mw-row-locacao-cancelada > *{
  background-color: rgba(245, 158, 11, .22) !important;
}


/* Remove spin dos inputs number */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}


/* Campos com borda mais definida */
.form-control, .form-select {
  border-width: 1.5px;
  border-color: #94a3b8;
  border-radius: 10px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--mw-primary);
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .18);
}

/* Produtos/Categorias: destaque do checkbox "Exibir Ativos/Inativos" */
.mw-check-emphasis .form-check-input{
  border-width: 2px;
  border-color: #64748b;
}
.mw-check-emphasis .form-check-input:focus{
  border-color: var(--mw-primary);
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .18);
}

/* Produtos: campo de estoque atual (somente leitura) */
.form-control.mw-readonly{
  background-color: rgba(226, 232, 240, .55);
  color: var(--mw-text);
  opacity: 1;
}

/* Botões: aparência mais “reta” e consistente */
.btn{
  border-radius: 10px;
}
.btn.btn-sm{
  border-radius: 10px;
}

/* Abas do dashboard: maior contraste e hierarquia */
.nav-tabs{
  border-bottom: 1px solid var(--mw-border);
}
.nav-tabs .nav-link{
  color: var(--mw-muted);
  border: 1px solid transparent;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.nav-tabs .nav-link:hover{
  border-color: var(--mw-border) var(--mw-border) transparent;
  background: rgba(226,232,240,.6);
}
.nav-tabs .nav-link.active{
  color: var(--mw-text);
  background: var(--mw-surface);
  border-color: var(--mw-border) var(--mw-border) var(--mw-surface);
}

/* Abas do dashboard com cor por status (estilo ERP discreto) */
.mw-status-tabs .nav-link.mw-tab{
  position: relative;
  margin-right: .25rem;
  border: 1px solid var(--mw-border);
  background: rgba(226,232,240,.35);
}
.mw-status-tabs .nav-link.mw-tab::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
  opacity: .95;
}
.mw-status-tabs .nav-link.mw-tab-Livre{ background: rgba(22,163,74,.12); --mw-tab-accent: var(--mw-success); }
.mw-status-tabs .nav-link.mw-tab-Livre::before{ background: var(--mw-success); }

.mw-status-tabs .nav-link.mw-tab-Ocupado{ background: rgba(220,38,38,.12); --mw-tab-accent: var(--mw-danger); }
.mw-status-tabs .nav-link.mw-tab-Ocupado::before{ background: var(--mw-danger); }

.mw-status-tabs .nav-link.mw-tab-Limpando{ background: rgba(245,158,11,.14); --mw-tab-accent: var(--mw-warning); }
.mw-status-tabs .nav-link.mw-tab-Limpando::before{ background: var(--mw-warning); }

.mw-status-tabs .nav-link.mw-tab-Todos{ background: rgba(100,116,139,.10); --mw-tab-accent: var(--mw-gray); }
.mw-status-tabs .nav-link.mw-tab-Todos::before{ background: var(--mw-gray); }

.mw-status-tabs .nav-link.mw-tab.active{
  border-color: var(--mw-border);
  color: var(--mw-text);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--mw-tab-accent, var(--mw-primary)), 0 1px 0 rgba(15, 23, 42, .04);
}

.mw-status-tabs .nav-link.mw-tab:hover{
  filter: brightness(.98);
}



/* Dashboard: barra de abas + busca por código (mesma linha) */
.mw-dashboard-toolbar{
  gap: .5rem;
}
.mw-dashboard-toolbar .mw-status-tabs{
  flex: 1 1 auto;
}
.mw-dashboard-search{
  flex: 0 1 320px;
  min-width: 240px;
}
.mw-dashboard-search .input-group-text{
  background: var(--mw-surface);
}
@media (max-width: 576px){
  .mw-dashboard-search{
    flex: 1 1 100%;
    min-width: 100%;
  }
}
/* Navbar (template moderno)
   - Mantém suporte à navbar escura (quando usada)
   - Define uma topbar clara (mw-topbar) como padrão moderno */
nav.navbar.navbar-dark.bg-dark{
  background-color: #0f172a !important;
}
nav.navbar.navbar-dark.bg-dark .navbar-brand,
nav.navbar.navbar-dark.bg-dark .nav-link{
  color: rgba(255,255,255,.92) !important;
}
nav.navbar.navbar-dark.bg-dark .nav-link.active,
nav.navbar.navbar-dark.bg-dark .nav-link:hover{
  color: #ffffff !important;
}
nav.navbar.navbar-dark.bg-dark .navbar-brand i{
  color: #60a5fa;
}

/* Topbar clara */
.mw-topbar{
  border-bottom: 1px solid var(--mw-border);
  background: #ffffff !important;
}
.mw-topbar .navbar-brand{
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--mw-text) !important;
}
.mw-topbar .navbar-brand i{
  color: var(--mw-primary);
}
.mw-topbar .nav-link{
  color: var(--mw-muted) !important;
  border-radius: 10px;
  padding: .35rem .55rem;
}
.mw-topbar .nav-link:hover{
  background: rgba(226,232,240,.75);
  color: var(--mw-text) !important;
}
.mw-topbar .nav-link.active{
  background: rgba(37, 99, 235, .12);
  color: var(--mw-primary) !important;
  font-weight: 600;
}


/* Navbar compacta (menos altura) */
.navbar.navbar-compact { padding-top: .25rem; padding-bottom: .25rem; }
.navbar.navbar-compact .navbar-brand { padding-top: 0; padding-bottom: 0; font-size: 1rem; }
.navbar.navbar-compact .nav-link { padding-top: .25rem; padding-bottom: .25rem; }
.navbar.navbar-compact .btn { padding-top: .2rem; padding-bottom: .2rem; }

/* Espaçamento vertical: ganha área útil (especialmente no dashboard) */
main.container{
  padding-top: .85rem !important;
}

/* Rodapé discreto e moderno */
.mw-footer{
  background: transparent;
}
.mw-footer .container{
  background: rgba(255,255,255,.7);
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  padding: .65rem 1rem;
}

/* Pequena melhora na legibilidade em mobile */
@media (max-width: 576px){
  .card-quarto .h5{ font-size: 1.05rem; }
  .nav-tabs .nav-link{ padding: .5rem .6rem; }
}

/* Locação: destaque do período/tarifa atual */
.mw-tarifa-atual{
  background: rgba(245, 158, 11, .18) !important;
}
.mw-tarifa-atual > td,
.mw-tarifa-atual > th{
  background: rgba(245, 158, 11, .18) !important;
}
.mw-tarifa-atual td{
  font-weight: 600;
}


/* Locação: resumo do topo (Tempo e Totais) */
.mw-resumo-topo{
  font-size: 1.05rem;
}
@media (max-width: 576px){
  .mw-resumo-topo{ font-size: 1rem; }
}


/* Combobox de Produto (Locação > Consumo) */
.mw-combobox .mw-combobox-dropdown{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .375rem;
  max-height: 320px;
  overflow: auto;
  z-index: 1050;
}

.mw-combobox .mw-combo-item{
  cursor: pointer;
}


/* Consumo (Locação): lista com altura fixa e rolagem interna (até 6 itens visíveis) */
.table-responsive.mw-consumo-scroll{
  height: 260px;
  overflow-y: auto;
  overflow-x: auto;
}
.table-responsive.mw-consumo-scroll thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Ajuste em telas menores */
@media (max-width: 576px){
  .table-responsive.mw-consumo-scroll{
    height: 220px;
  }
}


/* =====================================================================
   TEMPLATE ERP (sidebar + topbar) - aplicado sem alterar regras do sistema
   ===================================================================== */

.mw-layout{
  display: flex;
  min-height: 100vh;
}

.mw-sidebar{
  width: 208px;
  background: #0f172a;
  color: rgba(255,255,255,.88);
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid rgba(255,255,255,.08);
  padding: .75rem .75rem;
}

.mw-sidebar-scroll{
  flex: 1 1 auto;
  overflow: auto;
  padding-right: .25rem;
}

.mw-brand{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .6rem;
  border-radius: 12px;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: .75rem;
}
.mw-brand:hover{
  background: rgba(255,255,255,.06);
  color: #ffffff;
}
.mw-brand-icon{
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(37,99,235,.25);
  color: #ffffff;
  font-size: 1.2rem;
}

/* Botão de recolher/expandir no topo do menu (usa a mesma “caixa” do ícone) */
.mw-brand-toggle{
  border: 0;
  padding: 0;
  cursor: pointer;
}
.mw-brand-toggle:focus{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}
.mw-brand-text{
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-nav-section{
  margin-top: .75rem;
}
.mw-nav-section:first-child{
  margin-top: 0;
}
.mw-nav-caption{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  padding: 0 .55rem .35rem;
}

.mw-nav{
  gap: .25rem;
}

.mw-sidebar .nav-link{
  color: rgba(255,255,255,.82) !important;
  border-radius: 10px;
  padding: .45rem .55rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.mw-sidebar .nav-link i{
  font-size: 1.05rem;
}
.mw-sidebar .nav-link:hover{
  background: rgba(255,255,255,.08);
  color: #ffffff !important;
}
.mw-sidebar .nav-link.active{
  background: rgba(37,99,235,.35);
  color: #ffffff !important;
  font-weight: 600;
}
.mw-nav-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-sidebar-user{
  border-top: 1px solid rgba(255,255,255,.08);
}
.mw-user-chip{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .75rem .25rem;
}
.mw-user-avatar{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.mw-user-meta{
  min-width: 0;
  flex: 1;
}
.mw-user-name{
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mw-user-role{
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mw-header{
  background: #ffffff;
  border-bottom: 1px solid var(--mw-border);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.mw-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 1rem;
}

.mw-page-title{
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--mw-text);
}

/* Badge de alerta de estoque baixo no header */
.mw-stock-badge{
  white-space: nowrap;
}

.mw-content{
  flex: 1;
}
.mw-content .container-fluid{
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Offcanvas no mobile */
.offcanvas.mw-offcanvas{
  background: #0f172a;
  color: rgba(255,255,255,.88);
}
.offcanvas.mw-offcanvas .offcanvas-header{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.offcanvas.mw-offcanvas .btn-close{
  filter: invert(1) grayscale(100%);
}
.offcanvas.mw-offcanvas .nav-link{
  color: rgba(255,255,255,.82) !important;
}
.offcanvas.mw-offcanvas .nav-link:hover{
  background: rgba(255,255,255,.08);
  color: #ffffff !important;
}
.offcanvas.mw-offcanvas .nav-link.active{
  background: rgba(37,99,235,.35);
  color: #ffffff !important;
  font-weight: 600;
}
.offcanvas.mw-offcanvas .mw-nav-caption{
  color: rgba(255,255,255,.55);
}

/* Sidebar recolhida */
body.mw-sidebar-collapsed .mw-sidebar{
  width: 78px;
  padding-left: .55rem;
  padding-right: .55rem;
}
body.mw-sidebar-collapsed .mw-sidebar .mw-brand-text,
body.mw-sidebar-collapsed .mw-sidebar .mw-nav-text,
body.mw-sidebar-collapsed .mw-sidebar .mw-nav-caption,
body.mw-sidebar-collapsed .mw-sidebar .mw-user-meta{
  display: none;
}
body.mw-sidebar-collapsed .mw-sidebar .nav-link{
  justify-content: center;
}
body.mw-sidebar-collapsed .mw-sidebar .mw-user-chip{
  justify-content: center;
}

/* Rodapé discreto (ERP) */
.mw-footer{
  background: transparent;
  padding: .75rem 1rem;
}
.mw-footer-inner{
  background: rgba(255,255,255,.7);
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  padding: .65rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Dashboard (Aba Ocupado): resumo compacto no card */
.mw-ocupado-resumo{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Busca por código no dashboard: mostra resumo do ocupado apenas durante a busca */
#cardsQuartos[data-status-filtro="Todos"] .mw-ocupado-resumo{ display: none; }
#cardsQuartos.mw-busca-ativa[data-status-filtro="Todos"] .mw-ocupado-resumo{ display: block; }

/* Tooltip no total geral (apenas hover) */
.mw-total-geral{
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

/* Painel (Drawer) - Fechar Locação */
.offcanvas.mw-offcanvas-fechar{
  width: 560px;
}
.offcanvas.mw-offcanvas-fechar .offcanvas-body{
  padding: .75rem;
}
.offcanvas.mw-offcanvas-fechar .mw-fechar-resumo-top{
  margin-bottom: .5rem;
}
.offcanvas.mw-offcanvas-fechar .mw-fechar-grid .form-label{
  margin-bottom: .25rem;
}
@media (max-width: 767.98px){
  .offcanvas.mw-offcanvas-fechar{
    width: 100%;
  }
}
.mw-fechar-footer-actions{
  position: sticky;
  bottom: 0;
  padding-top: .75rem;
  background: rgba(255,255,255,.95);
}
@media (max-width: 575.98px){
  .mw-ocupado-resumo{ white-space: normal; }
}

/* Chips/badges utilitários (Relatórios/Histórico) */
.mw-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.22);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.mw-chip-muted{ background-color: rgba(100,116,139,.14); color: #334155; border-color: rgba(100,116,139,.35); }
.mw-chip-dark{ background-color: rgba(15,23,42,.10); color: #0f172a; border-color: rgba(15,23,42,.28); }
.mw-chip-success{ background-color: rgba(34,197,94,.16); color: #166534; border-color: rgba(34,197,94,.38); }
.mw-chip-warning{ background-color: rgba(245,158,11,.18); color: #92400e; border-color: rgba(245,158,11,.45); }
.mw-chip-danger{ background-color: rgba(239,68,68,.16); color: #991b1b; border-color: rgba(239,68,68,.40); }
.mw-chip-info{ background-color: rgba(59,130,246,.16); color: #1e40af; border-color: rgba(59,130,246,.38); }

@media print{
  /* Garante legibilidade mesmo quando o navegador não imprime fundos */
  .mw-chip{
    background: transparent !important;
    color: #000 !important;
    border-color: #000 !important;
  }
}