/* ============================================================
   ATIVIDADE — ESTILO COMPACTO (OPÇÃO A)
   ============================================================ */

.activity-panel {
    padding: 8px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(160, 160, 160, 0.25) !important;
    overflow-y: auto !important;
}

.activity-item {
    padding: 6px 10px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(200, 200, 200, 0.35) !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.activity-meta {
    font-size: 0.70rem !important;
    margin-bottom: 2px !important;
    color: #555 !important;
}

.activity-content {
    font-size: 0.80rem !important;
    line-height: 1.25rem !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    padding: 0 !important;
    margin: 0 !important;
}

.activity-item pre,
.activity-item code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

#activity-panel-wrapper {
    padding: 8px !important;
    margin: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
}

.activity-panel > * {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* ============================================================
   MODAL GLASS
   ============================================================ */

.modal-glass {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
}

/* ============================================================
   ABAS — TEMA WHITE
   ============================================================ */

.card-theme-white .card-tab-btn {
    margin-right: 12px !important;
}

/* ============================================================
   ABAS — TEMA AERO
   ============================================================ */

.card-theme-aero #card-tabs {
    background: rgba(255,255,255,0.20) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    border-bottom: 1px solid rgba(200,200,200,0.35) !important;
}

.card-theme-aero .card-tab-btn {
    padding: 10px 18px !important;
    border-radius: 10px 10px 0 0 !important;
    background: rgba(255,255,255,0.10) !important;
    color: rgba(30,30,30,0.75) !important;
    border-bottom: 2px solid transparent !important;
}

.card-theme-aero .card-tab-btn:hover {
    background: rgba(255,255,255,0.22) !important;
    color: rgba(0,0,0,0.85) !important;
    border-bottom-color: rgba(0,0,0,0.25) !important;
}

.card-theme-aero .card-tab-active {
    background: rgba(255,255,255,0.28) !important;
    color: #111 !important;
    border-bottom-color: rgba(0,0,0,0.55) !important;
    box-shadow: inset 0 0 14px rgba(255,255,255,0.30) !important;
}

/* ============================================================
   ABAS — TEMA DARK
   ============================================================ */

.card-theme-dark #card-tabs {
    background: #000 !important;
    border-bottom: 1px solid #333 !important;
}

.card-theme-dark .card-tab-btn {
    padding: 10px 18px !important;
    border-radius: 12px 12px 0 0 !important;
    background: rgba(255,255,255,0.06) !important;
    color: #bbb !important;
    border-bottom: 2px solid transparent !important;
}

.card-theme-dark .card-tab-btn:hover {
    background: rgba(255,255,255,0.14) !important;
    color: #fff !important;
    border-bottom-color: rgba(255,255,255,0.30) !important;
}

.card-theme-dark .card-tab-active {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
    border-bottom-color: #fff !important;
    box-shadow: inset 0 0 18px rgba(255,255,255,0.25) !important;
}

/* ============================================================
   MINI-ABAS ATIVIDADE
   ============================================================ */

.ativ-subtab-btn {
    padding: 8px 16px;
    background: rgba(255,255,255,0.25);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: 0.2s ease;
}

.ativ-subtab-btn:hover {
    background: rgba(255,255,255,0.40);
}

.ativ-subtab-active {
    background: rgba(255,255,255,0.60) !important;
    border-bottom: 2px solid #444 !important;
}

.ativ-subtab-panel {
    margin-top: 12px;
}

/* ============================================================
   TEMA DOTS
   ============================================================ */

.theme-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.theme-dot:hover {
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   TEMAS TRANSPARENTES (COLUNAS)
   ============================================================ */

.gray-column-bg  { background-color: rgba(240, 240, 240, 0.35) !important; }
.blue-column-bg  { background-color: rgba(59, 130, 246, 0.20) !important; }
.green-column-bg { background-color: rgba(52, 211, 153, 0.20) !important; }
.purple-column-bg{ background-color: rgba(168, 85, 247, 0.20) !important; }
.amber-column-bg { background-color: rgba(251, 191, 36, 0.25) !important; }

/* ============================================================
   CARD GLASS
   ============================================================ */

.card-glass {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ============================================================
   CARD THEMES (WHITE, AERO, DARK)
   ============================================================ */

.card-theme-white {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: #111 !important;
}

.card-theme-white input,
.card-theme-white textarea,
.card-theme-white .ql-container,
.card-theme-white .ql-editor {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0,0,0,0.10);
    color: #111 !important;
}

/* Aero */

.card-theme-aero #quill-editor-ativ .ql-container,
.card-theme-aero #quill-editor-ativ .ql-editor {
    background: rgba(255, 255, 255, 0.34) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 10px !important;
    color: #111 !important;
}

.card-theme-aero #quill-editor-ativ .ql-toolbar {
    background: rgba(248, 250, 252, 0.9) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

.card-theme-aero .activity-panel {
    background: rgba(255, 255, 255, 0.20) !important;
    border: 1px solid rgba(200,200,200,0.35) !important;
}

.card-theme-aero .activity-item {
    background: rgba(255, 255, 255, 0.34) !important;
    border: 1px solid rgba(180,180,180,0.40) !important;
}

/* Dark */

.card-theme-dark {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #1f1f1f !important;
}

.card-theme-dark .activity-panel {
    background: #111 !important;
    border: 1px solid #333 !important;
}

.card-theme-dark .activity-item {
    background: #333 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
}

.card-theme-dark code,
.card-theme-dark pre {
    color: #fff !important;
    background: transparent !important;
}

/* ============================================================
   VIDRO FOSCO — COLUNA
   ============================================================ */

.column-glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
}


/* ============================================================
   AJUSTES DE LEGIBILIDADE — TEMA DARK / CARD-THEME-DARK
   ============================================================ */

/* Fundo do conteúdo */
.card-theme-dark {
    background-color: #1a1a1a !important; /* cinza escuro, não preto */
    color: #f1f1f1 !important;
}

/* Inputs, textareas, quill */
.card-theme-dark input,
.card-theme-dark textarea,
.card-theme-dark select,
.card-theme-dark .ql-container,
.card-theme-dark .ql-editor {
    background-color: #2a2a2a !important;    /* cinza escuro */
    border: 1px solid #444 !important;
    color: #f1f1f1 !important;
}

.card-theme-dark .ql-toolbar {
    background-color: #272727 !important; 
    border-color: #444 !important;
}

.card-theme-dark #quill-editor .ql-editor,
.card-theme-dark #quill-editor-ativ .ql-editor {
    color: #f1f1f1 !important;
}

/* Labels */
.card-theme-dark label {
    color: #e5e5e5 !important;
}

/* ------------------------------------------------------------
   BOTÕES — MANTER ALTO CONTRASTE NO TEMA BLACK
   ------------------------------------------------------------ */

/* Botão primário (Salvar, Incluir) */
.card-theme-dark button.bg-blue-600 {
    background-color: #2563eb !important;  /* azul tailwind */
    color: white !important;
}

.card-theme-dark button.bg-blue-600:hover {
    background-color: #1d4ed8 !important;
}

/* Botão secundário (Fechar, Limpar) */
.card-theme-dark button.bg-gray-200 {
    background-color: #3a3a3a !important;
    color: #e5e5e5 !important;
}

.card-theme-dark button.bg-gray-200:hover {
    background-color: #4a4a4a !important;
    color: #fff !important;
}

/* ------------------------------------------------------------
   TAGS dentro do modal
   ------------------------------------------------------------ */

.card-theme-dark #tags-preview span {
    opacity: 0.9;
    border-color: rgba(255,255,255,0.25) !important;
}

/* ------------------------------------------------------------
   Painéis da atividade
   ------------------------------------------------------------ */

.card-theme-dark .activity-panel {
    background: #1f1f1f !important;
    border: 1px solid #333 !important;
}

.card-theme-dark .activity-item {
    background: #2b2b2b !important;
    border: 1px solid #3a3a3a !important;
    color: #f1f1f1 !important;
}