/* hamburer-filters.js Full-screen overlay (already created in JS); here are visuals */
/* hamburger-filters.css — conflict-free (no .hamburger-overlay rules) */

.filter-panel {
  height: 100%;
  background: #fff;
  overflow-y: auto;
  border-radius: 8px;
  padding: 16px;
}

/* Everything below styles only the panel’s internals */
.filter-header {
  padding: 18px 0 12px 0;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  font-size: 18px;
}

.filter-body {
  padding: 16px 0;
  overflow-y: auto;
}

.filter-group { margin-bottom: 16px; }
.filter-group label {
  display: block;
  font-size: 13px;
  color: #444;
  margin-bottom: 6px;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.filter-actions {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 12px;
}

.filter-actions button {
  padding: 10px 14px;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
}

.btn-apply { background: #111827; color: #fff; }
.btn-clear { background: #f3f4f6; color: #111827; }

/* Important: DO NOT redefine .hamburger-overlay or .hamburger-close-btn here */
/* Panel matches the overlay (transparent grey shows through) */
.filter-panel {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 16px;
  color: #fff; /* header/help text readable on grey */
}

/* Close button stays visible (red) */
.hamburger-close-btn {
  color: #ff5a5f;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}

/* Tidy, readable “boxes” for fields */
.filter-group {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}

.filter-group label {
  color: #374151;
  font-size: 13px;
  margin-bottom: 6px;
}

/* Inputs */
.filter-panel input[type="number"],
.filter-panel input[type="date"],
.filter-panel input[type="time"],
.filter-panel select {
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  outline: none;
}
.filter-panel input:focus,
.filter-panel select:focus {
  border-color: #ff5a5f;
  box-shadow: 0 0 0 3px rgba(255,90,95,.15);
}

/* Footer actions sit on the grey too */
.filter-actions {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.25);
}

.btn-apply,
.btn-clear {
  padding: 10px 14px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
}
.btn-apply { background: #111827; color: #fff; }
.btn-clear  { background: #f3f4f6; color: #111827; }