/* =========================
   MyAgenda UI Theme (soft)
   ========================= */

:root{
  /* Brand */
  --brand-primary: #1F3A5F;
  --brand-secondary: #2FA4A9;
  --brand-accent: #F4B400;

  /* Neutral / Surface (mais cinza e suave) */
  --bg: #F3F5F8;          /* fundo levemente cinza */
  --surface: #ffffff;     /* cards / navbar */
  --surface-2: #F8FAFC;   /* leve variação */

  /* Text */
  --text: #1F2937;        /* cinza escuro (menos preto) */
  --muted: #64748B;       /* cinza médio */
  --border: #E6EAF0;      /* bordas suaves */

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 10px 30px rgba(16,24,40,.10);
  --shadow-lg: 0 18px 55px rgba(16,24,40,.16);

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  /* Spacing */
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 20px;
}

html, body{
  height: 100%;
}

body{
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Melhor leitura */
p, label, .form-label{
  color: var(--text);
}

/* Texto auxiliar */
.text-muted{
  color: var(--muted) !important;
}

/* =========================
   Navbar (menos agressiva)
   ========================= */
.navbar{
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.navbar .navbar-brand{
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-title{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--brand-primary);
  letter-spacing: .2px;
}

.navbar-nav .nav-link{
  color: var(--muted) !important;
  font-weight: 500;
}

.navbar-nav .nav-link:hover{
  color: var(--brand-primary) !important;
}

/* =========================
   Containers / spacing
   ========================= */
main.py-4{
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.container{
  max-width: 1100px; /* deixa a UI mais confortável */
}

/* =========================
   Cards
   ========================= */
.card{
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.card-header{
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
  font-weight: 600;
}

.card-body{
  padding: 18px;
}

/* =========================
   Buttons
   ========================= */
.btn{
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
}

.btn-primary{
  background: var(--brand-primary);
  border: 1px solid rgba(31,58,95,.08);
  box-shadow: 0 8px 18px rgba(31,58,95,.18);
}

.btn-primary:hover{
  background: #19304e;
  box-shadow: 0 10px 22px rgba(31,58,95,.22);
}

.btn-outline-secondary{
  border-color: var(--border);
  color: var(--muted);
}

.btn-outline-secondary:hover{
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--brand-primary);
}

/* =========================
   Inputs / Select / Textarea
   ========================= */
.form-control,
.form-select{
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text);
}

.form-control::placeholder{
  color: #94A3B8;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(47,164,169,.45); /* secundária suave */
  box-shadow: 0 0 0 .25rem rgba(47,164,169,.12);
}

/* =========================
   Table (mais leve e espaçada)
   ========================= */
.table{
  margin: 0;
}

.table thead th{
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  background: var(--surface-2);
}

.table td{
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}

.table-hover tbody tr:hover{
  background: rgba(248,250,252,.9);
}

/* =========================
   Badges (mais suaves)
   ========================= */
.badge{
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
}

/* Um badge de destaque (se quiser usar) */
.badge-accent{
  background: rgba(244,180,0,.18);
  color: #7A5A00;
  border: 1px solid rgba(244,180,0,.25);
}

/* =========================
   Modal (premium e suave)
   ========================= */
.modal-content{
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.modal-header{
  border-bottom: 1px solid var(--border);
  padding: 16px 18px;
}

.modal-body{
  padding: 18px;
}

.modal-footer{
  border-top: 1px solid var(--border);
  padding: 14px 18px;
}

/* =========================
   Alert (caso use)
   ========================= */
.alert{
  border-radius: 14px;
  border: 1px solid var(--border);
}

/* =========================
   Small helpers
   ========================= */
hr{
  border-color: var(--border);
  opacity: 1;
}

/* Melhor foco de links */
a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

/* Modal mais “SaaS” */
.modal-saas {
  border-radius: 18px;
  overflow: hidden;
}

.section-title{
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
}

/* Upload box */
.upload-box{
  border: 1px dashed var(--border);
  background: var(--surface-2);
  border-radius: 16px;
  padding: 14px;
}

.list-group-flush .list-group-item{
  background: transparent;
  border-color: var(--border);
  padding-left: 0;
  padding-right: 0;
}

.file-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.file-pill .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(47,164,169,.35);
  border: 1px solid rgba(47,164,169,.45);
}