/* ==========================================================================
   STYLE.CSS - VERSÃO FINAL (CORREÇÃO DE FORMULÁRIOS NO MOBILE)
   ========================================================================== */

/* ==========================================================================
   1. BASE E RESET
   ========================================================================== */

* {
    box-sizing: border-box;
}

:root {
  --primary-color: #3498db;
  --sidebar-width: 240px;
  --bg-body: #ecf0f5;
  --text-color: #333;
  --btn-green: #5cb85c;
  --btn-blue: #337ab7;
  --btn-gray: #e6e6e6;
  --btn-purple: #605ca8;
  --btn-danger: #dd4b39;
}

html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
  font-family: "Segoe UI", "Open Sans", sans-serif;
  background: var(--bg-body);
  color: var(--text-color);
  height: 100vh;
  display: flex;
  overflow: hidden;
}

/* ==========================================================================
   2. LAYOUT MACRO
   ========================================================================== */

.app-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.sidebar {
  width: var(--sidebar-width);
  background: #fff;
  border-right: 1px solid #d2d6de;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.brand-box {
  height: 55px;
  background: #367fa9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
}

.user-panel {
  padding: 15px;
  background: #f4f6f9;
  border-bottom: 1px solid #d2d6de;
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 35px;
  height: 35px;
  background: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.sidebar-menu li {
  border-left: 3px solid transparent;
  cursor: pointer;
}

.sidebar-menu li.active {
  border-left-color: var(--primary-color);
  background: #f4f4f4;
}

.sidebar-menu a {
  display: block;
  padding: 12px 20px;
  color: #444;
  text-decoration: none;
  font-size: 14px;
}

.sidebar-menu a:hover {
  background: #f9f9f9;
}

.sidebar-menu i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
}

.top-nav {
  background: var(--primary-color);
  color: white;
  padding: 0 20px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
  position: relative;
  z-index: 1001;
}

.page-wrapper {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

#wrapperAgenda {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.toolbar-box {
  background: #fff;
  border-top: 3px solid var(--primary-color);
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  padding: 12px 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  height: auto !important; 
}

.toolbar-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}

/* ==========================================================================
   3. UI KIT
   ========================================================================== */

.btn-act {
  border: none;
  padding: 8px 12px;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
}

.btn-green { background: var(--btn-green); }
.btn-blue { background: var(--btn-blue); }
.btn-purple { background: var(--btn-purple); }
.btn-danger { background: var(--btn-danger); }

.btn-gray-act {
  background: var(--btn-gray);
  color: #333;
  border: 1px solid #ccc;
  padding: 8px 12px;
}

.badge-cnt {
  background: #dd4b39;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  position: absolute;
  top: -8px;
  right: -8px;
}

.form-sm {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 13px;
  height: 32px;
}

textarea.form-sm { height: auto; }

.detail-lbl {
  font-weight: bold;
  color: #555;
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  margin-top: 5px;
}

.view-switch {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  margin-right: 15px;
}

.vs-btn {
  background: #f9f9f9;
  border: none;
  border-right: 1px solid #ccc;
  padding: 6px 12px;
  cursor: pointer;
  color: #666;
  font-size: 12px;
}

.vs-btn:last-child { border-right: none; }

.vs-btn.active {
  background: #e6e6e6;
  color: #000;
  font-weight: bold;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.nav-select {
  background: transparent;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: bold;
  color: #555;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: inherit;
  transition: all 0.2s;
}

.nav-select:hover { background: #fff; border-color: #ccc; color: #333; }
.nav-select:focus { outline: none; border-color: var(--primary-color); background: #fff; }

/* ==========================================================================
   4. WORKSPACE
   ========================================================================== */

.content-body {
  flex: 1;
  overflow: hidden; 
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}

.split-view {
  display: flex;
  gap: 15px;
  height: 100%;
  min-height: 0;
}

.list-side {
  flex: 1;
  background: #fff;
  border: 1px solid #ddd;
  border-top: 3px solid #3c8dbc;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.table-scroll {
  flex: 1;
  overflow: auto; 
  min-height: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th {
  background: #f9f9f9;
  text-align: left;
  padding: 10px;
  border-bottom: 2px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 10;
  color: #555;
}

td {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}

tr:hover { background: #f0f7fd; cursor: pointer; }
tr.selected { background: #e7f1ff; border-left: 4px solid var(--primary-color); }

/* ==========================================================================
   5. MÓDULOS DE FUNCIONALIDADE
   ========================================================================== */

.calendar-view {
  display: none;
  background: #fff;
  border: 1px solid #ddd;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.cal-grid-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
  overflow-y: auto;
}

.cal-head-month {
  background: #f4f4f4;
  padding: 8px;
  text-align: center;
  font-weight: bold;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #ccc;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-cell {
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  min-height: 100px;
  padding: 5px;
  position: relative;
  cursor: pointer; 
}

.cal-cell:hover { background: #fafafa; }

.cal-day {
  float: right;
  font-weight: bold;
  color: #999;
  font-size: 12px;
}

.cal-event {
  clear: both;
  background: var(--primary-color);
  color: #fff;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 10px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.cal-event.pre { background: #f39c12; }

/* Time Grid */
.time-grid-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.time-grid-header {
  display: flex;
  border-bottom: 1px solid #ccc;
  background: #f9f9f9;
  min-height: 40px;
  flex-shrink: 0;
}

.time-header-col-label {
  width: 50px;
  border-right: 1px solid #eee;
  flex-shrink: 0;
  background: #f4f4f4;
}

.time-header-col {
  flex: 1;
  text-align: center;
  padding: 8px;
  font-weight: bold;
  font-size: 12px;
  border-right: 1px solid #eee;
  border-left: 1px solid #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time-grid-body {
  flex: 1;
  overflow-y: auto !important;
  display: flex;
  position: relative;
  align-items: flex-start;
  height: calc(100vh - 230px);
}

.time-labels-col {
  width: 50px;
  flex-shrink: 0;
  background: #fafafa;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
}

.time-label-cell {
  height: 40px;
  flex: none;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-size: 10px;
  color: #888;
  position: relative;
  top: 2px;
}

.time-label-cell span {
  position: absolute;
  top: 2px;
  right: 5px;
  background: #fafafa;
  padding: 0 2px;
}

.time-days-container {
  flex: 1;
  display: flex;
  position: relative;
  min-height: 960px;
}

.time-day-col {
  flex: 1;
  border-right: 1px solid #eee;
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.time-day-col:hover { background-color: #fafafa; }

.time-slot-bg {
  height: 40px;
  flex: none;
  border-bottom: 1px dotted #eee;
  pointer-events: none; 
}

.time-slot-bg:last-child { border-bottom: 1px solid #ddd; }

.time-event {
  position: absolute;
  background: var(--primary-color);
  color: #fff;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0.9;
  z-index: 10;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  transition: left 0.2s, width 0.2s, top 0.2s;
  border: 1px solid rgba(255,255,255,0.3);
  cursor: pointer;
}

.time-event.pre { background: #f39c12; }
.time-event:hover { z-index: 50; opacity: 1; }

.imp-log {
  margin-top: 12px;
  max-height: 160px;
  overflow-y: auto;
  font-size: 12px;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px;
  display: none;
}

.imp-log div { margin-bottom: 2px; }

/* Configs */
.modal-header-config {
  padding: 12px 18px;
  border-bottom: 1px solid #eee;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title { font-weight: 600; font-size: 15px; color: #333; }
.modal-subtitle { font-size: 12px; color: #888; margin-top: 2px; }
.modal-close { cursor: pointer; font-size: 20px; color: #999; }
.modal-close:hover { color: #333; }

.modal-body-config {
  display: flex;
  gap: 20px;
  padding: 15px 18px 10px 18px;
  background: #fff;
}

.config-left { flex: 2; display: flex; flex-direction: column; }
.config-right { flex: 1; min-width: 260px; }

.config-filter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.config-filter-label { font-weight: 600; color: #555; }

.config-filter-btn {
  border: 1px solid #ccc;
  background: #f9f9f9;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  color: #555;
}

.config-filter-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

.config-table-wrapper {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tbl-bloqueios { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl-bloqueios thead tr { background: #f4f4f4; }
.tbl-bloqueios th, .tbl-bloqueios td { padding: 6px 8px; border-bottom: 1px solid #eee; vertical-align: middle; }
.tbl-bloqueios tbody tr:nth-child(even) { background: #fcfcfc; }
.tbl-bloqueios tbody tr:hover { background: #f0f7fd; }
.tbl-bloqueios select, .tbl-bloqueios input[type="date"], .tbl-bloqueios input[type="text"] { width: 100%; box-sizing: border-box; font-size: 12px; padding: 4px; border-radius: 3px; }

.btn-toggle-sim, .btn-toggle-nao { border: none; padding: 4px 10px; font-size: 11px; border-radius: 3px; cursor: pointer; margin-right: 3px; }
.btn-toggle-sim { background: #dff0d8; color: #3c763d; border: 1px solid #c5e1b9; }
.btn-toggle-nao { background: #f2dede; color: #a94442; border: 1px solid #e4b9b9; }
.btn-toggle-sim.active { background: #3c763d; color: #fff; border-color: #3c763d; }
.btn-toggle-nao.active { background: #a94442; color: #fff; border-color: #a94442; }

.btn-trash { border: none; background: #dd4b39; color: #fff; width: 26px; height: 26px; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.btn-trash:hover { background: #c23321; }

.config-table-footer { display: flex; justify-content: flex-start; padding-top: 8px; }

.config-info-box { border: 1px solid #eee; border-radius: 4px; padding: 12px; background: #fafafa; font-size: 12px; color: #555; }
.config-info-box strong { display: block; margin-top: 5px; margin-bottom: 3px; }
.config-info-box p { margin: 0 0 4px 0; line-height: 1.4; }

.modal-footer-config { padding: 10px 18px; border-top: 1px solid #eee; background: #f5f5f5; text-align: right; }

.tbl-bloqueios th:nth-child(1), .tbl-bloqueios td:nth-child(1) { width: 100px; min-width: 90px; }
.tbl-bloqueios td:nth-child(1) select { width: 100%; box-sizing: border-box; font-size: 13px; }

/* ==========================================================================
   6. COMPONENTES GERAIS & EXTRAS
   ========================================================================== */

.status-pill { padding: 2px 8px; border-radius: 10px; font-size: 10px; color: #fff; font-weight: bold; text-transform: capitalize; }
.st-pendente { background: #f39c12; }
.st-pre-agendado { background: #00c0ef; }
.st-confirmado { background: #28a745; }
.st-remarcado { background: #605ca8; }
.st-cancelado { background: #dd4b39; }
.st-nao-compareceu { background: #8a0a0a; }
.st-concluido { background: #777; }
.st-vencido { background: #333; }

.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: none; align-items: center; justify-content: center; }
.modal-box { background: #fff; display: flex; flex-direction: column; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.modal-box.large { width: 95%; max-width: 1100px; height: 85vh; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; background: #fff; }
.panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; text-align: right; border-radius: 0 0 4px 4px; }

.modal-mask.side-modal { justify-content: flex-end; align-items: stretch; background: rgba(0,0,0,0.3); }
.modal-mask.side-modal .side-modal-box { width: 600px; max-width: 100vw; height: 100vh; border-radius: 0; margin: 0; animation: slideInRight 0.3s forwards; box-shadow: -5px 0 15px rgba(0,0,0,0.2); display: flex; flex-direction: column; }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

.rep-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.rep-badge { background: #777; color: #fff; padding: 4px; border-radius: 3px; font-size: 10px; width: 30px; text-align: center; text-transform: uppercase; }

.filter-periodo-dropdown { position: absolute; background: #fff; border: 1px solid #ccc; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 10005; padding: 10px; width: 280px; display: none; top: 35px; left: 0; }
.fp-item { padding: 6px 10px; font-size: 12px; cursor: pointer; border-bottom: 1px solid #eee; }
.fp-item:hover { background: #f0f0f0; }
.fp-item.active { background: #3498db; color: #fff; }

#loginOverlay { position: fixed; inset: 0; background: #2c3e50; z-index: 10000; display: flex; align-items: center; justify-content: center; }
#loginOverlay.hidden { display: none; }
.login-box { background: #fff; padding: 30px; border-radius: 5px; width: 320px; text-align: center; }

.empty-state-row { background: #f4f4f4; color: #888; text-align: center; padding: 15px; font-size: 13px; border-bottom: 1px solid #eee; }
.empty-state-container { display: flex; align-items: center; justify-content: center; height: 100px; background: #f9f9f9; color: #999; font-size: 14px; border: 1px solid #eee; margin-top: 10px; border-radius: 4px; }

.text-danger { color: #a94442; }
.drop-zone { border: 2px dashed #ccc; padding: 30px; text-align: center; color: #777; border-radius: 5px; background: #fafafa; cursor: pointer; transition: 0.2s; }
.drop-zone:hover { border-color: #3498db; background: #f0f8ff; color: #333; }

.dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background: #fff; border: 1px solid #ccc; box-shadow: 0 3px 6px rgba(0,0,0,0.15); z-index: 100; min-width: 200px; margin-top: 5px; }
.dropdown-menu a { display: block; padding: 10px; color: #333; text-decoration: none; font-size: 13px; border-bottom: 1px solid #eee; }
.dropdown-menu a:hover { background: #f9f9f9; }

.search-container { position: relative; flex: 1; }
.search-results { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ccc; border-top: none; z-index: 1000; max-height: 200px; overflow-y: auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: none; }
.search-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #eee; font-size: 13px; }
.search-item:hover { background: #f0f7fd; color: #3498db; }
.search-item small { display: block; color: #888; font-size: 11px; }

.table-fix-head { width: 100%; table-layout: fixed; border-collapse: collapse; }
.table-fix-head th, .table-fix-head td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-icon-action { width: 24px; height: 24px; border: none; border-radius: 3px; color: #fff; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-right: 2px; transition: opacity 0.2s, transform 0.1s; text-decoration: none; }
.btn-icon-action:hover { opacity: 0.9; transform: scale(1.05); }
.act-obs { background-color: #0073b7; }
.act-wpp { background-color: #25d366; }
.act-conf { background-color: #00a65a; }
.act-edit { background-color: #3c8dbc; }
.act-canc { background-color: #dd4b39; }

.modal-header-custom { padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: bold; font-size: 14px; border-radius: 4px 4px 0 0; }
.header-blue { background-color: #3c8dbc; } 
.header-green { background-color: #00a65a; } 

.modal-alert-content { text-align: center; padding: 30px 20px; }
.alert-icon-circle { width: 70px; height: 70px; border: 4px solid #f8bb86; border-radius: 50%; margin: 0 auto 20px auto; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #f8bb86; animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248,187,134,0.4); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(248,187,134,0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248,187,134,0); } }
.alert-title { font-size: 24px; color: #555; font-weight: 600; margin-bottom: 10px; }
.alert-text { font-size: 14px; color: #666; margin-bottom: 20px; }

.form-row { display: flex; gap: 15px; margin-bottom: 10px; }
.col-half { flex: 1; }
.input-icon-wrapper { position: relative; display: flex; align-items: center; }
.input-icon-wrapper input { padding-right: 30px; }
.input-icon-wrapper i { position: absolute; right: 8px; color: #888; pointer-events: none; }
.btn-block-lg { display: block; width: 100%; padding: 10px; font-size: 14px; margin-top: 10px; border-radius: 4px; }

.search-bar-wrapper { display: flex; gap: 0; margin-bottom: 10px; align-items: stretch; }
.search-main-input { flex: 1; border-radius: 3px 0 0 3px; border-right: none; }
.btn-search-main { border-radius: 0; margin: 0; background: #337ab7; color: white; border: 1px solid #337ab7; }
.btn-filter-toggle { border-radius: 0 3px 3px 0; margin: 0; width: 40px; background: #fff; border: 1px solid #ccc; border-left: none; color: #555; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.btn-filter-toggle:hover { background: #eee; }
.btn-filter-toggle.active { background: #eee; box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); }

.filter-dropdown-panel { position: absolute; top: 45px; right: 20px; left: 20px; max-width: 500px; background: #fff; border: 1px solid #ccc; box-shadow: 0 6px 12px rgba(0,0,0,0.175); z-index: 10010; padding: 15px; display: none; border-radius: 4px; }
.filter-row-label { font-weight: bold; font-size: 12px; color: #333; margin-bottom: 5px; display: block; }
.input-periodo-fake { background: #fff; cursor: pointer; caret-color: transparent; }

.daterange-popup { position: absolute; top: 70px; left: 15px; background: #fff; border: 1px solid #ccc; box-shadow: 0 5px 15px rgba(0,0,0,0.2); display: none; z-index: 10020; display: flex; }
.dr-sidebar { width: 140px; border-right: 1px solid #eee; padding: 5px 0; background: #fff; }
.dr-preset-item { padding: 8px 15px; font-size: 12px; cursor: pointer; color: #333; display: flex; justify-content: space-between; }
.dr-preset-item:hover { background: #f5f5f5; }
.dr-preset-item.active { background: #f5f5f5; font-weight: bold; }
.dr-btn-custom { background: #0088cc; color: white; padding: 8px 15px; margin: 5px 10px; text-align: center; border-radius: 3px; font-size: 12px; font-weight: bold; cursor: pointer; }
.dr-btn-custom:hover { background: #0077b3; }
.dr-calendar-area { padding: 10px; background: #fff; display: none; border-left: 1px solid #eee; }
.dr-custom-inputs { display: flex; gap: 10px; align-items: center; }

.filter-chips-wrapper { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; align-items: center; font-size: 12px; color: #777; }
.filter-chip { background: #f0f0f0; border: 1px solid #ddd; border-radius: 3px; padding: 2px 6px; color: #333; display: inline-flex; align-items: center; }
.filter-chip span { font-weight: 600; margin-left: 4px; }
.filter-chip i { margin-left: 6px; cursor: pointer; color: #999; font-size: 10px; }
.filter-chip i:hover { color: #d9534f; }

.checkbox-list-container { max-height: 120px; overflow-y: auto; border: 1px solid #ccc; padding: 8px; border-radius: 3px; background: #fff; border: none !important; padding: 0 !important; background: transparent !important; max-height: none !important; overflow: visible !important; }

.multiselect-wrapper { position: relative; width: 100%; }
.multiselect-input { border: 1px solid #ccc; padding: 6px 10px; border-radius: 3px; cursor: pointer; background: #fff; min-height: 32px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #555; position: relative; }
.multiselect-input:hover { border-color: #aaa; }
.multiselect-input span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%; }
.multiselect-input i { font-size: 10px; color: #888; }
.multiselect-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ccc; border-top: none; z-index: 1000; max-height: 200px; overflow-y: auto; box-shadow: 0 4px 8px rgba(0,0,0,0.15); border-radius: 0 0 4px 4px; }
.multiselect-dropdown.show { display: block; }
.multiselect-option { display: block; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 12px; color: #333; margin: 0; }
.multiselect-option:hover { background-color: #f0f7fd; }
.multiselect-option input[type="checkbox"] { margin-right: 8px; vertical-align: middle; }

/* 6.14 Configs Extras (Capacidade) */
.config-tabs-header { display: flex; background: #f5f5f5; border-bottom: 1px solid #ddd; padding: 0 18px; }
.config-tab-btn { background: transparent; border: none; padding: 12px 20px; font-size: 13px; font-weight: 600; color: #666; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; }
.config-tab-btn:hover { color: #333; background: #eaeaea; }
.config-tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background: #fff; }
.config-tab-content { height: 100%; display: flex; flex-direction: column; }

.tbl-bloqueios input[type="time"] { width: 100%; border: 1px solid #ccc; border-radius: 3px; padding: 4px; text-align: center; }
.tbl-bloqueios input[type="time"]:disabled { background: #f0f0f0; color: #999; }

.config-capacidade { display: flex; flex-direction: column; gap: 16px; font-size: 13px; }
.config-capacidade-intro { font-size: 12px; color: #4b5563; margin: 0 0 4px; }
.capacity-subtitle { font-size: 12px; font-weight: 600; margin: 14px 0 6px; color: #111827; }

.capacity-accordion { border-radius: 8px; border: 1px solid #e5e7eb; background: #ffffff; overflow: hidden; }
.capacity-accordion + .capacity-accordion { margin-top: 10px; }
.capacity-accordion-header { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 12px; background: #f9fafb; border: none; cursor: pointer; text-align: left; gap: 8px; }
.capacity-accordion-header strong { display: block; font-size: 13px; margin-bottom: 2px; color: #111827; }
.capacity-accordion-sub { display: block; font-size: 11px; color: #6b7280; }
.capacity-accordion-header .fa-chevron-down { font-size: 12px; margin-top: 2px; transition: transform 0.2s ease; }
.capacity-accordion-header.open .fa-chevron-down { transform: rotate(180deg); }
.capacity-accordion-body { display: none; padding: 10px 12px 12px; border-top: 1px solid #e5e7eb; background: #ffffff; }
.capacity-accordion-body.open { display: block; }

.capacity-help { font-size: 11px; color: #6b7280; margin: 0 0 8px; }
.capacity-filters-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.capacity-filters-row > div { flex: 1 1 150px; }
.capacity-filters-row label { display: block; font-size: 11px; margin-bottom: 2px; color: #4b5563; }
.capacity-filters-row select, .capacity-filters-row input { width: 100%; box-sizing: border-box; font-size: 12px; padding: 4px 6px; }

.tbl-capacidade { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 12px; }
.tbl-capacidade th, .tbl-capacidade td { border: 1px solid #e5e7eb; padding: 6px 8px; vertical-align: middle; }
.tbl-capacidade th { background: #f9fafb; font-weight: 600; color: #111827; }
.tbl-capacidade tbody tr:nth-child(even) { background: #f9fafb; }
.tbl-capacidade tfoot td { background: #f9fafb; }
.tbl-capacidade tfoot input, .tbl-capacidade tfoot select { width: 100%; box-sizing: border-box; font-size: 12px; padding: 4px 6px; }
.tbl-capacidade tfoot input[type="checkbox"] { width: auto; }

.capacity-chip { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 11px; }

.config-accordion-body { display: none; overflow: hidden; transition: max-height 0.2s ease; }
.config-accordion-body.is-open { display: block; }
.config-accordion-header .accordion-icon { transition: transform 0.2s ease; }
.config-accordion-header.is-open .accordion-icon { transform: rotate(180deg); }

.config-tab-panel { height: 100%; overflow-y: auto; padding: 15px; box-sizing: border-box; }
.config-card { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 6px; padding: 15px; margin-bottom: 15px; }
.config-card-title { display: block; font-weight: 600; color: #555; margin-bottom: 12px; font-size: 13px; border-bottom: 1px dashed #ddd; padding-bottom: 5px; }
.config-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: end; }
.config-form-grid .btn-wrapper { min-width: 100px; flex: 0 0 auto; }

.tbl-capacidade { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; background: #fff; border: 1px solid #eee; border-radius: 4px; overflow: hidden; }
.tbl-capacidade th { background: #f0f4f8; color: #444; font-weight: 600; padding: 10px; border-bottom: 1px solid #ddd; text-align: left; }
.tbl-capacidade td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; color: #555; }
.tbl-capacidade tr:last-child td { border-bottom: none; }
.tbl-capacidade tr:hover { background-color: #f9fcff; }

.capacity-accordion-header { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 12px 15px; width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.2s; margin-bottom: 5px; }
.capacity-accordion-header:hover { background: #f7f7f7; }
.capacity-accordion-header.open { background: #eef7ff; border-color: #3c8dbc; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.capacity-accordion-body { border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; padding: 15px; margin-bottom: 15px; background: #fff; display: none; }

.config-form-grid input, .config-form-grid select { width: 100%; box-sizing: border-box; }

/* ==========================================================================
   7. RELATÓRIOS (PDF)
   ========================================================================== */

body.pdf-relatorio { background: #fff !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
body.pdf-relatorio #modalRelatorioUniversal { position: static !important; width: 100% !important; max-width: 100% !important; height: auto !important; background: #fff !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; display: block !important; }
body.pdf-relatorio #modalRelatorioUniversal .modal-box { width: 100% !important; max-width: 100% !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; height: auto !important; }
body.pdf-relatorio #modalRelatorioUniversal .modal-header-custom, body.pdf-relatorio #modalRelatorioUniversal .no-print { display: none !important; }
body.pdf-relatorio #areaImpressao { width: 100% !important; margin: 0 !important; padding: 0 6mm !important; background: #fff !important; box-sizing: border-box !important; }
body.pdf-relatorio .print-header { display: block !important; width: 100%; text-align: center; margin: 0 0 4mm 0; padding: 0; }
body.pdf-relatorio .print-header h2 { margin: 0; font-size: 16pt; font-weight: bold; }
body.pdf-relatorio .print-header h4 { margin: 2mm 0 0 0; font-size: 11pt; font-weight: normal; }
body.pdf-relatorio #conteudoRelatorioTabela table { width: 100% !important; border-collapse: collapse !important; font-size: 11pt !important; }
body.pdf-relatorio #conteudoRelatorioTabela th, body.pdf-relatorio #conteudoRelatorioTabela td { border: 1px solid #000 !important; padding: 5px !important; color: #000 !important; }
body.pdf-relatorio .print-footer { display: flex !important; justify-content: space-between; margin-top: 6mm; font-size: 10pt; border-top: 1px solid #000; padding-top: 2mm; }

/* ==========================================================================
   8. RESPONSIVIDADE (MOBILE / TABLET)
   ========================================================================== */

#btnMobileMenu { display: none; background: transparent; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 8px; margin-right: 10px; border-radius: 50%; align-items: center; justify-content: center; }
#btnMobileMenu:hover { background-color: rgba(255,255,255,0.2); }
.sidebar-close-btn { display: none; }

@media (max-width: 768px) {

  /* 8.1 LAYOUT GERAL & SCROLL */
  body {
      height: auto !important; /* Libera altura total */
      overflow-y: auto !important; /* Scroll nativo */
      -webkit-overflow-scrolling: touch; 
      overflow-x: hidden !important; /* Previne rolagem da página inteira */
      position: static !important;
  }

  /* FORÇA A LARGURA DOS CONTAINERS A NÃO PASSAR DA TELA */
  .app-container, .main-content, .content-body {
      display: block !important;
      height: auto !important;
      min-height: 100vh;
      overflow: visible !important;
      width: 100% !important;
      max-width: 100vw !important; /* SEGREDINHO: Isso impede o estouro */
  }

  /* Trata .page-wrapper e #wrapperAgenda separadamente para não quebrar o toggle do JS */
  .page-wrapper, #wrapperAgenda {
      height: auto !important;
      min-height: auto !important;
      overflow: visible !important;
      width: 100% !important;
      max-width: 100vw !important;
  }

  /* 8.2 SIDEBAR */
  #btnMobileMenu { display: flex !important; }
  .sidebar-close-btn { display: none !important; }
  
  .sidebar { 
      position: fixed; 
      top: 0; 
      left: -300px; 
      width: 280px; 
      z-index: 100000 !important; 
      transition: left 0.3s ease-in-out; 
      box-shadow: none; 
      overflow-y: auto; 
      height: 100dvh !important;
      padding-bottom: 80px !important;
  }
  .sidebar.mobile-open { left: 0; box-shadow: 5px 0 50px rgba(0,0,0,0.5); }
  
  .mobile-overlay { 
      position: fixed !important; 
      inset: 0;
      background: rgba(0,0,0,0.6) !important; 
      z-index: 99999 !important; 
      cursor: pointer; 
      display: none; 
      backdrop-filter: blur(2px); 
  }
  .mobile-overlay.show { display: block !important; }

  /* 8.3 HEADER FIXO */
  .top-nav { 
      padding: 0 10px; 
      position: sticky !important; 
      top: 0; 
      z-index: 9990 !important;
      width: 100%;
      box-sizing: border-box;
  }
  
  /* 8.4 INTERNOS */
  .content-body, .split-view, .list-side, .table-scroll {
      height: auto !important;
      max-height: none !important; 
      overflow: visible !important;
      flex-direction: column !important; 
  }

  /* 8.5 TABELAS */
  table, thead, tbody, th, td, tr { display: block; }
  
  /* AGENDA (ROLAGEM HORIZONTAL) */
  #tabelaOriginal {
      display: table !important;
      width: 100%;
      min-width: 800px;
  }
  #tabelaOriginal thead, #tabelaOriginal tbody, #tabelaOriginal tr { display: table-row-group !important; }
  #tabelaOriginal tr { display: table-row !important; margin-bottom: 0 !important; box-shadow: none !important; }
  #tabelaOriginal thead { display: table-header-group !important; }
  #tabelaOriginal thead tr { position: static !important; } 
  #tabelaOriginal th, #tabelaOriginal td { display: table-cell !important; padding: 10px !important; border-bottom: 1px solid #eee !important; }
  #tabelaOriginal td:before { display: none !important; }
  
  /* O container da tabela PRECISA ter essa trava para rolar */
  .list-side .table-scroll { 
      display: block !important; 
      width: 100% !important; 
      max-width: 100vw !important; /* Garante que role DENTRO da tela */
      overflow-x: auto !important; 
      -webkit-overflow-scrolling: touch; 
  }

  /* TABELAS CARDS (Genérico) */
  tbody tr {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 15px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      padding: 10px;
  }
  thead tr { position: absolute; top: -9999px; left: -9999px; }

  td {
      border: none;
      border-bottom: 1px solid #f0f0f0;
      position: relative;
      padding: 8px 8px 8px 45% !important; 
      text-align: right;
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 13px;
      word-break: break-word;
  }
  td:last-child { border-bottom: none; padding-left: 0 !important; justify-content: center; }

  td[data-label]:before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      width: 40%;
      text-align: left;
      font-weight: bold;
      color: #666;
      font-size: 12px;
      text-transform: uppercase;
  }

  /* ============================================================
     8.5.1 CORREÇÃO ESPECÍFICA: TABELA DE BLOQUEIOS (Formulário)
     ============================================================ */
  .tbl-bloqueios td {
      padding: 10px !important;
      display: flex;
      flex-direction: column; /* Empilha: Label em cima, Campo embaixo */
      align-items: flex-start;
      text-align: left !important;
      height: auto !important;
  }
  
  /* Posiciona o Label (TIPO, DATA, ETC) acima do campo */
  .tbl-bloqueios td:before {
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
      margin-bottom: 5px;
      font-size: 11px;
      color: #999;
      text-transform: uppercase;
      font-weight: bold;
  }

  .tbl-bloqueios select, 
  .tbl-bloqueios input {
      width: 100% !important;
      height: 40px !important;
      background: #fff; /* Garante contraste */
  }

  /* ============================================================ */

  /* 8.6 MODAIS */
  .modal-box, .modal-box.large, .modal-box.side-modal-box {
      width: 95% !important;
      max-width: 95% !important;
      height: auto !important;
      max-height: 85dvh !important; 
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      margin: 0 !important;
      position: fixed !important;
      border-radius: 8px !important;
  }
  .modal-body { max-height: 70dvh !important; overflow-y: auto !important; padding: 15px !important; }

  /* 8.7 FORMS */
  .form-row { flex-direction: column; gap: 0; }
  .col-half { width: 100%; margin-bottom: 10px; }
  .toolbar-box { flex-direction: column; height: auto !important; gap: 10px; padding: 10px; }
  .toolbar-box > div { flex-direction: column; width: 100%; align-items: stretch !important; }
  .toolbar-box select, .toolbar-box input { width: 100% !important; margin-bottom: 5px; min-width: 0 !important; }
  .toolbar-actions { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; justify-content: center; margin-top: 5px; }
  .toolbar-actions button { width: 100%; justify-content: center; }

  /* 8.8 EXTRAS */
  .cal-head { display: none !important; }
  .cal-grid-month { display: block; }
  .cal-cell { width: 100%; border-right: none; border-bottom: 1px solid #ddd; min-height: auto; padding: 15px; margin-bottom: 10px; background: #fff; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .cal-day { float: none; font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px; color: #333; border-bottom: 1px solid #eee; padding-bottom: 5px; }
  .cal-cell[style*="background:#f9f9f9"] { display: none; } 
  .cal-event { font-size: 12px; padding: 6px; margin-bottom: 4px; white-space: normal; }
  .agenda-header-mobile { flex-direction: column !important; height: auto !important; padding: 10px 0; gap: 10px !important; }
  .agenda-header-mobile > div { width: 100%; justify-content: center !important; flex-wrap: wrap; }
  .nav-select { padding: 10px !important; font-size: 14px !important; background: #f9f9f9; border: 1px solid #ddd; flex: 1; text-align: center; }
  .form-sm, input[type="text"], input[type="date"], select, textarea { font-size: 16px !important; }
  
  .config-info-box, .config-right { display: none !important; }
  .config-left { width: 100% !important; padding-right: 0 !important; }
  .modal-body-config { padding: 10px !important; flex-direction: column; }
  .tbl-bloqueios td.d-none { display: block !important; }
  .tbl-bloqueios .btn-toggle-sim, .tbl-bloqueios .btn-toggle-nao { width: 49% !important; padding: 12px 0 !important; font-size: 14px !important; margin: 5px 0 !important; display: inline-block; text-align: center; }
  .tbl-bloqueios .btn-trash { width: 100% !important; height: 40px !important; margin-top: 10px !important; font-size: 14px !important; }
  #tbodyHorariosConfig td:first-child { padding-left: 10px !important; justify-content: center !important; background-color: #f0f0f0; font-weight: bold; color: #333; }
  #tbodyHorariosConfig td:first-child:before { display: none !important; }

  #areaFiltrosRelatorio { flex-direction: column !important; align-items: stretch !important; height: auto !important; gap: 10px !important; padding: 15px 10px !important; }
  #areaFiltrosRelatorio > * { width: 100% !important; margin: 0 !important; margin-bottom: 5px !important; }
  #areaFiltrosRelatorio input, #areaFiltrosRelatorio select, #areaFiltrosRelatorio button { min-height: 40px; }

  /* 8.9 LEMBRETES */
  #modalLembretes table tbody tr {
      background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 15px !important;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; overflow: hidden;
  }
  #modalLembretes table tbody td {
      border-bottom: 1px solid #f0f0f0; padding: 12px 15px !important;
      display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box;
  }
  #modalLembretes td:before { display: none !important; }

  #modalLembretes table tbody td:first-child {
      background-color: #f9f9f9; font-weight: bold; color: #605ca8; justify-content: center; padding-left: 0 !important;
  }
  #modalLembretes table tbody td:last-child {
      display: flex; justify-content: center; gap: 15px; padding: 15px !important; background: #fdfdfd; border-top: 1px solid #eee;
  }
  #modalLembretes .btn-icon-action { width: 40px !important; height: 40px !important; font-size: 16px !important; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
  
  .dropdown-menu { left: auto; right: 0; }
}

/* ==========================================================================
   9. OVERRIDES E CORREÇÕES FINAIS
   ========================================================================== */

#modalEditarAgendamento, #modalConfirmarAgendamento, #modalCancelarAgendamento, #modalRegistrarObs, #modalReagendar, #modalNaoCompareceu { z-index: 10001 !important; }
.swal2-container { z-index: 10010 !important; }

.dropdown-menu { z-index: 20000 !important; position: absolute; top: 100%; right: auto; left: 0; min-width: 220px; margin-top: 5px; background: #fff; border: 1px solid #ccc; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 4px; }
.search-results { z-index: 20000 !important; }
.top-nav { z-index: 1001; position: relative; }

@media (max-width: 768px) {
    .dropdown-menu { left: auto; right: 0; }
}