/*
 * Study SRS — small polish layer on top of Material Dashboard.
 * Kept intentionally minimal: real content/hierarchy work happens in
 * the templates via the theme's own utility classes; this file only
 * adds motion + a handful of touches the base theme doesn't have.
 */

/* Cards lift slightly on hover — the base theme has no hover state at
   all on plain content cards, which reads as static/dated on a modern
   dashboard. */
.card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}

/* Buttons: a touch of lift + shadow softening, consistent with the
   card hover above rather than the theme's flat default. */
.btn {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover {
  transform: translateY(-1px);
}

/* Icon action buttons in table rows (edit/delete) — round, subtle
   background on hover so they read as clickable controls rather than
   plain inline text links. */
.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
button.icon-action {
  /* icon-action started life as an <a> only — reset the <button>
     defaults (border/background) so the comment trigger in the
     flashcard list matches edit/delete exactly. */
  border: none;
  background: none;
  cursor: pointer;
}
.icon-action:hover {
  background-color: rgba(0, 0, 0, 0.06);
  transform: scale(1.08);
}
.icon-action .material-symbols-rounded {
  font-size: 1.125rem;
}

/* Page content fades/slides in on load — cheap, GPU-only, and matches
   the `fadeIn3 fadeInBottom` treatment the theme already uses on its
   own login card, just applied more broadly. */
@keyframes srsFadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* backwards, não both: o "to" é o estado normal do elemento, e um
   transform que sobra depois da animação vira bloco de contenção de
   todo position:fixed lá dentro (o menu ⋮ da Buscar, com Popper em
   strategy fixed, abria milhares de pixels fora da tela). */
.srs-fade-in {
  animation: srsFadeInUp 0.35s ease backwards;
}
.srs-fade-in.srs-delay-1 {
  animation-delay: 0.05s;
}
.srs-fade-in.srs-delay-2 {
  animation-delay: 0.1s;
}

/* Empty-state blocks (no data yet) — the theme has no pattern for
   this at all; plain left-aligned text reads as an error/incomplete
   page rather than an intentional "nothing here yet". */
.srs-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #8392ab;
}
.srs-empty-state .material-symbols-rounded {
  font-size: 3rem;
  opacity: 0.35;
  display: block;
  margin: 0 auto 0.75rem;
}

/* Respect reduced-motion preferences — the hover/entry animations
   above are cosmetic, never load-bearing for reading the page. */
@media (prefers-reduced-motion: reduce) {
  .card,
  .btn,
  .icon-action,
  .srs-fade-in,
  .fc-result-header,
  .fc-card {
    animation: none !important;
    transition: none !important;
  }
}

/* Planning calendar (srs/planning.html) — day-column/month-grid view
   replacing the old separate weekly/monthly list pages. */
.srs-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}
.srs-calendar-day {
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #eee;
  min-height: 7rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.srs-calendar-day.is-today {
  border: 2px solid #344767;
}
.srs-calendar-day.is-outside-month {
  opacity: 0.4;
}
.srs-calendar-day-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #8392ab;
  display: flex;
  justify-content: space-between;
}
.srs-calendar-day.is-today .srs-calendar-day-header {
  color: #344767;
}
.srs-calendar-block {
  border-radius: 0.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.2;
}
.srs-calendar-block .name {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.srs-calendar-block .minutes {
  opacity: 0.75;
}
/* T14: book (Review) vs. style (Flashcard) icon — same subject color,
   distinct kind, so two items sharing a subject don't look identical. */
.srs-item-kind-icon {
  opacity: 0.65;
}
.srs-calendar-block.is-done {
  opacity: 0.55;
  text-decoration: line-through;
}
/* Monthly view: compact chips, no card padding/min-height like weekly */
.srs-calendar.is-monthly .srs-calendar-day {
  min-height: 5.5rem;
}
.srs-calendar.is-monthly .srs-calendar-block {
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
}

/* Pastel per-subject palette (10 colors, cycled by subject id) —
   background + a matching darker text color for contrast. */
.subject-color-0 { background: #fce4ec; color: #ad1457; }
.subject-color-1 { background: #e3f2fd; color: #1565c0; }
.subject-color-2 { background: #fff8e1; color: #f9a825; }
.subject-color-3 { background: #eceff1; color: #37474f; }
.subject-color-4 { background: #e0f7fa; color: #00838f; }
.subject-color-5 { background: #fbe9e7; color: #d84315; }
.subject-color-6 { background: #ede7f6; color: #5e35b1; }
.subject-color-7 { background: #e8f5e9; color: #2e7d32; }
.subject-color-8 { background: #fff3e0; color: #ef6c00; }
.subject-color-9 { background: #f3e5f5; color: #8e24aa; }

/* Fit the grid to the viewport instead of growing the page — the
   founder specifically doesn't want a page scrollbar under the
   calendar. 260px accounts for the topbar/breadcrumb + page header +
   period toggle + prev/next row + padding above the grid; if a day
   genuinely has more blocks than its cell can show, that one cell
   scrolls internally (overflow-y: auto below) rather than the page. */
.srs-calendar-fit {
  height: calc(100vh - 260px);
  min-height: 22rem;
  display: flex;
}
.srs-calendar-fit .srs-calendar {
  flex: 1;
  grid-auto-rows: 1fr;
}
.srs-calendar-fit .srs-calendar-day {
  min-height: 0; /* let a grid/flex child shrink below its content size instead of forcing the row taller */
}
/* Only the items scroll now, not the header — a day header used to be
   able to scroll out of view in a busy cell along with everything
   else, which meant "click here to see the rest" (the day-modal
   feature below) had nothing stable to click on the day you'd most
   want it for. */
.srs-calendar-day-items {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.srs-day-header-clickable {
  cursor: pointer;
  border-radius: 0.4rem;
  transition: background-color 0.12s ease;
}
.srs-day-header-clickable:hover {
  background: rgba(52, 71, 103, 0.08);
}

/* "Ver dia inteiro" modal — day-modal.js clones a day cell's items in
   here, unclipped. Plain fixed-position overlay + backdrop, same
   pattern the Teoria reader's mobile sidebar already uses (no
   Bootstrap JS modal dependency). */
.srs-day-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.4);
}
.srs-day-modal-backdrop.show {
  display: block;
}
.srs-day-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1060;
  background: #fff;
  border-radius: 1rem;
  width: min(28rem, 92vw);
  max-height: 80vh;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
  flex-direction: column;
  overflow: hidden;
}
.srs-day-modal.show {
  display: flex;
}
.srs-day-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.srs-day-modal-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.srs-day-modal-body .srs-calendar-block {
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
}

/* srs:quick_review's resurfaced Again/Hard/Good/Easy buttons
   (2026-08-28, founder's explicit call — templates/srs/includes/
   _quick_review_action.html). Hidden by default: the small calendar
   grid cells (srs-calendar-block, ~0.65-0.72rem font) have no room for
   4 buttons without wrecking the calendar's at-a-glance density. Only
   shown where there's real room — the "Ver dia inteiro" modal (which
   clones the SAME grid markup, hence a CSS-only toggle instead of
   separate markup) and the mobile agenda list, both un-cramped. */
.srs-quick-review {
  display: none;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.srs-day-modal-body .srs-quick-review,
.srs-calendar-agenda-view .srs-quick-review {
  display: flex;
}
.srs-quick-review-btn {
  width: 1.75rem;
  height: 1.75rem;
}
.srs-quick-review-btn .material-symbols-rounded {
  font-size: 1rem;
}

/* Grid view (desktop/tablet) vs. agenda view (mobile) — a 7-column
   calendar grid has no readable way to fit on a phone, so mobile gets
   a chronological list instead (same pattern Google Calendar/etc use).
   Default (mobile-first): agenda shown, grid hidden. */
.srs-calendar-grid-view {
  display: none;
}
.srs-calendar-agenda-view {
  display: block;
}
@media (min-width: 768px) {
  .srs-calendar-grid-view {
    display: block;
  }
  .srs-calendar-agenda-view {
    display: none;
  }
}

/* Flashcards review loop (flashcards/review_loop.html) — built from
   the approved wireframe (design review, 4 states: question, correct
   result, wrong result + comentário, empty queue). Subject badge uses
   .subject-color-N (defined above), not a fixed color, per design
   review Pass 5. */
.fc-wrap {
  max-width: 32rem;
  margin: 0 auto;
}
/* Header da tela de revisão (2026-08-29, founder's explicit request:
   "preciso do mesmo header na tela Revisar Flashcards") — largura
   casada com .fc-wrap logo abaixo (a coluna do card é o que este
   header apresenta, não o container inteiro da página), não a largura
   cheia que as telas de lista usam pro mesmo header.

   fc-header-wrap (position:relative) é o que dá ao botão de tela
   cheia (.srs-focus-toggle, filho DELE, irmão de .fc-header-card) um
   ancestral posicionado do MESMO tamanho do header — sem isso, um
   position:absolute nesse botão seria relativo ao .container-fluid
   inteiro (largura da página), não aos 32rem estreitos do header,
   jogando o botão pro canto direito da tela, longe do header.

   .fc-header-card escondido no modo tela cheia junto com o resto do
   "chrome" (#sidenav-main/.fc-subject-filter, ver a regra
   body.srs-focus-mode mais abaixo) — .fc-progress continua visível
   nos dois modos, então esconder o header aqui não tira nenhuma
   informação de quem está numa sessão imersiva, só a moldura. */
.fc-header-wrap {
  position: relative;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}
body.srs-focus-mode .fc-header-card {
  display: none !important;
}
.fc-progress {
  text-align: center;
  font-size: 0.8rem;
  color: #8392ab;
  margin-bottom: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fc-progress-wrap {
  margin-bottom: 1rem;
}
.fc-progress-bar-track {
  height: 4px;
  max-width: 14rem;
  margin: 0 auto;
}
.fc-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
  overflow: hidden;
  /* overflow:hidden alone isn't enough here: .fc-result-header below
     runs fcResultPulse (a transform: scale() animation) on load, and
     Safari/WebKit (iOS, some Chrome/Android builds too) is known to
     let an animated/transformed child briefly — sometimes durably —
     escape a border-radius'd ancestor's overflow clip, rendering with
     square corners and no visible shadow (looks like the radius/
     shadow rules aren't applied at all). -webkit-mask-image forces a
     real compositor clip mask instead of relying on the paint-time
     overflow clip, which those engines respect correctly. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
/* Review loop header — flashcard info (assunto/tópico/estado FSRS),
   shown above every state (pergunta, follow-up de dificuldade,
   resultado), not just the empty .fc-badge-wrap the subject badge
   used to sit alone in. */
.fc-header {
  margin-bottom: 0.75rem;
}
.fc-header-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: 0.4rem;
}
.fc-header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
  justify-content: center;
  font-size: 0.75rem;
  color: #8392ab;
  font-weight: 600;
}
.fc-header-stats .material-symbols-rounded {
  font-size: 0.95rem;
  margin-right: 0.2rem;
  vertical-align: text-bottom;
}
.fc-header-external {
  font-family: monospace;
  opacity: 0.75;
}
.fc-header-exam {
  text-align: center;
  font-size: 0.72rem;
  color: #8392ab;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.4rem;
}
.fc-question {
  padding: 1.75rem;
  text-align: justify;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
  min-height: 5rem;
}
/* Imagens do enunciado (2026-09-23) — acima do texto, centradas. Teto
   de altura pra uma figura alta não empurrar a afirmação a julgar pra
   fora da tela; a imagem inteira abre no clique (link em volta). */
.fc-question-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.fc-question-image {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 55vh;
  object-fit: contain;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  background: #fff;
}
.fc-image-manage-thumb {
  max-width: 100%;
  max-height: 14rem;
  object-fit: contain;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  background: #fff;
}
/* Recuperação ativa (2026-09-02) — caixa opcional entre a pergunta e
   os botões Certo/Errado, ver flashcards/templates/flashcards/
   includes/_recall_box.html's próprio comentário pro porquê. */
.fc-recall-box {
  padding: 0 1.5rem 1rem;
}
.fc-recall-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #67748e;
  margin-bottom: 0.35rem;
}
.fc-recall-input {
  width: 100%;
  resize: vertical;
  border: 1px solid #d2d6da;
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
}
.fc-recall-input:focus {
  outline: none;
  border-color: #17c1e8;
}
/* Confiança pré-resposta (2026-09-02, Phase 2) — ver
   _confidence_selector.html's próprio comentário. */
.fc-confidence-box {
  padding: 0 1.5rem 1rem;
}
.fc-confidence-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #67748e;
  margin-bottom: 0.5rem;
}
.fc-confidence-options {
  display: flex;
  gap: 0.5rem;
}
.fc-confidence-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 1px solid #d2d6da;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #67748e;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.fc-confidence-option input {
  margin: 0;
  accent-color: #17c1e8;
}
.fc-confidence-option:has(input:checked) {
  border-color: #17c1e8;
  color: #17c1e8;
  background: rgba(23, 193, 232, 0.06);
}
/* correct_answer's two-button Certo/Errado picker (2026-09-03,
   /plan-design-review live audit) — FlashcardForm.correct_answer's
   docstring has the why. Same structural pattern as .fc-confidence-*
   above (native radio drives state, :has() drives the visible
   selection), but colored Success/Alert (DESIGN.md's own palette —
   #82d616/#ea0606) instead of Info, since unlike confidence this
   isn't a neutral 3-way scale, it's the same Certo=right/Errado=wrong
   binary the review loop's own buttons already teach in this exact
   green/red. Radio input rendered visually hidden (not display:none —
   a hidden-but-focusable input keeps keyboard/tab navigation and
   screen readers working, same posture as srs-visually-hidden
   elsewhere in this stylesheet) since the whole label is the click
   target. */
.fc-correct-toggle {
  display: flex;
  gap: 0.5rem;
}
.fc-correct-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  border: 1px solid #d2d6da;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #67748e;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.fc-correct-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.fc-correct-option-certo:has(input:checked) {
  border-color: #82d616;
  color: #82d616;
  background: rgba(130, 214, 22, 0.08);
}
.fc-correct-option-errado:has(input:checked) {
  border-color: #ea0606;
  color: #ea0606;
  background: rgba(234, 6, 6, 0.06);
}
.fc-answers {
  display: flex;
  gap: 0.75rem;
  padding: 0 1.5rem 1.75rem;
}
.fc-btn {
  flex: 1;
  padding: 1rem;
  border-radius: 0.75rem;
  border: none;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: transform 0.12s ease;
}
/* Elevação sutil em vez de gradiente (2026-09-10, redesign "mais
   moderna e profissional") — o "solid + sombra que cresce no hover" é
   o que dá peso de botão primário hoje; o gradiente de duas cores era
   o que fazia esses botões lerem como demo de template. */
.fc-btn {
  box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.12);
}
.fc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.16);
}
/* Certo/Errado: cor CHAPADA, não `linear-gradient(310deg, ...)` (a
   assinatura visual do Material Dashboard, mesma coisa já removida do
   dashboard/sidebar nesta mesma leva). Cada cor aqui é a PARADA MAIS
   ESCURA do gradiente que estava no lugar (#17ad37 de
   #17ad37→#98ec2d, #ea0606 de #ea0606→#ff667c), não uma cor nova:
   mantém a identidade verde/vermelho que o usuário já associa a
   Certo/Errado e, de quebra, melhora o contraste do texto branco — a
   metade clara do gradiente (#98ec2d lima, #ff667c rosa) era
   justamente onde "branco sobre cor" ficava mais fraco de ler. */
.fc-btn-certo {
  background: #17ad37;
  color: #fff;
}
.fc-btn-errado {
  background: #ea0606;
  color: #fff;
}
/* Difícil/Bom/Fácil follow-up — 3 buttons instead of 2 in the same
   32rem-max-width card, so a slightly smaller font keeps them from
   feeling cramped on a phone. Cores próprias (2026-09-10) em vez das
   utilities bg-gradient-warning/success/info do tema, pelo mesmo
   motivo dos dois botões acima; a paleta é a do DESIGN.md (#fb8c00
   alerta suave, #17ad37 sucesso, #17c1e8 info) — "Bom" divide o verde
   com "Certo" de propósito, é o mesmo significado. */
.fc-btn-dificil {
  background: #fb8c00;
  color: #fff;
}
.fc-btn-bom {
  background: #17ad37;
  color: #fff;
}
.fc-btn-facil {
  background: #17c1e8;
  color: #fff;
}
.fc-answers-triple .fc-btn {
  font-size: 0.9rem;
  padding: 0.85rem 0.5rem;
}
/* .fc-answers only has bottom/side padding (padding: 0 1.5rem 1.75rem) —
   fine for the pergunta state, where it sits right under the plain
   question text. Here it sits right under the colored .fc-result-header
   banner instead, and with no top padding the buttons touch the banner
   with zero breathing room. */
.fc-answers-triple {
  padding-top: 1.25rem;
}
.fc-header-comment {
  text-align: center;
  margin-top: 0.5rem;
}
.fc-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.fc-filter-form select {
  width: auto;
  min-width: 8rem;
}
/* Question/answer "edit" triggers — corrections for import noise
   (flashcards/pdf_import.py's known OCR/ligature quirks). The
   question trigger sits above the question text itself (only shown
   while the question is active); the answer trigger only ever
   renders in states where the user has already answered (awaiting
   the difficulty follow-up, or the graded result), never earlier —
   see flashcard_answer_update's docstring for why that matters. */
.fc-question-edit-trigger,
.fc-answer-edit-trigger {
  text-align: end;
  padding: 0.5rem 0.75rem 0;
}
.fc-answer-edit-trigger-overlay {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  padding: 0;
}
.fc-answer-edit-trigger-overlay .icon-action {
  color: #fff;
}
.fc-answer-edit-trigger-overlay .icon-action:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
.fc-result-subtext {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  opacity: 0.9;
}
.fc-result-header {
  position: relative;
  padding: 1.5rem;
  text-align: center;
  /* T13 (design review Pass 3): a subtle pulse on the result banner —
     load-bearing feedback (correct/wrong) is the icon+text, which
     render instantly; this is purely a micro-reinforcement flourish on
     top, which is exactly what the reduced-motion override above
     strips without losing any information. */
  animation: fcResultPulse 0.4s ease;
}
@keyframes fcResultPulse {
  0% {
    transform: scale(0.96);
    opacity: 0;
  }
  60% {
    transform: scale(1.02);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
/* Mesma troca de gradiente→chapado dos botões acima, mesmas duas cores
   (as paradas escuras dos gradientes que estavam aqui) — o banner e o
   botão que levou até ele passam a falar exatamente a mesma cor. */
.fc-result-header.correct {
  background: #17ad37;
}
.fc-result-header.wrong {
  background: #ea0606;
}
.fc-result-header .material-symbols-rounded {
  font-size: 2.5rem;
  color: #fff;
}
.fc-result-header p {
  color: #fff;
  font-weight: 700;
  margin: 0.25rem 0 0;
  font-size: 1.1rem;
}
.fc-result-body {
  padding: 1.5rem;
}
.fc-correct-answer {
  background: #f8f9fa;
  border-radius: 0.6rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.fc-correct-answer .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #8392ab;
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}
.fc-comment-box {
  background: #fff8db;
  border: 1px solid #e0c200;
  border-radius: 0.6rem;
  padding: 1rem;
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
  display: none;
  /* 2026-09-05, founder's explicit request: "preciso que o texto
     exibido no bloco comentário seja justificado" — text-align:
     justify only affects wrapped multi-line paragraphs (a short
     one-liner looks identical either way), so this is safe to apply
     unconditionally. */
  text-align: justify;
}
.fc-comment-box.show {
  display: block;
}
.fc-result-actions {
  display: flex;
  gap: 0.75rem;
}
.fc-empty-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
  padding: 3rem 1.5rem;
  text-align: center;
  color: #8392ab;
}
.fc-empty-card .material-symbols-rounded {
  font-size: 3rem;
  opacity: 0.35;
  display: block;
  margin: 0 auto 0.75rem;
}

/* Pop-up "meta do assunto atingida" (2026-08-29, founder's explicit
   request) — a sibling of .fc-wrap (see review_loop.html's own
   comment for why), toggled by static/js/review-loop-ajax.js.
   Home-grown fixed overlay + backdrop, not Bootstrap's .modal: this
   element is never re-created by the AJAX swap (only .fc-wrap is —
   see swapContent), it's just shown/hidden/repopulated in place, so
   there's no .modal-backdrop lifecycle (show/hide/dispose) to keep in
   sync across swaps — plain CSS display toggling has nothing to get
   out of sync. z-index above .fc-wrap's own fixed-mode chrome
   (srs-focus-mode's edge-to-edge layer) so it can interrupt focus
   mode too, not just the normal screen. */
.fc-plan-limit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(52, 71, 103, 0.65);
}
.fc-plan-limit-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3);
  padding: 2rem 1.75rem;
  max-width: 24rem;
  width: 100%;
  text-align: center;
}
.fc-plan-limit-icon {
  font-size: 2.75rem;
  color: #fb8c00;
  display: block;
  margin: 0 auto 0.5rem;
}

/* Login page (accounts/login.html) — split-panel layout (2026-09-10,
   founder's explicit request: "mais moderna e profissional"). Replaced
   the vendor theme's centered-card-over-illustration pattern (which
   used a hand-drawn/Comic-Sans SVG background — read as a template
   demo, not a serious product) with a 2-column shell: brand/value-prop
   on the left, form on the right. No new image asset — the brand panel
   is pure CSS (gradient + dot grid), same "reuse the theme's own
   utilities before inventing new chrome" posture as the rest of
   DESIGN.md. `layouts/base-auth.html`'s own floating navbar
   (`includes/navigation-auth.html`, vendor markup) is hidden on this
   page specifically (see `body.srs-auth-login .navbar` below) — its
   only content here would be a duplicate "Study SRS" wordmark sitting
   on top of this page's own brand mark. */
.srs-auth-shell {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

/* The vendor `layouts/base-auth.html` always renders its own floating
   navbar (`includes/navigation-auth.html`) above `{% block content %}`
   — on the login page specifically that navbar's ONLY content is the
   "Study SRS" wordmark (no links: the user isn't authenticated, and
   the template already hides "Entrar" while ON /accounts/login/), so
   it's pure duplicate chrome sitting on top of this page's own brand
   mark below. `force_password_change.html` uses the same base layout
   but for an AUTHENTICATED user (that navbar shows a real "Dashboard"
   link there), so the fix is scoped to this page's own body class, not
   a blanket rule on `nav.navbar`. */
body.srs-auth-login .navbar.navbar-expand-lg.blur {
  display: none;
}

.srs-auth-brand {
  flex: 1 1 42%;
  min-width: 320px;
  background: linear-gradient(135deg, #1a2035 0%, #344767 55%, #1a2035 100%);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0),
    linear-gradient(135deg, #1a2035 0%, #344767 55%, #1a2035 100%);
  background-size: 28px 28px, auto;
  display: flex;
  align-items: center;
  padding: 4rem 3.5rem;
  color: #fff;
}
.srs-auth-brand-inner {
  max-width: 30rem;
  margin: 0 auto;
}
.srs-auth-brand-mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2.5rem;
}
.srs-auth-brand-mark .material-symbols-rounded {
  font-size: 1.75rem;
}
.srs-auth-brand-title {
  /* Explicit color, not inherited — the theme's own h1 rule sets a
     hardcoded dark color with higher effective priority than an
     inherited value, found live (mobile screenshot showed this
     heading rendering dark-on-dark, unreadable, while the sibling
     .srs-auth-brand-subtitle right below it — which sets its own
     color instead of inheriting — rendered correctly white). */
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 1rem;
}
.srs-auth-brand-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  margin-bottom: 2.5rem;
}
.srs-auth-brand-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.srs-auth-brand-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}
.srs-auth-brand-features .material-symbols-rounded {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
  color: #3fc8e8;
}

.srs-auth-form-panel {
  flex: 1 1 58%;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: #fff;
}
.srs-auth-form-inner {
  width: 100%;
  max-width: 24rem;
}
.srs-auth-form-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #344767;
  margin-bottom: 2rem;
}
.srs-auth-form-header .material-symbols-rounded {
  font-size: 1.5rem;
}
.srs-auth-form-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #344767;
  margin-bottom: 0.35rem;
}
.srs-auth-form-lede {
  color: #8392ab;
  font-size: 0.875rem;
  margin-bottom: 1.75rem;
}
.srs-auth-form-footnote {
  text-align: center;
  color: #8392ab;
  font-size: 0.8rem;
  margin-top: 1.75rem;
  margin-bottom: 0;
}

/* Mobile: brand panel becomes a compact top band instead of a full
   column (still visible — keeps the identity, doesn't fight the form
   for the viewport). Feature list drops (redundant with the form being
   right there) and the form panel's own header takes over the wordmark
   (`.d-lg-none` in the template). */
@media (max-width: 991.98px) {
  .srs-auth-shell {
    flex-direction: column;
  }
  .srs-auth-brand {
    flex: 0 0 auto;
    padding: 2.5rem 1.5rem;
    text-align: center;
  }
  .srs-auth-brand-inner {
    margin: 0 auto;
  }
  .srs-auth-brand-mark {
    justify-content: center;
    margin-bottom: 1rem;
  }
  .srs-auth-brand-features {
    display: none;
  }
  .srs-auth-form-panel {
    padding: 3rem 1.5rem 3rem;
  }
}

/* Login page (accounts/login.html) — leading icon sits as a flex
   sibling of .input-group.input-group-outline, not inside it, on
   purpose: that container's floating-label animation (form-label's
   :before/:after "notch" cut into the outline) is positioned off the
   input's own default padding, so changing the input's padding-left
   to make room for an overlaid icon would misalign the label/notch.
   A sibling column is zero-risk instead — the label/input markup
   stays exactly what UserScopedFormMixin/MaterialFormControlMixin
   already render everywhere else in the app. */
.srs-input-icon {
  color: #8392ab;
  font-size: 1.3rem;
  width: 2rem;
  text-align: center;
  flex-shrink: 0;
}

/* Password toggle sits INSIDE the input-group (absolute, right edge)
   instead — that side has no label/notch to disturb, just needs the
   input's own right padding nudged so typed text doesn't run under
   the button. */
.srs-input-with-toggle {
  position: relative;
}
.srs-input-with-toggle .form-control {
  padding-right: 2.25rem;
}
.srs-password-toggle {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #8392ab;
  display: flex;
  align-items: center;
  padding: 0.25rem;
  cursor: pointer;
}
.srs-password-toggle .material-symbols-rounded {
  font-size: 1.15rem;
}
.srs-password-toggle:hover {
  color: #495057;
}

/* Editor de texto rico (2026-08-29, founder's explicit request:
   "editor de texto rico, na edição do flashcard e dos comentários...
   negrito, itálico e marcadores") — barra pequena injetada por
   static/js/rich-text-toolbar.js antes de todo textarea.rich-textarea,
   não HTML fixo em cada template. type="button" nos 3 itens (não
   submit) — clicar neles nunca deve submeter o formulário por baixo. */
.rich-text-toolbar {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}
.rich-text-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: 1px solid #d2d6da;
  background: #fff;
  color: #495057;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.rich-text-toolbar-btn:hover {
  background-color: #f0f2f5;
  border-color: #adb5bd;
}
.rich-text-toolbar-btn .material-symbols-rounded {
  font-size: 1.1rem;
}
.rich-text-toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Botão "Visualizar" fica destacado quando vira "Editar" (modo de
   pré-visualização ativo) — o disabled: acima já esmaece os outros
   botões de formatação nesse estado, este continua ativo/visível. */
.rich-text-toolbar-btn-preview {
  margin-left: auto;
}
/* Pré-visualização (2026-09-05, evolução do editor) — mesma caixa
   visual dos balões de pergunta/comentário renderizados de verdade,
   pra o preview já mostrar como vai ficar, não uma caixa genérica. */
.rich-text-preview {
  background: #f8f9fa;
  border: 1px solid #d2d6da;
  border-radius: 0.6rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  text-align: justify;
}
/* Conteúdo renderizado pelo filtro rich_text (marcadores) — sem essa
   regra, a lista fica sem indentação/marcador visível dentro dos
   balões de pergunta/comentário, que não têm o reset de lista de uma
   página normal (esses blocos são texto solto, não uma <ul>/<ol> de
   navegação com sua própria folha de estilo). */
.fc-question ul,
.fc-question ol,
.fc-comment-box ul,
.fc-comment-box ol,
.rich-text-preview ul,
.rich-text-preview ol {
  margin: 0.4rem 0;
  padding-left: 1.4rem;
}
/* `código` inline (evolução 2026-09-05) — sem isso, <code> herda o
   mesmo texto ao redor e fica indistinguível; um leve destaque de
   fundo é o mínimo pra parecer código, sem ficar um bloco separado
   (o marcador é inline de propósito, não um bloco ``` de 3 crases). */
.fc-question code,
.fc-comment-box code,
.rich-text-preview code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

/* Modo Caneta (2026-09-07, founder's explicit request) — canvas/toolbar
   de anotação por toque/caneta na tela de Revisão. O canvas em si
   (#fcPenCanvas, criado por static/js/pen-mode.js) precisa de ZERO CSS
   aqui — todo o posicionamento é feito via JS inline style (left/top/
   width/height calculados a partir de .fc-question a cada frame
   relevante), só o z-index/pointer-events base já vêm do próprio JS. */

/* Botão "Modo caneta" (#fcPenModeToggle, .icon-action reaproveitado —
   design review Pass 5) — sem indicador visual de "ligado" além do
   ícone (que não troca, ao contrário de #srs-focus-toggle: não há um
   segundo ícone óbvio de "caneta desenhando" vs "caneta parada"), este
   leve tingimento de fundo é o que sinaliza o estado, mesmo raciocínio
   do botão "Visualizar" do editor de texto rico quando vira "Editar".

   Escopado a #fcPenModeToggle especificamente, NÃO a `.icon-action
   [aria-pressed="true"]` genérico — bug real encontrado em auditoria: a
   versão genérica também batia em #srs-focus-toggle (o botão de tela
   cheia, também .icon-action com aria-pressed), tingindo ele de
   vermelho ao ligar a tela cheia sem nenhuma relação com o Modo
   Caneta — efeito colateral não intencional num botão que já tem seu
   próprio indicador (troca de ícone fullscreen/fullscreen_exit). */
#fcPenModeToggle[aria-pressed="true"] {
  background-color: rgba(234, 6, 6, 0.12);
  color: #ea0606;
}

/* Toolbar flutuante do Modo Caneta — irmã de .fc-wrap na prática (vive
   direto em document.body, ver pen-mode.js), fixa e centralizada como
   os 3 modais/o pop-up de meta batida já são. Reaproveita
   .rich-text-toolbar/.rich-text-toolbar-btn (design review Pass 5) —
   só este wrapper de posicionamento é novo. */
.fc-pen-toolbar {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 501; /* logo acima do canvas (500), abaixo dos modais (1200+) */
  background: #fff;
  border-radius: 0.75rem;
  padding: 0.4rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  margin-bottom: 0;
}
/* Ferramenta ativa (cor 1 / cor 2 / borracha) — mesmo tingimento leve
   do toggle principal, aplicado por botão via aria-pressed. */
.fc-pen-toolbar .rich-text-toolbar-btn[aria-pressed="true"] {
  background-color: #f0f2f5;
  border-color: #495057;
}

/* Mobile table overflow (system-wide audit) — Material Dashboard's own
   base CSS sets `.table td, .table th { white-space: nowrap; }`
   (assets/css/material-dashboard.css), which keeps desktop tables tidy
   but silently blows a table's width way past the viewport on a phone
   the moment any cell holds real text (measured: a flashcard question
   cell alone pushed one table 574px past its container). The
   .table-responsive wrapper keeps that overflow from reaching the page
   itself, but the overflowing content — very often the row's edit/
   delete/download icons, at the far right — scrolls off-screen with no
   visual hint that it's still there. Letting cells wrap again below
   the tablet breakpoint fixes the actual cause for the vast majority
   of cases (confirmed against Teoria/Flashcards/Biblioteca/sysadmin's
   user list — 88px/574px/10-35px/64px of hidden overflow, all gone
   once text can wrap instead of forcing column width). */
@media (max-width: 767.98px) {
  .table td,
  .table th {
    white-space: normal;
  }
}

/* Whatever overflow a table still has past that (e.g. a purely numeric
   reference table with more columns than a phone can show at once,
   like Perfil FSRS's peso->retenção table) is at least discoverable
   now: a right-edge shadow that only shows while there's more to
   scroll to, the same CSS-only "scroll shadow" technique background-
   attachment: local enables (two shadow gradients pinned to the
   scrolling content's edges, plus two opaque covers pinned to the
   viewport — the covers hide whichever shadow is at a fully-scrolled
   edge, so the cue disappears exactly when it stops being true). */
.table-responsive {
  background:
    linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 100% 0,
    linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Touch targets (/plan-design-review, 2026-08-24 — Pass 6) — .icon-action
   is 32px, below the 44px minimum for reliable finger tapping. Mouse
   users have pixel precision, so this only widens the hit area on
   touch-capable screens (the size a mouse cursor sees never changes).
   Hit by real daily use: srs/planning.html's prev/next-day chevrons,
   the day-modal close button, and the flashcard question/answer edit
   triggers in review_loop.html/practice.html. */
@media (max-width: 767.98px), (pointer: coarse) {
  .icon-action {
    width: 2.75rem;
    height: 2.75rem;
  }
  .icon-action .material-symbols-rounded {
    font-size: 1.25rem;
  }
  /* .rich-text-toolbar-btn (32px) was never covered by this rule —
     found live 2026-09-07 while sizing "Modo caneta"'s toolbar
     (fc-pen-toolbar below), which reuses this class per the design
     review's Pass 5 decision ("reaproveitar .rich-text-toolbar-btn").
     Bumping it here also fixes the pre-existing rich-text editor
     toolbar (question/comment fields) on touch devices, a real gap
     this change happened to expose, not scope creep. */
  .rich-text-toolbar-btn {
    width: 2.75rem;
    height: 2.75rem;
  }
  .rich-text-toolbar-btn .material-symbols-rounded {
    font-size: 1.25rem;
  }
}

/* KPI stat row (/plan-design-review, 2026-08-24 — Pass 4) — replaces
   the icon-in-colored-circle card mosaic (srs/dashboard.html's original
   4 KPI cards) with a denser, calmer "App UI" stat display: a colored
   left accent bar + bold number + label, no gradient, no ornamental
   icon-in-circle. Icon stays, but small and inline with the label
   instead of the visual anchor of the whole card. */
.srs-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 767.98px) {
  .srs-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.srs-stat {
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #eee;
  border-left: 3px solid var(--srs-stat-accent, #344767);
  padding: 0.9rem 1rem;
}
.srs-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #344767;
  line-height: 1.1;
}
.srs-stat-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: #8392ab;
  margin-top: 0.2rem;
}
.srs-stat-label .material-symbols-rounded {
  font-size: 1rem;
  color: var(--srs-stat-accent, #344767);
}
.srs-stat-footer {
  font-size: 0.75rem;
  margin-top: 0.5rem;
}
.srs-stat-footer a {
  font-weight: 700;
}

/* Flat card header (2026-09-10, dashboard redesign — "mais moderna e
   profissional") — replaces the vendor theme's colored-gradient-banner
   card header (`bg-gradient-{color} shadow-{color} border-radius-lg`
   sitting on a negative-margin `mt-n4` overlap) with a small icon chip
   + title inline, no banner. Same reasoning DESIGN.md's KPI stat row
   entry already gives for the OTHER generic template pattern it
   replaced: a full-width colored ribbon per card reads as dashboard-
   template boilerplate, not a considered product. `color-mix()` derives
   the chip's soft background from the same accent color driving the
   icon — one color per card to set, not two — same "one CSS variable
   per accent" posture `--srs-stat-accent` above already established
   (this is the second component to adopt it, per that section's own
   note that migrating more components to variables is the natural
   next step). */
.srs-card-header-flat {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.1rem 1.25rem 0;
}
.srs-card-header-flat-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--srs-card-accent, #344767) 12%, white);
  color: var(--srs-card-accent, #344767);
}
.srs-card-header-flat-icon .material-symbols-rounded {
  font-size: 1.2rem;
}
.srs-card-header-flat h6 {
  margin: 0;
  color: #344767;
  font-weight: 700;
}

/* Planejamento's stat row grew to 5 cards (2026-08-29, founder's
   explicit request: quantidade de editais/assuntos/tópicos, "que
   ocupem a mesma linha") — a dedicated modifier class, not a change to
   .srs-stat-row's own 4-column grid above: dashboard.html (4 cards)
   and fsrs_stats.html (3 cards) still use that base class as-is, and
   both fit fine in 4 columns already — bumping the shared rule to 5
   would leave THEM with an awkward empty 5th slot instead. Self-
   contained media queries (not relying on cascade order against the
   base class's own @media block) so this stays correct regardless of
   where in the file it's defined. */
.srs-stat-row-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 767.98px) {
  .srs-stat-row-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .srs-stat-row-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Modo tela cheia da revisão de flashcards (static/js/focus-mode.js).
   Duas camadas deliberadamente combinadas:

   1. Esta classe no <body>, que esconde toda a moldura da aplicação
      (menu lateral, barra superior, configurador) e centraliza o card.
   2. A Fullscreen API do navegador, disparada pelo mesmo botão.

   A camada 1 é a que carrega o peso. A Fullscreen API encerra
   sozinha a cada NAVEGAÇÃO — e o loop de revisão navega a cada
   resposta (POST -> redirect -> GET) — então, sozinha, ela cairia no
   primeiro "Certo". Esta classe sobrevive ao recarregamento
   (localStorage), então a tela continua imersiva de card em card
   mesmo quando o navegador já saiu do fullscreen real. */
body.srs-focus-mode #sidenav-main,
body.srs-focus-mode .navbar-main,
body.srs-focus-mode .fixed-plugin,
/* Filtro de assunto da revisão (2026-08-27) — some junto com o resto
   do "chrome" da página no modo tela cheia, pedido explícito do
   fundador: "esse filtro deve desaparecer no modo fullscreen". */
body.srs-focus-mode .fc-subject-filter {
  display: none !important;
}
body.srs-focus-mode .sidenav.fixed-start + .main-content {
  margin-left: 0 !important;
}
body.srs-focus-mode .main-content {
  background: #f8f9fa;
  min-height: 100vh;
}
body.srs-focus-mode .fc-wrap {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.5rem;
}
/* O próprio botão fica sempre acessível — é a única saída do modo,
   já que a barra superior está escondida.

   top/right ajustados (2026-08-29, header rework) — antes o botão
   ficava sozinho no canto superior direito do container, alinhado com
   um <h1> simples de texto puro; agora o novo .fc-header-card (mesmo
   header das outras telas) ocupa esse mesmo canto, e os dois
   colidiam (o header, desenhado por cima, escondia o botão quase
   todo). Continua um IRMÃO de .fc-header-card no HTML, não um filho
   dele — precisa sobreviver ao display:none daquele card no modo tela
   cheia (um filho de um ancestral display:none nunca renderiza,
   mesmo com position:fixed no próprio elemento), então o
   posicionamento certo pros dois modos só podia vir de ajustar as
   coordenadas absolutas aqui, não de mudar onde ele mora no DOM. */
.srs-focus-toggle {
  position: absolute;
  top: -0.4rem;
  right: 1.75rem;
  /* .card-header ali do lado (z-index-2, classe do Material Dashboard)
     senão pinta por cima do botão mesmo ele vindo antes no DOM — um
     z-index explícito sempre vence um sibling position:absolute com
     z-index:auto, não importa a ordem. */
  z-index: 3;
}
body.srs-focus-mode .srs-focus-toggle {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1030;
  /* .fc-header-card (e o text-white do botão dentro dele) já não
     existe neste modo — volta pro tom neutro de sempre, agora sobre o
     fundo claro do app (.main-content), não mais sobre a barra escura. */
  color: #8392ab;
}

/* Sidenav backdrop + close-icon fix (2026-08-26) — see
   templates/includes/sidebar.html's comment above #sidenavBackdrop for
   the two bugs this closes.

   Hidden unconditionally here, OUTSIDE the media query below — found
   live: nesting the "display:none" base rule INSIDE the same
   `@media (max-width: 1199.98px)` block as the "show when pinned"
   override left this <div> with no display rule at all above that
   width, defaulting to a plain block-level element (a bare <div>'s
   UA-stylesheet default) permanently covering the whole viewport on
   desktop. */
.srs-sidenav-backdrop {
  display: none;
}

/* 1199.98px matches Bootstrap's own xl breakpoint boundary (< 1200px),
   the same threshold material-dashboard.js's own resize handlers
   (sidenavTypeOnResize etc.) use for "off-canvas sidenav" mode — has
   to match, or the backdrop could show/hide at a different width than
   the sidenav itself switches modes at. */
@media (max-width: 1199.98px) {
  /* #sidenav-main's inline z-index is just 1 (fine on desktop, where
     it's always visible and nothing needs to layer above it) — too low
     here: found live that a backdrop at even z-index:0 didn't reliably
     paint above ordinary page content (DOM order breaks the tie
     between two effectively-equal stacking levels, and this <div>
     sits earlier in the DOM than <main>), so clicks fell through to
     whatever was underneath instead of the backdrop. Bumped ONLY in
     this mobile/tablet media query — bumping the inline value directly
     would also change desktop's already-working stacking against
     Bootstrap dropdowns/tooltips/etc. (default z-index ~1000-1080),
     which nothing here needs to touch. 1025/1020 sit clear of that
     range (dropdown-menu 1000, sticky-top 1020, fixed-top 1030) other
     than the sticky-top tie, which doesn't matter — nothing sticky
     appears while this menu is open. */
  #sidenav-main {
    z-index: 1025 !important;
  }
  .srs-sidenav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1020;
  }
  body.g-sidenav-pinned .srs-sidenav-backdrop {
    display: block;
  }
  /* CSS-only visibility instead of the vendor JS's stale-reference
     classList.remove('d-none') — see sidebar.html's comment for why
     that never actually shows the icon. A selector always matches
     whichever element currently has this id, SVG-replaced or not. */
  body.g-sidenav-pinned #iconSidenav {
    display: inline-block !important;
  }
}

/* Sidebar nav links (2026-09-10, founder's explicit request: "menu
   lateral mais moderna e profissional"). Deliberately CSS-only —
   `templates/includes/sidebar.html`'s own comments document several
   live bugs fixed by exact DOM ordering (the backdrop/script/<aside>
   sequence, the #iconSidenav id) that a structural rewrite would put
   at risk for a change that's purely visual. Replaces the vendor
   theme's active-link treatment (a solid `bg-gradient-dark text-white`
   pill, the same full-saturation-dark-on-every-click look already
   swapped out of the KPI cards and card headers elsewhere in this
   redesign pass) with a soft tinted background + navy text/icon — the
   link stays readable as "selected" without repainting the whole row
   dark navy. Also gives INACTIVE items a hover state for the first
   time (there was none before — a sidebar with zero feedback on hover
   reads as unfinished, not calm). `.srs-nav-active` is applied by the
   template in place of the old `active bg-gradient-dark text-white`. */
#sidenav-main .nav-link {
  border-radius: 0.65rem;
  color: #67748e;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#sidenav-main .nav-link .material-symbols-rounded {
  color: #8392ab;
  transition: color 0.15s ease;
}
#sidenav-main .nav-link:hover {
  background: rgba(52, 71, 103, 0.06);
  color: #344767;
}
#sidenav-main .nav-link:hover .material-symbols-rounded {
  color: #344767;
  opacity: 1;
}
#sidenav-main .nav-link.srs-nav-active {
  background: rgba(52, 71, 103, 0.09);
  color: #344767;
  font-weight: 600;
}
#sidenav-main .nav-link.srs-nav-active .material-symbols-rounded {
  color: #344767;
  opacity: 1;
}

/* Section group labels ("Estudo", "Dados", "Conta") — a touch more
   letter-spacing reads as a deliberate section header instead of just
   small dim text; scoped to the sidebar's own <h6> so nothing else on
   the page is affected. */
#sidenav-main .navbar-nav h6 {
  letter-spacing: 0.06em;
}

/* Radar table (2026-08-27, founder's own report: "está com barra de
   rolagem muito grande") — Órgão/Cargo/Escolaridade cells can hold
   real prose (a "Cargo" cell listing 3 job titles comma-separated ran
   100+ characters on real data). Material Dashboard's base .table td
   is `white-space: nowrap` on desktop (see the mobile-only override
   above, which doesn't reach this width) — forcing that prose onto
   ONE line is exactly what pushed .table-responsive's own scrollbar
   far past anything reasonable. Letting these specific cells wrap
   fixes the actual cause directly, the same diagnosis as the mobile
   fix above, just scoped to the columns that actually hold long free
   text (not applied table-wide — short cells like UF/Vagas/Salário
   are still better as single-line for a compact table). */
.radar-wrap-cell {
  white-space: normal !important;
  word-break: break-word;
  max-width: 20rem;
}

/* Biblioteca — Meus Assuntos / Meus Tópicos (2026-08-29, founder:
   "sem habilitar barra de rolagem horizontal, se preciso adicione
   quebra de linha nos itens") — same root cause and same fix as
   .radar-wrap-cell above: Topic.name now holds real edital prose (up
   to 400 chars, see that field's own docstring) and Material
   Dashboard's desktop-wide `.table td { white-space: nowrap }` forced
   every one of those onto a single very long line, which is exactly
   what pushed .table-responsive's scrollbar out. Also applied to the
   Assunto/Assuntos badge cells on both tables — a Subject name is
   short today, but nothing caps it, and a badge doesn't wrap on its
   own (Bootstrap's .badge is nowrap by default) without this. */
.srs-wrap-cell {
  white-space: normal !important;
  word-break: break-word;
  max-width: 24rem;
}
.srs-wrap-cell .badge {
  white-space: normal !important;
  word-break: break-word;
}

/* Meus Tópicos — linha de cabeçalho de grupo (2026-08-29, founder:
   "os registros fiquem agrupados por Assunto") — sutil o bastante pra
   não competir com as linhas de dados reais, mas visível o bastante
   pra funcionar como separador ao rolar rápido pela tabela. */
.srs-topic-group-header td {
  background-color: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Radar filter panel (2026-08-28, founder's own report: "melhore o UI
   do campo Filtros") — two complaints, both scoped to
   .radar-filter-form so nothing else on the page changes:

   1. "colunas de opções fiquem um pouco mais próximas para que
      liberem mais espaço para a coluna Estado (UF)" — the row already
      switched to Bootstrap's `g-2` gutter (radar.html) and Estado's
      own column widened (col-lg-6 vs col-lg-2 for the other three);
      this tightens the vertical rhythm WITHIN each column (each
      checkbox row was a full .form-check with browser-default
      spacing, and Estado's list needed multi-column layout to
      actually use its new width instead of running down a single
      long list). */
.radar-filter-form .form-check {
  margin-bottom: 0.15rem;
  min-height: 0;
  padding-left: 1.6em;
}
.radar-filter-form .form-check-label {
  cursor: pointer;
}
.radar-uf-list {
  max-height: 9rem;
  overflow-y: auto;
  column-count: 3;
  column-gap: 0.75rem;
}
@media (max-width: 767.98px) {
  .radar-uf-list {
    column-count: 2;
  }
}

/* 2. "melhore o UI do checkbox quando marcado" — Material Dashboard's
   own :checked state turns the box solid pink with a checkmark drawn
   via a `::after` pseudo-element using the CLASSIC FontAwesome icon
   font (`font-family: "FontAwesome"; content: "\f00c"` — assets/css/
   material-dashboard.css, `.form-check:not(.form-switch)
   .form-check-input[type=checkbox]:after`), not the Material Symbols
   font this app actually loads everywhere else — verified live
   2026-08-28: that glyph never renders (nothing registers that font
   family here), leaving a plain colored square with nothing on it.

   First fix attempt (a bare `.radar-filter-form
   .form-check-input[type="checkbox"]:checked` rule) lost the cascade
   outright, independent of the missing-glyph issue — that vendor
   selector's specificity is (0,5,0) (`:not(.form-switch)`'s ARGUMENT
   counts toward specificity same as a real class would), beating this
   one's (0,4,0) regardless of source order. `!important` here isn't
   fighting for priority so much as being the only way to guarantee a
   WIN against a selector already this specific, whatever the vendor's
   CSS does next. Also mutes the vendor's own `::after` checkmark
   attempt (`content: "" !important`) — belt and suspenders against
   even a future differently-broken glyph, rather than trusting it to
   just stay invisible. */
.radar-filter-form .form-check-input[type="checkbox"] {
  width: 1.4em;
  height: 1.4em;
}
.radar-filter-form .form-check-input[type="checkbox"]:after {
  content: "" !important;
}
.radar-filter-form .form-check-input[type="checkbox"]:checked {
  background: transparent !important;
  border-color: transparent !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(195deg, #42424a 0%, #191919 100%) !important;
  background-size: 65%, 100% !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* Notifications module (2026-08-28, founder's explicit request) —
   a subtle left-edge highlight on unread rows in notifications:list,
   same "don't scream, just distinguish" restraint as the rest of
   this table-heavy app. */
.srs-notification-unread {
  background-color: rgba(23, 193, 232, 0.05);
  border-left: 3px solid #17c1e8;
}

/* Pagination — every .pagination on the site (Radar, Biblioteca,
   Notificações, Flashcards, Teoria), fixed globally by CSS alone, no
   template changes needed anywhere it's already used (2026-08-29,
   founder: "melhore o UI do paginador" — screenshot showed "1 / 1" and
   "Próxima" both squeezed into overlapping circles, unreadable).
   Material Dashboard's own .page-item .page-link, .page-item span
   forces a fixed 36px circle (border-radius: 50% !important, width/
   height: 36px, padding: 0) — fine for a single digit, but "1 / 11" or
   the word "Próxima" simply doesn't fit a 36px circle and spills out
   over its neighbor. A pill shape sized to its own content, not a
   fixed-diameter circle, is the actual fix — everything else
   (spacing, hover, active/disabled colors) stays Material Dashboard's
   own, only the shape/sizing rules are overridden. */
.pagination .page-item .page-link,
.pagination .page-item span {
  border-radius: 0.75rem !important;
  width: auto;
  height: auto;
  min-width: 2.25rem;
  padding: 0.45rem 0.9rem;
  line-height: 1.2;
}

/* Planejamento — visualização Diária (2026-08-29, founder's explicit
   request: "matérias, meta de flashcards e uma barra de loading que
   vai enchendo"). One full-width card per subject, bigger/taller
   progress bar than the compact weekly/monthly list's 6px one — this
   screen has nothing else competing for space, so the bar can afford
   to be the visual centerpiece. width transition pairs with static/js/
   daily-progress.js, which flips the bar from 0% to its real width one
   frame after load — the actual "enchendo" (filling) motion. */
.srs-daily-cards {
  max-width: 40rem;
  margin: 0 auto;
}
.srs-daily-card {
  border-left: 4px solid #344767;
}
.srs-daily-progress {
  height: 12px;
  border-radius: 6px;
}
.srs-daily-progress-bar {
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Relatório de Tópicos (2026-10-04). Selo de situação: cores de estado do
   DESIGN.md na metade escura (texto branco legível); "pouco dado" é só a
   borda tracejada, porque não é um julgamento. */
.srs-report-chip {
  display: inline-block;
  border-radius: 0.375rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.srs-report-chip--weak { background: #ea0606; color: #fff; }
.srs-report-chip--strong { background: #17ad37; color: #fff; }
.srs-report-chip--hint { background: #fb8c00; color: #fff; }
.srs-report-chip--keep,
.srs-report-chip--ok { background: #f0f2f5; color: #344767; }
.srs-report-chip--few { background: transparent; color: #8392ab; border: 1px dashed #8392ab; }
.srs-report-tomorrow li {
  padding: 0.55rem 0;
  border-bottom: 1px solid #eee;
}
.srs-report-tomorrow li:last-child { border-bottom: 0; }
.srs-report-subject td { background: #f8f9fa; }
/* Nomes de tópico de edital passam de 100 caracteres: a coluna quebra
   linha para Tendência e Situação continuarem visíveis. O recuo do nível
   vai num span (margin) porque o tema fixa o padding das células. */
.srs-report-tree td.srs-report-name {
  white-space: normal;
  min-width: 16rem;
}
.srs-report-tree td.srs-report-name > span {
  display: inline-block;
}

/* Seletor pesquisável (gestão de flashcards, 2026-10-17). Tom Select
   (static/vendor/tom-select) com o tema Bootstrap 5; aqui só cor, raio e
   altura, para casar com .form-control do tema (DESIGN.md: navy #344767,
   destaque #17c1e8). Contrato de marcação em static/js/subject-topic-picker.js. */
.ts-wrapper .ts-control {
  min-height: 2.5rem;
  border-radius: 0.375rem;
  color: #344767;
  font-size: 0.875rem;
}
.ts-wrapper.focus .ts-control {
  border-color: #17c1e8;
  box-shadow: 0 0 0 2px rgba(23, 193, 232, 0.25);
}
.ts-wrapper.disabled .ts-control {
  background-color: #f0f2f5;
  color: #8392ab;
}
.ts-wrapper.single .ts-control .item {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-dropdown {
  border-radius: 0.375rem;
  color: #344767;
  font-size: 0.875rem;
}
.ts-dropdown .optgroup-header {
  color: #8392ab;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ts-dropdown .active {
  background-color: color-mix(in srgb, #17c1e8 14%, white);
  color: #344767;
}
.ts-dropdown .create {
  color: #344767;
}
/* Nome do assunto/tópico quebra em até 2 linhas (o nome inteiro fica no
   title); a contagem de cards do modo filtro fica à direita. */
.ts-dropdown .srs-ts-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.ts-dropdown .srs-ts-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ts-dropdown .srs-ts-count {
  flex: none;
  color: #8392ab;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px), (pointer: coarse) {
  .ts-wrapper .ts-control {
    min-height: 44px;
  }
  .ts-dropdown .option,
  .ts-dropdown .create,
  .ts-dropdown .no-results {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .ts-dropdown .srs-ts-option {
    flex: 1;
    align-items: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ts-wrapper .ts-control,
  .ts-dropdown {
    transition: none;
  }
}

/* Área de arrastar PDFs (aba Importar, static/js/pdf-dropzone.js). O input
   nativo cobre a caixa inteira (opacity 0): clicar e arrastar caem nele, e
   sem JS ele segue sendo o seletor de arquivos. Foco de teclado aparece na
   caixa via :focus-within. */
.srs-dropzone {
  position: relative;
  border: 2px dashed #8392ab;
  border-radius: 0.75rem;
  background: #f8f9fa;
  color: #344767;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.srs-dropzone:hover,
.srs-dropzone.srs-dropzone-over {
  border-color: #17c1e8;
  background: color-mix(in srgb, #17c1e8 8%, white);
}
.srs-dropzone:focus-within {
  border-color: #17c1e8;
  box-shadow: 0 0 0 2px rgba(23, 193, 232, 0.25);
}
.srs-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* Com arquivos escolhidos a caixa encolhe para um alvo de "adicionar mais"
   e a borda deixa de ser tracejada. */
.srs-dropzone.srs-dropzone-filled {
  border-style: solid;
  border-color: #17c1e8;
}
.srs-dropzone.srs-dropzone-filled .srs-dropzone-prompt {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.srs-dropzone-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1.5rem 1rem;
  text-align: center;
  pointer-events: none;
}
.srs-dropzone-prompt .material-symbols-rounded {
  font-size: 2.25rem;
  color: #8392ab;
}
.srs-dropzone-title {
  font-size: 0.875rem;
  font-weight: 600;
}
.srs-dropzone-hint {
  font-size: 0.75rem;
  color: #8392ab;
}
.srs-dropzone-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.srs-dropzone-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
  border-bottom: 1px solid #e9ecef;
}
.srs-dropzone-item-icon {
  flex: none;
  font-size: 1.25rem;
  color: #8392ab;
}
.srs-dropzone-item-problem .srs-dropzone-item-icon,
.srs-dropzone-item-problem .srs-dropzone-item-meta {
  color: #ea0606;
}
.srs-dropzone-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.srs-dropzone-item-name {
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.srs-dropzone-item-meta {
  font-size: 0.75rem;
  color: #8392ab;
}
.srs-dropzone-item .icon-action {
  flex: none;
}
@media (max-width: 767.98px), (pointer: coarse) {
  .srs-dropzone-prompt {
    padding: 2rem 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .srs-dropzone {
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   Aba Buscar (flashcards/add_flashcards.html): chips de filtro, tabela com
   seleção, faixa "selecionar todos", barra de ações em lote e aviso de
   desfazer. Comportamento em static/js/flashcard-bulk.js.
   --------------------------------------------------------------------- */
.fc-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.fc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  padding: 0.15rem 0.5rem 0.15rem 0.75rem;
  border-radius: 999px;
  background: rgba(52, 71, 103, 0.08);
  color: #344767;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.fc-chip:hover {
  background: rgba(52, 71, 103, 0.16);
  color: #344767;
}
.fc-chip .material-symbols-rounded {
  font-size: 1rem;
}

/* .table td é nowrap no tema: sem isto o tópico longo da 2ª linha
   alarga a coluna e empurra as ações para fora da tela. */
.table td.fc-question-cell {
  white-space: normal;
  width: 100%;
  min-width: 12rem;
}
.fc-question-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  min-width: 12rem;
}
.fc-topic-name {
  margin-left: 0.25rem;
}
.fc-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.fc-check-cell {
  width: 1%;
}
.fc-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.5rem;
  cursor: pointer;
}
/* Fora de .form-check o tema não desenha borda nenhuma no checkbox
   (branco no branco); o marcado segue o mesmo visto do Radar, já que o
   glifo FontAwesome do tema não carrega aqui. */
.fc-check .form-check-input {
  margin: 0;
  width: 1.25em;
  height: 1.25em;
  border: 1px solid #b0b7c0;
  border-radius: 0.35rem;
}
.fc-check .form-check-input:after {
  content: "" !important;
}
.fc-check .form-check-input:checked,
.fc-check .form-check-input:indeterminate {
  border-color: transparent;
  background-size: 65%, 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.fc-check .form-check-input:checked {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(195deg, #42424a 0%, #191919 100%);
}
.fc-check .form-check-input:indeterminate {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10h10' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(195deg, #42424a 0%, #191919 100%);
}
.fc-row-selected {
  background-color: rgba(23, 193, 232, 0.08);
}

.fc-select-banner {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(23, 193, 232, 0.12);
  color: #344767;
}
.fc-select-banner[hidden],
.fc-bulk-bar[hidden] {
  display: none;
}
.fc-select-banner .btn-link {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* Barra fixa ao rodapé (DESIGN.md, "Barra de ação fixa"): botões de 44px e
   padding-bottom que respeita o indicador de home do iPhone. */
.fc-bulk-bar {
  position: sticky;
  bottom: 0;
  z-index: 1020;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0.75rem -1.5rem -1.5rem;
  padding: 0.75rem 1.5rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid rgba(52, 71, 103, 0.15);
  box-shadow: 0 -4px 12px rgba(52, 71, 103, 0.08);
}
.fc-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fc-bulk-bar .btn {
  min-height: 44px;
}

/* Ação destrutiva = cor chapada (#ea0606), sem gradiente (DESIGN.md). */
.srs-btn-danger {
  background: #ea0606;
  border-color: #ea0606;
  color: #fff;
}
.srs-btn-danger:hover,
.srs-btn-danger:focus {
  background: #ea0606;
  border-color: #ea0606;
  color: #fff;
  box-shadow: 0 4px 10px rgba(234, 6, 6, 0.35);
}
.srs-btn-danger:disabled {
  background: #ea0606;
  border-color: #ea0606;
  color: #fff;
  opacity: 0.55;
}

.fc-results-stale {
  opacity: 0.5;
  pointer-events: none;
}

.fc-undo-toast {
  background: #344767;
  color: #fff;
  border: 0;
}
.fc-undo-toast .toast-body {
  color: #fff;
}
.fc-undo-btn {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-transform: none;
  letter-spacing: 0;
  min-height: 44px;
  margin-right: 0.25rem;
}
.fc-undo-btn:hover,
.fc-undo-btn:focus {
  color: #fff;
}
.fc-toast-wrap {
  z-index: 1090;
  padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 767.98px), (pointer: coarse) {
  .fc-check {
    min-width: 44px;
    min-height: 44px;
  }
  .fc-chip {
    min-height: 44px;
  }
  .fc-row-menu .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .fc-bulk-bar {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-chip,
  .fc-undo-toast,
  .srs-btn-danger {
    transition: none !important;
  }
}

/* Modal de edição de flashcard: o rodapé do modal manda; o "Salvar" do fragmento fica no markup mas escondido. */
#fcEditModal [data-edit-form] > button[type="submit"] {
  display: none;
}
.fc-edit-confirm {
  padding: 0.75rem 1rem;
  border-top: 1px solid #dee2e6;
  background: #fff5f5;
}
.fc-edit-footer {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
@media (max-width: 767.98px), (pointer: coarse) {
  .fc-edit-footer .btn,
  .fc-edit-confirm .btn {
    min-height: 44px;
  }
}

/* Abaixo de md o rodapé do modal de edição vira grade 2x2: Excluir | Cancelar, "Salvar e próximo" | Salvar. */
@media (max-width: 767.98px) {
  .fc-edit-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .fc-edit-footer > .btn {
    width: 100%;
    margin: 0;
  }
  .fc-edit-footer > [data-fc-edit-next][hidden] ~ [data-fc-edit-save] {
    grid-column: 1 / -1;
  }
}

/* O tema desenha o X do .btn-close em branco (pensado para cabeçalho
   escuro); em todo modal do app o cabeçalho é claro, e o X sumia. */
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(0.3);
  opacity: 0.6;
}
.modal-header .btn-close:hover,
.modal-header .btn-close:focus-visible {
  opacity: 1;
}