:root {
    --sidebar-width: 290px;
    --sidebar-width-collapsed: 92px;
    --sidebar-bg: #111111;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-link: #e5e7eb;
    --sidebar-link-hover: #ffffff;
    --sidebar-active-bg: rgba(242, 140, 40, 0.16);
    --content-bg: #f4f6fb;
    --topbar-bg: #ffffff;
    --brand: #f28c28;
    --brand-dark: #d9740f;
    --brand-soft: #fff3e8;
    --card-radius: 16px;
    --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
}

html, body {
    min-height: 100%;
}

body {
    background: var(--content-bg);
    color: #1f2937;
    overflow-x: hidden;
}

.auth-body {
    background:
        radial-gradient(circle at top left, rgba(242, 140, 40, 0.15), transparent 28%),
        radial-gradient(circle at bottom right, rgba(242, 140, 40, 0.12), transparent 24%),
        #f7f8fc;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar-backdrop {
    display: none;
}

.sidebar-panel {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    overflow-y: auto;
    border-right: 1px solid var(--sidebar-border);
    padding: 1rem;
    transition: width .2s ease, left .2s ease, transform .2s ease;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sidebar-brand-wrap {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), #ffb86b);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 8px 20px rgba(242, 140, 40, 0.35);
    flex: 0 0 auto;
}

.brand-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
}

.brand-subtitle {
    font-size: .82rem;
    color: #9ca3af;
    margin-top: .2rem;
}

.sidebar-close {
    display: none;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.35rem;
    padding: .25rem;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.sidebar-nav .nav-link {
    color: var(--sidebar-link);
    border-radius: 14px;
    padding: .9rem 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .85rem;
    border-left: 3px solid transparent;
    transition: all .2s ease;
    font-weight: 500;
}

.sidebar-nav .nav-link i {
    width: 18px;
    text-align: center;
    flex: 0 0 auto;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sidebar-link-hover);
    border-left-color: var(--brand);
}

.sidebar-nav .nav-link.active {
    background: var(--sidebar-active-bg);
    color: #fff;
    border-left-color: var(--brand);
    box-shadow: inset 0 0 0 1px rgba(242, 140, 40, 0.18);
}

.sidebar-footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-user-name {
    font-weight: 700;
    color: #fff;
}

.sidebar-user-meta {
    color: #9ca3af;
    font-size: .84rem;
    margin-top: .15rem;
}

.app-main {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease, width .2s ease;
}

.topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.topbar-title {
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}

.topbar-subtitle {
    font-size: .84rem;
    color: #6b7280;
}

.topbar-account {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.topbar-account-name {
    font-weight: 600;
}

.topbar-account-role {
    color: #6b7280;
    font-size: .8rem;
}

.topbar-menu-btn {
    border-radius: 12px !important;
}

.content-area {
    padding: 1.5rem;
    flex: 1;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 700;
}

.page-subtitle {
    color: #6b7280;
}

.card,
.alert,
.form-control,
.form-select,
.btn,
.table-responsive,
.dropdown-menu,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    border-radius: var(--card-radius) !important;
}

.app-card,
.metric-card,
.login-card,
.table-responsive,
.role-card,
.project-card,
.permission-group-card {
    box-shadow: var(--shadow-soft);
    border: 0;
}

.login-card {
    max-width: 440px;
}

.metric-card {
    background: #fff;
    padding: 1rem 1.1rem;
}

.metric-card-danger {
    background: #fff4f4;
}

.metric-label {
    color: #6b7280;
    font-size: .9rem;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    margin-top: .15rem;
}

.project-list-item,
.project-card {
    border: 1px solid #eef2f7;
    background: #fff;
}

.project-list-item {
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
}

.project-list-item:hover,
.project-card-link:hover .project-card {
    border-color: #ffd4af;
    background: #fffcfa;
}

.project-card {
    border-radius: 16px;
    padding: 1rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.project-card-link:hover .project-card {
    transform: translateY(-2px);
}

.project-code,
.role-key {
    display: inline-flex;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.project-name {
    color: #111827;
    margin-top: .65rem;
    margin-bottom: .35rem;
}

.project-desc {
    color: #6b7280;
    min-height: 3rem;
}

.project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    color: #6b7280;
    font-size: .85rem;
}

.project-summary > div {
    margin-bottom: .7rem;
}

.permission-group-card {
    border: 1px solid #eef2f7;
    border-radius: 16px;
    background: #fff;
    padding: 1rem;
}

.permission-group-title {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .9rem;
    color: #111827;
}

.permission-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.permission-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .8rem;
    border-radius: 14px;
    border: 1px solid #eef2f7;
    background: #fafafa;
}

.permission-item input {
    margin-top: .25rem;
}

.permission-item span {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.permission-item small {
    color: #6b7280;
}

.empty-state {
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    padding: 2.25rem;
    text-align: center;
    color: #6b7280;
    background: #fff;
}

.btn-brand {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.form-control,
.form-select {
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.table > :not(caption) > * > * {
    padding: .85rem .75rem;
}

.status-badge {
    padding: .45rem .7rem;
}

.status-active {
    color: #166534;
}

.status-inactive {
    color: #475569;
}

.standalone-badge {
    background: #fff4e5;
    color: #b45309;
}

.select2-container {
    width: 100% !important;
    max-width: 100%;
}

.select2-container .select2-selection--single {
    min-height: 46px;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    background: #fff;
}

.select2-container .select2-selection--multiple {
    min-height: 46px;
    border: 1px solid #dee2e6;
    display: block;
    background: #fff;
    padding: 5px 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
    display: inline-flex;
    align-items: center;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
    margin-top: 0 !important;
    min-height: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-left: 14px;
    padding-right: 30px;
    color: #111827;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 10px;
}

.select2-dropdown {
    border: 1px solid #dee2e6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    max-width: calc(100vw - 1rem);
}

.select2-search--dropdown {
    padding: .55rem;
}

.select2-search__field {
    border-radius: 10px !important;
    border: 1px solid #dee2e6 !important;
    padding: .5rem .75rem !important;
}

.select2-results__option {
    padding: .65rem .8rem;
}

body.sidebar-collapsed .sidebar-panel {
    width: var(--sidebar-width-collapsed);
}

body.sidebar-collapsed .app-main {
    margin-left: var(--sidebar-width-collapsed);
    width: calc(100% - var(--sidebar-width-collapsed));
}

body.sidebar-collapsed .sidebar-panel .brand-title,
body.sidebar-collapsed .sidebar-panel .brand-subtitle,
body.sidebar-collapsed .sidebar-panel .sidebar-nav .nav-link span,
body.sidebar-collapsed .sidebar-panel .sidebar-footer {
    display: none;
}

body.sidebar-collapsed .sidebar-panel .sidebar-brand-wrap {
    justify-content: center;
}

body.sidebar-collapsed .sidebar-panel .sidebar-nav .nav-link {
    justify-content: center;
    padding-left: .75rem;
    padding-right: .75rem;
}

body.sidebar-collapsed .sidebar-panel .sidebar-nav .nav-link i {
    margin-right: 0;
}

@media (max-width: 991.98px) {
    .sidebar-panel {
        transform: translateX(-100%);
        width: min(290px, calc(100vw - 2rem));
    }

    .sidebar-panel.open {
        transform: translateX(0);
    }

    .sidebar-close {
        display: inline-flex;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1035;
    }

    .sidebar-backdrop.show {
        display: block;
    }

    .app-main {
        margin-left: 0;
        width: 100%;
    }

    body.sidebar-collapsed .app-main {
        margin-left: 0;
        width: 100%;
    }

    .topbar {
        padding: .9rem 1rem;
    }

    .topbar-account {
        display: none;
    }

    .content-area {
        padding: 1rem;
    }

    .page-title {
        font-size: 1.45rem;
    }
}


.task-create-page {
    position: relative;
}


.task-create-page-clean {
    display: grid;
    gap: 1rem;
}

.task-create-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid #eef2f7;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.task-create-title-block {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.task-create-simple-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #172033;
    line-height: 1.2;
}

.task-create-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-icon-soft {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #ffe2c5;
    background: #fff8f1;
    color: #c76808;
}

.btn-icon-soft:hover {
    background: #fff1df;
    color: #9a4f05;
}

.task-help-list {
    display: grid;
    gap: .9rem;
}

.task-help-item {
    display: flex;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid #edf2f7;
    border-radius: 18px;
    background: #fff;
}

.task-help-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #fff3e8;
    color: #c76808;
}

.task-help-item h6 {
    margin: 0 0 .25rem;
    font-weight: 800;
}

.task-help-item p {
    margin: 0;
    color: #64748b;
}

.task-create-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    padding: 26px 28px;
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #fff6ee 100%);
    border: 1px solid #ffe2c5;
    box-shadow: var(--shadow-soft);
}

.task-create-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: #a74f00;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 12px;
}

.task-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.task-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.85);
    border: 1px solid #ffe2c5;
    color: #8a4a08;
    font-weight: 600;
    white-space: nowrap;
}

.task-editor-card {
    overflow: hidden;
}

.task-editor-title {
    min-height: 64px;
    font-size: 1.15rem;
    font-weight: 700;
}

.task-editor-description {
    min-height: 180px;
    resize: vertical;
}

.field-caption {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
    color: #6b7280;
    margin-bottom: 10px;
    font-weight: 700;
}

.helper-text {
    color: #6b7280;
    font-size: .9rem;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.choice-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-card {
    border: 1px solid #e5ebf5;
    border-radius: 18px;
    background: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    transition: .2s ease;
    cursor: pointer;
    width: 100%;
}

.choice-card:hover {
    border-color: #f3c08d;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .05);
}

.choice-card.active {
    border-color: #f2b070;
    background: #fff8f1;
    box-shadow: 0 12px 24px rgba(242, 140, 40, .14);
}

.choice-card span {
    display: flex;
    flex-direction: column;
}

.choice-card strong {
    font-size: .95rem;
    line-height: 1.1;
}

.choice-card small {
    color: #6b7280;
    margin-top: 3px;
}

.choice-card.compact {
    padding: 12px 14px;
}

.choice-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: #fff;
    flex: 0 0 auto;
}

.choice-icon.pending {
    background: #9ca3af;
}

.choice-icon.progress {
    background: #2563eb;
}

.choice-icon.review {
    background: #d97706;
}

.choice-icon.done {
    background: #16a34a;
}

.choice-pill {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    margin-top: 4px;
    flex: 0 0 auto;
}

.choice-pill.low {
    background: #94a3b8;
}

.choice-pill.medium {
    background: #2563eb;
}

.choice-pill.high {
    background: #f59e0b;
}

.choice-pill.critical {
    background: #dc2626;
}

.task-upload-dropzone {
    position: relative;
    border: 2px dashed #f3c08d;
    border-radius: 22px;
    background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    transition: .2s ease;
    overflow: hidden;
}

.task-upload-dropzone:hover,
.task-upload-dropzone.dragover {
    border-color: var(--brand);
    background: #fff7ef;
    box-shadow: 0 14px 28px rgba(242, 140, 40, .10);
}

.task-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.task-upload-content {
    text-align: center;
    max-width: 460px;
    pointer-events: none;
}

.task-upload-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--brand) 0%, #ffb067 100%);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 14px 28px rgba(242, 140, 40, .18);
}

.task-upload-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.task-upload-text {
    color: #6b7280;
}

.task-files-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.task-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e8edf6;
    border-radius: 14px;
    background: #fff;
}

.task-file-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.task-file-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff3e8;
    color: #c76808;
    flex: 0 0 auto;
}

.task-file-text {
    min-width: 0;
}

.task-file-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-file-meta {
    font-size: .85rem;
    color: #6b7280;
}

.task-file-remove {
    border: 0;
    background: transparent;
    color: #9ca3af;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    transition: .2s ease;
}

.task-file-remove:hover {
    background: #f3f4f6;
    color: #dc2626;
}

.task-side-card {
    border: 1px solid #eef2f7;
}

.side-card-head h5 {
    font-weight: 700;
}

.task-summary-box {
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, #fff9f3 0%, #ffffff 100%);
    border: 1px solid #ffe2c5;
}

.task-summary-title {
    font-weight: 700;
    margin-bottom: 14px;
}

.task-summary-list {
    display: grid;
    gap: 10px;
}

.task-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(233, 237, 245, .85);
}

.task-summary-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.task-summary-item span {
    color: #6b7280;
    font-size: .92rem;
}

.task-summary-item strong {
    font-weight: 700;
    text-align: right;
}

@media (max-width: 767.98px) {
    .task-create-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .task-create-actions {
        width: 100%;
        justify-content: stretch;
    }

    .task-create-actions .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 1199px) {
    .task-create-hero {
        flex-direction: column;
    }

    .task-hero-chips {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .task-create-hero {
        padding: 20px;
        border-radius: 20px;
    }

    .choice-grid,
    .choice-grid.compact {
        grid-template-columns: 1fr;
    }

    .task-upload-dropzone {
        min-height: 170px;
        padding: 22px;
    }

    .task-file-row {
        align-items: flex-start;
    }

    .task-summary-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .task-summary-item strong {
        text-align: left;
    }
}

.col-xl-2-4 {
    width: 100%;
}

@media (min-width: 1200px) {
    .col-xl-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

.task-list-page {
    position: relative;
}

.task-list-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e7eef9;
    box-shadow: var(--shadow-soft);
}

.task-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-metric-card {
    height: 100%;
    border: 1px solid #eef2f7;
}

.task-metric-card .metric-value {
    font-size: 1.9rem;
}

.task-metric-card.active {
    background: #eff7ff;
}

.task-metric-card.warning {
    background: #fff7ed;
}

.task-metric-card.success {
    background: #effcf4;
}

.task-metric-card.neutral {
    background: #f8fafc;
}

.task-filter-card {
    border: 1px solid #eef2f7;
}

.task-search-wrap {
    position: relative;
}

.task-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.task-search-wrap .form-control {
    padding-left: 40px;
}

.task-list-stack {
    display: grid;
    gap: 16px;
}

.task-row-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.task-row-card.is-overdue {
    border-color: #fecaca;
    box-shadow: 0 10px 28px rgba(220, 38, 38, .08);
}

.task-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 22px;
    padding: 22px;
}

.task-row-titleline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.task-row-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
}

.task-project-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
}

.task-project-chip.standalone {
    background: #fff7ed;
    color: #b45309;
}

.task-row-description {
    color: #556274;
    margin-bottom: 14px;
    max-width: 920px;
}

.task-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.task-avatar-chip,
.task-meta-chip-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e8edf6;
    padding: 10px 12px;
}

.task-avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand) 0%, #ffb067 100%);
    color: #fff;
    font-weight: 800;
    flex: 0 0 auto;
}

.task-avatar-chip small,
.task-meta-chip-inline small {
    display: block;
    color: #6b7280;
    line-height: 1;
    margin-bottom: 4px;
}

.task-avatar-chip strong,
.task-meta-chip-inline strong {
    display: block;
    line-height: 1.15;
}

.task-meta-chip-inline.danger {
    background: #fff1f2;
    border-color: #fecdd3;
}

.task-meta-chip-inline.priority.low {
    background: #f8fafc;
}

.task-meta-chip-inline.priority.medium {
    background: #eff6ff;
}

.task-meta-chip-inline.priority.high {
    background: #fff7ed;
}

.task-meta-chip-inline.priority.critical {
    background: #fef2f2;
}

.task-row-actions {
    display: grid;
    gap: 14px;
    align-content: start;
}

.task-status-box {
    background: #f8fafc;
    border: 1px solid #e8edf6;
    border-radius: 18px;
    padding: 14px;
}

.task-status-box label {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    font-weight: 700;
    margin-bottom: 10px;
}

.task-status-form.is-saving {
    opacity: .72;
    pointer-events: none;
}

.task-status-select {
    min-height: 48px;
    border-radius: 14px;
    font-weight: 700;
}

.task-status-hint {
    display: block;
    margin-top: 8px;
    color: #6b7280;
    font-size: .84rem;
}

.task-status-readonly {
    min-height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #dbe3ef;
    font-weight: 700;
}

.task-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.task-row-panel {
    border-top: 1px solid #eef2f7;
    background: linear-gradient(180deg, #fcfdff 0%, #ffffff 100%);
    padding: 18px 22px 22px;
}

.task-inline-box {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    padding: 16px;
    height: 100%;
}

.task-inline-box-title {
    font-weight: 700;
    margin-bottom: 12px;
}

@media (max-width: 1399px) {
    .task-row-main {
        grid-template-columns: minmax(0, 1fr) 220px;
    }
}

@media (max-width: 1199px) {
    .task-list-hero {
        flex-direction: column;
    }

    .task-row-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .task-list-hero {
        padding: 20px;
        border-radius: 20px;
    }

    .task-row-main {
        padding: 18px;
    }

    .task-row-panel {
        padding: 16px 18px 18px;
    }

    .task-row-title {
        font-size: 1.08rem;
    }

    .task-row-meta {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* ===== Task workbench redesign ===== */
.task-workbench-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid #ffe3c6;
    background: linear-gradient(135deg, #fffaf5 0%, #ffffff 100%);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}

.task-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.task-quick-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1rem;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    text-decoration: none;
    font-weight: 600;
    transition: .2s ease;
}

.task-quick-link:hover {
    border-color: #f3b06f;
    color: #b45309;
    background: #fff8f1;
}

.task-filter-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.task-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.task-card-grid.grouped {
    padding-top: 1rem;
}

.task-work-card {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #e8edf6;
    box-shadow: var(--shadow-soft);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .95rem;
    transition: .2s ease;
}

.task-work-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
    border-color: #d9e3f1;
}

.task-work-card.is-overdue {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fffefe 0%, #fff8f8 100%);
}

.task-work-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.task-work-title {
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
}

.task-work-description {
    margin-top: .3rem;
    color: #6b7280;
    line-height: 1.45;
}

.task-more-btn,
.task-inline-link {
    border: 0;
    background: transparent;
    color: #6b7280;
}

.task-more-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.task-inline-link {
    font-weight: 700;
    color: #b45309;
}

.task-work-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.task-work-project-pill,
.task-work-person-pill {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e8edf6;
    flex: 1 1 220px;
}

.task-work-project-pill.standalone {
    background: #fff7ed;
    border-color: #fed7aa;
}

.task-work-project-pill i {
    color: #b45309;
    font-size: 1.1rem;
}

.task-work-project-pill span,
.task-work-person-pill span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.task-work-project-pill strong,
.task-work-person-pill strong {
    font-size: .95rem;
    line-height: 1.2;
}

.task-work-project-pill small,
.task-work-person-pill small {
    color: #6b7280;
}

.avatar-circle {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e0ecff;
    color: #1d4ed8;
    font-weight: 800;
    flex: 0 0 auto;
}

.task-work-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.task-info-box {
    padding: .85rem .95rem;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e8edf6;
}

.task-info-label {
    display: block;
    color: #6b7280;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}

.task-info-status-box .select2-container .select2-selection--single,
.task-info-status-box .form-select {
    min-height: 42px;
}

.priority-chip {
    display: inline-flex;
    align-items: center;
    padding: .28rem .6rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 700;
}

.priority-critical { background: #fef2f2; color: #b91c1c; }
.priority-high { background: #fff7ed; color: #b45309; }
.priority-medium { background: #eff6ff; color: #1d4ed8; }
.priority-low { background: #f3f4f6; color: #4b5563; }

.task-work-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .15rem;
}

.task-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    color: #6b7280;
    font-size: .92rem;
}

.task-action-panel {
    padding-top: .8rem;
    border-top: 1px dashed #e5e7eb;
}

.task-action-input-group .form-control,
.task-action-input-group .btn {
    min-height: 46px;
}

.task-group-stack {
    display: grid;
    gap: 1rem;
}

.task-group-card {
    border-radius: 22px;
    border: 1px solid #e8edf6;
    background: #fff;
    box-shadow: var(--shadow-soft);
    padding: 1rem 1rem .5rem;
}

.task-group-summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.task-group-summary::-webkit-details-marker {
    display: none;
}

.task-group-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

.task-group-caption {
    color: #6b7280;
    margin-top: .2rem;
}

.task-group-stats {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.task-group-stats span {
    display: inline-flex;
    align-items: center;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-size: .88rem;
    font-weight: 600;
}

.task-group-stats .is-warning {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #b45309;
}

.task-status-form.compact.is-saving .select2-container,
.task-status-form.compact.is-saving .form-select {
    opacity: .6;
}

.task-metric-card.info {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.task-metric-card.info-soft {
    background: linear-gradient(135deg, #eefbf6 0%, #ffffff 100%);
}

@media (max-width: 1199px) {
    .task-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .task-workbench-hero {
        flex-direction: column;
    }

    .task-work-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .task-filter-actions,
    .task-work-footer,
    .task-group-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .task-group-stats {
        justify-content: flex-start;
    }
}

/* === Task workbench dynamic table === */
.task-board-page {
    position: relative;
}

.task-board-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 26px 28px;
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #fef4ea 100%);
    border: 1px solid #ffe2c5;
    box-shadow: var(--shadow-soft);
}

.task-board-hero-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.task-builder-card {
    border: 1px solid #eef2f7;
}

.task-builder-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.task-builder-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.task-builder-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.task-builder-inline-actions {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.task-column-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.column-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #dfe7f3;
    background: #fff;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: .2s ease;
}

.column-pill input {
    display: none;
}

.column-pill.active {
    background: #fff5ea;
    border-color: #f2c28f;
    color: #a85a0b;
    box-shadow: 0 10px 20px rgba(242, 140, 40, .1);
}

.task-grid-card {
    overflow: hidden;
}

.task-grid-topbar {
    padding: 20px 22px 14px;
    border-bottom: 1px solid #edf2f8;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.task-grid-responsive {
    overflow-x: auto;
}

.task-grid-table {
    min-width: 1100px;
}

.task-grid-table thead th {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    padding-top: 14px;
    padding-bottom: 14px;
    background: #fbfcff;
    border-bottom: 1px solid #edf2f8;
}

.task-grid-table tbody tr {
    transition: background-color .2s ease;
}

.task-grid-row:hover > td {
    background: #fffaf5;
}

.task-grid-row.is-overdue > td {
    background: #fff6f6;
}

.task-grid-row.is-done > td {
    background: #fbfdfb;
}

.task-grid-table tbody td {
    border-color: #edf2f8;
    vertical-align: middle;
}

.task-grid-responsive.density-comfortable tbody td {
    padding-top: 16px;
    padding-bottom: 16px;
}

.task-grid-responsive.density-compact tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.task-cell-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.task-detail-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid #dfe7f3;
    border-radius: 10px;
    background: #fff;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: #64748b;
    transition: .2s ease;
    margin-top: 1px;
}

.task-detail-toggle:hover,
.task-detail-toggle.active {
    background: #fff6ec;
    border-color: #f2c28f;
    color: #a85a0b;
}

.task-detail-toggle.active i {
    transform: rotate(90deg);
}

.task-cell-copy {
    min-width: 0;
}

.task-cell-title {
    font-weight: 700;
    color: #0f172a;
}

.task-cell-subtitle {
    margin-top: 4px;
    color: #64748b;
    font-size: .92rem;
}

.task-cell-mini {
    margin-top: 2px;
    font-size: .84rem;
    color: #64748b;
}

.task-cell-strong {
    font-weight: 600;
    color: #1e293b;
}

.task-grid-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.task-grid-link:hover {
    text-decoration: underline;
}

.task-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}

.task-badge-standalone {
    background: #fff7ed;
    color: #c05600;
    border: 1px solid #fed7aa;
}

.task-badge-priority.priority-low {
    background: #f1f5f9;
    color: #475569;
}

.task-badge-priority.priority-medium {
    background: #eff6ff;
    color: #1d4ed8;
}

.task-badge-priority.priority-high {
    background: #fff7ed;
    color: #c05600;
}

.task-badge-priority.priority-critical {
    background: #fef2f2;
    color: #dc2626;
}

.task-grid-status-form {
    min-width: 180px;
}

.task-grid-status-select {
    min-height: 42px;
    font-weight: 600;
}

.task-group-row td {
    padding: 0 !important;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f8;
}

.task-group-row.primary td {
    background: #f8fafc;
}

.task-group-row.secondary td {
    background: #fcfdff;
}

.task-group-button {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    text-align: left;
}

.task-group-button.child {
    padding-left: 34px;
}

.task-group-left,
.task-group-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.task-group-left strong {
    display: block;
    color: #0f172a;
}

.task-group-left small {
    display: block;
    color: #64748b;
}

.task-group-right {
    color: #64748b;
    font-size: .9rem;
}

.task-group-caret {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    border: 1px solid #dbe4f0;
    display: inline-grid;
    place-items: center;
    color: #64748b;
    background: #fff;
    flex: 0 0 auto;
}

.task-group-button.collapsed .task-group-caret i {
    transform: rotate(-90deg);
}

.task-detail-row td {
    padding: 0 !important;
    background: #fcfdff;
}

.task-detail-card {
    padding: 18px 20px 20px 66px;
    border-bottom: 1px solid #edf2f8;
}

.task-detail-block {
    height: 100%;
    padding: 14px 16px;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    background: #fff;
}

.task-detail-label {
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .05em;
    color: #6b7280;
    margin-bottom: 10px;
    font-weight: 700;
}

.task-detail-description {
    color: #334155;
    line-height: 1.6;
}

.task-mini-grid {
    display: grid;
    gap: 12px;
}

.task-mini-grid span {
    display: block;
    font-size: .82rem;
    color: #64748b;
    margin-bottom: 2px;
}

.task-mini-grid strong {
    display: block;
    color: #0f172a;
}

.task-group-body.collapsed .task-grid-row,
.task-group-body.collapsed .task-detail-row,
.task-group-body.collapsed .task-group-row.secondary,
.task-group-body.collapsed .task-subgroup-member {
    display: none;
}

.task-subgroup-hidden {
    display: none;
}

@media (max-width: 1199px) {
    .task-board-hero,
    .task-builder-head,
    .task-builder-footer,
    .task-grid-topbar {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .task-group-button,
    .task-group-left,
    .task-group-right {
        align-items: flex-start;
    }

    .task-group-button,
    .task-builder-inline-actions {
        flex-direction: column;
    }

    .task-detail-card {
        padding-left: 18px;
    }
}

/* ===== Task workbench ===== */
.task-workbench-page {
    position: relative;
}

.task-view-actions {
    flex-wrap: wrap;
}

.task-view-select-wrap {
    min-width: 220px;
}

.task-builder-footer {
    display: grid;
    gap: 18px;
    grid-template-columns: 180px 1fr auto;
    align-items: end;
}

.task-density-switch select {
    min-width: 140px;
}

.task-column-config {
    min-width: 0;
}

.column-pill-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.column-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5ebf5;
    border-radius: 999px;
    padding: 8px 12px;
    background: #fff;
    cursor: pointer;
    transition: .2s ease;
}

.column-pill.active {
    border-color: #f2c08b;
    background: #fff7ef;
}

.column-pill input {
    margin: 0;
}

.task-tab-switch {
    display: inline-flex;
    align-items: center;
    background: #f3f5f9;
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

.task-tab-btn {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 9px 16px;
    font-weight: 600;
    color: #6b7280;
}

.task-tab-btn.active {
    background: #fff;
    color: #111827;
    box-shadow: 0 8px 20px rgba(15,23,42,.08);
}

.task-panel-section {
    display: none;
}

.task-panel-section.is-active {
    display: block;
}

.task-grid-card {
    overflow: hidden;
}

.task-grid-responsive.density-comfortable .task-grid-table > :not(caption) > * > * {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.task-grid-responsive.density-compact .task-grid-table > :not(caption) > * > * {
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.task-grid-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
}

.task-grid-table tbody tr:hover {
    background: #fffaf5;
}

.task-cell-main {
    min-width: 280px;
}

.task-open-detail {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0;
}

.task-row-title {
    display: block;
    font-weight: 700;
    color: #111827;
    margin-bottom: 3px;
}

.task-row-desc {
    display: block;
    color: #6b7280;
    font-size: .9rem;
}

.task-row-desc.empty,
.task-drawer-empty.small {
    color: #9ca3af;
}

.task-row-meta-mobile {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.task-inline-project {
    font-weight: 600;
    color: #111827;
}

.task-inline-caption {
    color: #6b7280;
    font-size: .86rem;
}

.task-inline-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eef3fb;
    color: #29466d;
    font-size: .85rem;
    font-weight: 600;
}

.task-inline-chip.standalone {
    background: #fff4e5;
    color: #b45309;
}

.task-status-badge,
.task-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .78rem;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
}

.task-status-badge i {
    font-size: .76rem;
    line-height: 1;
}

.task-status-badge.pending { background: #eef2f7; color: #475569; }
.task-status-badge.progress { background: #e8f0ff; color: #1d4ed8; }
.task-status-badge.review { background: #fff4e5; color: #b45309; }
.task-status-badge.done { background: #eaf8ef; color: #166534; }
.task-status-badge.cancelled,
.task-status-badge.neutral { background: #f3f4f6; color: #6b7280; }

.task-priority-badge.low { background: #eef2f7; color: #475569; }
.task-priority-badge.medium { background: #e8f0ff; color: #1d4ed8; }
.task-priority-badge.high { background: #fff4e5; color: #b45309; }
.task-priority-badge.critical { background: #fff1f2; color: #be123c; }
.task-priority-badge.neutral { background: #f3f4f6; color: #6b7280; }

.task-inline-status-select {
    min-width: 148px;
}

.task-status-badge-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.task-status-badge-link:hover .task-status-badge {
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
    transform: translateY(-1px);
}

.task-status-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.task-status-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 11px 15px;
    border-radius: 14px;
    border: 1px solid #dbe3ef;
    background: #fff;
    color: #334155;
    font-weight: 700;
    font-size: .88rem;
    line-height: 1.2;
    cursor: pointer;
    transition: .18s ease;
}

.task-status-choice:hover {
    border-color: rgba(var(--brand-rgb), .34);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.task-status-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.task-status-choice-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 10px;
}

.task-status-choice.pending {
    color: #475569;
    background: #f8fafc;
}

.task-status-choice.progress {
    color: #1d4ed8;
    background: #eef4ff;
}

.task-status-choice.review {
    color: #b45309;
    background: #fff7ed;
}

.task-status-choice.done {
    color: #166534;
    background: #ecfdf3;
}

.task-status-choice.cancelled,
.task-status-choice.neutral {
    color: #475569;
    background: #f8fafc;
}

.task-status-choice.is-selected,
.task-status-choice:has(input:checked) {
    border-color: currentColor;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
}

.task-due-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 700;
}

.task-due-chip.overdue { background: #fff1f2; color: #be123c; }
.task-due-chip.today { background: #fff8e6; color: #b45309; }
.task-due-chip.normal { background: #eef3fb; color: #29466d; }
.task-due-muted { color: #9ca3af; }

.task-activity-stack {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.task-activity-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5ebf5;
    background: #fff;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: .8rem;
    color: #475569;
}

.task-group-stack {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.task-group-card {
    border: 1px solid #eef2f7;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
}

.task-group-head,
.task-subgroup-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    align-items: center;
}

.task-group-head {
    background: linear-gradient(180deg, #fff8f1 0%, #fff 100%);
    border-bottom: 1px solid #f3ede7;
}

.task-group-head h5,
.task-subgroup-head strong {
    margin: 0;
    font-weight: 700;
}

.task-group-head p {
    margin: 4px 0 0;
    color: #6b7280;
}

.task-group-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.task-group-metrics span,
.task-subgroup-head span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #f3f5f9;
    padding: 7px 10px;
    font-size: .82rem;
    color: #475569;
}

.task-group-metrics .danger {
    background: #fff1f2;
    color: #be123c;
}

.task-subgroup-block + .task-subgroup-block {
    border-top: 1px solid #eef2f7;
}

.task-kanban-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.task-kanban-column {
    border: 1px solid #eef2f7;
    border-radius: 22px;
    background: #fff;
    overflow: hidden;
    min-height: 440px;
}

.task-kanban-head {
    padding: 18px;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfe;
}

.task-kanban-head h5 {
    margin: 0;
    font-weight: 700;
}

.task-kanban-head p {
    margin: 4px 0 0;
    color: #6b7280;
}

.task-kanban-list {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.task-kanban-card {
    border: 1px solid #eef2f7;
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    text-align: left;
    transition: .2s ease;
}

.task-kanban-card:hover {
    border-color: #f3c08d;
    background: #fffaf5;
    transform: translateY(-1px);
}

.task-kanban-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.task-kanban-desc {
    color: #6b7280;
    font-size: .9rem;
    min-height: 42px;
}

.task-kanban-meta,
.task-kanban-foot {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.task-kanban-foot {
    color: #6b7280;
    font-size: .85rem;
}

.task-kanban-empty {
    min-height: 120px;
    display: grid;
    place-items: center;
    border: 2px dashed #e5ebf5;
    border-radius: 18px;
    color: #9ca3af;
}

.task-detail-drawer {
    position: fixed;
    top: 0;
    right: -540px;
    width: 520px;
    max-width: calc(100vw - 18px);
    height: 100vh;
    background: #fff;
    z-index: 1060;
    box-shadow: -16px 0 36px rgba(15,23,42,.14);
    display: flex;
    flex-direction: column;
    transition: right .25s ease;
}

.task-detail-drawer.open {
    right: 0;
}

.task-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.4);
    z-index: 1055;
    opacity: 0;
    visibility: hidden;
    transition: .2s ease;
}

.task-drawer-backdrop.show {
    opacity: 1;
    visibility: visible;
}

body.task-drawer-open {
    overflow: hidden;
}

.task-drawer-head {
    padding: 18px 20px;
    border-bottom: 1px solid #eef2f7;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.task-drawer-kicker {
    color: #9ca3af;
    text-transform: uppercase;
    font-size: .76rem;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.task-drawer-body {
    padding: 20px;
    overflow-y: auto;
    display: grid;
    gap: 18px;
}

.task-drawer-loading,
.task-drawer-empty {
    min-height: 160px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #6b7280;
}

.task-drawer-summary,
.task-drawer-section {
    border: 1px solid #eef2f7;
    border-radius: 18px;
    background: #fff;
    padding: 16px;
}

.task-detail-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.task-drawer-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
}

.task-drawer-grid span {
    display: block;
    color: #6b7280;
    font-size: .82rem;
    margin-bottom: 4px;
}

.task-drawer-grid strong {
    display: block;
    font-weight: 700;
}

.task-drawer-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 16px;
    background: rgba(248, 250, 252, .92);
}

.task-drawer-status-note {
    margin-top: 4px;
    font-size: .78rem;
    color: #64748b;
}

.task-drawer-status-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.task-drawer-description {
    line-height: 1.6;
    color: #374151;
}

.task-drawer-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.task-drawer-section-head h6 {
    margin: 0;
    font-weight: 700;
}

.task-drawer-section-head span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #f3f5f9;
    padding: 6px 10px;
    font-size: .82rem;
}

.task-drawer-form {
    display: grid;
    gap: 10px;
}

.task-drawer-form-actions {
    display: flex;
    justify-content: flex-end;
}

.task-comment-list,
.task-attachments-list,
.task-subtask-list {
    display: grid;
    gap: 10px;
}

.task-comment-item,
.task-subtask-item,
.task-attachment-item {
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 12px 14px;
    background: #fbfcff;
}

.task-comment-head,
.task-subtask-item,
.task-attachment-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.task-comment-head span,
.task-subtask-item small,
.task-attachment-item small {
    color: #6b7280;
    font-size: .82rem;
}

.task-comment-body {
    margin-top: 8px;
    color: #374151;
    line-height: 1.55;
}

.task-subtask-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.task-attachment-item {
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.task-attachment-item:hover {
    border-color: #f2c08b;
    background: #fffaf5;
}

@media (max-width: 1399px) {
    .task-kanban-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .task-builder-footer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .task-grid-table thead {
        display: none;
    }

    .task-grid-table tbody tr,
    .task-grid-table tbody td {
        display: block;
        width: 100%;
    }

    .task-grid-table tbody tr {
        border-bottom: 1px solid #eef2f7;
        padding: 12px 0;
    }

    .task-grid-table tbody td {
        padding: 8px 14px;
        border: 0;
    }

    .task-row-meta-mobile {
        display: flex;
    }

    .col-actions {
        padding-top: 0 !important;
    }

    .task-drawer-grid {
        grid-template-columns: 1fr;
    }

    .task-drawer-status-row {
        flex-direction: column;
        align-items: stretch;
    }

    .task-drawer-status-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .task-status-choice-group {
        gap: 8px;
    }

    .task-status-choice {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .task-board-hero-actions {
        display: grid;
        width: 100%;
        gap: 10px;
    }

    .task-kanban-grid {
        grid-template-columns: 1fr;
    }

    .task-detail-drawer {
        width: 100%;
        max-width: 100%;
    }
}

/* Phase 3 workbench */
.task-filters-body.is-collapsed {
    display: none;
}

.column-menu {
    min-width: 220px;
}

.column-check-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .35rem 0;
    cursor: pointer;
}

.task-kanban-card.is-draggable {
    cursor: grab;
}

.task-kanban-card.dragging {
    opacity: .55;
}

.task-kanban-column.dragover {
    outline: 2px dashed rgba(242, 140, 40, .45);
    outline-offset: 4px;
    border-radius: 18px;
}

.task-readonly-note {
    border: 1px dashed #dbe3ef;
    background: #f8fafc;
    border-radius: 16px;
    padding: .9rem 1rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.task-progress-inline {
    color: #6b7280;
    font-size: .9rem;
    margin-top: -.25rem;
}

.task-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .65rem;
}

.task-calendar-weekday {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    font-weight: 700;
}

.task-calendar-cell {
    min-height: 132px;
    border: 1px solid #e9edf5;
    border-radius: 16px;
    background: #fff;
    padding: .7rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.task-calendar-cell.is-muted {
    background: #f8fafc;
    color: #94a3b8;
}

.task-calendar-cell.is-today {
    border-color: #f2b070;
    box-shadow: 0 8px 22px rgba(242, 140, 40, .12);
}

.task-calendar-day {
    font-weight: 700;
}

.task-calendar-items {
    display: grid;
    gap: .4rem;
}

.task-calendar-item {
    border: 0;
    width: 100%;
    text-align: left;
    border-radius: 10px;
    background: #fff3e8;
    color: #9a5200;
    padding: .45rem .55rem;
    font-size: .82rem;
    line-height: 1.2;
}

.task-calendar-more {
    color: #64748b;
    font-size: .8rem;
}

.calendar-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.task-timeline-stack {
    display: grid;
    gap: 1rem;
}

.task-timeline-group {
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: .9rem;
}

.task-timeline-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .7rem;
}

.task-timeline-head span {
    color: #6b7280;
    font-size: .86rem;
}

.task-timeline-item {
    width: 100%;
    border: 0;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: .8rem .9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    margin-top: .55rem;
}

.task-timeline-title {
    font-weight: 700;
}

.task-timeline-sub,
.task-timeline-empty {
    color: #6b7280;
    font-size: .86rem;
}

.task-detail-drawer {
    width: min(560px, 100vw);
}

.task-drawer-form .form-label {
    font-size: .82rem;
}

.task-drawer-section {
    border-top: 1px solid #eef2f7;
    padding-top: 1rem;
    margin-top: 1rem;
}

.task-drawer-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: .8rem;
}

.task-drawer-section-head span {
    color: #6b7280;
    font-size: .85rem;
}

.task-drawer-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem;
}

.task-builder-head,
.task-builder-footer,
.task-board-hero-actions {
    display: flex;
    gap: .9rem;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.task-builder-footer {
    padding-top: .25rem;
}

.task-view-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.task-view-select-wrap {
    min-width: 210px;
}

.task-tab-switch {
    display: inline-flex;
    gap: .35rem;
    background: #f8fafc;
    padding: .28rem;
    border-radius: 999px;
}

.task-tab-btn {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: .5rem .9rem;
    font-weight: 700;
    color: #64748b;
}

.task-tab-btn.active {
    background: #fff;
    color: #111827;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.task-panel-section {
    display: none;
}

.task-panel-section.is-active {
    display: block;
}

.quick-create-form .select2-container {
    width: 100% !important;
}

@media (max-width: 1199.98px) {
    .task-calendar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .task-calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-timeline-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

.is-col-hidden { display: none !important; }

.task-label-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.task-label-stack-inline {
    margin-top: 8px;
}

.task-label-chip {
    --label-color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--label-color) 14%, white);
    color: #334155;
    border: 1px solid color-mix(in srgb, var(--label-color) 28%, white);
    font-size: .78rem;
    font-weight: 700;
}

.task-row-meta-line {
    margin-top: 6px;
    display: block;
    color: #6b7280;
    font-size: .82rem;
}

.task-row-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.task-drawer-head-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.task-detail-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.task-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.task-detail-grid > div,
.task-drawer-grid > div {
    background: #f8fafc;
    border: 1px solid #e8edf6;
    border-radius: 14px;
    padding: 12px 14px;
}

.task-detail-grid span,
.task-drawer-grid span {
    display: block;
    font-size: .78rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.task-detail-grid strong,
.task-drawer-grid strong {
    display: block;
    font-size: .95rem;
}

.task-detail-description {
    white-space: normal;
    line-height: 1.6;
}

.task-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.task-detail-section-head span {
    color: #6b7280;
    font-size: .88rem;
}

.task-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.task-calendar-nav {
    display: flex;
    gap: 8px;
}

.task-calendar-render {
    min-height: 420px;
}

.task-calendar-weekdays,
.task-calendar-cells {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.task-calendar-weekdays > div {
    padding: 10px;
    font-size: .78rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.task-calendar-cell {
    min-height: 150px;
    border: 1px solid #edf1f7;
    padding: 10px;
    background: #fff;
}

.task-calendar-cell.is-muted {
    background: #f8fafc;
    color: #94a3b8;
}

.task-calendar-cell.is-today,
.task-calendar-week-col.is-today {
    box-shadow: inset 0 0 0 2px rgba(242, 140, 40, .28);
    border-radius: 16px;
}

.task-calendar-day-num {
    font-weight: 800;
    margin-bottom: 10px;
}

.task-calendar-day-items,
.task-calendar-day-view {
    display: grid;
    gap: 8px;
}

.task-calendar-pill,
.task-calendar-week-item,
.task-calendar-day-card {
    width: 100%;
    text-align: left;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    transition: .2s ease;
}

.task-calendar-pill:hover,
.task-calendar-week-item:hover,
.task-calendar-day-card:hover {
    border-color: #f3b06f;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .07);
}

.task-calendar-pill.pending { border-left: 4px solid #94a3b8; }
.task-calendar-pill.progress { border-left: 4px solid #2563eb; }
.task-calendar-pill.review { border-left: 4px solid #f59e0b; }
.task-calendar-pill.done { border-left: 4px solid #16a34a; }
.task-calendar-pill.cancelled { border-left: 4px solid #64748b; }

.task-calendar-more,
.task-calendar-empty {
    color: #64748b;
    font-size: .86rem;
}

.task-calendar-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.task-calendar-week-col {
    border: 1px solid #e8edf6;
    border-radius: 16px;
    background: #fff;
    padding: 12px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.task-calendar-week-head strong {
    display: block;
    text-transform: capitalize;
}

.task-calendar-week-head span,
.task-calendar-day-sub {
    color: #6b7280;
    font-size: .84rem;
}

.task-calendar-day-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.task-drawer-summary .task-label-stack {
    margin: 12px 0 14px;
}

@media (max-width: 991px) {
    .task-detail-grid,
    .task-calendar-week-grid,
    .task-calendar-weekdays,
    .task-calendar-cells {
        grid-template-columns: 1fr;
    }

    .task-calendar-cell {
        min-height: auto;
    }
}

.task-subtask-card {
    background: linear-gradient(180deg, #fcfdff 0%, #ffffff 100%);
    gap: 14px;
}

.task-subtask-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.task-subtask-top-left {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.task-subtask-drag {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    background: #f3f5f9;
    color: #64748b;
    cursor: grab;
    flex: 0 0 auto;
}

.task-subtask-headline {
    font-weight: 700;
}

.task-subtask-headmeta {
    color: #6b7280;
    font-size: .84rem;
    margin-top: 4px;
}

.task-subtask-inline-form {
    border-top: 1px dashed #e6ebf3;
    padding-top: 14px;
}

.task-subtask-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.task-subtask-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-subtask-progress-wrap .task-progress-inline {
    min-width: 42px;
    font-weight: 700;
    color: #475569;
}

.task-subtask-checklist {
    border-top: 1px solid #edf1f7;
    padding-top: 14px;
}

.task-checklist-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.task-checklist-head span {
    font-size: .82rem;
    color: #6b7280;
}

.task-checklist-list {
    display: grid;
    gap: 8px;
}

.task-checklist-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #edf1f7;
    background: #fff;
}

.task-checklist-item.done span {
    text-decoration: line-through;
    color: #6b7280;
}

.task-checklist-toggle-form {
    margin: 0;
}

.task-checklist-delete-form {
    margin: 0;
}

.task-checklist-delete-btn {
    border: 0;
    background: transparent;
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.task-checklist-delete-btn:hover {
    background: #f8fafc;
    color: #dc2626;
}

.task-checklist-add-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.task-subtask-card.dragging {
    opacity: .55;
}

.task-subtask-card.drag-over {
    border-color: #f2b070;
    box-shadow: 0 0 0 2px rgba(242, 140, 40, .12);
}

@media (max-width: 991px) {
    .task-subtask-top,
    .task-subtask-top-left {
        flex-direction: column;
    }

    .task-checklist-add-form {
        grid-template-columns: 1fr;
    }
}


/* Phase 7: claridad visual tarea vs subtarea */
.task-table-row.is-subtask {
    background: #fcfcfd;
}
.task-table-row.is-subtask:hover {
    background: #fff8f3;
}
.task-table-row.is-subtask .task-cell-main {
    position: relative;
    padding-left: 18px;
}
.task-table-row.is-subtask .task-cell-main::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 999px;
    background: #cbd5e1;
}
.task-row-type-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.task-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.task-type-badge.main {
    background: #e8f0ff;
    color: #1d4ed8;
}
.task-type-badge.subtask {
    background: #f3f4f6;
    color: #475569;
}
.task-parent-inline {
    color: #64748b;
    font-size: .83rem;
    font-weight: 600;
}
.task-parent-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
}
.task-parent-link:hover {
    background: #fff7ef;
    border-color: #f3c08d;
    color: #9a550e;
}


.task-tree-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-left: calc(var(--task-level, 0) * 18px);
}
.task-tree-toggle,
.task-tree-branch,
.task-tree-spacer {
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex: 0 0 18px;
}
.task-tree-toggle { cursor: pointer; }
.task-tree-toggle.is-collapsed i { transform: rotate(-90deg); }
.task-tree-toggle i { transition: transform .2s ease; }
.task-table-row.is-subtask { background: #fcfdff; }
.task-table-row.is-subtask .task-row-title { font-size: .96rem; }
.task-table-row.is-subtask .task-type-badge.subtask { background: #eef2ff; color: #4338ca; }
.task-table-row[data-hidden-by-tree="1"] { display: none; }
.settings-card .form-check { padding-top: .35rem; }


.settings-section-title {
    font-weight: 700;
    color: #111827;
}

.settings-section-help {
    color: #6b7280;
    font-size: .9rem;
}

.hierarchy-card {
    height: 100%;
}

.hierarchy-board {
    display: grid;
    gap: 12px;
    max-height: 75vh;
    overflow: auto;
}

.hierarchy-level {
    display: grid;
    gap: 12px;
}

.hierarchy-node {
    border: 1px solid #e8edf6;
    border-radius: 16px;
    padding: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}

.hierarchy-node.is-inactive {
    opacity: .72;
    background: #fafafa;
}

.hierarchy-level[data-depth='1'] .hierarchy-node,
.hierarchy-level[data-depth='2'] .hierarchy-node,
.hierarchy-level[data-depth='3'] .hierarchy-node,
.hierarchy-level[data-depth='4'] .hierarchy-node {
    margin-left: 18px;
    border-left: 4px solid #ffe0bf;
}

.hierarchy-node-main {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.hierarchy-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #fff3e8;
    color: #d97706;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.hierarchy-content {
    min-width: 0;
    flex: 1;
}

.hierarchy-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.hierarchy-title {
    font-weight: 700;
}

.hierarchy-meta {
    color: #6b7280;
    font-size: .9rem;
}

.hierarchy-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: .85rem;
    color: #4b5563;
}

.hierarchy-actions {
    flex: 0 0 auto;
}

.task-tree-toggle-btn {
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.task-tree-toggle-btn:hover .task-tree-toggle {
    color: #111827;
}
.task-cell-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.task-cell-main > .task-open-detail {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-group-title {
    margin: 18px 10px 8px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
}

.admin-card-shell .card-header,
.form-shell-card,
.info-side-card {
    border-radius: 20px;
}

.admin-table th {
    white-space: nowrap;
}

.users-admin-table td {
    vertical-align: top;
}

.quick-manager-form {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 280px;
}

.quick-manager-form .form-select {
    min-width: 0;
}

.current-manager-text {
    line-height: 1.2;
}

.form-shell-card .form-control-lg {
    min-height: 56px;
    border-radius: 16px;
}

.info-side-card {
    border: 1px solid #eef2f7;
}

@media (max-width: 991px) {
    .quick-manager-form {
        min-width: 220px;
        flex-direction: column;
        align-items: stretch;
    }
}

/* Phase 10: users + job titles workspace */
.workspace-shell-card {
    overflow: hidden;
}

.workspace-tabs {
    display: inline-flex;
    gap: 10px;
    padding: 6px;
    border-radius: 16px;
    background: #f6f8fc;
    border: 1px solid #e7edf6;
}

.workspace-tab {
    border: 0;
    background: transparent;
    color: #6b7280;
    font-weight: 700;
    padding: 11px 16px;
    border-radius: 12px;
    transition: .2s ease;
}

.workspace-tab.is-active {
    background: #fff;
    color: var(--text-main);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.workspace-panel {
    display: none;
}

.workspace-panel.is-active {
    display: block;
}

.workspace-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.workspace-toolbar-main {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 620px;
}

.workspace-toolbar-side {
    max-width: 420px;
}

.workspace-search-group {
    position: relative;
    min-width: 240px;
}

.workspace-search-group i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3b2;
}

.workspace-search-group .form-control {
    padding-left: 42px;
}

.workspace-filter-group {
    min-width: 180px;
}

.admin-table-scroll {
    max-height: 66vh;
    overflow: auto;
    border: 1px solid #eef2f7;
    border-radius: 18px;
}

.admin-table-scroll thead th {
    position: sticky;
    top: 0;
    background: #fbfcff;
    z-index: 2;
    box-shadow: inset 0 -1px 0 #e9edf5;
}

.users-table-scroll {
    max-height: 70vh;
}

.job-titles-table-scroll {
    max-height: 62vh;
}

.users-inline-form {
    display: contents;
}

.users-admin-table td {
    vertical-align: top;
}

.users-admin-table .form-control,
.users-admin-table .form-select {
    min-width: 0;
}

.users-inline-actions {
    align-items: flex-start;
}

.users-admin-table .status-badge {
    margin-top: 8px;
}

.org-board {
    display: grid;
    gap: 12px;
}

.org-tree-level {
    display: grid;
    gap: 12px;
    margin-left: 0;
}

.org-tree-level[data-depth='1'],
.org-tree-level[data-depth='2'],
.org-tree-level[data-depth='3'],
.org-tree-level[data-depth='4'] {
    margin-left: 26px;
    padding-left: 18px;
    border-left: 2px dashed #e4eaf3;
}

.org-node {
    border: 1px solid #e8edf6;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.org-node[hidden],
tr[hidden] {
    display: none !important;
}

.org-node.is-inactive {
    opacity: .82;
}

.org-node-summary {
    list-style: none;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 18px;
    cursor: pointer;
}

.org-node-summary::-webkit-details-marker {
    display: none;
}

.org-node-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff3e8;
    color: #bf5b00;
    flex: 0 0 auto;
}

.org-node-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.org-node-name-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.org-node-name {
    font-size: 1rem;
}

.org-node-meta {
    color: #6b7280;
    font-size: .92rem;
}

.org-node-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: #4b5563;
    font-size: .85rem;
}

.org-node-summary-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.org-node-chevron {
    color: #94a3b8;
    transition: transform .2s ease;
}

.org-node[open] > .org-node-summary .org-node-chevron {
    transform: rotate(180deg);
}

.org-node-body {
    padding: 0 18px 18px 78px;
}

.org-node-grid {
    display: grid;
    gap: 14px;
}

.org-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 16px;
}

.org-label {
    display: block;
    color: #6b7280;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.org-move-form {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #edf2f7;
    background: #fbfcff;
}

.org-move-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.org-node-footer {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.info-inline-card {
    border: 1px solid #eef2f7;
    border-radius: 16px;
    background: #fbfcff;
    padding: 16px;
}

@media (max-width: 991px) {
    .workspace-toolbar-main {
        flex-basis: 100%;
    }

    .org-node-body {
        padding-left: 18px;
    }
}

.task-kanban-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.task-kanban-toolbar-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 240px;
}

.task-kanban-column.dragover {
    border-color: var(--brand, #f28c28);
    box-shadow: 0 0 0 2px rgba(242, 140, 40, .12) inset;
}

.task-kanban-card.is-draggable {
    cursor: grab;
}

.task-kanban-card.dragging {
    opacity: .72;
    cursor: grabbing;
}


.task-kanban-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.task-kanban-switch-btn {
    border: 1px solid #d9e2ef;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 600;
    font-size: .92rem;
    transition: all .18s ease;
}

.task-kanban-switch-btn:hover {
    border-color: #f2b070;
    background: #fff7ef;
    color: #9a5200;
}

.task-kanban-switch-btn.active {
    background: linear-gradient(135deg, #fff3e8 0%, #ffe2c5 100%);
    border-color: #f2b070;
    color: #9a5200;
    box-shadow: 0 8px 18px rgba(242, 140, 40, .12);
}

.task-kanban-hint {
    color: #64748b;
    font-size: .86rem;
}

.task-kanban-topline {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.task-kanban-movehint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 9px;
}

.task-kanban-movehint.can-move {
    background: #eef6ff;
    color: #1d4ed8;
}

.task-kanban-movehint.readonly {
    background: #f3f4f6;
    color: #6b7280;
}

.task-kanban-card.is-readonly {
    cursor: pointer;
    opacity: .95;
}

.task-kanban-card.is-readonly:hover {
    transform: translateY(-1px);
}

.task-gantt-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.task-gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.task-gantt-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e8edf4;
    font-size: .78rem;
    color: #4b5563;
}

.task-gantt-legend-chip .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.task-gantt-legend-chip .dot.planned { background: #2563eb; }
.task-gantt-legend-chip .dot.critical { background: #dc2626; }
.task-gantt-legend-chip .dot.done { background: #16a34a; }

.task-gantt-render {
    overflow: auto;
    border: 1px solid #e8edf4;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.task-gantt-shell {
    min-width: 1080px;
}

.task-gantt-header,
.task-gantt-row {
    display: grid;
    grid-template-columns: 320px minmax(760px, 1fr);
}

.task-gantt-side-head {
    padding: 12px 14px;
    font-weight: 700;
    border-right: 1px solid #eef2f7;
    background: #fff;
    position: sticky;
    left: 0;
    z-index: 2;
}

.task-gantt-timeline-head {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(42px, 1fr);
    background: #fff;
}

.task-gantt-day-head {
    border-left: 1px solid #f1f5f9;
    padding: 10px 6px;
    text-align: center;
    color: #64748b;
    font-size: .75rem;
}

.task-gantt-day-head span {
    display: block;
    font-weight: 700;
    color: #1f2937;
}

.task-gantt-day-head.is-today,
.task-gantt-cell.is-today {
    background: rgba(242, 140, 40, .08);
}

.task-gantt-gridline {
    border-bottom: 1px solid #eef2f7;
}

.task-gantt-side {
    padding: 12px 14px 12px calc(14px + (var(--task-level, 0) * 18px));
    text-align: left;
    border: 0;
    background: #fff;
    border-right: 1px solid #eef2f7;
    position: sticky;
    left: 0;
    z-index: 1;
}

.task-gantt-side strong {
    display: block;
    font-size: .94rem;
    color: #111827;
}

.task-gantt-side small {
    display: block;
    margin-top: 4px;
    color: #6b7280;
}

.task-gantt-type {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.task-gantt-type.task { background: #eff6ff; color: #1d4ed8; }
.task-gantt-type.subtask { background: #fff7ed; color: #c2410c; }

.task-gantt-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.task-gantt-mini-label {
    --label-color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(100, 116, 139, .08);
    color: #475569;
    border-left: 3px solid var(--label-color);
    font-size: .72rem;
}

.task-gantt-track {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(42px, 1fr);
    min-height: 96px;
    align-items: stretch;
}

.task-gantt-cell {
    border-left: 1px solid #f5f7fb;
}

.task-gantt-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    min-width: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 10px 18px rgba(15, 23, 42, .10);
}

.task-gantt-bar.planned { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); }
.task-gantt-bar.high { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); }
.task-gantt-bar.critical { background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); }
.task-gantt-bar.done { background: linear-gradient(135deg, #15803d 0%, #22c55e 100%); }

.task-gantt-empty {
    padding: 36px;
    color: #6b7280;
    text-align: center;
}

@media (max-width: 991px) {
    .task-gantt-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}


.topbar-user-dropdown .dropdown-menu {
    border: 0;
    border-radius: 16px;
    min-width: 220px;
    padding: .55rem;
}

.topbar-user-btn {
    border-radius: 14px !important;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .8rem;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.topbar-user-btn::after {
    margin-left: .35rem;
}

.topbar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), #ffb86b);
    color: #fff;
    box-shadow: 0 8px 18px rgba(242, 140, 40, 0.22);
    flex: 0 0 auto;
}

.sidebar-profile-link {
    margin-top: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    padding: .6rem .8rem;
    background: rgba(255, 255, 255, 0.06);
    transition: all .2s ease;
    font-size: .92rem;
}

.sidebar-profile-link:hover {
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
}

.profile-card,
.profile-security-card {
    border: 0;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

.profile-force-alert {
    border: 0;
    border-radius: 18px;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), #ffb86b);
    color: #fff;
    font-size: 1.45rem;
    box-shadow: 0 12px 24px rgba(242, 140, 40, 0.25);
}

.profile-info-list {
    display: grid;
    gap: .9rem;
}

.profile-info-item {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.profile-info-label {
    color: #6b7280;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.profile-note {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .95rem 1rem;
    border-radius: 14px;
    background: var(--brand-soft);
    color: #9a5a0f;
    font-size: .92rem;
}

.profile-note i {
    margin-top: .1rem;
}

@media (max-width: 767.98px) {
    .topbar-user-btn {
        padding: .5rem .65rem;
    }

    .topbar-account-name {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Workbench - scroll interno y header fijo */
.task-table-scroll-shell {
    max-height: calc(100vh - 360px);
    overflow: auto;
    overscroll-behavior: contain;
}

.task-table-scroll-shell .task-grid-responsive {
    overflow: visible;
}

.task-table-scroll-shell .task-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    box-shadow: inset 0 -1px 0 #edf2f8;
}

.task-table-scroll-shell .task-group-stack {
    padding-top: 0;
}

@media (max-width: 1199.98px) {
    .task-table-scroll-shell {
        max-height: calc(100vh - 320px);
    }
}

@media (max-width: 991px) {
    .task-table-scroll-shell {
        max-height: none;
        overflow: visible;
    }
}


/* ===== Workbench - estilo visual / compacta ===== */
.task-density-switch {
    min-width: 220px;
}

.task-density-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: #f3f5f9;
    border: 1px solid #e5ebf5;
}

.task-density-btn {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 700;
    color: #64748b;
    min-width: 98px;
}

.task-density-btn.active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

.task-density-note {
    margin-top: 6px;
    font-size: .78rem;
    color: #64748b;
    line-height: 1.35;
}

.task-row-actions {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.task-row-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.task-row-actions .btn i {
    font-size: .9rem;
}

.task-grid-responsive.density-compact .task-grid-table {
    min-width: 980px;
}

.task-grid-responsive.density-compact .task-grid-table {
    min-width: 940px;
}

.task-grid-responsive.density-compact .task-grid-table > :not(caption) > * > * {
    padding-top: .42rem;
    padding-bottom: .42rem;
}

.task-grid-responsive.density-compact .task-grid-table thead th {
    font-size: .72rem;
    padding-top: 9px;
    padding-bottom: 9px;
    letter-spacing: .04em;
}

.task-grid-responsive.density-compact .task-cell-main {
    gap: 7px;
    align-items: center;
}

.task-grid-responsive.density-compact .task-open-detail {
    min-width: 0;
}

.task-grid-responsive.density-compact .task-row-type-line,
.task-grid-responsive.density-compact .task-row-desc,
.task-grid-responsive.density-compact .task-row-meta-line,
.task-grid-responsive.density-compact .task-label-stack-inline {
    display: none !important;
}

.task-grid-responsive.density-compact .task-row-title {
    margin-bottom: 0;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.task-grid-responsive.density-compact td[data-col="project"],
.task-grid-responsive.density-compact td[data-col="responsible"],
.task-grid-responsive.density-compact td[data-col="status"],
.task-grid-responsive.density-compact td[data-col="priority"],
.task-grid-responsive.density-compact td[data-col="due"],
.task-grid-responsive.density-compact td[data-col="activity"] {
    white-space: nowrap;
}

.task-grid-responsive.density-compact td[data-col="project"] .task-inline-project,
.task-grid-responsive.density-compact td[data-col="responsible"] .task-inline-project {
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.2;
}

.task-grid-responsive.density-compact td[data-col="project"] .task-inline-caption {
    display: none;
}

.task-grid-responsive.density-compact .task-inline-chip,
.task-grid-responsive.density-compact .task-status-badge,
.task-grid-responsive.density-compact .task-priority-badge,
.task-grid-responsive.density-compact .task-due-chip,
.task-grid-responsive.density-compact .task-badge {
    font-size: .74rem;
    padding: 5px 9px;
    line-height: 1.15;
    min-height: 28px;
}

.task-grid-responsive.density-compact .task-inline-status-select {
    min-height: 32px;
    font-size: .8rem;
    font-weight: 700;
    padding-top: .2rem;
    padding-bottom: .2rem;
    padding-right: 1.8rem;
}

.task-grid-responsive.density-compact .task-activity-stack {
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
}

.task-grid-responsive.density-compact .task-activity-chip {
    min-height: 28px;
    min-width: 28px;
    padding: 4px 7px;
    font-size: .74rem;
    gap: 4px;
    justify-content: center;
}

.task-grid-responsive.density-compact .task-row-actions {
    gap: 4px;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.task-grid-responsive.density-compact .task-row-actions .btn {
    min-width: 30px;
    width: 30px;
    height: 30px;
    min-height: 30px;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
}

.task-grid-responsive.density-compact .task-row-actions .btn span {
    display: none;
}

.task-grid-responsive.density-compact .task-row-actions .btn i {
    font-size: .8rem;
    margin: 0;
}

.task-grid-responsive.density-compact .col-actions {
    width: 74px;
    min-width: 74px;
}

.task-grid-responsive.density-compact td[data-col="activity"] {
    width: 82px;
    min-width: 82px;
}

.task-grid-responsive.density-compact .task-tree-toggle,
.task-grid-responsive.density-compact .task-tree-branch,
.task-grid-responsive.density-compact .task-tree-spacer {
    transform: scale(.85);
    transform-origin: center;
}

body.theme-dark .task-density-toggle {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .08);
}

body.theme-dark .task-density-btn {
    color: #94a3b8;
}

body.theme-dark .task-density-btn.active {
    background: #111827;
    color: #f8fafc;
    box-shadow: none;
}

body.theme-dark .task-grid-responsive.density-compact .task-row-actions .btn {
    border-color: rgba(255,255,255,.12);
}

@media (max-width: 767px) {
    .task-density-switch {
        min-width: 100%;
    }

    .task-density-toggle {
        width: 100%;
    }

    .task-density-btn {
        flex: 1 1 50%;
    }
}

/* ==== Theme tokens and configurable surfaces ==== */
:root {
    --surface-bg: #ffffff;
    --surface-alt-bg: #f8fafc;
    --border-color: #e5e7eb;
    --text-primary: #111827;
    --text-secondary: #475569;
    --text-muted: #6b7280;
    --sidebar-muted: #9ca3af;
    --input-bg: #ffffff;
}

body {
    background: var(--content-bg);
    color: var(--text-primary);
}

.page-title,
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
.card-title,
.settings-theme-preview-title,
.settings-color-group-title,
.settings-nav-link strong,
.topbar-title {
    color: var(--text-primary);
}

.page-subtitle,
.topbar-subtitle,
.topbar-account-role,
.text-muted,
.form-text,
.settings-nav-link small,
.settings-theme-preview-subtitle,
.settings-theme-preview-toptext,
.settings-theme-preview-card-text,
.settings-hero-note,
.profile-info-label {
    color: var(--text-muted) !important;
}

.app-main,
.content-area {
    background: var(--content-bg);
}

.topbar {
    background: var(--topbar-bg);
    border-bottom-color: var(--border-color);
}

.topbar-user-btn,
.topbar-menu-btn {
    border-color: var(--border-color) !important;
}

.sidebar-panel {
    background: var(--sidebar-bg);
    border-right-color: rgba(255,255,255,.08);
}

.brand-subtitle,
.sidebar-user-meta,
.sidebar-group-title {
    color: var(--sidebar-muted) !important;
}

.card,
.app-card,
.metric-card,
.login-card,
.table-responsive,
.dropdown-menu,
.modal-content,
.role-card,
.project-card,
.permission-group-card,
.settings-theme-editor,
.settings-theme-preview,
.profile-card,
.profile-security-card {
    background: var(--surface-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.settings-hero-card,
.settings-nav-card,
.settings-card,
.settings-theme-editor,
.settings-theme-preview {
    border: 1px solid var(--border-color);
}

.settings-nav-link {
    color: var(--text-primary);
}

.settings-nav-link.active {
    background: rgba(var(--brand-rgb), 0.10);
    border-color: rgba(var(--brand-rgb), 0.20);
}

.settings-nav-icon,
.settings-hero-badge,
.settings-theme-chip,
.settings-upload-label {
    color: var(--brand-dark);
}

.settings-inline-note {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .95rem 1rem;
    border-radius: 16px;
    background: var(--brand-soft);
    color: var(--text-secondary);
    border: 1px solid rgba(var(--brand-rgb), 0.16);
}

.settings-theme-editor {
    background: var(--surface-alt-bg);
    border-radius: 18px;
    padding: 1.1rem 1.15rem;
}

.settings-theme-editor-dark {
    border-style: solid;
}

.settings-color-group {
    border-top: 1px solid var(--border-color);
    padding-top: .95rem;
}

.settings-color-group-title {
    font-weight: 700;
    margin-bottom: .2rem;
    color: var(--text-secondary);
}

.settings-welcome-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    background: var(--surface-alt-bg);
    border: 1px solid var(--border-color);
}

.form-check-input {
    border-color: var(--border-color);
}

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-control,
.form-select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
textarea {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: rgba(var(--brand-rgb), .5);
    box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .14);
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

.btn-outline-secondary,
.btn-light {
    color: var(--text-primary);
    border-color: var(--border-color);
    background: var(--surface-bg);
}

.btn-outline-secondary:hover,
.btn-light:hover {
    color: var(--text-primary);
    border-color: rgba(var(--brand-rgb), 0.24);
    background: var(--surface-alt-bg);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(var(--brand-rgb), 0.08);
    color: var(--text-primary);
}

.table,
.task-grid-table {
    color: var(--text-primary);
}

.table > :not(caption) > * > *,
.task-grid-table > :not(caption) > * > * {
    border-bottom-color: var(--border-color);
}

.table thead th,
.task-grid-table thead th {
    background: var(--surface-alt-bg) !important;
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

.table tbody tr,
.task-grid-table tbody tr,
.task-group-card,
.task-grid-card {
    background: var(--surface-bg);
}

.table-hover tbody tr:hover,
.task-grid-table tbody tr:hover {
    background: rgba(var(--brand-rgb), 0.05);
}

.task-grid-table td,
.task-grid-table tbody th {
    background: transparent !important;
    color: var(--text-primary);
}

.task-grid-table .task-inline-caption,
.task-grid-table .task-row-desc,
.task-grid-table .task-row-meta-line,
.task-grid-table .task-inline-project,
.task-grid-table .task-open-detail,
.task-grid-table .task-row-title,
.task-grid-table .task-activity-chip,
.task-grid-table .task-label-stack-inline,
.task-group-caption,
.task-group-title,
.task-group-meta,
.task-empty-state,
.task-filters-card .form-label,
.task-filters-card .field-caption {
    color: inherit;
}

.task-grid-table .task-due-chip,
.task-grid-table .task-priority-badge,
.task-grid-table .task-status-badge,
.task-grid-table .task-inline-chip,
.task-grid-table .task-badge {
    border: 1px solid rgba(var(--brand-rgb), .12);
}

.task-filters-card,
.task-workbench-page .card,
.kanban-column,
.kanban-card,
.gantt-wrap,
.calendar-shell,
.project-detail-card,
.project-summary-card,
.task-detail-card,
.task-detail-sidebar,
.task-drawer-panel,
.task-card,
.project-card,
.role-card,
.permission-group-card {
    background: var(--surface-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
    border-color: transparent;
}

body.theme-dark .alert-success {
    background: rgba(34, 197, 94, .16);
    color: #dcfce7;
}

body.theme-dark .alert-danger {
    background: rgba(239, 68, 68, .16);
    color: #fecaca;
}

body.theme-dark .alert-warning {
    background: rgba(245, 158, 11, .16);
    color: #fde68a;
}

body.theme-dark .alert-info {
    background: rgba(59, 130, 246, .16);
    color: #dbeafe;
}

body.theme-dark .btn-outline-secondary,
body.theme-dark .btn-light {
    color: var(--text-primary);
    background: var(--surface-bg);
}

body.theme-dark .btn-outline-danger {
    color: #fecaca;
    border-color: rgba(239,68,68,.35);
}

body.theme-dark .btn-outline-danger:hover {
    background: rgba(239,68,68,.12);
}

body.theme-dark .select2-container .select2-selection--single,
body.theme-dark .select2-container .select2-selection--multiple {
    background: var(--input-bg);
    border-color: var(--border-color);
}

body.theme-dark .select2-dropdown,
body.theme-dark .dropdown-menu {
    background: var(--surface-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.theme-dark .select2-results__option {
    color: var(--text-primary);
}

body.theme-dark .select2-results__option--highlighted,
body.theme-dark .select2-results__option--selected {
    background: rgba(var(--brand-rgb), .12);
    color: var(--text-primary);
}

body.theme-dark .topbar-user-btn,
body.theme-dark .topbar-menu-btn {
    background: var(--surface-bg);
}

/* Settings preview */
.settings-theme-preview {
    border-radius: 20px;
    padding: 1rem;
}

.settings-theme-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.settings-theme-preview-title {
    font-size: 1rem;
    font-weight: 700;
}

.settings-theme-preview-frame {
    display: grid;
    grid-template-columns: 120px 1fr;
    min-height: 260px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--surface-bg);
}

.settings-theme-preview .settings-theme-chip.active {
    background: rgba(var(--brand-rgb), .16);
}

.settings-theme-preview-sidebar {
    background: var(--preview-sidebar);
    color: var(--preview-sidebar-text);
    padding: 1rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.settings-theme-preview-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--preview-brand), #ffb86b);
    color: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

.settings-theme-preview-mark img {
    max-width: 26px;
    max-height: 26px;
    object-fit: contain;
}

.settings-theme-preview-name {
    font-weight: 700;
    color: var(--preview-sidebar-text);
}

.settings-theme-preview-sub {
    font-size: .78rem;
    color: var(--preview-sidebar-muted);
    margin-bottom: .4rem;
}

.settings-theme-preview-navitem {
    padding: .45rem .55rem;
    border-radius: 12px;
    font-size: .85rem;
    color: var(--preview-sidebar-text);
}

.settings-theme-preview-navitem.active {
    background: rgba(255,255,255,.09);
    border-left: 3px solid var(--preview-brand);
}

.settings-theme-preview-navitem.muted {
    color: var(--preview-sidebar-muted);
}

.settings-theme-preview-main {
    background: var(--preview-content);
    display: flex;
    flex-direction: column;
}

.settings-theme-preview-topbar {
    background: var(--preview-topbar);
    border-bottom: 1px solid var(--preview-border);
    color: var(--preview-text);
    padding: .8rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.settings-theme-preview-body {
    padding: 1rem;
    display: grid;
    gap: .85rem;
}

.settings-theme-preview-card,
.settings-theme-preview-table {
    background: var(--preview-surface);
    border: 1px solid var(--preview-border);
    border-radius: 16px;
    padding: .85rem;
    color: var(--preview-text);
}

.settings-theme-preview-card-title {
    font-weight: 700;
    margin-bottom: .35rem;
    color: var(--preview-text);
}

.settings-theme-preview-card-text {
    color: var(--preview-text-secondary);
    margin-bottom: .7rem;
    font-size: .88rem;
}

.settings-theme-preview-input {
    padding: .65rem .75rem;
    border-radius: 12px;
    background: var(--preview-input);
    border: 1px solid var(--preview-border);
    color: var(--preview-text-muted);
    font-size: .85rem;
}

.settings-theme-preview-btn {
    border: 0;
    border-radius: 12px;
    padding: .58rem .9rem;
    background: linear-gradient(135deg, var(--preview-brand), var(--preview-brand-dark));
    color: #fff;
    font-weight: 700;
}

.settings-theme-preview-table-head,
.settings-theme-preview-table-row {
    display: grid;
    grid-template-columns: 1.6fr .8fr .8fr;
    gap: .6rem;
    padding: .45rem 0;
    font-size: .82rem;
}

.settings-theme-preview-table-head {
    color: var(--preview-text-secondary);
    border-bottom: 1px solid var(--preview-border);
    font-weight: 700;
}

.settings-theme-preview-table-row {
    color: var(--preview-text);
}

.settings-theme-preview-table-row.alt {
    background: var(--preview-surface-alt);
    margin: 0 -.5rem;
    padding: .45rem .5rem;
    border-radius: 10px;
}

@media (max-width: 991px) {
    .settings-theme-preview-frame {
        grid-template-columns: 1fr;
    }
}

/* ===== Sidebar UX professional refresh ===== */
.sidebar-panel {
    padding: 1rem 1rem 1.1rem;
}

.sidebar-header {
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.1rem;
}

.sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 0 0 auto;
}

.sidebar-brand-wrap {
    min-width: 0;
    flex: 1 1 auto;
}

.sidebar-brand-wrap.has-logo {
    align-items: center;
}

.sidebar-brand-text {
    min-width: 0;
}

.brand-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
}

.brand-icon.has-logo {
    width: 148px;
    height: 52px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    justify-content: flex-start;
}

.brand-logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.sidebar-collapse-toggle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .18s ease;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.sidebar-collapse-toggle:hover {
    background: rgba(242, 140, 40, 0.16);
    border-color: rgba(242, 140, 40, 0.4);
    color: #fff;
    transform: translateY(-1px);
}

.sidebar-collapse-toggle i {
    transition: transform .18s ease;
}

.sidebar-nav {
    gap: .38rem;
}

.sidebar-nav .nav-link,
.sidebar-profile-link {
    position: relative;
}

.sidebar-link-label {
    display: inline-block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav .nav-link {
    padding: .88rem 1rem;
    border-left-width: 4px;
}

.sidebar-group-title {
    margin-top: 1rem;
    margin-bottom: .45rem;
    padding: 0 .25rem;
    font-size: .79rem;
    letter-spacing: .08em;
}

.sidebar-footer {
    margin-top: 1.15rem;
}

body.sidebar-collapsed .sidebar-panel {
    width: 88px;
}

body.sidebar-collapsed .app-main {
    margin-left: 88px;
    width: calc(100% - 88px);
}

body.sidebar-collapsed .sidebar-panel .sidebar-brand-text,
body.sidebar-collapsed .sidebar-panel .sidebar-group-title,
body.sidebar-collapsed .sidebar-panel .sidebar-footer {
    display: none;
}

body.sidebar-collapsed .sidebar-panel .sidebar-header {
    justify-content: center;
    gap: .5rem;
}

body.sidebar-collapsed .sidebar-panel .sidebar-brand-wrap {
    justify-content: center;
    flex: 0 0 auto;
}

body.sidebar-collapsed .sidebar-panel .brand-icon.has-logo {
    width: 52px;
    height: 52px;
}

body.sidebar-collapsed .sidebar-panel .sidebar-nav .nav-link {
    justify-content: center;
    padding: .88rem .4rem;
    border-left-width: 0;
    border-radius: 14px;
}

body.sidebar-collapsed .sidebar-panel .sidebar-nav .nav-link i,
body.sidebar-collapsed .sidebar-panel .sidebar-profile-link i {
    margin-right: 0;
}

body.sidebar-collapsed .sidebar-panel .sidebar-nav .nav-link .sidebar-link-label,
body.sidebar-collapsed .sidebar-panel .sidebar-profile-link .sidebar-link-label {
    display: none;
}

body.sidebar-collapsed .sidebar-panel .sidebar-nav .nav-link:hover::after,
body.sidebar-collapsed .sidebar-panel .sidebar-profile-link:hover::after {
    content: attr(data-nav-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #0f172a;
    color: #fff;
    padding: .45rem .7rem;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.24);
    white-space: nowrap;
    z-index: 30;
    pointer-events: none;
}

body.sidebar-collapsed .sidebar-panel .sidebar-nav .nav-link:hover::before,
body.sidebar-collapsed .sidebar-panel .sidebar-profile-link:hover::before {
    content: '';
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #0f172a;
    z-index: 31;
}

.topbar-brand-text-only {
    display: flex;
    align-items: center;
}

@media (max-width: 991.98px) {
    .sidebar-panel {
        width: min(300px, calc(100vw - 1.75rem));
    }

    .sidebar-header-actions {
        margin-left: auto;
    }

    .sidebar-collapse-toggle {
        display: none !important;
    }

    .sidebar-close {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        align-items: center;
        justify-content: center;
    }
}

/* Settings sections layout recovery */
.settings-layout {
    align-items: flex-start;
}

.settings-nav-card {
    position: sticky;
    top: 88px;
    border-radius: 20px;
}

.settings-nav-title {
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .9rem;
}

.settings-nav-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.settings-nav-link {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    width: 100%;
    padding: .95rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--surface-bg);
    text-decoration: none;
    transition: all .18s ease;
}

.settings-nav-link:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--brand-rgb), 0.24);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.settings-nav-link > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.settings-nav-link strong {
    display: block;
    font-size: .96rem;
    line-height: 1.2;
    margin-bottom: .18rem;
}

.settings-nav-link small {
    display: block;
    font-size: .82rem;
    line-height: 1.35;
}

.settings-nav-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(var(--brand-rgb), 0.10);
    border: 1px solid rgba(var(--brand-rgb), 0.14);
    font-size: 1rem;
}

.settings-nav-link.active {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

@media (max-width: 1199.98px) {
    .settings-nav-card {
        position: static;
        top: auto;
    }
}

/* Workbench visual: corregir columna de vencimiento sin afectar Secciones */
.task-grid-responsive.density-comfortable th[data-col="due"],
.task-grid-responsive.density-comfortable td[data-col="due"] {
    width: 138px;
    min-width: 138px;
    max-width: 138px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

.task-grid-responsive.density-comfortable td[data-col="due"] > span,
.task-grid-responsive.density-comfortable td[data-col="due"] [data-task-field="due_html"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.task-grid-responsive.density-comfortable td[data-col="due"] .task-due-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    white-space: nowrap;
    line-height: 1;
    padding: 6px 10px;
}

.task-grid-responsive.density-comfortable td[data-col="due"] .task-due-muted {
    display: inline-block;
    white-space: nowrap;
}

/* Login logo + branding previews */
.login-brand-logo-wrap {
    width: min(100%, 280px);
    min-height: 96px;
    padding: .35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
}

.login-brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 86px;
    object-fit: contain;
    object-position: center;
}

.settings-upload-preview {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-height: 100%;
}

.settings-upload-box {
    position: relative;
    min-height: 156px;
    padding: 1rem;
    border-radius: 18px;
    border: 1px dashed rgba(var(--brand-rgb), 0.22);
    background: var(--surface-alt-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.settings-upload-box-login {
    min-height: 156px;
}

.settings-upload-box-favicon {
    min-height: 112px;
}

.settings-upload-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 124px;
    object-fit: contain;
    object-position: center;
}

.settings-upload-box-login .settings-upload-image,
.settings-upload-image-login {
    max-height: 86px;
}

.settings-upload-box-favicon .settings-upload-image,
.settings-upload-image-favicon {
    max-width: 64px;
    max-height: 64px;
}

.settings-upload-placeholder {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-rgb), 0.08);
    color: var(--brand-dark);
    font-size: 1.1rem;
}

.settings-upload-box-background {
    min-height: 180px;
    background-size: cover;
    background-position: center;
}

body.theme-dark .settings-upload-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 767px) {
    .login-brand-logo-wrap {
        width: min(100%, 240px);
        min-height: 84px;
    }

    .login-brand-logo {
        max-height: 72px;
    }

    .settings-upload-box,
    .settings-upload-box-login {
        min-height: 136px;
    }

    .settings-upload-image {
        max-height: 108px;
    }

    .settings-upload-box-login .settings-upload-image,
    .settings-upload-image-login {
        max-height: 76px;
    }
}

/* Subtareas colapsadas en detalle */
.subtask-list-collapsed {
    display: grid;
    gap: 14px;
}

.subtask-card.is-collapsed {
    border: 1px solid #e8edf6;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.subtask-summary-wrap {
    display: flex;
    gap: 12px;
    align-items: stretch;
    padding: 14px 16px;
}

.subtask-summary-toggle {
    border: 0;
    background: transparent;
    padding: 0;
    flex: 1 1 auto;
    text-align: left;
    min-width: 0;
}

.subtask-summary-main {
    display: grid;
    gap: 10px;
}

.subtask-summary-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.subtask-summary-arrow {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    background: #f8fafc;
    color: #64748b;
    flex: 0 0 auto;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.subtask-summary-toggle[aria-expanded="true"] .subtask-summary-arrow {
    transform: rotate(180deg);
    background: rgba(242, 140, 40, .12);
    color: #cc6f12;
}

.subtask-meta.compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subtask-preview {
    color: #64748b;
    font-size: .94rem;
    line-height: 1.45;
}

.subtask-progress-compact {
    margin-top: 2px;
}

.subtask-progress-compact .subtask-progress-bar {
    height: 7px;
}

.subtask-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.subtask-collapse-body {
    border-top: 1px solid #edf1f7;
}

.subtask-collapse-inner {
    padding: 0 16px 16px;
    display: grid;
    gap: 14px;
}

.subtask-description {
    color: #334155;
    line-height: 1.6;
}

.subtask-progress {
    display: grid;
    gap: 8px;
}

.subtask-progress-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #475569;
    font-size: .92rem;
}

.subtask-progress-line strong {
    color: #0f172a;
}

.subtask-progress-bar {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: #edf2f7;
    overflow: hidden;
}

.subtask-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f28c28 0%, #f5aa5b 100%);
}

.subtask-checklist {
    border-top: 1px solid #edf1f7;
    padding-top: 14px;
}

.subtask-check-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #edf1f7;
    border-radius: 12px;
    background: #fff;
}

.subtask-check-item.done .subtask-check-text {
    text-decoration: line-through;
    color: #64748b;
}

.subtask-check-text {
    min-width: 0;
}

@media (max-width: 991px) {
    .subtask-summary-wrap {
        flex-direction: column;
    }

    .subtask-actions {
        justify-content: flex-start;
    }
}

.task-metric-grid-primary {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}

.task-metric-grid-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.task-metric-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.task-metric-card:hover {
    transform: translateY(-1px);
}

.task-metric-card.total {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.task-metric-card.pending {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-color: #e2e8f0;
}

.task-metric-card.in-progress {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
    border-color: #bfdbfe;
}

.task-metric-card.review {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    border-color: #fed7aa;
}

.task-metric-card.cancelled {
    background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%);
    border-color: #fecdd3;
}

.task-metric-card.is-selected {
    border-color: #f28c28;
    box-shadow: 0 10px 24px rgba(242, 140, 40, 0.14);
}

.task-quick-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    transition: all .18s ease;
}

.task-quick-filter-pill:hover {
    border-color: #cbd5e1;
    color: #0f172a;
}

.task-quick-filter-pill .label {
    font-weight: 600;
}

.task-quick-filter-pill .count {
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    font-weight: 700;
    color: #475569;
}

.task-quick-filter-pill.active {
    border-color: #f28c28;
    background: #fff7ed;
    color: #9a3412;
}

.task-quick-filter-pill.active .count {
    background: rgba(242, 140, 40, 0.14);
    color: #9a3412;
}


.task-metric-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 110px;
}

.task-metric-card .metric-label {
    display: block;
    line-height: 1.2;
}

.task-metric-card .metric-value {
    display: block;
    line-height: 1;
    margin-top: 12px;
}

.task-filter-builder-panel {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
    border: 1px solid #e8edf5;
    border-radius: 24px;
    padding: 20px;
}

.task-filter-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.task-filter-chip {
    border: 1px solid #dbe3ee;
    background: #ffffff;
    color: #334155;
    border-radius: 999px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: all .18s ease;
}

.task-filter-chip:hover {
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
}

.task-filter-chip.active {
    background: #fff7ed;
    border-color: #f7c08d;
    color: #9a3412;
}

.task-filter-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.task-filter-card {
    display: none;
    border: 1px solid #e6ebf2;
    border-radius: 20px;
    background: #f8fafc;
    padding: 16px;
}

.task-filter-card.is-visible {
    display: block;
}

.task-filter-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.task-filter-card-title {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.task-filter-card-note {
    color: #64748b;
    font-size: .84rem;
    line-height: 1.35;
}

.task-filter-card-remove {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #dbe3ee;
    background: #ffffff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .18s ease;
}

.task-filter-card-remove:hover {
    border-color: #f5c79d;
    color: #b45309;
    background: #fff7ed;
}

.task-filter-card .select2-container--default .select2-selection--multiple {
    min-height: 44px;
    border-radius: 14px;
    border-color: #d8e1ec;
    background: #ffffff;
}

.task-filter-card .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #f28c28;
    box-shadow: 0 0 0 .18rem rgba(242, 140, 40, 0.14);
}

.task-filter-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #fff7ed;
    border: 1px solid #f7c08d;
    color: #9a3412;
    border-radius: 999px;
    padding: 4px 10px;
}

@media (max-width: 1199px) {
    .task-filter-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1399px) {
    .task-metric-grid-primary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .task-metric-grid-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .task-metric-grid-primary {
        grid-template-columns: 1fr;
    }

    .task-metric-grid-secondary {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.task-inline-chip.neutral {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.task-workbench-state-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-state-ribbon {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.task-state-ribbon-label {
    min-width: 110px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.task-state-ribbon-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.task-command-card,
.task-display-toolbar-card {
    border-radius: 22px;
}

.task-command-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.task-command-bar,
.task-display-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.task-command-bar {
    justify-content: flex-end;
}

.task-command-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
    width: 100%;
}

.task-command-search,
.task-display-search {
    flex: 1 1 420px;
    min-width: 320px;
    max-width: 720px;
    position: relative;
}

.task-command-search > i,
.task-display-search > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.task-command-search .form-control,
.task-display-search .form-control {
    min-height: 46px;
    border-radius: 16px;
    padding-left: 42px;
    border-color: #dbe3ee;
    background: #fbfcff;
}

.task-command-search .form-control:focus,
.task-display-search .form-control:focus {
    border-color: #f28c28;
    box-shadow: 0 0 0 .18rem rgba(242, 140, 40, 0.14);
}

.task-command-actions,
.task-command-secondary-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.task-command-actions > .btn,
.task-command-secondary-actions > .btn,
.task-view-select-wrap.compact .form-select {
    white-space: nowrap;
}

.task-view-select-wrap.compact {
    min-width: 220px;
    flex: 0 0 220px;
}

.task-view-select-wrap.compact .form-select {
    min-height: 42px;
    border-radius: 14px;
}

.task-workbench-modal .modal-header,
.task-workbench-modal .modal-footer {
    border-color: #edf2f7;
}

.task-workbench-modal .modal-content,
.task-workbench-modal {
    border-radius: 22px;
}

.task-filter-builder-panel-modal {
    padding: 0;
    border: 0;
    background: transparent;
}

.task-display-toolbar {
    gap: 14px;
}

.task-display-toolbar > * {
    flex-shrink: 0;
}

.task-display-toolbar .task-display-search {
    flex: 1 1 440px;
    min-width: 340px;
    max-width: none;
}

.task-display-toolbar .task-density-switch.compact {
    margin-left: 4px;
}

.task-command-bar .task-command-actions {
    flex: 0 0 auto;
}

.task-command-bar .task-command-secondary-actions {
    flex: 0 0 auto;
}

.task-display-toolbar .task-density-switch.compact {
    display: flex;
    align-items: center;
}

.task-toolbar-btn {
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid #dbe3ee;
    background: #ffffff;
    color: #334155;
    padding: 0 14px;
}

.task-toolbar-btn:hover,
.task-toolbar-btn:focus {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
}

.task-display-toolbar-card .task-tab-switch {
    margin-left: auto;
}

.task-metric-card {
    align-items: flex-start;
}

.task-metric-card .metric-value {
    margin-top: auto;
    padding-top: 10px;
}

.task-workbench-modal .select2-container {
    width: 100% !important;
}

.task-workbench-modal .select2-dropdown {
    z-index: 2200;
}

.task-workbench-modal .select2-container--default .select2-selection--multiple {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 10px;
}

.task-workbench-modal .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
}

.task-workbench-modal .select2-container--default .select2-search--inline {
    flex: 1 1 140px;
}

.task-workbench-modal .select2-container--default .select2-search--inline .select2-search__field {
    width: 100% !important;
    min-width: 140px;
    height: 30px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 991px) {
    .task-state-ribbon {
        flex-direction: column;
    }

    .task-state-ribbon-label {
        min-width: auto;
        padding-top: 0;
    }

    .task-command-bar,
    .task-display-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .task-command-toolbar {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .task-command-search,
    .task-display-search,
    .task-view-select-wrap.compact,
    .task-display-toolbar .task-tab-switch {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .task-command-actions,
    .task-command-secondary-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .task-command-actions > .btn,
    .task-command-secondary-actions > .btn {
        flex: 1 1 auto;
    }

    .task-display-toolbar-card .task-tab-switch {
        margin-left: 0;
    }
}


/* Notifications */
.topbar-notification-btn {
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0 !important;
    border-radius: 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topbar-notification-btn::after {
    display: none !important;
}

.topbar-notification-icon {
    font-size: 1.05rem;
}

.topbar-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(var(--brand-rgb), .28);
}

.topbar-notification-menu {
    width: min(420px, 92vw);
    padding: 0;
    overflow: hidden;
}

.topbar-notification-header,
.topbar-notification-footer {
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    background: rgba(var(--brand-rgb), .03);
}

.topbar-notification-footer {
    border-bottom: 0;
    border-top: 1px solid rgba(148, 163, 184, .16);
    background: transparent;
    display: flex;
    justify-content: center;
}

.topbar-notification-subtitle {
    color: var(--text-muted);
    font-size: .82rem;
    margin-top: .1rem;
}

.topbar-notification-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.topbar-notification-list {
    max-height: 420px;
    overflow: auto;
}

.topbar-notification-item {
    display: flex;
    gap: .85rem;
    padding: .95rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    transition: background .18s ease, transform .18s ease;
}

.topbar-notification-item:hover {
    background: rgba(var(--brand-rgb), .05);
    transform: translateY(-1px);
}

.topbar-notification-item.is-unread {
    background: rgba(var(--brand-rgb), .07);
}

.topbar-notification-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex: 0 0 auto;
    background: rgba(var(--brand-rgb), .12);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topbar-notification-item-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: .15rem;
}

.topbar-notification-item-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.topbar-notification-item-text {
    font-size: .84rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-notification-item-time {
    font-size: .78rem;
    color: var(--text-muted);
}

.notifications-page-card {
    padding: 1.25rem;
}

.notifications-toolbar {
    margin-bottom: 1rem;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.notification-card {
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 20px;
    background: var(--surface-bg);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
    display: flex;
    gap: 1rem;
    align-items: stretch;
    overflow: hidden;
}

.notification-card.is-unread {
    border-color: rgba(var(--brand-rgb), .34);
    box-shadow: 0 18px 36px rgba(var(--brand-rgb), .10);
}

.notification-card-main {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.1rem;
    display: flex;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.notification-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    flex: 0 0 auto;
    background: rgba(var(--brand-rgb), .12);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.notification-card-body {
    flex: 1;
    min-width: 0;
}

.notification-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .55rem;
}

.notification-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}

.notification-type-pill,
.notification-unread-dot {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .28rem .7rem;
    font-size: .74rem;
    font-weight: 700;
}

.notification-type-pill {
    background: rgba(var(--brand-rgb), .10);
    color: var(--brand);
}

.notification-unread-dot {
    background: #fff3e8;
    color: #b45309;
}

.notification-card-time {
    white-space: nowrap;
    color: var(--text-muted);
    font-size: .82rem;
}

.notification-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .35rem;
}

.notification-card-text {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.notification-card-meta {
    margin-top: .7rem;
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    color: var(--text-muted);
    font-size: .82rem;
}

.notification-card-actions {
    border-left: 1px solid rgba(148, 163, 184, .14);
    display: flex;
    align-items: center;
    padding: 1rem;
    background: rgba(148, 163, 184, .03);
}

.notifications-empty {
    min-height: 280px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--text-muted);
    gap: .75rem;
}

.notifications-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-rgb), .08);
    color: var(--brand);
    font-size: 1.6rem;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .notification-card {
        flex-direction: column;
    }

    .notification-card-actions {
        border-left: 0;
        border-top: 1px solid rgba(148, 163, 184, .14);
        justify-content: flex-end;
    }
}


/* Mention autocomplete */
.mention-suggest-menu{position:absolute;z-index:1085;display:grid;gap:6px;padding:8px;border:1px solid var(--border-color);background:var(--surface-bg);border-radius:16px;box-shadow:0 16px 38px rgba(15,23,42,.18);max-height:280px;overflow:auto}
.mention-suggest-item{display:grid;gap:2px;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:12px;color:var(--text-primary-color)}
.mention-suggest-item:hover,.mention-suggest-item.is-active{background:rgba(var(--brand-rgb),.10)}
.mention-suggest-name{font-weight:700;font-size:.92rem}
.mention-suggest-meta{font-size:.8rem;color:var(--text-muted-color)}

/* Notification grouping */
.notification-group-pill,.topbar-notification-group-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(var(--brand-rgb),.12);color:var(--primary-dark-color);font-size:.78rem;font-weight:700}
.notification-card-summary{margin-top:8px;font-size:.9rem;color:var(--text-secondary-color)}
.topbar-notification-item-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}


.mention-suggest-menu{position:absolute;z-index:1085;background:var(--surface-bg,#fff);border:1px solid var(--border-color,#dfe3ea);border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.16);padding:6px;max-height:260px;overflow:auto}.mention-suggest-item{display:flex;flex-direction:column;gap:2px;width:100%;border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:10px}.mention-suggest-item.is-active,.mention-suggest-item:hover{background:rgba(242,140,40,.10)}.mention-suggest-name{font-weight:600;color:var(--text-primary,#111827)}.mention-suggest-meta{font-size:.78rem;color:var(--text-muted,#6b7280)}.mention-chip-preview{display:none;gap:8px;flex-wrap:wrap;margin-top:8px}.mention-chip,.mention-chip-item,.mention-token-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(242,140,40,.12);color:var(--text-primary,#111827);font-weight:600;font-size:.82rem;border:1px solid rgba(242,140,40,.22)}.mention-chip-item small{font-size:.72rem;font-weight:500;color:var(--text-muted,#6b7280)}.mention-token-chip{margin:0 2px;padding:2px 8px;font-size:.8rem}.project-summary-actions{margin-top:14px}
.mention-suggest-menu{position:absolute;z-index:1085;display:grid;gap:6px;padding:8px;border:1px solid var(--border-color);background:var(--surface-bg);border-radius:16px;box-shadow:0 16px 38px rgba(15,23,42,.18);max-height:280px;overflow:auto}
.mention-suggest-item{display:grid;gap:2px;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:12px;color:var(--text-primary-color)}
.mention-suggest-item:hover,.mention-suggest-item.is-active{background:rgba(var(--brand-rgb),.10)}
.mention-suggest-name{font-weight:700;font-size:.92rem}
.mention-suggest-meta{font-size:.8rem;color:var(--text-muted-color)}

/* Notification grouping */
.notification-group-pill,.topbar-notification-group-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(var(--brand-rgb),.12);color:var(--primary-dark-color);font-size:.78rem;font-weight:700}
.notification-card-summary{margin-top:8px;font-size:.9rem;color:var(--text-secondary-color)}
.topbar-notification-item-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}


.mention-suggest-menu{position:absolute;z-index:1085;background:var(--surface-bg,#fff);border:1px solid var(--border-color,#dfe3ea);border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.16);padding:6px;max-height:260px;overflow:auto}.mention-suggest-item{display:flex;flex-direction:column;gap:2px;width:100%;border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:10px}.mention-suggest-item.is-active,.mention-suggest-item:hover{background:rgba(242,140,40,.10)}.mention-suggest-name{font-weight:600;color:var(--text-primary,#111827)}.mention-suggest-meta{font-size:.78rem;color:var(--text-muted,#6b7280)}.mention-chip-preview{display:none;gap:8px;flex-wrap:wrap;margin-top:8px}.mention-chip,.mention-chip-item,.mention-token-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(242,140,40,.12);color:var(--text-primary,#111827);font-weight:600;font-size:.82rem;border:1px solid rgba(242,140,40,.22)}.mention-chip-item small{font-size:.72rem;font-weight:500;color:var(--text-muted,#6b7280)}.mention-token-chip{margin:0 2px;padding:2px 8px;font-size:.8rem}.project-summary-actions{margin-top:14px}

/* Users UX refresh: directory + editor tabs */
.users-directory-toolbar-main {
    gap: 10px;
}

.users-directory-search {
    min-width: min(420px, 100%);
}

.users-directory-side {
    max-width: 360px;
}

.users-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.user-directory-card {
    border: 1px solid #e8edf6;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    padding: 18px;
    display: grid;
    gap: 14px;
}

.user-directory-card[hidden] {
    display: none !important;
}

.user-directory-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.user-directory-identity {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.user-directory-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff3e8;
    color: #bf5b00;
    flex: 0 0 auto;
}

.user-directory-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-directory-name-row strong {
    font-size: 1rem;
}

.user-directory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.directory-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e7edf6;
    color: #475569;
    font-size: .82rem;
    line-height: 1;
}

.user-directory-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.user-stat-pill {
    padding: 12px 14px;
    border-radius: 16px;
    background: #fbfcff;
    border: 1px solid #edf2f7;
    display: grid;
    gap: 4px;
}

.user-stat-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
}

.user-stat-pill strong {
    font-size: .92rem;
    color: #0f172a;
}

.user-stat-pill small {
    color: #64748b;
    font-size: .78rem;
}

.user-directory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.users-empty-state {
    border: 1px dashed #d6dfed;
    border-radius: 20px;
    background: #fbfcff;
    padding: 32px 20px;
    display: grid;
    place-items: center;
    gap: 8px;
    text-align: center;
    color: #475569;
}

.users-empty-state i {
    font-size: 1.8rem;
    color: #94a3b8;
}

.user-editor-card .card-body {
    padding-top: 18px;
}

.user-editor-tabs {
    display: inline-flex;
    flex-wrap: wrap;
}

.user-editor-form {
    display: grid;
    gap: 20px;
}

.user-editor-panel {
    display: none;
    gap: 16px;
}

.user-editor-panel.is-active {
    display: grid;
}

.user-editor-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.user-editor-panel-header h2 {
    margin: 0 0 4px;
    font-size: 1.08rem;
    font-weight: 700;
}

.user-editor-panel-header p {
    margin: 0;
    color: #6b7280;
}

.user-editor-readonly-card,
.scope-switch-card,
.user-editor-empty-state,
.user-summary-block {
    border: 1px solid #e8edf6;
    border-radius: 18px;
    background: #fbfcff;
}

.user-editor-readonly-card {
    min-height: 46px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.scope-switch-card {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
}

.scope-switch-card strong {
    display: block;
}

.scope-switch-card small {
    display: block;
    color: #64748b;
    margin-top: 4px;
}

.user-editor-empty-state {
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.user-editor-empty-state i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff3e8;
    color: #bf5b00;
    flex: 0 0 auto;
}

.user-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.user-summary-block {
    padding: 16px 18px;
    display: grid;
    gap: 6px;
}

.user-summary-block.summary-wide {
    grid-column: 1 / -1;
}

.user-summary-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
}

.user-summary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.summary-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: .82rem;
    border: 1px solid #e2e8f0;
}

.summary-tag.is-soft {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fed7aa;
}

.summary-tag.is-brand {
    background: #fff3e8;
    color: #bf5b00;
    border-color: rgba(242, 140, 40, .22);
}

@media (max-width: 1199px) {
    .user-directory-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .user-summary-grid {
        grid-template-columns: 1fr;
    }

    .scope-switch-card,
    .user-editor-empty-state {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .users-directory-grid {
        grid-template-columns: 1fr;
    }

    .workspace-tabs.user-editor-tabs {
        width: 100%;
    }

    .workspace-tabs.user-editor-tabs .workspace-tab {
        flex: 1 1 calc(50% - 8px);
        text-align: center;
    }
}
.org-admin-page {
    display: grid;
    gap: 0;
}

.org-admin-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid #e8edf6;
    background: #fff;
    box-shadow: var(--shadow-soft);
    min-height: 100%;
}

.org-admin-kpi--soft {
    background: linear-gradient(180deg, #fffaf3 0%, #ffffff 100%);
}

.org-admin-kpi--attention {
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
    border-color: rgba(242, 140, 40, .28);
}

.org-admin-kpi--attention .org-admin-kpi__icon {
    background: #ffedd5;
    color: #c2410c;
}

.org-admin-kpi__icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #fff3e8;
    color: #bf5b00;
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.org-admin-kpi__label {
    color: #6b7280;
    font-size: .83rem;
    margin-bottom: 4px;
}

.org-admin-kpi__value {
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
    color: #111827;
}

.org-admin-kpi__meta {
    color: #6b7280;
    font-size: .85rem;
    margin-top: 6px;
}

.org-admin-card {
    border-radius: 22px;
}

.org-admin-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, .8fr);
    gap: 12px;
}

.org-admin-toolbar--areas {
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr) minmax(180px, .7fr);
}

.org-admin-search {
    position: relative;
}

.org-admin-search > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.org-admin-search .form-control {
    padding-left: 40px;
}

.org-admin-list {
    display: grid;
    gap: 12px;
}

.org-company-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid #e8edf6;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.org-company-card__main {
    min-width: 0;
    flex: 1 1 auto;
}

.org-company-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.org-code-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #475569;
    font-size: .78rem;
    font-weight: 600;
}

.org-company-card__name {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.org-company-card__stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: #6b7280;
    font-size: .84rem;
}

.org-company-card__stats i {
    margin-right: 5px;
}

.org-company-card__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.org-company-card__actions form {
    margin: 0;
}

.org-company-card__actions .btn i,
.org-admin-table .btn i {
    margin-right: 4px;
}

.org-admin-empty {
    display: grid;
    place-items: center;
    margin-top: 12px;
    padding: 18px;
    border: 1px dashed #d7dfeb;
    border-radius: 16px;
    background: #fafcff;
    color: #64748b;
    font-size: .92rem;
}

.org-admin-table-wrap {
    max-height: 620px;
    overflow: auto;
}

.org-admin-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    box-shadow: inset 0 -1px 0 #edf2f7;
}

.org-admin-table tbody td {
    vertical-align: middle;
}

@media (max-width: 991px) {
    .org-admin-toolbar,
    .org-admin-toolbar--areas {
        grid-template-columns: 1fr;
    }

    .org-company-card {
        flex-direction: column;
        align-items: stretch;
    }

    .org-company-card__actions {
        justify-content: flex-start;
    }
}

/* Ajustes UX directorio usuarios */
.user-directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.user-directory-card{display:flex;flex-direction:column;gap:16px;min-height:100%;padding:20px;border:1px solid #e8edf6;border-radius:24px;background:#fff;box-shadow:var(--shadow-soft)}
.user-directory-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:flex-start}
.user-directory-identity{display:flex;align-items:flex-start;gap:14px;min-width:0}
.user-directory-avatar{flex:0 0 56px;width:56px;height:56px;border-radius:18px;background:#fff5eb;color:#c56c00;display:grid;place-items:center;font-size:1.15rem}
.user-directory-title-stack{display:grid;gap:6px;min-width:0}
.user-directory-name{font-size:1.15rem;font-weight:800;color:#0f172a;line-height:1.2;word-break:break-word}
.user-directory-role-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-directory-status{justify-self:end;white-space:nowrap}
.user-directory-tags{display:flex;flex-wrap:wrap;gap:8px}
.directory-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:#f8fafc;border:1px solid #e8edf6;color:#334155;font-size:.86rem;max-width:100%}
.directory-chip i{color:#64748b}
.user-directory-stats{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:12px}
.user-stat-pill{padding:14px 14px;border:1px solid #e8edf6;border-radius:18px;background:#fbfcff;display:grid;gap:6px;min-width:0}
.user-stat-pill strong{font-size:1rem;color:#0f172a;word-break:normal;overflow-wrap:normal;hyphens:none;line-height:1.35}
.user-stat-pill:last-child strong{font-size:.96rem}
.user-stat-label{font-size:.76rem;letter-spacing:.02em;text-transform:uppercase;color:#64748b}
.user-directory-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto}
.user-directory-actions .btn,.user-directory-actions form{width:100%}
.user-directory-actions form .btn{width:100%}
.user-directory-toolbar .workspace-filter-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:1}
.user-editor-card .card-body{padding:28px}
.user-editor-panel-header{margin-bottom:18px}
.user-editor-panel-header p{max-width:780px}
@media (max-width: 1399px){.user-directory-stats{grid-template-columns:1fr}.user-directory-actions{grid-template-columns:1fr 1fr}.user-directory-toolbar .workspace-filter-group{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 991px){.user-directory-grid{grid-template-columns:1fr}.user-directory-actions{grid-template-columns:1fr}.user-directory-toolbar .workspace-filter-group{grid-template-columns:1fr}.user-directory-header{grid-template-columns:1fr}.user-directory-status{justify-self:start}}

/* Contexto proyecto/tarea */
.context-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.context-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:#f8fafc;border:1px solid #e8edf6;color:#334155;font-size:.86rem}
.context-chip i{color:#64748b}


/* Phase 5 · filtros organizacionales */
.task-context-inline-row,
.task-table-context-stack {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}
.task-table-context-stack {
    margin-top:10px;
}
.task-inline-chip.neutral {
    background:#f8fafc;
    border-color:#d8e2f0;
    color:#334155;
}
.task-inline-chip.neutral i {
    color:#64748b;
}
.project-directory-toolbar .card-body {
    display:grid;
    gap:14px;
}
.project-toolbar-grid {
    display:grid;
    grid-template-columns: minmax(280px, 1.6fr) repeat(6, minmax(0, 1fr));
    gap:12px;
    align-items:center;
}
.project-toolbar-search {
    position:relative;
}
.project-toolbar-search i {
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#94a3b8;
}
.project-toolbar-search .form-control {
    padding-left:40px;
    min-height:46px;
}
.project-toolbar-actions {
    display:flex;
    gap:12px;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
}
.project-toolbar-chip-row {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.project-card-modern {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.project-card-headline {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:flex-start;
}
.project-card-status-stack {
    display:grid;
    justify-items:end;
    gap:8px;
}
.project-metric-grid .metric-card {
    min-height:108px;
}
@media (max-width: 1399px) {
    .project-toolbar-grid {
        grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 991px) {
    .project-toolbar-grid {
        grid-template-columns: 1fr;
    }
    .project-card-headline {
        grid-template-columns:1fr;
    }
    .project-card-status-stack {
        justify-items:start;
    }
}

/* ===== Fase 7.1 - Workbench operativo limpio ===== */
.task-workbench-hero-clean {
    align-items: center;
    padding: 1.05rem 1.25rem;
    border: 0;
    background: linear-gradient(135deg, #1e293b 0%, #334155 55%, #f28c28 160%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}

.task-workbench-hero-clean .task-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .25rem;
    color: rgba(255,255,255,.75);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.task-workbench-hero-clean h1 {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1.15;
    font-weight: 800;
}

.task-workbench-hero-clean p {
    margin: .25rem 0 0;
    color: rgba(255,255,255,.78);
    font-size: .88rem;
}

.task-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}

.task-hero-primary-btn {
    color: #1f2937 !important;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(255,255,255,.12);
}

.task-filter-toggle-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.task-filter-count-badge {
    min-width: 1.45rem;
    height: 1.45rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--brand-color, #f28c28);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    padding: 0 .35rem;
}

.task-advanced-filters-collapse {
    margin-top: .9rem;
}

.task-advanced-filters-panel {
    border: 1px solid #e8edf5;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    padding: 1rem;
}

.task-advanced-filters-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid #edf2f7;
}

.task-advanced-filters-head h5 {
    margin: 0 0 .15rem;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.task-advanced-filters-head p {
    margin: 0;
    color: #64748b;
    font-size: .84rem;
}

.task-filter-builder-panel-inline {
    padding: 0;
    border: 0;
    background: transparent;
}

.task-state-ribbon {
    border-radius: 18px;
    background: #fff;
}

.task-state-ribbon .task-inline-chip {
    background: #f8fafc;
}

.task-grid-card {
    border-radius: 22px;
    overflow: visible;
}

.task-grid-table {
    font-size: .91rem;
}

.task-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.task-grid-table .col-actions {
    width: 56px;
    text-align: right;
}

.task-row-action-menu {
    display: inline-flex;
    justify-content: flex-end;
}

.task-row-menu-btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    color: #64748b;
    background: #fff;
}

.task-row-menu-btn:hover,
.task-row-menu-btn:focus {
    color: #0f172a;
    background: #f8fafc;
    border-color: #cbd5e1;
}

.task-row-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .88rem;
    padding: .55rem .85rem;
}

.task-row-menu .dropdown-item i {
    width: 1rem;
    color: #64748b;
}

.task-grid-responsive.density-compact .task-row-desc,
.task-grid-responsive.density-compact .task-row-meta-line {
    display: none;
}

.task-grid-responsive.density-compact .task-row-title {
    font-size: .95rem;
}

.task-drawer-context-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .65rem 0 .9rem;
}

.task-drawer-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
}

.task-drawer-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.task-drawer-overview-card {
    border: 1px solid #e8edf5;
    border-radius: 16px;
    background: #fbfcff;
    padding: .85rem;
}

.task-drawer-overview-card span {
    display: block;
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .25rem;
}

.task-drawer-overview-card strong {
    display: block;
    color: #0f172a;
    font-size: 1rem;
}

.task-drawer-overview-card small {
    display: block;
    color: #64748b;
    margin-top: .25rem;
}

.task-drawer-latest-list {
    display: grid;
    gap: .65rem;
}

.task-drawer-latest-item {
    border: 1px solid #edf2f7;
    border-radius: 14px;
    padding: .75rem;
    background: #fff;
}

.task-drawer-latest-item strong {
    display: inline-block;
    margin-right: .5rem;
    color: #0f172a;
}

.task-drawer-latest-item span {
    color: #94a3b8;
    font-size: .78rem;
}

.task-drawer-latest-item p {
    margin: .35rem 0 0;
    color: #334155;
    line-height: 1.45;
}

.compact-empty {
    min-height: 72px !important;
}

body.theme-dark .task-workbench-hero-clean {
    background: linear-gradient(135deg, #020617 0%, #1e293b 62%, #9a4b10 150%);
}

body.theme-dark .task-advanced-filters-panel,
body.theme-dark .task-state-ribbon,
body.theme-dark .task-drawer-overview-card,
body.theme-dark .task-drawer-latest-item,
body.theme-dark .task-row-menu-btn {
    background: var(--surface-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.theme-dark .task-advanced-filters-head h5,
body.theme-dark .task-drawer-overview-card strong,
body.theme-dark .task-drawer-latest-item strong,
body.theme-dark .task-drawer-latest-item p {
    color: var(--text-primary);
}

body.theme-dark .task-advanced-filters-head p,
body.theme-dark .task-drawer-overview-card span,
body.theme-dark .task-drawer-overview-card small,
body.theme-dark .task-drawer-latest-item span {
    color: var(--text-secondary);
}

@media (max-width: 991px) {
    .task-workbench-hero-clean,
    .task-advanced-filters-head {
        align-items: stretch;
        flex-direction: column;
    }

    .task-hero-actions,
    .task-advanced-filters-head .btn {
        width: 100%;
    }

    .task-hero-actions .btn,
    .task-advanced-filters-head .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 575px) {
    .task-drawer-overview-grid {
        grid-template-columns: 1fr;
    }

    .task-drawer-primary-actions .btn {
        width: 100%;
    }
}

/* Corrección final KPI workbench: compacto horizontal */
.task-metric-grid-primary.task-metric-grid-compact {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(130px, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

.task-metric-grid-primary.task-metric-grid-compact > a {
    height: 100% !important;
}

.task-metric-card.task-metric-kpi-compact {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 71px !important;
    height: 71px !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(226, 232, 240, .92) !important;
    background: #fff !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .045) !important;
    overflow: hidden !important;
}

.task-metric-card.task-metric-kpi-compact:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08) !important;
}

.task-metric-card.task-metric-kpi-compact.is-selected {
    border-color: rgba(242, 140, 40, .8) !important;
    box-shadow: 0 10px 22px rgba(242, 140, 40, .15) !important;
}

.task-metric-kpi-icon {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

.task-metric-kpi-body {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 1px !important;
    line-height: 1.05 !important;
}

.task-metric-card.task-metric-kpi-compact .metric-label {
    margin: 0 !important;
    padding: 0 !important;
    color: #64748b !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.task-metric-card.task-metric-kpi-compact .metric-value {
    margin: 0 !important;
    padding: 0 !important;
    color: #020617 !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.task-metric-card.task-metric-kpi-compact.total {
    border-color: rgba(242, 140, 40, .35) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;
}
.task-metric-kpi-icon.total { background: #fff7ed !important; color: #c2410c !important; }

.task-metric-card.task-metric-kpi-compact.pending {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}
.task-metric-kpi-icon.pending { background: #f1f5f9 !important; color: #475569 !important; }

.task-metric-card.task-metric-kpi-compact.in-progress {
    border-color: rgba(147, 197, 253, .65) !important;
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
}
.task-metric-kpi-icon.in-progress { background: #eff6ff !important; color: #2563eb !important; }

.task-metric-card.task-metric-kpi-compact.review {
    border-color: rgba(253, 186, 116, .65) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;
}
.task-metric-kpi-icon.review { background: #fff7ed !important; color: #ea580c !important; }

.task-metric-card.task-metric-kpi-compact.success {
    border-color: rgba(134, 239, 172, .65) !important;
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%) !important;
}
.task-metric-kpi-icon.success { background: #ecfdf5 !important; color: #16a34a !important; }

.task-metric-card.task-metric-kpi-compact.cancelled {
    border-color: rgba(253, 164, 175, .65) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%) !important;
}
.task-metric-kpi-icon.cancelled { background: #fff1f2 !important; color: #e11d48 !important; }

.task-metric-card.task-metric-kpi-compact.warning {
    border-color: rgba(252, 211, 77, .7) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
}
.task-metric-kpi-icon.warning { background: #fffbeb !important; color: #d97706 !important; }

@media (max-width: 1399px) {
    .task-metric-grid-primary.task-metric-grid-compact {
        grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .task-metric-grid-primary.task-metric-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .task-metric-card.task-metric-kpi-compact {
        height: 67px !important;
        min-height: 67px !important;
        padding: 9px 10px !important;
    }

    .task-metric-kpi-icon {
        flex-basis: 36px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        font-size: .9rem !important;
    }

    .task-metric-card.task-metric-kpi-compact .metric-value {
        font-size: 1.25rem !important;
    }
}



/* Organization admin pagination */
.org-admin-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(226, 232, 240, .9);
}

.org-admin-page-size,
.org-admin-page-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.org-admin-page-size span,
.org-admin-page-info,
.org-admin-page-current {
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
}

.org-admin-page-size .form-select {
    width: 82px;
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: .82rem;
}

.org-admin-page-actions .btn {
    min-width: 34px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.org-admin-page-current {
    min-width: 46px;
    text-align: center;
}

@media (max-width: 575px) {
    .org-admin-list-footer {
        align-items: stretch;
    }

    .org-admin-page-size,
    .org-admin-page-actions,
    .org-admin-page-info {
        width: 100%;
        justify-content: space-between;
    }
}


.task-quick-scope-switch{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-left:2px;
}
.task-quick-scope-switch .btn{
    border-radius:12px!important;
    min-width:110px;
}
.task-quick-scope-switch .btn.is-active{
    box-shadow:0 10px 24px rgba(15,23,42,.10), inset 0 0 0 1px rgba(255,255,255,.18);
}
@media (max-width: 767.98px){
    .task-quick-scope-switch{width:100%;}
    .task-quick-scope-switch .btn{flex:1 1 auto; min-width:0;}
}

.task-quick-scope-switch.is-switch {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px;
    border:1px solid #d9e2ef;
    border-radius:999px;
    background:#f8fafc;
}

.task-quick-scope-option {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 14px;
    border-radius:999px;
    color:#475569;
    font-weight:600;
    text-decoration:none;
    transition:all .15s ease;
}

.task-quick-scope-option:hover {
    color:#0f172a;
    background:#eef2f7;
}

.task-quick-scope-option.is-active {
    background:var(--app-primary-color, #f28c28);
    color:#fff;
    box-shadow:0 6px 14px rgba(15,23,42,.12);
}

.task-eisenhower-chip {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:5px 10px;
    border-radius:999px;
    font-size:.74rem;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
}

.task-eisenhower-chip.is-do { background:rgba(16,185,129,.14); color:#047857; }
.task-eisenhower-chip.is-plan { background:rgba(59,130,246,.12); color:#1d4ed8; }
.task-eisenhower-chip.is-delegate { background:rgba(245,158,11,.14); color:#b45309; }
.task-eisenhower-chip.is-eliminate { background:rgba(239,68,68,.12); color:#dc2626; }
.task-eisenhower-chip.is-unclassified { background:rgba(148,163,184,.14); color:#64748b; }

.task-grid-responsive.density-compact td[data-col="eisenhower"] {
    white-space:nowrap;
}

.task-grid-responsive.density-compact .task-eisenhower-chip {
    font-size:.72rem;
    padding:4px 9px;
    min-height:26px;
}

.task-grid-responsive.density-compact .task-table-context-optional {
    display:none;
}