/* ==========================================================================
   GCP ACE — CADERNO DE NOTAS (MINHAS NOTAS)
   --------------------------------------------------------------------------
   Tela central de notas + botão de caderno nos itens de teoria + editor de
   nota (bottom-sheet) com paleta de cores, texto e fixação.
   Paleta extraída das imagens de referência:
     cabeçalho #4285F4 · destaque #34A853 · superfícies #2A2A2C / #323234
   ========================================================================== */

:root {
  --notes-blue: #4285F4;
  --notes-blue-dark: #3367D6;
  --notes-green: #34A853;
  --notes-bg: #1C1C1E;
  --notes-bg-deep: #15161A;
  --notes-surface: #2A2A2C;
  --notes-surface-2: #323234;
  --notes-border: #3A3A3C;
  --notes-text: #FFFFFF;
  --notes-text-muted: #B8B8BE;
  --notes-text-dim: #8E8E93;
  --note-color-default: #FFD700;
}

/* ==========================================================================
   1. TELA "MINHAS NOTAS"
   ========================================================================== */
.notes-screen {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: flex;
  flex-direction: column;
  background: var(--notes-bg-deep);
  color: var(--notes-text);
  font-family: inherit;
  overscroll-behavior: contain;
  animation: notesFadeIn .18s ease;
}

.notes-screen.hidden { display: none !important; }

@keyframes notesFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Cabeçalho azul ---------- */
.notes-header {
  background: linear-gradient(135deg, var(--notes-blue) 0%, #3B78E7 100%);
  padding: 14px 16px 0;
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

.notes-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 12px;
}

.notes-btn-back {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 6px 10px 6px 0 !important;
  margin: 0 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: transform .15s ease, opacity .15s ease;
}

.notes-btn-back svg { display: block; stroke: #FFFFFF; }

.notes-btn-back:hover { transform: translateX(-2px); opacity: .85; }

html[data-theme="dark"] .notes-header-title,
html[data-theme="dark"] .note-editor-title,
html[data-theme="dark"] #noteEditorTitleText {
  color: #FFFFFF !important;
}

.notes-header-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF !important;
  letter-spacing: .2px;
}

.notes-header-spacer {
  width: 34px;
  flex-shrink: 0;
}

/* ---------- Campo de busca ---------- */
.notes-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--notes-surface);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 0 14px;
  margin-bottom: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.notes-search-wrap:focus-within {
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}

.notes-search-icon {
  font-size: 15px;
  opacity: .75;
  margin-right: 10px;
  line-height: 1;
}

.notes-search-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--notes-text) !important;
  font-size: 15px;
  padding: 14px 0;
  font-family: inherit;
}

.notes-search-input::placeholder { color: var(--notes-text-dim); }

/* ---------- Filtros (chips) ---------- */
.notes-filters {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 14px;
  scrollbar-width: none;
}

.notes-filters::-webkit-scrollbar { display: none; }

.notes-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  background: var(--notes-surface-2);
  color: var(--notes-text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}

.notes-filter-chip .chip-emoji { font-size: 14px; line-height: 1; }

.notes-filter-chip:hover { background: #3C3C3E; }

.notes-filter-chip:active { transform: scale(.97); }

.notes-filter-chip.active {
  background: var(--notes-green) !important;
  border-color: var(--notes-green) !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

/* ---------- Corpo / lista ---------- */
.notes-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 96px;
  -webkit-overflow-scrolling: touch;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}


/* Estado vazio */
.notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 55vh;
  gap: 6px;
  color: var(--notes-text-muted);
  padding: 24px 12px;
}

.notes-empty svg {
  width: 76px;
  height: 76px;
  stroke: #706F6F;
  fill: none;
  margin-bottom: 18px;
}

.notes-empty-title {
  font-size: 19px;
  font-weight: 600;
  color: #E8E8EA;
}

.notes-empty-sub {
  font-size: 15px;
  color: var(--notes-text-dim);
  max-width: 320px;
  line-height: 1.45;
}

.notes-empty-cta {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  border: none;
  background: var(--notes-green);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(52, 168, 83, .38);
  transition: transform .12s ease, filter .15s ease;
}

.notes-empty-cta:hover { filter: brightness(1.06); }
.notes-empty-cta:active { transform: scale(.97); }

/* ---------- Cartão de nota ---------- */
.note-card {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 14px 16px 14px 16px;
  border-radius: 14px;
  background: #24262B;
  border: 1px solid var(--notes-border);
  border-left: 5px solid var(--note-color-default);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  animation: notesFadeIn .18s ease;
}

.note-card.is-pinned { border-color: rgba(255, 215, 0, .45); }

.note-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--notes-text-dim);
}

.note-card-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: rgba(66, 133, 244, .18);
  border: 1px solid rgba(66, 133, 244, .45);
  color: #9CC3FF;
}

.note-card-type.tipo-topico {
  background: rgba(52, 168, 83, .16);
  border-color: rgba(52, 168, 83, .45);
  color: #8FE0A5;
}

.note-card-context {
  font-size: 12.5px;
  font-weight: 600;
  color: #D6D6DA;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.note-card-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #F1F1F3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-card-pin {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  opacity: .95;
}

.note-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: flex-start;
}

.note-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--notes-border);
  background: #2E3035;
  color: #D8D8DC;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.note-icon-btn svg { display: block; stroke: currentColor; fill: none; }

.note-icon-btn:hover { background: #3A3C42; color: #FFFFFF; }

.note-icon-btn.danger:hover {
  background: rgba(239, 68, 68, .18);
  border-color: rgba(239, 68, 68, .6);
  color: #FCA5A5;
}

/* ==========================================================================
   2. BOTÃO DE CADERNO NOS ITENS DE TEORIA
   ========================================================================== */
/* Botão de caderno — SEMPRE verde com o desenho do caderno em branco */
html[data-theme="dark"] .teoria-note-btn,
html[data-theme="light"] .teoria-note-btn,
html[data-resolved-theme="dark"] .teoria-note-btn,
.teoria-note-btn,
#teoria-container .teoria-note-btn,
#quiz-container .teoria-note-btn,
button.teoria-note-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 0 !important;
  max-height: 34px !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  border: 1.5px solid #22C55E !important;
  background: #22C55E !important;
  background-color: #22C55E !important;
  color: #FFFFFF !important;
  cursor: pointer;
  padding: 0 !important;
  margin-right: 8px;
  box-shadow: 0 2px 8px rgba(34, 197, 94, .35);
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.teoria-note-btn svg {
  display: block;
  width: 17px;
  height: 17px;
  stroke: #FFFFFF !important;
  fill: none !important;
}

.teoria-note-btn:hover {
  background: #16A34A !important;
  background-color: #16A34A !important;
  border-color: #16A34A !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, .55);
}

.teoria-note-btn:active { transform: scale(.94); }

.teoria-note-btn.has-note {
  background: #22C55E !important;
  background-color: #22C55E !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

.teoria-note-btn .teoria-note-count {
  position: absolute;
  transform: translate(15px, -13px);
  background: #FFFFFF;
  color: #15803D;
  font-size: 9px;
  font-weight: 800;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

.teoria-card-head-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* ==========================================================================
   3. EDITOR DE NOTA (BOTTOM-SHEET)
   ========================================================================== */
#noteEditorModal.hub-modal-overlay {
  align-items: flex-end;
  padding: 0;
  z-index: 500;
}

@media (min-width: 641px) {
  #noteEditorModal.hub-modal-overlay {
    align-items: center;
    padding: 20px;
  }
}

.note-editor-card {
  background: #202227 !important;
  border: 1px solid #37393F !important;
  border-radius: 22px 22px 0 0 !important;
  width: 100%;
  max-width: 520px;
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, .6);
  color: #FFFFFF;
  max-height: 92vh;
  overflow-y: auto;
  animation: noteSheetUp .22s cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 641px) {
  .note-editor-card {
    border-radius: 20px !important;
    animation: notesFadeIn .18s ease;
  }
}

@keyframes noteSheetUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.note-editor-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #4A4C52;
  margin: 6px auto 14px;
}

.note-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.note-editor-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: #FFFFFF !important;
}

.note-editor-title .title-icon { font-size: 17px; line-height: 1; }

.note-editor-close {
  background: transparent;
  border: none;
  color: #C7C7CB;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}

.note-editor-close:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); }

.note-editor-context {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(52, 168, 83, .12);
  border: 1px solid rgba(52, 168, 83, .35);
  color: #A7E8BC;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.note-editor-context.hidden { display: none !important; }

/* Paleta de cores */
.note-palette {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scrollbar-width: none;
}

.note-palette::-webkit-scrollbar { display: none; }

/* Amostras de cor — círculos perfeitos, cor aplicada inline com !important */
html[data-theme="dark"] .note-color-swatch,
html[data-theme="light"] .note-color-swatch,
html[data-resolved-theme="dark"] .note-color-swatch,
.note-color-swatch,
#notePalette .note-color-swatch,
button.note-color-swatch {
  position: relative;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 0 !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  border: 0 !important;
  outline: none !important;
  cursor: pointer;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none;
  transition: transform .15s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.note-color-swatch:hover { transform: scale(1.08); }

.note-color-swatch:active { transform: scale(.94); }

/* Check de seleção via pseudo-elemento (não altera a caixa do círculo) */
.note-color-swatch.selected::after {
  content: '✓';
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  line-height: 1;
  pointer-events: none;
}

/* Campo de texto */
.note-editor-textarea {
  width: 100%;
  min-height: 132px;
  max-height: 42vh;
  resize: vertical;
  padding: 14px;
  border-radius: 12px;
  background: #2A2C31 !important;
  color: #FFFFFF !important;
  border: 2px solid var(--note-color-default) !important;
  outline: none !important;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.note-editor-textarea::placeholder { color: #8E8E93; }

.note-editor-textarea:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .1);
}

.note-editor-counter {
  text-align: right;
  font-size: 11px;
  color: #8E8E93;
  margin: 6px 2px 4px;
}

/* Toggle de fixação */
.note-pin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 16px;
}

.note-pin-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #EDEDF0;
  cursor: pointer;
  user-select: none;
}

.note-toggle {
  position: relative;
  width: 52px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1.5px solid #6E6E74;
  background: #2A2C31;
  cursor: pointer;
  padding: 0;
  transition: background .18s ease, border-color .18s ease;
}

/* A bolinha do switch é criada por JS (.note-toggle-dot) para não ser
   afetada por regras globais de botão. */
.note-toggle[aria-checked="true"] {
  background: #34A853 !important;
  background-color: #34A853 !important;
  border-color: #34A853 !important;
}

/* Ações */
.note-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 12px;
}

.note-btn {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: filter .15s ease, transform .12s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.note-btn:active { transform: scale(.98); }

.note-btn.cancel {
  background: transparent;
  border-color: #5A5C63;
  color: #E3E3E6;
}

.note-btn.cancel:hover { background: rgba(255, 255, 255, .06); }

.note-btn.save {
  background: #4A4C52;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.note-btn.save:hover { filter: brightness(1.15); }

.note-btn.save.ready {
  background: var(--notes-green);
  box-shadow: 0 6px 18px rgba(52, 168, 83, .35);
}

/* ==========================================================================
   4. TEMA CLARO
   ========================================================================== */
html[data-theme="light"] .notes-screen {
  background: #F2F5FA;
  color: #172437;
}

html[data-theme="light"] .notes-header {
  background: linear-gradient(135deg, #4285F4 0%, #3B78E7 100%);
}

html[data-theme="light"] .notes-filter-chip {
  background: #FFFFFF;
  color: #172437;
  border-color: #C9D4E3;
}

html[data-theme="light"] .notes-filter-chip.active {
  background: var(--notes-green) !important;
  border-color: var(--notes-green) !important;
  color: #FFFFFF !important;
}

html[data-theme="light"] .note-card {
  background: #FFFFFF;
  border-color: #DDE4EE;
}

html[data-theme="light"] .note-card-text { color: #1B2A3C; }

html[data-theme="light"] .note-card-context { color: #3C4A5E; }

html[data-theme="light"] .note-card-meta { color: #66748A; }

html[data-theme="light"] .note-icon-btn {
  background: #EEF3FA;
  border-color: #D7E0EC;
  color: #3C4A5E;
}

html[data-theme="light"] .notes-empty-title { color: #26364A; }

html[data-theme="light"] .notes-empty-sub { color: #66748A; }

html[data-theme="light"] .notes-empty svg { stroke: #9AA7B8; }

html[data-theme="light"] .note-editor-card {
  background: #FFFFFF !important;
  border-color: #DDE4EE !important;
  color: #172437;
}

html[data-theme="light"] .note-editor-title { color: #172437 !important; }

html[data-theme="light"] .note-editor-handle { background: #C9D4E3; }

html[data-theme="light"] .note-editor-textarea {
  background: #F5F8FC !important;
  color: #172437 !important;
}

html[data-theme="light"] .note-pin-label { color: #26364A; }

html[data-theme="light"] .note-btn.cancel {
  border-color: #C9D4E3;
  color: #26364A;
}

html[data-theme="light"] .note-btn.save {
  background: #D7E0EC;
  color: #26364A;
}

html[data-theme="light"] .note-btn.save.ready {
  background: var(--notes-green);
  color: #FFFFFF;
}

/* ==========================================================================
   5. RESPONSIVO
   ========================================================================== */
@media (min-width: 641px) {
  .notes-header { padding: 18px 24px 0; }
  .notes-body { padding: 22px 24px 96px; }
  .notes-header-top { max-width: 880px; margin: 0 auto 14px; }
  .notes-search-wrap { max-width: 880px; margin-left: auto; margin-right: auto; }
  .notes-filters { max-width: 880px; margin: 0 auto; }
  .notes-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note-card-text { -webkit-line-clamp: 6; }
}

@media (min-width: 1024px) {
  .notes-header-top,
  .notes-search-wrap,
  .notes-filters { max-width: 960px; }
  .notes-list { max-width: 960px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .notes-header-title { font-size: 18px; }
  .note-color-swatch { width: 32px; height: 32px; }
}

/* ==========================================================================
   6. BADGE DE CONTAGEM NO BOTÃO "Notes" DO DASHBOARD
   ========================================================================== */
.hub-pill-btn .pill-badge-inline[data-notes-count] {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px !important;
  border-radius: 999px;
  background: #A855F7;
  color: #FFFFFF !important;
  font-size: 10.5px !important;
  font-weight: 800;
  line-height: 1;
}

/* ==========================================================================
   7. BOTÃO FLUTUANTE "NOVA NOTA"
   ========================================================================== */
.notes-fab {
  position: absolute;
  right: 20px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #34A853 0%, #22C55E 100%);
  color: #FFFFFF;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(52, 168, 83, .45);
  transition: transform .14s ease, filter .15s ease;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}

.notes-fab:hover { filter: brightness(1.07); transform: translateY(-2px); }

.notes-fab:active { transform: scale(.94); }

@media (min-width: 641px) {
  .notes-fab { right: 32px; bottom: 28px; }
}