/* ============================================================
   FlashCards English — Estilos Globais
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:      #1D9E75;
  --green-lt:   #E1F5EE;
  --green-dk:   #0F6E56;
  --coral:      #D85A30;
  --coral-lt:   #FAECE7;
  --amber:      #BA7517;
  --amber-lt:   #FAEEDA;
  --blue:       #378ADD;
  --blue-lt:    #E6F1FB;
  --purple:     #534AB7;
  --purple-lt:  #EEEDFE;
  --gray-50:    #F7F7F6;
  --gray-100:   #EBEBEA;
  --gray-300:   #C4C3BC;
  --gray-500:   #888780;
  --gray-700:   #444441;
  --gray-900:   #1A1A19;
  --white:      #FFFFFF;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08);
  --font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  font-family: var(--font);
  background: var(--gray-50);
  color: var(--gray-900);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout ---------------------------------------------- */
.container { max-width: 900px; margin: 0 auto; padding: 0 1rem; }
.container--sm { max-width: 480px; margin: 0 auto; padding: 0 1rem; }

/* ---- Navbar ---------------------------------------------- */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  position: sticky; top: 0; z-index: 100;
}
.navbar__inner {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .7rem 1.25rem;
  max-width: 1280px; margin: 0 auto;
}
.navbar__brand {
  font-size: 16px; font-weight: 700; color: var(--green);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; line-height: 1.1; flex-shrink: 0;
}
.navbar__nav   { display: flex; gap: 1.5rem; align-items: center; }
.navbar__nav a { color: var(--gray-700); font-size: 14px; font-weight: 500; }
.navbar__nav a:hover { color: var(--green); text-decoration: none; }
.navbar__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--green-lt); color: var(--green-dk);
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 2px solid var(--green);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--green-lt);
  transition: transform .12s, box-shadow .15s;
}
.navbar__avatar:hover { transform: scale(1.06); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--green); }
.navbar__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Page Header ----------------------------------------- */
.page-header { padding: 2rem 0 1.5rem; }
.page-header h1 { font-size: 24px; font-weight: 600; }
.page-header p  { color: var(--gray-500); margin-top: 4px; }

/* ---- Cards ----------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card--hover:hover { box-shadow: var(--shadow-md); transition: box-shadow .2s; }

/* ---- Buttons --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500;
  cursor: pointer; border: none; transition: all .15s;
}
.btn--primary   { background: var(--green);    color: #fff; }
.btn--primary:hover { background: var(--green-dk); }
.btn--secondary { background: var(--gray-100); color: var(--gray-700); }
.btn--secondary:hover { background: var(--gray-300); }
.btn--danger    { background: var(--coral);    color: #fff; }
.btn--danger:hover { opacity: .88; }
.btn--outline   { background: transparent; border: 1px solid var(--gray-300); color: var(--gray-700); }
.btn--outline:hover { border-color: var(--green); color: var(--green); }
.btn--lg { padding: 12px 28px; font-size: 16px; }
.btn--sm { padding: 6px 14px; font-size: 13px; }
.btn--full { width: 100%; }

/* ---- Forms ----------------------------------------------- */
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--gray-700); margin-bottom: 5px; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 14px; font-family: var(--font);
  background: var(--white); color: var(--gray-900);
  transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(29,158,117,.12);
}
.form-group .hint { font-size: 12px; color: var(--gray-500); margin-top: 4px; }

/* ---- Alerts ---------------------------------------------- */
.alert {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: 1rem;
}
.alert-success { background: var(--green-lt); color: var(--green-dk); }
.alert-error   { background: var(--coral-lt); color: #7A2010; }
.alert-info    { background: var(--blue-lt);  color: #0C447C; }
.alert-warning { background: var(--amber-lt); color: #633806; }

/* ---- Progress Bar ---------------------------------------- */
.progress-bar {
  height: 8px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: var(--green);
  border-radius: 99px;
  transition: width .4s ease;
}

/* ---- Badge ----------------------------------------------- */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
}
.badge--green  { background: var(--green-lt);  color: var(--green-dk); }
.badge--coral  { background: var(--coral-lt);  color: #7A2010; }
.badge--amber  { background: var(--amber-lt);  color: var(--amber); }
.badge--gray   { background: var(--gray-100);  color: var(--gray-700); }
.badge--purple { background: var(--purple-lt); color: var(--purple); }
.badge--blue   { background: var(--blue-lt);   color: #0C447C; }

/* ---- Stat Cards ------------------------------------------ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.stat-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
}
.stat-card__num   { font-size: 26px; font-weight: 600; color: var(--gray-900); }
.stat-card__label { font-size: 12px; color: var(--gray-500); margin-top: 2px; }

/* ---- Flashcard ------------------------------------------- */
.fc-scene { perspective: 1200px; min-height: 240px; cursor: pointer; }
.fc-card-3d {
  position: relative;
  width: 100%;
  min-height: 240px;
  transform-style: preserve-3d;
  transition: transform .5s ease;
}
.fc-card-3d.flipped { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.fc-face--back { transform: rotateY(180deg); }
.fc-word       { font-size: 36px; font-weight: 600; text-align: center; }
.fc-phonetic   { font-size: 15px; color: var(--gray-500); margin-top: 6px; }
.fc-type-badge { margin-top: 10px; }
.fc-definition { font-size: 16px; text-align: center; line-height: 1.6; }
.fc-example    { font-size: 13px; color: var(--gray-500); margin-top: 12px; text-align: center; font-style: italic; }
.fc-hint       { font-size: 12px; color: var(--gray-300); margin-top: 1.5rem; }

.fc-actions { display: flex; gap: 10px; margin-top: 1rem; }
.fc-btn-again   { flex: 1; padding: 11px; border-radius: var(--radius-md); border: 1px solid var(--gray-300); background: var(--white); font-size: 14px; font-weight: 500; cursor: pointer; color: var(--gray-700); }
.fc-btn-hard    { flex: 1; padding: 11px; border-radius: var(--radius-md); border: 1px solid var(--coral); background: var(--white); font-size: 14px; font-weight: 500; cursor: pointer; color: var(--coral); }
.fc-btn-learned { flex: 1; padding: 11px; border-radius: var(--radius-md); border: 1px solid var(--green); background: var(--white); font-size: 14px; font-weight: 500; cursor: pointer; color: var(--green); }
.fc-btn-again:hover   { background: var(--gray-50); }
.fc-btn-hard:hover    { background: var(--coral-lt); }
.fc-btn-learned:hover { background: var(--green-lt); }

/* ---- Auth Pages ------------------------------------------ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, var(--green-lt) 0%, var(--blue-lt) 100%);
}
.auth-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-md);
}
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-logo h1 { font-size: 22px; font-weight: 700; color: var(--green); }
.auth-logo p  { font-size: 13px; color: var(--gray-500); margin-top: 4px; }
.auth-footer  { text-align: center; margin-top: 1.2rem; font-size: 13px; color: var(--gray-500); }

/* ---- Word List ------------------------------------------- */
.word-list { display: flex; flex-direction: column; gap: 8px; }
.word-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
}
.word-item__word   { font-weight: 600; font-size: 15px; flex: 1; }
.word-item__def    { font-size: 13px; color: var(--gray-500); flex: 2; }
.word-item__status { font-size: 12px; margin-left: auto; }

/* ---- Loading --------------------------------------------- */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--gray-100);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 2rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Misc ------------------------------------------------ */
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.text-center { text-align: center; }
.text-muted  { color: var(--gray-500); font-size: 13px; }
.divider     { border: none; border-top: 1px solid var(--gray-100); margin: 1.5rem 0; }
.row         { display: flex; gap: 1rem; }
.row > *     { flex: 1; }

@media (max-width: 600px) {
  .row { flex-direction: column; }
  .fc-word { font-size: 28px; }
  .fc-actions { flex-direction: column; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Admin Panel Styles
   ============================================================ */
.admin-layout { display:flex; min-height:100vh; }
.admin-sidebar {
  width:220px; flex-shrink:0;
  background:var(--gray-900);
  color:#fff;
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh;
  z-index:200; overflow-y:auto;
}
.admin-sidebar__logo {
  padding:1.25rem 1rem 1rem;
  font-size:15px; font-weight:700; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:8px;
}
.admin-sidebar__logo span { color:var(--green); }
.admin-nav { display:flex; flex-direction:column; padding:.75rem 0; flex:1; }
.admin-nav__link {
  padding:.65rem 1.25rem;
  font-size:13.5px; color:rgba(255,255,255,.7);
  display:flex; align-items:center; gap:8px;
  text-decoration:none; transition:background .15s, color .15s;
  border-left:3px solid transparent;
}
.admin-nav__link:hover { background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.admin-nav__link--active { background:rgba(29,158,117,.2); color:var(--green); border-left-color:var(--green); }
.admin-sidebar__footer {
  padding:1rem 1.25rem; font-size:12px; color:rgba(255,255,255,.3);
  border-top:1px solid rgba(255,255,255,.06);
}
.admin-main { margin-left:220px; flex:1; min-width:0; }
.admin-topbar {
  background:var(--white); border-bottom:1px solid var(--gray-100);
  padding:.75rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
}
.admin-topbar__title { font-weight:600; font-size:16px; }
.admin-content { padding:1.5rem; max-width:1200px; }

/* Data Table */
.data-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table thead tr { background:var(--gray-50); }
.data-table th {
  text-align:left; padding:9px 12px;
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--gray-500);
  border-bottom:1px solid var(--gray-100);
}
.data-table td {
  padding:9px 12px;
  border-bottom:1px solid var(--gray-100);
  vertical-align:middle;
}
.data-table tbody tr:hover { background:var(--gray-50); }
.data-table tbody tr:last-child td { border-bottom:none; }

/* Stat Cards Row */
.admin-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:1.5rem; }
.admin-stat {
  background:var(--white); border:1px solid var(--gray-100);
  border-radius:var(--radius-lg); padding:1.1rem 1.25rem;
  display:flex; flex-direction:column; gap:4px;
}
.admin-stat__val  { font-size:28px; font-weight:700; }
.admin-stat__lbl  { font-size:12px; color:var(--gray-500); }
.admin-stat__icon { font-size:22px; margin-bottom:4px; }

/* Filter bar */
.filter-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.filter-row input,
.filter-row select { font-size:13px; padding:6px 10px; border:1px solid var(--gray-300); border-radius:var(--radius-md); background:var(--white); }

/* Action buttons in table */
.tbl-btn {
  padding:4px 10px; border-radius:var(--radius-sm);
  font-size:12px; font-weight:500; cursor:pointer;
  border:1px solid var(--gray-300); background:var(--white);
  color:var(--gray-700); transition:all .15s; text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
}
.tbl-btn:hover { border-color:var(--green); color:var(--green); text-decoration:none; }
.tbl-btn--danger:hover { border-color:var(--coral); color:var(--coral); }
.tbl-btn--primary { background:var(--green); color:#fff; border-color:var(--green); }
.tbl-btn--primary:hover { background:var(--green-dk); color:#fff; }

/* Pagination */
.pagination { display:flex; gap:4px; justify-content:center; margin-top:1rem; flex-wrap:wrap; }
.page-btn {
  padding:5px 11px; border-radius:var(--radius-sm);
  border:1px solid var(--gray-300); background:var(--white);
  color:var(--gray-700); font-size:13px; cursor:pointer;
  text-decoration:none; transition:all .15s;
}
.page-btn.active  { background:var(--green); color:#fff; border-color:var(--green); }
.page-btn:hover:not(.active) { border-color:var(--green); color:var(--green); text-decoration:none; }

/* Modal */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:500; display:flex; align-items:center; justify-content:center;
  padding:1rem; opacity:0; pointer-events:none; transition:opacity .2s;
}
.modal-backdrop.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--white); border-radius:var(--radius-xl);
  padding:1.75rem; width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto;
  transform:translateY(20px); transition:transform .2s;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.modal-backdrop.open .modal { transform:translateY(0); }
.modal__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.modal__title  { font-size:17px; font-weight:600; }
.modal__close  { font-size:20px; cursor:pointer; color:var(--gray-500); background:none; border:none; line-height:1; padding:2px 6px; border-radius:4px; }
.modal__close:hover { background:var(--gray-100); }

/* Chart placeholder */
.chart-wrap { position:relative; }

@media (max-width:768px) {
  .admin-sidebar { width:100%; height:auto; position:relative; flex-direction:row; }
  .admin-main { margin-left:0; }
  .admin-nav { flex-direction:row; overflow-x:auto; padding:0; }
  .admin-nav__link { padding:.6rem .9rem; white-space:nowrap; border-left:none; border-bottom:3px solid transparent; }
  .admin-nav__link--active { border-bottom-color:var(--green); border-left:none; }
  .admin-layout { flex-direction:column; }
  .admin-content { padding:1rem; }
}

/* ============================================================
   MOBILE NAVIGATION — Sidebar Drawer (right to left)
   Visible only on mobile (≤ 768px)
   ============================================================ */

/* ---- Shared navbar tweaks -------------------------------- */
.navbar__badge {
  position: absolute;
  top: -5px; right: -9px;
  background: var(--coral);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 99px;
  padding: 0 5px;
  line-height: 16px;
  pointer-events: none;
}
.navbar__link         { color: var(--gray-700); font-size: 13.5px; font-weight: 500; text-decoration: none; position: relative; white-space: nowrap; }
.navbar__link:hover   { color: var(--green); text-decoration: none; }
.navbar__link.active  { color: var(--green); }
.navbar__link--amber  { color: var(--amber) !important; }
.navbar__link--admin  { color: var(--amber); font-weight: 600; }
.navbar__link--logout { color: var(--gray-500); font-size: 13px; }

/* Desktop nav: always flex row */
.navbar__nav--desktop {
  display: flex;
  gap: .8rem;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;              /* permite encolher dentro do inner */
  overflow-x: auto;         /* rola só se faltar espaço (telas estreitas) */
  scrollbar-width: none;    /* Firefox: esconde a barra */
  padding-bottom: 1px;
}
.navbar__nav--desktop::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.navbar__nav--desktop > * { flex-shrink: 0; }                /* itens não encolhem */

/* Mobile controls: hidden on desktop */
.navbar__mobile-controls {
  display: none;
  align-items: center;
  gap: 10px;
}
.navbar__avatar--mobile {
  display: flex;
}

/* ---- Hamburger button ------------------------------------ */
.navbar__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 44px;       /* larger tap target (Apple HIG: min 44px) */
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 13px 9px; /* center the 18px icon in 44px box */
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* prevent 300ms delay on iOS */
  user-select: none;
  -webkit-user-select: none;
  transition: background .12s;
}
.navbar__hamburger {
  border: 1px solid var(--gray-100);
  background: var(--white);
}
.navbar__hamburger:hover  { background: var(--gray-50); border-color: var(--green); }
.navbar__hamburger:active { background: var(--gray-100); }
.hamburger__bar {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--gray-900);
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.28s ease;
  transform-origin: center;
  pointer-events: none;
}

/* Hamburger → X animation */
.navbar__hamburger.is-active .hamburger__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.navbar__hamburger.is-active .hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar__hamburger.is-active .hamburger__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---- Backdrop overlay ------------------------------------ */
.mobile-nav-backdrop {
  /* display controlled by JS to allow CSS transition */
  display: none;
  position: relative;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 299;
  opacity: 0;
  transition: opacity 0.28s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.mobile-nav-backdrop.is-visible {
  opacity: 1;
}

/* ---- Drawer panel ---------------------------------------- */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--white);
  z-index: 300;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 32px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0, 0.07, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-nav-drawer.is-open {
  transform: translateX(0);
}

/* ---- Drawer header --------------------------------------- */
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  background: linear-gradient(135deg, var(--green-lt), var(--blue-lt));
  flex-shrink: 0;
}
.mobile-nav__user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mobile-nav__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.6);
}
.mobile-nav__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mobile-nav__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.mobile-nav__plan {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 1px;
}
.mobile-nav__close {
  background: rgba(0,0,0,.06);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
  flex-shrink: 0;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.mobile-nav__close:hover  { background: rgba(0,0,0,.12); }
.mobile-nav__close:active { background: rgba(0,0,0,.20); }

/* ---- Drawer links ---------------------------------------- */
.mobile-nav__links {
  flex: 1;
  padding: .5rem 0;
  overflow-y: auto;
}
.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-700);
  text-decoration: none;
  transition: background .12s;
  position: relative;
  border-left: 3px solid transparent;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  min-height: 52px; /* comfortable touch target */
}
.mobile-nav__link:hover,
.mobile-nav__link:active {
  background: var(--gray-50);
  text-decoration: none;
  color: var(--green);
}
.mobile-nav__link.active {
  background: var(--green-lt);
  color: var(--green);
  border-left-color: var(--green);
  font-weight: 600;
}
.mobile-nav__icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.mobile-nav__badge {
  margin-left: auto;
  background: var(--coral);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.mobile-nav__pill {
  margin-left: auto;
  background: var(--amber-lt);
  color: var(--amber);
  font-size: 10px;
  font-weight: 700;
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
}
.mobile-nav__link--amber {
  color: var(--amber);
}
.mobile-nav__link--amber:hover {
  color: var(--amber);
  background: var(--amber-lt);
}
.mobile-nav__link--admin {
  color: var(--amber);
  font-weight: 600;
}
.mobile-nav__link--logout {
  color: var(--coral);
}
.mobile-nav__link--logout:hover {
  background: var(--coral-lt);
  color: var(--coral);
}
.mobile-nav__divider {
  height: 1px;
  background: var(--gray-100);
  margin: 4px 0;
}

/* ---- Drawer footer --------------------------------------- */
.mobile-nav__footer {
  padding: .75rem 1rem;
  border-top: 1px solid var(--gray-100);
  text-align: center;
  flex-shrink: 0;
}

/* ---- Prevent body scroll when drawer open ---------------- */
body.nav-open {
  overflow: hidden;
  touch-action: none;
}

/* ============================================================
   RESPONSIVE BREAKPOINT — apply mobile nav below 768px
   ============================================================ */
@media (max-width: 768px) {

  /* Hide desktop nav */
  .navbar__nav--desktop {
    display: none !important;
  }

  /* Show mobile controls (tema + avatar) */
  .navbar__mobile-controls {
    display: flex;
  }

  /* Hamburger oculto no mobile — o menu é aberto pela bottom nav (☰ Menu) */
  .navbar__hamburger {
    display: none !important;
  }

  /* Show backdrop */
  .mobile-nav-backdrop {
    display: block;
  }

  /* Tighten navbar padding on mobile */
  .navbar__inner {
    padding: .65rem 1rem;
  }

  /* Page layout tweaks */
  .container      { padding: 0 .75rem; }
  .container--sm  { padding: 0 .75rem; }
  .page-header    { padding: 1.25rem 0 1rem; }
  .page-header h1 { font-size: 20px; }

  /* Cards */
  .row { flex-direction: column; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Flashcard */
  .fc-word    { font-size: 26px; }
  .fc-actions { flex-direction: column; }

  /* Tables scroll horizontally */
  .data-table-wrap { overflow-x: auto; }

  /* Forms */
  .form-group input,
  .form-group select { font-size: 16px; } /* prevent iOS zoom */

  /* Admin sidebar mobile */
  .admin-sidebar { width: 100%; height: auto; position: relative; }
  .admin-main    { margin-left: 0; }
  .admin-nav     { flex-direction: row; overflow-x: auto; padding: 0; }
  .admin-nav__link {
    padding: .6rem .9rem;
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .admin-nav__link--active {
    border-bottom-color: var(--green);
    border-left: none;
  }
  .admin-layout  { flex-direction: column; }
  .admin-content { padding: .75rem; }
}

/* Extra small screens */
@media (max-width: 420px) {
  .navbar__brand { font-size: 14px; }
  .mobile-nav-drawer { width: 90vw; }
}

/* ============================================================
   THEME TOGGLE (claro/escuro)
   ============================================================ */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--gray-100);
  background: var(--white); color: var(--gray-700);
  cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  transition: background .15s, transform .1s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover  { background: var(--gray-50); border-color: var(--green); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle__icon  { pointer-events: none; }

/* ============================================================
   DARK MODE — redefine as variáveis para tema escuro
   ============================================================ */
html { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --green-lt:  rgba(29,158,117,.18);
  --coral-lt:  rgba(216,90,48,.20);
  --amber-lt:  rgba(186,117,23,.22);
  --blue-lt:   rgba(55,138,221,.18);
  --purple-lt: rgba(83,74,183,.22);
  --gray-50:   #12171a;   /* fundo da página */
  --gray-100:  #2a3238;   /* bordas */
  --gray-300:  #3c474e;
  --gray-500:  #9aa6ad;   /* texto suave */
  --gray-700:  #c9d3d9;   /* texto */
  --gray-900:  #eef2f4;   /* títulos */
  --white:     #1b2227;   /* superfícies/cards */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,.55);
}
:root[data-theme="dark"] body { background: var(--gray-50); }
/* No escuro, a inicial do avatar fica em verde claro p/ contraste */
:root[data-theme="dark"] .navbar__avatar { color: var(--green); }