/* =======================================================================
 * imigramais-ui.css — Kit visual unificado ImigraMais
 * =======================================================================
 * Inclua em qualquer página com:
 *   <link rel="stylesheet" href="/_shared/imigramais-ui.css">
 *
 * Paleta, tipografia, cards, tabelas, buttons e inputs padronizados
 * seguindo o mesmo visual dos painéis contratos_list e bot/index.
 * ======================================================================= */

:root {
  --im-primary: #1940a5;
  --im-primary-dark: #12307e;
  --im-primary-light: rgba(25, 64, 165, 0.1);
  --im-accent: #0f766e;
  --im-bg: #f4f6fb;
  --im-card: #ffffff;
  --im-text: #0f172a;
  --im-text-muted: #475569;
  --im-muted: #64748b;
  --im-line: #e2e8f0;
  --im-line-soft: #f1f5f9;
  --im-success: #16a34a;
  --im-warning: #f59e0b;
  --im-danger: #dc2626;
  --im-info: #0284c7;
  --im-radius: 14px;
  --im-radius-sm: 9px;
  --im-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.04);
  --im-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.08);
}

/* Reset leve — só o que não conflita com Bootstrap/estilos existentes.
 * display:block + align-items:stretch são cruciais: algumas páginas
 * herdaram um theme.css antigo com `body { display:flex; justify-content:center; align-items:center }`
 * que quebrava layouts com topbar fixa. */
body.im-ui {
  margin: 0 !important;
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--im-bg);
  color: var(--im-text);
  min-height: 100vh;
}
body.im-ui *,
body.im-ui *::before,
body.im-ui *::after { box-sizing: border-box; }

/* Se a página tinha um theme.css que definia `.dashboard-container` ou
 * similar com max-width 800px, isso não deve afetar a topbar */
body.im-ui > .im-topbar {
  width: 100% !important;
  max-width: none !important;
}

/* =======================
 * TOPBAR (barra superior fixa)
 * ======================= */
.im-topbar {
  background: linear-gradient(135deg, var(--im-primary) 0%, var(--im-primary-dark) 100%);
  color: #fff;
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(25, 64, 165, 0.2);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 1rem;
  flex-wrap: wrap;
}
.im-topbar .im-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
  font-size: 1.03rem;
  color: #fff;
  text-decoration: none;
}
.im-topbar .im-brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
}
.im-topbar .im-brand-logo svg { width: 20px; height: 20px; color: #fff; }

.im-topbar .im-nav-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.im-topbar .im-action {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  padding: .45rem .9rem;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: background 0.15s;
}
.im-topbar .im-action:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.im-topbar .im-action svg { width: 15px; height: 15px; }

.im-topbar .im-user {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255, 255, 255, 0.14);
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
}
.im-topbar .im-user .im-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700;
}

/* =======================
 * CONTAINER PRINCIPAL
 * ======================= */
.im-container {
  max-width: 1180px;
  margin: 1.5rem auto;
  padding: 0 1.3rem;
}
.im-container-sm { max-width: 960px; }
.im-container-lg { max-width: 1440px; }

/* =======================
 * PAGE HEADER
 * ======================= */
.im-page-header {
  margin-bottom: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
}
.im-page-header h1 {
  margin: 0 0 .25rem;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--im-text);
}
.im-page-header .im-subtitle {
  color: var(--im-muted);
  font-size: .92rem;
  margin: 0;
}

/* =======================
 * CARDS
 * ======================= */
.im-card {
  background: var(--im-card);
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius);
  box-shadow: var(--im-shadow);
  padding: 1.4rem;
}
.im-card-sm { padding: 1rem 1.15rem; }
.im-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .9rem;
  color: var(--im-text);
}
.im-card-head {
  padding: .9rem 1.2rem;
  border-bottom: 1px solid var(--im-line);
  background: linear-gradient(to bottom, #fafbfd, #fff);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
}
.im-card-body { padding: 1.2rem; }

/* =======================
 * GRID HELPERS
 * ======================= */
.im-grid { display: grid; gap: 1rem; }
.im-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.im-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.im-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .im-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .im-grid-2, .im-grid-3 { grid-template-columns: 1fr; }
  .im-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .im-grid-4 { grid-template-columns: 1fr; }
}

/* =======================
 * TILES (cards grandes clicáveis)
 * ======================= */
.im-tile {
  background: var(--im-card);
  border-radius: var(--im-radius);
  padding: 1.4rem;
  border: 1px solid var(--im-line);
  box-shadow: var(--im-shadow);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-height: 170px;
}
.im-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--im-shadow-hover);
  border-color: rgba(25, 64, 165, 0.25);
  color: inherit;
}
.im-tile-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--im-primary), var(--im-accent));
}
.im-tile-icon svg { width: 24px; height: 24px; }
.im-tile-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--im-text);
}
.im-tile-desc {
  font-size: .88rem;
  color: var(--im-muted);
  line-height: 1.45;
  margin: 0;
  flex: 1;
}
.im-tile-cta {
  font-size: .85rem;
  font-weight: 600;
  color: var(--im-primary);
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .2rem;
}
.im-tile-cta::after {
  content: '→';
  transition: transform 0.15s;
}
.im-tile:hover .im-tile-cta::after { transform: translateX(3px); }
.im-tile[data-tone="teal"] .im-tile-icon   { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.im-tile[data-tone="violet"] .im-tile-icon { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.im-tile[data-tone="amber"] .im-tile-icon  { background: linear-gradient(135deg, #b45309, #f59e0b); }
.im-tile[data-tone="rose"] .im-tile-icon   { background: linear-gradient(135deg, #be123c, #f43f5e); }
.im-tile[data-tone="slate"] .im-tile-icon  { background: linear-gradient(135deg, #334155, #64748b); }
.im-tile[data-tone="green"] .im-tile-icon  { background: linear-gradient(135deg, #15803d, #22c55e); }
.im-tile[data-tone="sky"] .im-tile-icon    { background: linear-gradient(135deg, #0369a1, #38bdf8); }
.im-tile[data-tone="indigo"] .im-tile-icon { background: linear-gradient(135deg, #3730a3, #6366f1); }

/* =======================
 * STATS / KPIs
 * ======================= */
.im-stat {
  background: var(--im-card);
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius);
  box-shadow: var(--im-shadow);
  padding: 1.1rem 1.2rem;
  transition: transform 0.15s, border-color 0.15s;
}
a.im-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(25, 64, 165, 0.3);
}
.im-stat-label {
  font-size: .75rem;
  color: var(--im-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-bottom: .35rem;
}
.im-stat-value {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--im-text);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.im-stat-delta { font-size: .78rem; font-weight: 500; margin-top: .25rem; }
.im-stat-delta.up { color: var(--im-success); }
.im-stat-delta.down { color: var(--im-danger); }
.im-stat-delta.muted { color: var(--im-muted); }

/* =======================
 * BUTTONS
 * ======================= */
.im-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
  line-height: 1;
  font-family: inherit;
}
.im-btn svg { width: 14px; height: 14px; }
.im-btn-primary { background: var(--im-primary); color: #fff; }
.im-btn-primary:hover { background: var(--im-primary-dark); color: #fff; }
.im-btn-accent { background: var(--im-accent); color: #fff; }
.im-btn-accent:hover { background: #0a5c55; color: #fff; }
.im-btn-secondary { background: var(--im-line-soft); color: var(--im-text); border-color: var(--im-line); }
.im-btn-secondary:hover { background: var(--im-line); color: var(--im-text); }
.im-btn-ghost { background: transparent; color: var(--im-primary); }
.im-btn-ghost:hover { background: var(--im-line-soft); }
.im-btn-danger { background: #fef2f2; color: var(--im-danger); border-color: #fecaca; }
.im-btn-danger:hover { background: #fee2e2; }
.im-btn-sm { padding: .35rem .7rem; font-size: .78rem; }
.im-btn-lg { padding: .75rem 1.3rem; font-size: .95rem; }

/* =======================
 * INPUTS
 * ======================= */
.im-input, .im-select, .im-textarea {
  padding: .55rem .85rem;
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius-sm);
  font-size: .92rem;
  background: #f8fafc;
  color: var(--im-text);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.im-input:focus, .im-select:focus, .im-textarea:focus {
  outline: none;
  border-color: var(--im-primary);
  background: #fff;
  box-shadow: 0 0 0 3px var(--im-primary-light);
}
.im-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--im-text-muted);
  margin-bottom: .35rem;
}
.im-field { margin-bottom: 1rem; }

/* =======================
 * TABLES
 * ======================= */
.im-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--im-card);
}
.im-table th {
  background: #f8fafc;
  padding: .7rem 1rem;
  text-align: left;
  font-size: .72rem;
  color: var(--im-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  border-bottom: 1px solid var(--im-line);
}
.im-table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--im-line);
  font-size: .9rem;
  vertical-align: middle;
  color: var(--im-text);
}
.im-table tr:last-child td { border-bottom: none; }
.im-table tr:hover td { background: #f8fafc; }

/* =======================
 * BADGES
 * ======================= */
.im-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.im-badge-success { background: rgba(22, 163, 74, 0.12); color: var(--im-success); }
.im-badge-warning { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.im-badge-danger  { background: rgba(220, 38, 38, 0.1); color: var(--im-danger); }
.im-badge-info    { background: rgba(2, 132, 199, 0.1); color: var(--im-info); }
.im-badge-muted   { background: rgba(100, 116, 139, 0.14); color: #475569; }

/* =======================
 * ALERTS
 * ======================= */
.im-alert {
  padding: .9rem 1.1rem;
  border-radius: 10px;
  font-size: .9rem;
  margin-bottom: 1.1rem;
  border-left: 4px solid;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.im-alert-success { background: rgba(22, 163, 74, 0.06); border-color: var(--im-success); color: #065f46; }
.im-alert-warning { background: rgba(245, 158, 11, 0.08); border-color: var(--im-warning); color: #92400e; }
.im-alert-error   { background: rgba(220, 38, 38, 0.05); border-color: var(--im-danger); color: #991b1b; }
.im-alert-info    { background: rgba(2, 132, 199, 0.06); border-color: var(--im-info); color: #075985; }

/* =======================
 * TOAST
 * ======================= */
.im-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--im-text);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-size: .88rem;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform: translateY(8px);
  pointer-events: none;
  z-index: 9999;
}
.im-toast.im-show { opacity: 1; transform: translateY(0); }

/* =======================
 * UTIL
 * ======================= */
.im-muted { color: var(--im-muted); }
.im-small { font-size: .82rem; }
.im-text-center { text-align: center; }
.im-mt-1 { margin-top: .5rem; }
.im-mt-2 { margin-top: 1rem; }
.im-mt-3 { margin-top: 1.5rem; }
.im-mb-1 { margin-bottom: .5rem; }
.im-mb-2 { margin-bottom: 1rem; }
.im-mb-3 { margin-bottom: 1.5rem; }
.im-flex { display: flex; }
.im-flex-between { display: flex; justify-content: space-between; align-items: center; }
.im-gap-1 { gap: .5rem; }
.im-gap-2 { gap: 1rem; }

/* =======================
 * RESPONSIVIDADE
 * ======================= */
@media (max-width: 900px) {
  .im-topbar { gap: .5rem; }
  .im-topbar .im-brand { font-size: .95rem; }
  .im-topbar .im-brand span span:first-of-type,
  .im-topbar .im-brand span span:last-of-type { display: none; }
  .im-topbar .im-brand > span { overflow: hidden; text-overflow: ellipsis; max-width: 160px; white-space: nowrap; }
  .im-page-header h1 { font-size: 1.4rem; }
}

@media (max-width: 720px) {
  .im-topbar { padding: .7rem 1rem; flex-wrap: nowrap; }
  .im-topbar .im-nav-actions { gap: .35rem; }
  .im-topbar .im-action {
    padding: .45rem .6rem;
    font-size: 0; /* esconde texto — só ícone */
    gap: 0;
  }
  .im-topbar .im-action svg { width: 18px; height: 18px; }
  .im-topbar .im-user { padding: .3rem .55rem; }
  .im-topbar .im-user span { display: none; } /* esconde nome — só avatar */
  .im-container { padding: 0 .9rem; margin: 1rem auto; }
  .im-page-header h1 { font-size: 1.25rem; }
  .im-page-header .im-subtitle { font-size: .85rem; }
  .im-card, .im-tile { padding: 1.1rem; }
  .im-tile { min-height: auto; }
  .im-stat-value { font-size: 1.35rem; }
}

@media (max-width: 480px) {
  .im-topbar .im-brand span { max-width: 110px; }
  .im-card-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* Print básico */
@media print {
  .im-topbar, .im-toast { display: none !important; }
  body.im-ui { background: #fff; }
  .im-tile, .im-card { box-shadow: none; border: 1px solid #ccc; }
}