:root {
  --tblr-primary: #0A2EA4;
  --tblr-primary-rgb: 10, 46, 164;
  --tblr-secondary: #00AEEF;
  --tblr-bg-surface-secondary: #f1f3f5;
  --tblr-muted: #5e6770;
  --tblr-border-color: #dee0e3;
}

[data-bs-theme="dark"] {
  --tblr-bg-surface: #1a1a2e;
  --tblr-body-bg: #16213e;
  --tblr-body-color: #e0e0e0;
  --tblr-border-color: #3d3d6e;
  --tblr-card-bg: #1a1a2e;
  --tblr-primary: #6B8CFF;
  --tblr-bg-surface-secondary: #20203a;

  /* FIX-02: .text-muted de Tabler (CDN) usa #6c757d, no legible en dark.
     Override a #adb5bd (Bootstrap 5 dark muted std) -> contraste 7.6-8.2:1
     sobre los 3 fondos del proyecto. Pasa WCAG AA y AAA. */
  [data-bs-theme="dark"] .text-muted {
    color: #adb5bd !important;
  }
}

/* Quill editors: integrados visualmente con el resto del UI (borderless + separador sutil) */
.ql-container {
    border: none !important;
    border-bottom: 1px solid #e6e7e9 !important;
    border-radius: 0 !important;
    font-family: inherit;
    font-size: 0.9rem;
}

.ql-toolbar {
    border: none !important;
    border-bottom: 1px solid #e6e7e9 !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
}

.ql-editor {
    min-height: 60px;
    padding: 8px 4px !important;
}

/* FIX-01: textarea nativo de descripcion de tarea. Mantener hover/foco sutil del area editable */
#taskDetailDesc {
    display: block;
    height: auto;
    min-height: 120px;
    resize: vertical;
    border-radius: 4px;
    transition: background 0.15s;
    outline: none;
}

#taskDetailDesc:hover {
    background: rgba(0,0,0,0.03);
}

#taskDetailDesc:focus {
    background: rgba(0,0,0,0.05);
    box-shadow: inset 0 0 0 1px rgba(10,46,164,0.2);
}

/* Link "+ Agregar" del header de cada columna: hover con color mas claro y underline visible. */
.btn-add-task-header-link {
    transition: color 0.15s, text-decoration-thickness 0.15s;
}

.btn-add-task-header-link:hover {
    color: #3a5cd9 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px;
}

/* Pestaña Proyecto — estilo Notion */
#tab-proyecto {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

#tab-proyecto .project-section {
    margin-bottom: 3rem;
}

#tab-proyecto .project-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tblr-muted, #5e6770);
    margin-bottom: 0.5rem;
}

#tab-proyecto .project-section-divider {
    border: none;
    border-top: 1px solid var(--tblr-border-color, #dee0e3);
    margin: 0 0 0.75rem 0;
}

#tab-proyecto .project-section .tiptap-toolbar {
    background: var(--tblr-bg-surface-secondary, #f1f3f5);
    border: 1px solid var(--tblr-border-color, #dee0e3);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 4px 8px;
    opacity: 1;
}

#tab-proyecto .project-section .ProseMirror,
#tab-proyecto .project-section .tiptap-content {
    border: 1px solid var(--tblr-border-color, #dee0e3);
    border-radius: 0 0 4px 4px;
    padding: 12px;
    min-height: 100px;
    background: var(--tblr-bg-surface, #fff);
}

#tab-proyecto .project-section .ProseMirror:focus,
#tab-proyecto .project-section .tiptap-content:focus-within {
    border-color: var(--tblr-primary, #0A2EA4);
    outline: none;
}

.tiptap-content p { margin-bottom: 0.5rem; }
.tiptap-content ul, .tiptap-content ol { padding-left: 1.5rem; margin-bottom: 0.5rem; }
.tiptap-content h1, .tiptap-content h2, .tiptap-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.5rem 0;
}
.tiptap-content blockquote {
    border-left: 3px solid #0A2EA4;
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    color: #555;
}
[data-bs-theme="dark"] .tiptap-content blockquote {
    color: #ccc;
}

/* Fix texto en acordeones: Tabler pinta .accordion-body en --tblr-secondary.
   Lo dejamos heredar el color del padre (description/comentarios = texto normal). */
.accordion-body {
    color: inherit;
}

/* Texto de la descripcion en cards del board: hereda color del card
   (light: negro, dark: blanco). Override de .text-secondary que pintaba
   cyan y rompia contraste. !important para ganarle a cualquier utility
   class de Bootstrap que se meta por descuido (cache u orden de import). */
.task-desc {
    color: inherit !important;
}

/* FIX-03: truncado a 3 lineas con ellipsis para la preview de la
   descripcion en cards del board. El JS inyecta el texto ya aplastado
   (sin HTML) via stripHtml(), asi que line-clamp opera bien. line-height
   explicito es requerido por line-clamp. overflow-wrap defensivo para
   URLs crudas largas sin espacios. */
.task-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* =====================================================================
   FIX-04: sidebar colapsable con iconos + persistencia + overlay móvil
   ===================================================================== */

/* FIX-04-HOTFIX: el sidebar ya no usa Bootstrap Collapse (FIX-04 lo reemplazo
   por sidebar.js custom). La clase .collapse sin .show deja el contenedor
   en display:none por Bootstrap. Forzar display:block solo aca para no
   afectar otros .collapse del sitio (acordeones, modales). */
.navbar-vertical #sidebar-menu {
    display: block;
}

/* Toggle button custom (reemplaza el navbar-toggler de Tabler para mobile) */
[data-kanbi-sidebar-toggle] {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: .25rem .5rem;
}

/* Layout desktop: sidebar fixed a la izquierda, page-wrapper offset-ea */
@media (min-width: 768px) {
    .navbar-vertical {
        width: 220px;
        transition: width 200ms ease;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1030;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .page-wrapper,
    .page > .page-wrapper {
        margin-left: 220px;
        transition: margin-left 200ms ease;
    }
    /* Colapsado: solo iconos */
    body.sidebar-collapsed .navbar-vertical {
        width: 56px;
    }
    body.sidebar-collapsed .page-wrapper,
    body.sidebar-collapsed .page > .page-wrapper {
        margin-left: 56px;
    }
    body.sidebar-collapsed .nav-link-title,
    body.sidebar-collapsed .navbar-brand a {
        opacity: 0;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: opacity 200ms ease, width 200ms ease;
    }
    body.sidebar-collapsed .nav-link {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Tooltip CSS-only para iconos colapsados (lee data-label del item) */
@media (min-width: 768px) {
    body.sidebar-collapsed .nav-link {
        position: relative;
    }
    body.sidebar-collapsed .nav-link::after {
        content: attr(data-label);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        background: #1a1a2e;
        color: #fff;
        padding: .35rem .6rem;
        border-radius: 4px;
        font-size: .8rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 150ms ease;
        z-index: 1040;
        box-shadow: 0 2px 6px rgba(0,0,0,.2);
    }
    body.sidebar-collapsed .nav-link:hover::after {
        opacity: 1;
    }
}

/* Móvil (<768px): panel temporal con overlay */
@media (max-width: 767.98px) {
    .navbar-vertical {
        position: fixed;
        top: 0;
        left: -260px;
        bottom: 0;
        width: 260px;
        z-index: 1040;
        transition: left 200ms ease;
    }
    body.sidebar-open .navbar-vertical {
        left: 0;
    }
    body.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 1035;
        animation: kanbi-fade-in 150ms ease;
    }
    [data-kanbi-sidebar-toggle] {
        display: inline-flex;
    }
    .page-wrapper,
    .page > .page-wrapper {
        margin-left: 0;
    }
}
@keyframes kanbi-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Iconos en items del sidebar */
.navbar-vertical .nav-link .nav-link-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: .5rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
    body.sidebar-collapsed .navbar-vertical .nav-link .nav-link-icon {
        margin-right: 0;
    }
}

/* FIX-04-HOTFIX-2: el sidebar necesita layout vertical explicito:
   toggle -> brand -> nav. El default de Tabler no respeta este orden.
   Usar flex column con order explicito + justify-content flex-start. */
.navbar-vertical {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}
.navbar-vertical .navbar-toggler { order: 1; }
.navbar-vertical .navbar-brand { order: 2; }
.navbar-vertical #sidebar-menu {
    order: 3;
    flex-grow: 0 !important;
    width: 100% !important;
    position: static !important;
}
.navbar-vertical .navbar-nav {
    margin-top: 0 !important;
    padding-top: .75rem !important;
    align-self: stretch !important;
    width: 100% !important;
}
:where(#editor-desc, #editor-req_proyecto, #editor-req_cliente, #taskDescripcion, #taskDetailDesc),
:where(#editor-desc, #editor-req_proyecto, #editor-req_cliente, #taskDescripcion, #taskDetailDesc) .tiptap-host,
:where(#editor-desc, #editor-req_proyecto, #editor-req_cliente, #taskDescripcion, #taskDetailDesc) .ProseMirror {
    text-align: left;
    min-height: 200px;
}

:where(#editor-desc, #editor-req_proyecto, #editor-req_cliente, #taskDescripcion, #taskDetailDesc) * {
    text-align: left;
}

#commentEditor,
#commentEditor.tiptap-host,
#commentEditor .ProseMirror {
    min-height: 200px;
}

.tiptap-host,
.tiptap-host .ProseMirror {
    min-height: 200px;
    text-align: left;
}
:where(.navbar-vertical #sidebar-menu .nav-link) {
    justify-content: flex-start !important;
    text-align: left !important;
}

:where(.navbar-vertical #sidebar-menu .nav-link-title) {
    text-align: left !important;
}