/* =========================================================
   Pocket Plan — app.css (base)
   Objetivo: dar "cara de app" com CSS simples e organizado.
   Carrega depois do Tailwind para sobrescrever quando precisar.
   ========================================================= */


/* =========================================================
   1) Variáveis de tema (cores, bordas, sombras, espaçamentos)
   - Você pode mexer aqui pra mudar o estilo geral do app
   ========================================================= */
:root {
  /* Cores principais (base) */
  --bg: #f6f7fb;              /* fundo geral */
  --surface: #ffffff;         /* cartões e áreas claras */
  --text: #0f172a;            /* texto principal */
  --muted: #64748b;           /* texto secundário */
  --border: #e2e8f0;          /* bordas */
  --ring: rgba(16, 185, 129, 0.22); /* foco (verde suave) */

  /* Marca (ajuste se quiser) */
  --brand: #10b981;           /* verde */
  --brand-2: #059669;         /* verde mais escuro */
  --danger: #ef4444;
  --warning: #f59e0b;

  /* Raios e sombras (efeito "app") */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 25px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.12);

  /* Tipografia */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;

  /* Espaçamento */
  --gap: 14px;
}


/* =========================================================
   2) Reset leve + base tipográfica
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

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

/* Links (deixa com cara mais "app", menos "site") */
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

/* Seleção de texto */
::selection {
  background: rgba(16, 185, 129, 0.18);
}


/* =========================================================
   3) Header fixo (topbar)
   - Seu header já vem com Tailwind (gradiente).
   - Aqui adicionamos "profundidade" e ajustes finos.
   ========================================================= */
header {
  box-shadow: var(--shadow-sm);
}

/* Deixa a barra mais "app" (borda sutil embaixo) */
header > div {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Link de sair mais consistente */
header a {
  border-radius: 10px;
  transition: background 150ms ease, transform 150ms ease;
}
header a:hover {
  transform: translateY(-1px);
}


/* =========================================================
   4) Sidebar / Menu
   - Você usa: #sidebar e overlay #sidebarOverlay
   - Aqui deixamos a sidebar com "cara de painel" e links bonitos.
   ========================================================= */
#sidebar {
  background: var(--surface);
}

/* Scroll da sidebar mais suave */
#sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
}
#sidebar::-webkit-scrollbar {
  width: 10px;
}
#sidebar::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Links dentro do menu (sidebar.php normalmente tem <a>) */
#sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 12px;
  color: #0f172a;
  transition: background 150ms ease, transform 150ms ease, color 150ms ease;
}

/* Hover do menu */
#sidebar a:hover {
  background: rgba(16, 185, 129, 0.10);
  color: #065f46;
  transform: translateX(2px);
}

/* Link ativo (se você adicionar class="active" no sidebar.php) */
#sidebar a.active {
  background: rgba(16, 185, 129, 0.16);
  color: #065f46;
  font-weight: 600;
}

/* Overlay do mobile */
#sidebarOverlay {
  backdrop-filter: blur(2px);
}


/* =========================================================
   5) Área principal (conteúdo)
   - Seu <main> já tem margem no desktop: md:ml-72
   - Aqui damos padding e comportamento mais "app"
   ========================================================= */
main {
  min-height: calc(100vh - 56px); /* 56px = header (h-14) */
}

/* Container interno (max-w-6xl) fica bem centralizado */
main .max-w-6xl {
  padding-bottom: 30px;
}


/* =========================================================
   6) Cards / Blocos brancos (ex: bg-white p-6 rounded shadow)
   - Você usa muito esse padrão nas páginas.
   - Isso melhora o visual sem você mudar o HTML.
   ========================================================= */
.bg-white.p-6.rounded.shadow,
.bg-white.p-6.rounded {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Títulos dentro dos cards */
.bg-white h2,
.bg-white h3 {
  letter-spacing: -0.02em;
}

/* Textos secundários */
.text-gray-500,
.text-gray-600,
.text-slate-500,
.text-slate-600 {
  color: var(--muted) !important;
}


/* =========================================================
   7) Formulários (inputs, selects, textarea)
   - Deixa com aspecto "app": bordas suaves, foco bonito.
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  outline: none;
  box-shadow: 0 0 0 0 var(--ring);
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
}

/* Foco (quando clica) */
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Textarea */
textarea {
  min-height: 90px;
  resize: vertical;
}

/* Label com aparência mais consistente */
label {
  color: #334155; /* slate-700 */
}


/* =========================================================
   8) Botões (sem precisar mexer em Tailwind)
   - Você já usa classes Tailwind nos botões, mas isso melhora:
   - clique, transição, sensação de app
   ========================================================= */
button,
a[role="button"] {
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

button:hover,
a[role="button"]:hover {
  filter: brightness(0.98);
}

button:active,
a[role="button"]:active {
  transform: translateY(1px);
}

/* Melhora o botão de ação mesmo com Tailwind */
.bg-blue-600,
.bg-green-600,
.bg-yellow-600,
.bg-red-600 {
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.10);
}

/* Links que parecem botões em tabelas */
a.text-blue-600,
a.text-red-600 {
  font-weight: 600;
}
a.text-blue-600:hover {
  text-decoration: underline;
}
a.text-red-600:hover {
  text-decoration: underline;
}


/* =========================================================
   9) Tabelas (report, triage, dashboard)
   - Deixa tabela mais "premium": zebra, hover, bordas suaves
   ========================================================= */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Cabeçalho */
thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  padding: 12px;
}

/* Células */
tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* Zebra */
tbody tr:nth-child(even) td {
  background: #fbfdff;
}

/* Hover */
tbody tr:hover td {
  background: rgba(16, 185, 129, 0.06);
}

/* Última linha sem borda pesada */
tbody tr:last-child td {
  border-bottom: 0;
}

/* Quando tabela ficar grande no mobile */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/* =========================================================
   10) Alerts (flash messages)
   - Você usa: bg-red-100 text-red-700 etc
   - Aqui deixamos com borda e canto bonito, sem mudar HTML.
   ========================================================= */
.bg-red-100,
.bg-green-100,
.bg-yellow-100 {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
}


/* =========================================================
   11) Pequenos ajustes visuais gerais
   ========================================================= */

/* Ajusta o “arredondado” padrão */
.rounded {
  border-radius: var(--radius-sm) !important;
}
.rounded-lg {
  border-radius: var(--radius-md) !important;
}

/* Suaviza o shadow do Tailwind */
.shadow {
  box-shadow: var(--shadow-md) !important;
}

/* Evita texto estourando na tabela */
td, th {
  max-width: 460px;
}
td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ícones e imagens pequenas (ex: avatar) */
img {
  max-width: 100%;
  height: auto;
}


/* =========================================================
   12) Helpers opcionais (você pode usar no HTML se quiser)
   - Não quebra nada se não usar.
   ========================================================= */

/* Card padrão (se você quiser criar <div class="app-card">) */
.app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 18px;
}

/* Botão padrão (se quiser simplificar e parar de usar Tailwind em botões) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover {
  background: var(--brand-2);
}
.btn-outline {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover {
  background: #f8fafc;
}


/* =========================================================
   Sidebar: topo com usuário (avatar + nome)
   ========================================================= */
.sidebar-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.8);
  text-decoration:none;
  color: inherit;
  margin-bottom: 10px;
}

.sidebar-user:hover{
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.18);
}

.sidebar-avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(15,23,42,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 44px;
}

.sidebar-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.sidebar-initial{
  font-weight:800;
  color:#065f46;
}

.sidebar-user-meta{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width:0;
}

.sidebar-name{
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidebar-sub{
  font-size:12px;
  color: rgba(15,23,42,.55);
  margin-top:2px;
}