/* Tema Escuro (padrão) */
:root, [data-theme="dark"]{
  --bg:#0b0f17;
  --panel:#0f1625;
  --panel2:#0d1320;
  --stroke:#1e2a44;
  --text:#e7eefc;
  --muted:#a8b3cf;
  --accent:#7aa2ff;
  --danger:#ff5d5d;
  --ok:#2bd576;
  --shadow: 0 12px 30px rgba(0,0,0,.28);
  --r:16px;
}

/* Tema Claro */
[data-theme="light"]{
  --bg:#f1f5f9;
  --panel:#ffffff;
  --panel2:#e2e8f0;
  --stroke:#cbd5e1;
  --text:#1e293b;
  --muted:#475569;
  --accent:#2563eb;
  --danger:#dc2626;
  --ok:#047857;
  --shadow: 0 4px 20px rgba(15,23,42,.12);
  --r:16px;
}

/* ========== RESET & BASE ========== */
/* Version 1.6.0 - Updated 2026-01-02 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

a{color:inherit; text-decoration:none}
.muted{color:var(--muted); font-size:13px}
h1,h2{margin:0}
h1{font-size:18px}
h2{font-size:15px}

.layout{display:grid; grid-template-columns:260px 1fr; min-height:100vh}
.sidebar{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
  border-right:1px solid var(--stroke);
  padding:16px;
}
.brand{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.brand .tag{font-size:12px; color:var(--muted)}
.nav{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.nav a{
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:14px;
  display:flex; gap:10px; align-items:center;
  color:var(--muted);
}
.nav a.active{
  background:rgba(122,162,255,.10);
  border-color:rgba(122,162,255,.25);
  color:var(--text);
}
.nav a:hover{border-color:rgba(122,162,255,.25); color:var(--text)}
.sep, .nav-sep{height:2px; background:var(--stroke); margin:12px 0; opacity:1}

.main{padding:18px 18px 28px 18px}
.topbar{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; margin-bottom:14px;
}
.filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:end;
}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12px; color:var(--muted)}
.field select, .field input{
  background:var(--panel); color:var(--text);
  border:1px solid var(--stroke); border-radius:12px;
  padding:10px 10px; outline:none; min-width:180px;
}

/* Garantir que inputs de data tenham bordas visíveis */
input[type="date"], input[type="datetime-local"] {
  background:var(--panel) !important;
  color:var(--text) !important;
  border:1px solid var(--stroke) !important;
  border-radius:12px;
  padding:10px;
}
.btn{
  border:1px solid var(--stroke);
  background:var(--panel); color:var(--text);
  padding:10px 16px; border-radius:12px; cursor:pointer;
  font-weight: 500;
}
.btn:hover{border-color:rgba(122,162,255,.35)}
.btnPrimary{background:rgba(122,162,255,.12); border-color:rgba(122,162,255,.30)}
.btnDanger{color:var(--danger); border-color:rgba(255,93,93,.35)}
.btnAdd{
  background:rgba(43,213,118,.15); 
  border-color:rgba(43,213,118,.35);
  color:#2bd576;
  font-weight: 600;
}
.btnAdd:hover{
  background:rgba(43,213,118,.22); 
  border-color:rgba(43,213,118,.50);
}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom: 24px}
.grid-4{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom: 24px}

/* ===== HAMBURGER BUTTON (hidden on desktop) ===== */
.hamburger{
  display:none;
  position:fixed; top:12px; left:12px; z-index:1100;
  background:var(--panel); border:1px solid var(--stroke);
  border-radius:10px; padding:10px 12px; cursor:pointer;
  color:var(--text); font-size:22px; line-height:1;
  box-shadow:var(--shadow);
}

/* ===== OVERLAY (mobile sidebar backdrop) ===== */
.sidebar-overlay{
  display:none; position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.55);
}
.sidebar-overlay.open{ display:block }

/* ===== MOBILE BREAKPOINT ===== */
@media (max-width: 980px){
  .layout{ grid-template-columns:1fr }

  /* Sidebar off-canvas */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:1000;
    width:270px; transform:translateX(-100%);
    transition:transform .25s ease;
    overflow-y:auto;
    padding-bottom:40px;
  }
  .sidebar.open{ transform:translateX(0) }
  .hamburger{ display:block }

  /* Main needs top padding for hamburger */
  .main{ padding:56px 12px 24px 12px }

  /* Grids stack */
  .grid{ grid-template-columns:1fr }
  .grid-4{ grid-template-columns:1fr 1fr }

  /* Row/filter grids stack */
  .row{ grid-template-columns:1fr 1fr }
  .filters{ flex-direction:column }

  /* KPI cards */
  .kpis{ grid-template-columns:1fr 1fr }
  .kpi-value{ font-size:22px }

  /* Topbar compact */
  .topbar{ flex-direction:column; gap:8px }

  /* Tables: let them scroll, don't break */
  .tableWrap, .table-wrap{ -webkit-overflow-scrolling:touch }
  table{ font-size:12px }
  th,td{ padding:8px 6px }

  /* Cards slimmer */
  .card{ padding:16px; border-radius:12px }

  /* Form fields full width */
  .field select, .field input{ min-width:0; width:100% }
  .formGrid{ grid-template-columns:1fr }
  .importGrid{ grid-template-columns:1fr }

  /* Tabs wrap */
  .tabs{ flex-wrap:wrap; gap:6px }
  .tab{ padding:8px 12px; font-size:13px }

  /* Section titles */
  .section-title{ font-size:17px }
}

/* ===== SMALL PHONE ===== */
@media (max-width: 600px){
  .grid-4{ grid-template-columns:1fr }
  .row{ grid-template-columns:1fr }
  .kpis{ grid-template-columns:1fr }
  .kpi-value{ font-size:20px }
  .main{ padding:52px 8px 20px 8px }
  .card{ padding:12px; border-radius:10px }
  .section-title{ font-size:15px }
  .section-sub{ font-size:12px }
  table{ font-size:11px }
  th,td{ padding:6px 4px }

  /* Calendar */
  .calendar-grid{ font-size:11px }
  .calendar-day{ min-height:60px; padding:2px }
  .reservation{ font-size:9px; padding:1px 3px }

  /* Actions column */
  .actions{ flex-direction:column; gap:4px }
  .actions .btn{ padding:6px 8px; font-size:11px }
}

.card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--r);
  padding:24px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}

.kpi-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow);
}

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.kpi-label {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.kpi-value {
  font-size: 32px;
  font-weight: bold;
  color: var(--text);
  margin: 8px 0;
}

.kpi-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
/* kpis responsive handled in mobile section above */
.kpi{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.02);
  border-radius:14px;
  padding:12px;
}
.kpi .value{font-size:18px; margin-top:6px}

.tableWrap{overflow:auto; border:1px solid var(--stroke); border-radius:14px}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:10px; border-bottom:1px solid var(--stroke); text-align:left; white-space:nowrap; color:var(--text)}
th{position:sticky; top:0; background:var(--panel); z-index:1; font-weight:600}

/* Zebra striping - linhas alternadas */
tbody tr:nth-child(odd) {
  background: var(--panel);
}
tbody tr:nth-child(even) {
  background: var(--panel2);
}
tbody tr:hover {
  background: var(--stroke);
  transition: background 0.15s ease;
}

.row{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px}
/* row responsive handled in mobile section above */

.toast{
  position:fixed; right:16px; bottom:16px;
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:var(--shadow);
  max-width:360px;
}
.toast.ok{border-color:rgba(43,213,118,.35)}
.toast.err{border-color:rgba(255,93,93,.35)}

.tabs { display:flex; gap:10px; margin: 0 0 28px 0; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.section-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; margin-top: 4px; }
.section-sub { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.tab{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text);
  padding: 11px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}
.tab:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(122,162,255,0.35);
}
.tab.active{
  background: rgba(122,162,255,0.15);
  border-color: rgba(122,162,255,0.40);
  color: #7aa2ff;
  font-weight: 600;
}

.tableWrap, .table-wrap{ margin-top: 20px; overflow:auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); }

/* Estilo para input date - ícone do calendário branco */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  opacity: 0.8;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.table{ width:100%; border-collapse: collapse; }
.table thead th{
  text-align:left;
  font-weight: 600;
  padding: 12px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.table tbody td{
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.actions{ display:flex; gap:10px; }

.btnGhost{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  cursor:pointer;
}
.btnDanger{
  background: rgba(255,80,80,0.12);
  border: 1px solid rgba(255,80,80,0.25);
  color: #ffd7d7;
  padding: 8px 10px;
  border-radius: 10px;
  cursor:pointer;
}

.formGrid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 220px;
  gap: 12px;
  align-items: end;
}
@media (max-width: 1100px){
  .formGrid{ grid-template-columns: 1fr; }
}

.importGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1100px){
  .importGrid{ grid-template-columns: 1fr; }
}
.importBox{
  border: 1px solid var(--stroke);
  background: var(--panel2);
  border-radius: 16px;
  padding: 14px;
}
/* ===== Base - contrast fixes ===== */
select {
  color: var(--text) !important;
  background: var(--panel) !important;
}

option {
  color: var(--text) !important;
  background: var(--panel) !important;
}

select:focus {
  outline: 2px solid rgba(99, 102, 241, .45);
}

.table th {
  color: var(--text);
  font-weight: 600;
}

.table td {
  color: var(--text);
}

.cell-input, .cell-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--text);
}

.actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.btn-danger {
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
}

.btn-danger:hover {
  background: rgba(239,68,68,.18);
}

.hint {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.12);
  background: rgba(2,6,23,.35);
  color: rgba(226,232,240,.9);
}

.pill {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.45);
  color: rgba(226,232,240,.9);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  color: rgba(226,232,240,.9);
}

/* ========== CALENDAR ========== */
.calendar-container { display: grid; gap: 20px; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--stroke);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  overflow: hidden;
}
.calendar-day-header {
  background: var(--panel2);
  padding: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--muted);
  font-size: 13px;
}
.calendar-day {
  background: var(--panel);
  padding: 8px;
  min-height: 100px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.calendar-day:hover { background: var(--panel2); }
.calendar-day.other-month { opacity: 0.4; }
.calendar-day.today {
  background: rgba(59, 130, 246, 0.1);
  border: 2px solid var(--accent);
}
.day-number { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.reservation {
  background: var(--accent);
  color: white;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 11px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reservation.checkout { background: #f59e0b; }
.reservation.middle { background: var(--muted); }
.legend {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  padding: 12px;
  background: var(--panel2);
  border-radius: 8px;
}
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legend-color { width: 20px; height: 20px; border-radius: 4px; }