/* =====================================================
   TOKENS GLOBAIS
===================================================== */
:root{
  --bg:#edf3f8;
  --bg-soft:#f7fafc;
  --bg-dark:#0f172a;
  --bg-dark-2:#16263d;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#dde6ee;
  --primary:#0f766e;
  --primary-dark:#0b5e57;
  --primary-strong:#10b981;
  --primary-soft:#ecfdf5;
  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --success:#16a34a;
  --success-soft:#f0fdf4;
  --warning:#d97706;
  --warning-soft:#fff7ed;
  --info:#2563eb;
  --info-soft:#eff6ff;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --radius:18px;
  --radius-card:18px;
  --radius-panel:20px;
  --radius-control:12px;
  --radius-pill:999px;
  --shadow-card:0 12px 30px rgba(15,23,42,.06);
  --shadow-panel:0 16px 34px rgba(15,23,42,.06);
  --rail:78px;
  --sidebar:256px;
  --sidebar-collapsed:0px;
  --font-sidebar:13px;
  --font-menu-label:10px;
  --font-page-title:24px;
  --font-page-subtitle:13px;
  --font-card-label:11px;
  --font-card-value:28px;
  --font-card-desc:12px;
  --font-section-title:16px;
  --font-section-subtitle:12px;
  --font-filter:12.5px;
  --font-table-head:10.5px;
  --font-table-body:12px;
  --font-button-small:12px;
}

/* =====================================================
   BASE / RESET
===================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:14px;max-width:100%;overflow-x:hidden}
button,input,select,textarea{font:inherit}
a{text-decoration:none;color:inherit}
.hidden{display:none !important}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(15,118,110,.06), transparent 20%),
    radial-gradient(circle at bottom right, rgba(16,185,129,.05), transparent 18%),
    linear-gradient(180deg, #edf3f8, #f6f9fc 72%);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* =====================================================
   COMPONENTES COMPARTILHADOS
===================================================== */
.section{padding:16px 18px}
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.section-title{
  margin:0;
  font-size:var(--font-section-title);
  letter-spacing:-.02em;
  line-height:1.15;
}
.section-subtitle{
  margin:4px 0 0;
  color:var(--muted);
  font-size:var(--font-section-subtitle);
  line-height:1.5;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}

.surface{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-panel);
}

.page-title{
  font-size:var(--font-page-title);
  line-height:1.05;
  letter-spacing:-.04em;
}

.page-subtitle{
  font-size:var(--font-page-subtitle);
  line-height:1.55;
  color:var(--muted);
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.field{display:grid;gap:6px}
.field.full{grid-column:1 / -1}
.label{
  font-size:var(--font-card-label);
  color:var(--muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:var(--radius-control);
  padding:10px 12px;
  outline:none;
  transition:.2s ease;
  font-size:13px;
  min-height:38px;
}

input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(15,118,110,.08);
}

textarea{min-height:76px;resize:vertical}

.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

.btn{
  border:none;
  border-radius:var(--radius-control);
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
  white-space:nowrap;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:var(--font-filter);
}

.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-secondary{background:#fff;border:1px solid var(--line);color:var(--text)}
.btn-secondary:hover{background:#f8fafc}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(.95)}
.btn-soft{background:var(--primary-soft);color:var(--primary-dark)}
.btn-whatsapp{background:#25d366;color:#fff}
.btn-whatsapp:hover{filter:brightness(.96)}
.btn-icon{
  width:38px;
  min-width:38px;
  padding:0;
}

.btn-whatsapp svg{
  width:18px;
  height:18px;
  display:block;
}

.btn-pdf{background:#f8fafc;border:1px solid var(--line);color:#0f172a}
.btn-pdf:hover{background:#eef2f7}

.btn-sm,
.btn-icon-sm{
  min-height:32px;
  border-radius:10px;
  font-size:var(--font-button-small);
  padding:7px 11px;
}

.btn-sm{
  line-height:1.05;
}

.btn-icon-sm{
  width:32px;
  min-width:32px;
  padding:0;
}

.btn-icon{
  width:38px;
  min-width:38px;
  padding:0;
}

.table-wrap{overflow-x:auto;border:none;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.04)}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:middle;
  font-size:var(--font-table-body);
}

th{
  background:#f7fafc;
  color:#334155;
  font-size:var(--font-table-head);
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
  font-weight:800;
}

tr:last-child td{border-bottom:none}
.text-right{text-align:right}

.tag,
.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  padding:5px 10px;
  border-radius:var(--radius-pill);
  background:#f1f5f9;
  color:#334155;
  font-weight:700;
  border:1px solid transparent;
  line-height:1;
}

.tag.is-enabled,
.badge.is-success,
.badge.is-active,
.badge.is-complete,
.badge.is-completed,
.status-badge.is-active,
.status-badge.status-completo,
.status-badge.status-finalizado,
.status-badge.status-ativo,
.task-pill.status-concluida{
  background:var(--success-soft);
  color:var(--success);
  border-color:rgba(22,163,74,.16);
}

.tag.is-warning,
.badge.is-warning,
.status-badge.is-warning,
.status-badge.status-pendente,
.task-pill.status-pendente,
.status-badge.status-novo{
  background:var(--warning-soft);
  color:var(--warning);
  border-color:rgba(217,119,6,.16);
}

.tag.is-danger,
.badge.is-danger,
.status-badge.is-danger,
.status-badge.status-inativo,
.status-badge.status-incompleto,
.task-pill.status-cancelada{
  background:var(--danger-soft);
  color:var(--danger);
  border-color:rgba(220,38,38,.16);
}

.tag.is-info,
.badge.is-info,
.status-badge.is-info,
.status-badge.status-em-andamento,
.task-pill.status-em-andamento{
  background:var(--info-soft);
  color:var(--info);
  border-color:rgba(37,99,235,.16);
}

/* =====================================================
   FEEDBACK VISUAL: ALERTAS E MENSAGENS
===================================================== */
.message{
  padding:11px 14px;
  border-radius:14px;
  font-weight:600;
  display:none;
  line-height:1.45;
  font-size:13px;
  border:1px solid transparent;
}

.message.show{display:block}
.message.success{background:var(--success-soft);color:var(--success);border-color:rgba(22,163,74,.16)}
.message.error{background:var(--danger-soft);color:var(--danger);border-color:rgba(220,38,38,.16)}
.message.warning{background:var(--warning-soft);color:var(--warning);border-color:rgba(217,119,6,.16)}
.message.info{background:var(--info-soft);color:var(--info);border-color:rgba(37,99,235,.16)}

.empty-state{
  padding:20px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.stat-row{display:grid;gap:10px}
.mini-list{display:grid;gap:8px}
.mini-item{
  border:none;
  border-radius:14px;
  padding:12px;
  display:grid;
  gap:4px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}

.mini-item strong{font-size:13px}
.mini-item span{color:var(--muted);font-size:11px}

.readonly{background:#f8fafc !important;color:#64748b}

.filter-bar{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:2px 0 0;
}

.filter-bar-inner{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.filter-shortcuts{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

.btn-filter{
  font-size:var(--font-filter);
  padding:7px 13px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--muted);
  cursor:pointer;
  transition:.16s ease;
  white-space:nowrap;
  line-height:1;
  min-height:34px;
}

.btn-filter:hover{
  border-color:rgba(15,118,110,.35);
  color:var(--primary);
  background:#fbfffe;
}

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

.filter-divider{
  width:1px;
  height:22px;
  background:var(--line);
  flex-shrink:0;
}

.filter-date-group,
.filter-select-group{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}

.filter-date-group label,
.filter-select-group label{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  flex-shrink:0;
}

.filter-date-group input[type="date"],
.filter-select{
  font-size:13px;
  padding:6px 9px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  min-height:34px;
}

.filter-select{min-width:180px}
.filter-date-group input[type="date"]{width:140px;cursor:pointer}

.filter-active-tag{
  font-size:11px;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(15,118,110,.16);
  display:none;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

.filter-active-tag.visible{
  display:inline-flex;
}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:2200;
  min-width:260px;
  max-width:min(92vw, 380px);
  padding:12px 14px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-panel);
  color:var(--text);
  font-size:13px;
}

.toast.success{border-color:rgba(22,163,74,.18);background:var(--success-soft);color:var(--success)}
.toast.error{border-color:rgba(220,38,38,.18);background:var(--danger-soft);color:var(--danger)}
.toast.info{border-color:rgba(37,99,235,.18);background:var(--info-soft);color:var(--info)}

.loading-state,
.skeleton{
  background:linear-gradient(90deg, #eef3f8 0%, #f7fafc 50%, #eef3f8 100%);
  background-size:200% 100%;
  animation:loadingShimmer 1.2s linear infinite;
  border-radius:12px;
}

@keyframes loadingShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(10px);
  z-index:2400;
}

.modal-dialog{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow-panel);
}

.table-wrap{
  scrollbar-width:thin;
  scrollbar-color:#b8c4d3 #eef3f7;
  -webkit-overflow-scrolling:touch;
}

.table-wrap::-webkit-scrollbar{height:8px;width:8px}
.table-wrap::-webkit-scrollbar-track{background:#eef3f7;border-radius:999px}
.table-wrap::-webkit-scrollbar-thumb{background:#b8c4d3;border-radius:999px}
.table-wrap::-webkit-scrollbar-thumb:hover{background:#94a3b8}

@media (max-width:720px){
  .actions .btn,
  .top-actions .btn{
    flex:1 1 100%;
    width:100%;
  }

  .actions{
    align-items:stretch;
  }
}

@media (max-width:960px){
  .form-grid{grid-template-columns:1fr}
}

@media (max-width:640px){
  .stat-row{grid-template-columns:1fr}
  .section{padding:14px}
  .card{border-radius:16px}
  .tag,
  .badge{max-width:100%;white-space:normal}
  .filter-bar-inner{align-items:flex-start}
  .filter-select{min-width:0;width:100%}
}

@media (max-width:420px){
  .btn{padding:10px 12px}
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea{
    padding:10px 11px;
  }
}