/* ====== TOKENS (TEMA CLEAN CLARO) ====== */
:root{
  /* Paleta principal */
  --bg:#f5f5f7;
  --card:#ffffff;
  --panel:#ffffff;
  --stroke:#e0e0e0;

  --text:#111111;
  --muted:#777777;

  /* Compatibilidade legada */
  --blue:#111111;          /* antes azul, agora texto escuro */
  --accent:#222222;
  --accent-soft:#f3f3f3;

  /* Botões / estados */
  --btn:#111111;
  --btn-danger:#b52c3b;
  --hover:#f3f3f3;
  --ok:#1f7a3a;
  --bad:#b52c3b;

  /* Layout */
  --radius:14px;
  --shadow:0 4px 18px rgba(0,0,0,.06);
}

*{
  box-sizing:border-box;
}

html,body{
  height:100%;
}

/* Fonte global: Arial / tema claro */
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 Arial,"Helvetica Neue",Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ====== LAYOUT BASE ====== */

.container{
  max-width:1100px;
  margin:18px auto;
  padding:0 16px;
  width:100%;
}

.page{
  width:100%;
}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 18px;
}

/* Card de largura total (útil para páginas de tabela/listagem) */
.card.full{
  border-radius:0;
  box-shadow:none;
  background:transparent;
  border:0;
  padding-left:clamp(8px,2vw,16px);
  padding-right:clamp(8px,2vw,16px);
}

/* Subnav simples (abaixo do título) */
.subnav{
  margin:0 0 12px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Dropdown simples */
.dd{
  position:relative;
}

.dd-btn{
  padding:8px 12px;
  background:#ffffff;
  color:var(--text);
  border:1px solid var(--stroke);
  border-radius:999px;
  cursor:pointer;
  font-size:.9rem;
}

.dd-menu{
  position:absolute;
  top:42px;
  left:0;
  display:none;
  min-width:220px;
  z-index:5;
  background:#ffffff;
  border:1px solid var(--stroke);
  border-radius:12px;
  box-shadow:var(--shadow);
}

.dd-menu a{
  display:block;
  padding:10px 12px;
  color:var(--text);
  text-decoration:none;
  font-size:.9rem;
}

.dd-menu a:hover{
  background:var(--hover);
}

.dd:hover .dd-menu{
  display:block;
}

/* ====== TABELAS ====== */

.table-responsive{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  background:transparent;
  font-size:.9rem;
}

.table th,
.table td{
  padding:12px 14px;
  border:0;
  vertical-align:top;
}

.table thead th{
  text-align:left;
  color:var(--text);
  font-weight:600;
  border-bottom:1px solid var(--stroke);
}

.table tbody tr:nth-child(even) td{
  background:#fafafa;
}

.table tbody tr:hover td{
  background:var(--hover);
}

.hide-sm{}

/* Tabela empilhada no mobile */
@media (max-width:720px){
  .table.stack thead{
    display:none;
  }
  .table.stack,
  .table.stack tbody,
  .table.stack tr,
  .table.stack td{
    display:block;
    width:100%;
  }
  .table.stack tr{
    background:#ffffff;
    border-radius:12px;
    margin:10px 0;
    padding:8px 10px;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
  }
  .table.stack td{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:8px;
    padding:8px 0;
    white-space:normal;
    border:0;
  }
  .table.stack td::before{
    content:attr(data-th);
    color:var(--muted);
    font-weight:600;
  }
  .table.stack .hide-sm{
    display:none!important;
  }
  .table.stack button,
  .table.stack .btn,
  .table.stack .btn-link{
    width:100%;
    text-align:center;
  }
}

/* ====== BOTÕES / LINKS ====== */

button,
.btn{
  padding:8px 14px;
  background:var(--btn);
  color:#ffffff;
  border:1px solid var(--btn);
  border-radius:999px;
  cursor:pointer;
  font-size:.9rem;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-decoration:none;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}

button:hover,
.btn:hover{
  background:#000000;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transform:translateY(-1px);
}

button.bad,
.btn.bad{
  background:#ffffff;
  color:var(--bad);
  border-color:var(--bad);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

button.bad:hover,
.btn.bad:hover{
  background:#ffe6ea;
}

/* Link-botão discreto (por exemplo em tabelas) */
.btn-link{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:#ffffff;
  color:var(--text);
  text-decoration:none;
  font-size:.85rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

.btn-link:hover{
  background:var(--hover);
  text-decoration:none;
}

/* ====== BADGES / ESTADOS ====== */

.tag,
.badge,
.grade{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--text);
  font-size:.8rem;
}

/* Nota OK */
.grade.ok{
  color:var(--ok);
  background:rgba(31,122,58,.1);
}

/* Aguardando / pendente */
.grade.wait{
  color:#d97706;
  background:rgba(217,119,6,.12);
}

/* ====== FORMULÁRIOS ====== */

input[type="text"],
input[type="date"],
input[type="number"],
input[type="file"],
input[type="email"],
input[type="password"],
select,
textarea{
  width:100%;
  background:#ffffff;
  color:var(--text);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:10px 12px;
  outline:0;
  font-size:.9rem;
}

textarea{
  min-height:96px;
}

/* Layout de colunas para formulários */
.row{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

/* Utilitários de texto */
.muted{
  color:var(--muted);
}

.small{
  font-size:12px;
}

/* ====== HEADER PROFESSOR (.topbar) ====== */

.topbar{
  border-bottom:1px solid var(--stroke);
  background:#ffffff;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:10px 16px;
  flex-wrap:wrap;
}

.topbar a{
  color:var(--text);
  text-decoration:none;
  font-size:.85rem;
}

/* Link de marca (não vira “pill”) */
.topbar .brand{
  font-weight:700;
  margin-right:4px;
  padding:0;
  border-radius:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

/* Nome “Sistema do Professor” um pouco mais forte */
.topbar .brand strong{
  font-size:1rem;
  letter-spacing:.03em;
}

/* Demais links da barra como pills discretos */
.topbar a:not(.brand){
  padding:5px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:#ffffff;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.topbar a:not(.brand):hover{
  background:var(--hover);
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}

/* Empurra login/logout para a direita */
.topbar .spacer{
  flex:1 1 auto;
}

/* Texto “Olá, Professor” */
.topbar-user{
  font-size:.85rem;
  color:var(--muted);
}

/* Logout em tom de “danger” sutil */
.topbar .logout{
  border-color:var(--btn-danger);
  color:var(--btn-danger);
}

/* Login simples, neutro */
.topbar .login{
  border-color:var(--stroke);
  color:var(--text);
}

@media (max-width:600px){
  .topbar{
    padding:10px 12px;
  }
}

/* ====== FOOTER PROFESSOR (.site-footer) ====== */

.site-footer{
  border-top:1px solid var(--stroke);
  background:#ffffff;
  margin-top:32px;
}

.site-footer .inner{
  max-width:1100px;
  margin:0 auto;
  padding:16px 16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--text);
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
}

.site-footer .left{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:220px;
}

.site-footer .sep{
  opacity:.6;
}

.site-footer .muted{
  color:var(--muted);
  font-size:.86rem;
}

.site-footer .right{
  text-align:right;
  flex:0 0 auto;
  min-width:200px;
}

.site-footer .right .small{
  color:var(--muted);
}

@media (max-width:600px){
  .site-footer .inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .site-footer .right{
    text-align:left;
  }
}

/* ====== OVERRIDES GERAIS ====== */

/* Mantém bordas das tabelas quando configuradas acima;
   badges / dropdowns seguem sem borda visível extra */
.tag,
.badge,
.grade,
.btn-link,
.dd-btn,
.dd-menu{
  border-width:1px;
  border-style:solid;
  border-color:transparent;
}
/* Logo no topo: sempre controlado */
.topbar .brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.topbar .brand img{
  height:44px;        /* 👈 ajusta aqui (38px, 44px, 50px...) */
  width:auto;
  max-width:220px;    /* evita estourar pro lado */
  object-fit:contain;
  display:block;
}