/* NudgeApp's page styles that are not in site.css (the shell, forms, tokens) or tables.css (lists and grids): the account pages (Utilizatori, Roluri, Setări cont), then
   Sarcini and Calendar, the groups, the org chart and Nudge's top bar. New css goes here. */

/* ---- the account pages: the people list, the side panel's form, the roles grid and the who-has-which-role table ---- */
.avatar-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 8px;
}

.avatar-picker-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px 4px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--card);
    cursor: pointer;
    font-size: 11px;
    color: var(--ink-muted);
    transition: border-color .12s, background .12s;
}

    .avatar-picker-option input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .avatar-picker-option img {
        width: 40px;
        height: 40px;
        transition: transform .12s;
    }

    .avatar-picker-option:hover img {
        transform: scale(1.08) rotate(-4deg);
    }

    .avatar-picker-option:has(input:checked) {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent-hover);
        font-weight: var(--fw-semibold);
    }

    .avatar-picker-option:has(input:focus-visible) {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* An uploaded photo: cut to a circle like the top bar shows it. */
    .avatar-picker-option.is-photo img {
        border-radius: 50%;
        object-fit: cover;
    }

.people-row {
    display: grid;
    grid-template-columns: 32px minmax(190px, 1.35fr) minmax(120px, .85fr) minmax(150px, 1.15fr) minmax(170px, 1.1fr) 30px;
    align-items: center;
    gap: 12px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: background var(--dur-fast);
}

    .people-row:last-child {
        border-bottom: 0;
    }

    .people-row:hover {
        background: var(--card-2);
    }

    .people-row:focus-visible {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--accent);
    }

    .people-row.is-inactive .people-face,
    .people-row.is-inactive .people-main,
    .people-row.is-inactive .people-roles,
    .people-row.is-inactive .people-groups,
    .people-row.is-inactive .people-activity {
        opacity: .55;
    }

.people-roles,
.people-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.people-role {
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

/* The face with a green dot while the app is open. */
.people-face-wrap {
    position: relative;
    display: inline-flex;
    width: 32px;
    height: 32px;
}

.people-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-muted);
}

    .people-more:hover,
    .people-more[aria-expanded="true"] {
        background: var(--card);
        color: var(--ink);
        box-shadow: var(--sh-xs);
    }
@media (max-width: 860px) {
    .people-row {
        grid-template-columns: 32px 1fr 28px;
        row-gap: 6px;
    }

    .people-roles,
    .people-groups,
    .people-activity {
        grid-column: 2 / 3;
    }

    .people-actions {
        grid-column: 3;
        grid-row: 1;
    }
}

.uform-avatar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.uform-avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--card-2);
    border: 1px solid var(--border-soft);
}

.uform-avatar-grid {
    margin-bottom: 14px;
}

/* Roles as toggle chips. */
.uform-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.uform-role {
    position: relative;
    margin: 0;
    cursor: pointer;
}

    .uform-role input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .uform-role:hover span {
        border-color: var(--accent-line);
    }

    .uform-role input:checked + span {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent-hover);
        font-weight: var(--fw-semibold);
    }

        .uform-role input:checked + span::before {
            content: "";
            width: 12px;
            height: 12px;
            background: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
        }

    .uform-role input:focus-visible + span {
        box-shadow: var(--focus);
    }

    .uform-role.is-locked {
        cursor: not-allowed;
    }

/* ---- Definiri → Roluri: who has which role — a row per account, a column per role (its count by the name). ---- */
.role-users-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
}

.role-users-search {
    max-width: 220px;
}

.role-users-wrap {
    overflow-x: auto;
}

.role-users {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

    .role-users th {
        position: sticky;
        top: 0;
        padding: 8px 14px;
        border-bottom: 1px solid var(--border);
        background: var(--card);
        font-size: var(--fs-2xs);
        font-weight: var(--fw-bold);
        letter-spacing: var(--ls-label);
        text-transform: uppercase;
        color: var(--ink-muted);
        text-align: left;
        white-space: nowrap;
    }

    .role-users td {
        padding: 7px 14px;
        border-bottom: 1px solid var(--border-soft);
        vertical-align: middle;
    }

    .role-users tbody tr:hover {
        background: var(--card-2);
    }

    .role-users tr.is-inactive .role-users-who {
        opacity: .6;
    }

    .role-users .role-users-col {
        width: 1%;
        text-align: center;
    }

    .role-users .form-check-input {
        width: 18px;
        height: 18px;
        margin: 0;
        cursor: pointer;
    }

.role-users-n {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-align: center;
}

.role-users-who {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.role-users-face {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}

    .role-users-face.is-initials {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--card-2);
        border: 1px solid var(--border-soft);
        color: var(--ink-2);
        font-size: var(--fs-2xs);
        font-weight: var(--fw-bold);
    }

.role-users-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
}

    .role-users-name strong {
        font-weight: var(--fw-semibold);
        color: var(--ink);
    }

.role-users-tag {
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--card-2);
    border: 1px solid var(--border-soft);
}

.role-users-empty {
    padding: 18px 14px;
    text-align: center;
    color: var(--ink-muted);
    font-size: var(--fs-xs);
}

/* ---- Sarcini, Calendar, Grupuri, Organigramă, the top bar ---- */
.app-topnav-search-clear {
        display: none;
        flex: 0 0 auto;
        place-items: center;
        width: 20px;
        height: 20px;
        padding: 0;
        border: 0;
        border-radius: var(--r-pill);
        background: transparent;
        color: var(--ink-muted);
        cursor: pointer;
    }

        .app-topnav-search-clear:hover {
            background: rgba(30, 33, 31, .09);
            color: var(--ink);
        }

        .app-topnav-search-clear:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
        }

.app-topnav-kbd {
    flex: 0 0 auto;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    font-family: inherit;
    font-size: var(--fs-3xs);
    font-weight: var(--fw-semibold);
    color: var(--ink-muted);
    box-shadow: none;
}

.app-topnav-search:focus-within .app-topnav-kbd {
    display: none;
}

/* "sistem" next to a system account (sys.*) in the Utilizatori grid. */
.dm-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-muted);
    vertical-align: middle;
}

/* "Încarcă" — the first tile of the picker, opens the file dialog. */
.avatar-picker-upload {
    font: inherit;
    font-size: 11px;
    border-style: dashed;
    color: var(--accent-hover);
}

    .avatar-picker-upload:hover:not(:disabled) {
        border-color: var(--accent);
        background: var(--accent-soft);
    }

    .avatar-picker-upload:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .avatar-picker-upload:disabled {
        cursor: progress;
        opacity: .7;
    }

.avatar-picker-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
}

/* Setări cont — profile card on the left. */
.account-profile .details-panel-body {
    text-align: center;
}

.account-profile-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.account-profile-name {
    margin-top: 10px;
    font-size: var(--fs-md, 1rem);
    font-weight: var(--fw-bold);
    color: var(--ink);
}

.account-profile-sub {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

.account-dept {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 6px 4px 0;
}

.account-dept-level {
    font-size: 10px;
    font-weight: var(--fw-semibold);
    color: var(--accent-hover);
    background: var(--accent-soft);
    border-radius: var(--r-pill);
    padding: 0 6px;
}

/* The public pages (Legal/*, on the sign-in background): a readable column. */
.legal-page {
    width: 100%;
    max-width: 640px;
}

    .legal-page.is-narrow {
        max-width: 420px;
    }

.legal-body {
    font-size: var(--fs-md);
    line-height: 1.55;
}

    .legal-body h2 {
        margin: 18px 0 6px;
        font-size: var(--fs-lg);
        font-weight: var(--fw-bold);
    }

    .legal-body li + li {
        margin-top: 4px;
    }

.legal-meta {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

/* Between the legal pages (Termeni, Confidențialitate, Suport, Ștergerea contului) and who runs NudgeApp. */
.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
}

    .legal-links a.is-current {
        color: var(--ink);
        font-weight: var(--fw-semibold);
        text-decoration: none;
    }

.legal-operator {
    margin: 6px 0 0;
    color: var(--ink-muted);
    font-size: var(--fs-xs);
}

/* Under the sign-in card: Termeni · Confidențialitate · Suport. */
.auth-legal-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 10px;
    font-size: var(--fs-xs);
}

    .auth-legal-links a {
        color: inherit;
        opacity: .8;
    }

/* Setări cont → Ștergerea contului: what goes and what stays, then the password and the red button. */
.account-delete .details-panel-header {
    color: var(--danger);
}

.account-delete-list {
    margin: 0 0 12px;
    padding-left: 18px;
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

    .account-delete-list li + li {
        margin-top: 3px;
    }

.account-delete-error,
.account-delete-blocker {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: var(--fs-sm);
}

.account-delete-blocker {
    background: var(--warn-soft);
    color: var(--warn);
}

/* Setări cont — radio cards. */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}

.choice-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

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

    .choice-card:hover {
        border-color: var(--accent);
    }

    .choice-card:has(input:checked) {
        border-color: var(--accent);
        background: var(--accent-soft);
    }

    .choice-card:has(input:focus-visible) {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.choice-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: var(--r-sm);
    background: var(--card-2);
    color: var(--ink-2);
}

.choice-card:has(input:checked) .choice-card-icon {
    background: var(--accent);
    color: var(--accent-ink);
}

.choice-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.choice-card-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

.choice-card-hint {
    font-size: 11px;
    color: var(--ink-muted);
}

/* Setări cont — an on/off preference: the switch, then its title and what it does. */
.account-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 620px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card-2);
}

.account-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}

.account-toggle-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

.account-toggle-hint {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.people-chip {
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--ink-2);
    font-size: var(--fs-2xs);
    white-space: nowrap;
}

    /* A group the person supervises. */
    .people-chip.is-lead {
        border-color: var(--accent-line);
        color: var(--accent-hover);
        font-weight: var(--fw-semibold);
    }

        .people-chip.is-lead::before {
            content: "★ ";
            font-size: 9px;
        }

    .people-chip.is-more {
        background: var(--card-2);
    }

.people-manager {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-top: 2px;
    font-size: var(--fs-2xs);
    color: var(--ink-muted);
}

.people-live {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--card);
    border-radius: 50%;
    background: #22a06b;
}

/* "Activitate": last seen + phones, then the tasks. */
.people-activity {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.people-activity-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    font-size: var(--fs-xs);
    color: var(--ink-2);
}

.people-seen {
    color: var(--ink-2);
}

    .people-seen.is-live {
        color: #1a7f55;
        font-weight: var(--fw-semibold);
    }

        .people-seen.is-live::before {
            content: "";
            display: inline-block;
            width: 7px;
            height: 7px;
            margin-right: 5px;
            border-radius: 50%;
            background: #22a06b;
            vertical-align: 1px;
        }

    .people-seen.is-never {
        color: var(--ink-muted);
        font-style: italic;
    }

.people-phone {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--card-2);
    color: var(--ink-muted);
    font-size: var(--fs-2xs);
}

.people-overdue {
    color: var(--danger);
    font-weight: var(--fw-semibold);
}

.people-given {
    color: var(--ink-muted);
}

/* The side panel's header: the same seen + tasks under the name. */
.user-drawer-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    margin-top: 4px;
    font-size: var(--fs-xs);
    color: var(--ink-2);
}

    .user-drawer-stats svg {
        margin-right: 3px;
        vertical-align: -1px;
    }

.user-drawer.user-drawer-wider.offcanvas-end {
    width: min(1260px, 100vw);
}

.uform-cols.is-three .uform-block {
    margin-top: 8px;
}

.uform-cols.is-three .uform-pick-list {
    max-height: 170px;
}

/* Utilizator nou: a new person, or one of another company the administrator runs (their account). */
.uform-link {
    display: grid;
    gap: 10px;
}

.uform-link-modes {
    display: inline-flex;
    justify-self: start;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--card-2);
}

.uform-link-mode {
    margin: 0;
    cursor: pointer;
}

    .uform-link-mode input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .uform-link-mode input:checked + span {
        background: var(--card);
        color: var(--accent-hover);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    }

    .uform-link-mode input:focus-visible + span {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }

.uform-link-warn {
    color: var(--warn);
}

/* A picking list (groups with their level, a guest's contacts) with its own search. */
.uform-block {
    margin-top: 14px;
}

.uform-block-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.uform-filter {
    max-width: 180px;
    margin-left: auto;
}

.uform-pick-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
}

.uform-group,
.uform-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--fs-sm);
}

    .uform-group:last-child,
    .uform-contact:last-child {
        border-bottom: 0;
    }

    .uform-group:has(input[value="1"]:checked),
    .uform-group:has(input[value="2"]:checked),
    .uform-contact:has(input:checked) {
        background: var(--accent-soft);
    }

.uform-group-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
}

.uform-contact {
    cursor: pointer;
}

.uform-contact-face {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: 0 0 auto;
}

    .uform-contact-face.is-empty {
        background: var(--card-2);
        border: 1px solid var(--border-soft);
    }

/* — / Executant / Supervizor as one segmented control. */
.uform-seg {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--card);
}

    .uform-seg label {
        margin: 0;
        cursor: pointer;
    }

    .uform-seg input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .uform-seg input:checked + span {
        background: var(--accent);
        color: var(--accent-ink);
    }

    .uform-seg input[value="0"]:checked + span {
        background: var(--card-2);
        color: var(--ink-2);
    }

    .uform-seg input:focus-visible + span {
        box-shadow: var(--focus);
    }

.dept-branch {
    color: var(--ink-muted);
    margin-right: 6px;
}
@media (max-width: 991.98px) {

        .app-topnav-search.is-page .app-topnav-kbd {
            display: none;
        }
}

/* ---- Definiri → Organigramă: a top-down tree drawn with CSS connectors; wide trees scroll inside their panel. ---- */
.org-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
}

.org-tree,
.org-tree ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 18px 0 0;
    position: relative;
}

.org-tree {
    padding-top: 0;
    min-width: max-content;
    margin: 0 auto 18px;
}

.org-tree li {
    list-style: none;
    position: relative;
    padding: 18px 6px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.org-tree > li { padding-top: 0; }

    /* the horizontal bar over siblings, and the drop into each child */
    .org-tree li::before,
    .org-tree li::after {
        content: '';
        position: absolute;
        top: 0;
        right: 50%;
        width: 50%;
        height: 18px;
        border-top: 1px solid var(--border);
    }

    .org-tree li::after {
        right: auto;
        left: 50%;
        border-left: 1px solid var(--border);
    }

    .org-tree li:only-child::before,
    .org-tree li:only-child::after,
    .org-tree > li::before,
    .org-tree > li::after { display: none; }

    /* an only child hangs straight off its parent's drop line */
    .org-tree li:only-child { padding-top: 0; }

    .org-tree li:first-child::before,
    .org-tree li:last-child::after { border: 0 none; }

    .org-tree li:last-child::before {
        border-right: 1px solid var(--border);
        border-radius: 0 6px 0 0;
    }

    .org-tree li:first-child::after { border-radius: 6px 0 0 0; }

    /* the drop from a parent down to its children's bar */
    .org-tree ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        height: 18px;
        border-left: 1px solid var(--border);
    }

.org-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 196px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card);
    text-align: left;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.org-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

    .org-avatar.is-small {
        width: 20px;
        height: 20px;
    }

.org-avatar-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-weight: var(--fw-bold);
}

.org-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.org-name,
.org-dept-name {
    font-size: 12.5px;
    font-weight: var(--fw-bold);
    color: var(--ink);
    overflow-wrap: anywhere;
}

.org-sub {
    font-size: 11px;
    color: var(--ink-muted);
}

.org-depts {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.org-badge {
    align-self: flex-start;
    margin-top: 2px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
}

.org-team {
    font-size: 10.5px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.org-dept-card { border-top: 3px solid var(--accent); }

.org-dept-head {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--ink);
}

/* Organigramă — cards are buttons (click = edit), the summary strip, zoom, and the "not in the chart" list. */
button.org-card {
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}

    button.org-card:hover,
    button.org-card:focus-visible {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
        outline: none;
    }

.org-dept-card.is-headless { border-top-color: #d97706; }

.org-warn {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    color: #b45309;
}

.org-canvas { width: max-content; min-width: 100%; }

.org-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.org-summary-item {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--card);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

    .org-summary-item strong { color: var(--ink); }

    .org-summary-item.is-warn {
        border-color: #f5c77e;
        background: #fff8eb;
        color: #92400e;
    }

        .org-summary-item.is-warn strong { color: #92400e; }

.org-zoom {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .org-zoom .btn { padding: 1px 9px; line-height: 1.4; }

.org-zoom-value {
    min-width: 42px;
    text-align: center;
    font-size: var(--fs-2xs);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.org-out-list {
    display: flex;
    flex-direction: column;
}

.org-out-row {
    display: grid;
    grid-template-columns: 24px minmax(110px, 1fr) minmax(110px, 1.2fr) minmax(120px, 2fr) 190px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--ink);
    text-align: left;
}

button.org-out-row { cursor: pointer; }

.org-out-head {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.org-out-name { font-weight: var(--fw-bold); overflow-wrap: anywhere; }

.org-out-full,
.org-out-depts {
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-out-reason {
    justify-self: start;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

    .org-out-reason.is-open { background: #fff4e0; color: #92400e; }
    .org-out-reason.is-muted { background: var(--field-bg); color: var(--ink-muted); }

@media (max-width: 700px) {
    .org-out-row { grid-template-columns: 24px 1fr auto; }
    .org-out-full,
    .org-out-depts,
    .org-out-head { display: none; }
}

.dm-add {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: end;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md, 12px);
    background: var(--field-bg);
}

    .dm-add .form-label { margin-bottom: 4px; }
    .dm-add-btn { height: 38px; }

.dm-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 18px 0 6px;
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

.dm-head-sub {
    margin-left: auto;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-normal, 400);
    color: var(--ink-muted);
}

.dm-list {
    display: flex;
    flex-direction: column;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md, 12px);
}

.dm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-soft);
}

    .dm-row:last-child { border-bottom: 0; }
    .dm-row:hover { background: var(--field-bg); }
    .dm-row.is-inactive { opacity: .6; }

.dm-person {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 7px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-sm);
}

.dm-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-muted);
}

    .dm-remove:hover:not(:disabled) { background: #fde8e8; color: #dc2626; }
    .dm-remove:disabled { opacity: .3; cursor: not-allowed; }

@media (max-width: 560px) {
    .dm-add { grid-template-columns: 1fr; }
    .dm-row { flex-wrap: wrap; }
}

.gr-people-label {
    flex: 0 0 58px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--ink-muted);
}

.dept-row {
    --row-acts-w: 126px;
}

.dept-members-col {
    cursor: pointer;
    border-radius: var(--r-md);
}

    .dept-members-col:hover .gr-people-names {
        color: var(--accent-hover);
    }

/* Buzz on any page (site.js): a red bar at the top, with "Deschide". */
.csv-buzz-bar { position: fixed; top: 64px; left: 50%; z-index: 2000; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 14px; border-radius: 10px; background: #b42318; color: #fff; box-shadow: 0 8px 28px rgba(16, 24, 40, .3); font-size: 13.5px; font-weight: 600; transform: translateX(-50%); animation: csv-buzz-shake .45s ease-in-out 3; }
.csv-buzz-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-buzz-hint { flex: none; font-size: 12px; font-weight: 500; opacity: .9; white-space: nowrap; }
.csv-buzz-close { border: 0; background: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
@keyframes csv-buzz-shake {
    0%, 100% { transform: translateX(-50%); }
    25% { transform: translateX(calc(-50% - 6px)); }
    75% { transform: translateX(calc(-50% + 6px)); }
}
@media (prefers-reduced-motion: reduce) { .csv-buzz-bar { animation: none; } }


/* Several actions in the page header (secondary + primary CTA). */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .page-header-actions .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

/* Replies: a connecting guide-line off the parent, indented under its avatar. Nests naturally for
   reply-to-reply since each level wraps its own children in another .replies. */
.replies {
    margin-left: 29px;
    padding-left: 14px;
    border-left: 2px solid var(--border-soft);
}

@media (max-width: 767.98px) {

    .replies {
        margin-left: 14px;
        padding-left: 12px;
    }
}

.task-item-overdue .task-project {
    color: var(--danger);
}

.task-meta {
    margin-top: 4px;
    font-size: var(--fs-2xs);
    color: var(--ink-muted);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-grid-head {
    margin-bottom: 2px;
}

    .cal-grid-head span {
        text-align: center;
        font-size: calc(10.5px + var(--fd, 0px));
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        letter-spacing: var(--ls-label);
        color: var(--ink-muted);
    }

.cal-cell {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}

.cal-daynum {
    font-size: calc(15px + var(--fd, 0px));
    color: var(--ink-2);
    line-height: var(--lh-none);
}

.cal-cell-today .cal-daynum {
    font-weight: var(--fw-bold);
    color: var(--accent);
}

.cal-count {
    font-size: calc(10px + var(--fd, 0px));
    font-weight: var(--fw-bold);
    line-height: 1;
    padding: 1px 5px;
    border-radius: var(--r-pill);
    background: var(--warn-soft);
    color: var(--warn);
}

.cal-cell.is-selected {
    background: var(--accent);
    border-color: var(--accent);
}

    .cal-cell.is-selected .cal-daynum {
        color: var(--accent-ink);
        font-weight: var(--fw-bold);
    }

    .cal-cell.is-selected .cal-count {
        background: var(--accent-ink);
        color: var(--accent-hover);
    }

/* Keeps the selected cell's own (already high-contrast) background on hover instead of
   button.cal-cell:hover's lighter tint winning on specificity and washing out the white text. */
button.cal-cell.is-selected:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* ================================================================
   SARCINI (Tasks/Index, tasks.js) — WhatsApp-desktop-like: list on the left, conversation on the right.
   The page script sizes .tasks-app to fill the window below the top bar.
   ================================================================ */

.app-topnav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: var(--r-pill); background: #e0493e; color: #fff; font-size: 10px; font-weight: var(--fw-bold); line-height: 1; }
.app-topnav-badge[hidden] { display: none; }

/* The list is 480px wide (at most 40% of the page on a small screen); the conversation takes the rest of the width
   (edge to edge with the top bar). */
.tasks-app { display: grid; grid-template-columns: min(480px, 40%) minmax(0, 1fr); height: 640px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); }
.tasks-ic { flex: none; }
.tasks-qc-ico { flex: none; display: inline-block; vertical-align: -4px; border-radius: 50%; }
/* The Sarcini window is typeset like WhatsApp Web: one font for everything in it (WhatsApp's own stack - Segoe UI on Windows),
   a step denser than WhatsApp's sizes since 2026-10-04 (the user: "mai condensat pe toate ferestrele"), in px: list title 15 /
   preview 13 / time 12, header 15 / 12, message 13.5 / sender 12 / time 11, composer 14, search 13.5. The font is this one
   variable; the rest of the site keeps Plus Jakarta Sans. */
/* 2026-10-09 (the user: "pune lista și conversația pe Plus Jakarta Sans, posibil să facem revert"): the window uses the site's font, as the
   phone's lists do. TO GO BACK to the WhatsApp stack: change the one line "--tf: var(--font)" to "--tf: var(--tf-whatsapp)". */
.tasks-app { --tf-whatsapp: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
    --tf: var(--font); font-family: var(--tf); }

/* ---- left: list ---- */
.tasks-side { position: relative; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--card); }
.tasks-filterbar { position: relative; display: flex; border-bottom: 1px solid var(--border-soft); }
.tasks-filters { display: flex; flex-wrap: nowrap; gap: 4px; flex: 1 1 auto; min-width: 0; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; }
.tasks-filters::-webkit-scrollbar { display: none; }
.tasks-filterbar-nav { position: absolute; top: 0; bottom: 8px; z-index: 2; display: flex; align-items: center; width: 36px; padding: 0 6px; border: 0; color: var(--ink-2); cursor: pointer; }
.tasks-filterbar-nav.is-prev { left: 0; justify-content: flex-start; background: linear-gradient(90deg, var(--card) 55%, rgba(255, 255, 255, 0)); }
.tasks-filterbar-nav.is-next { right: 0; justify-content: flex-end; background: linear-gradient(270deg, var(--card) 55%, rgba(255, 255, 255, 0)); }
.tasks-filterbar-nav:hover { color: var(--accent-hover); }
.tasks-filterbar-nav[hidden] { display: none; }
.tasks-filter { flex: none; height: 27px; border: 1px solid var(--border); background: var(--card); color: var(--ink-2); border-radius: var(--r-pill); padding: 0 11px; font-size: calc(13px + var(--fd, 0px)); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; }
.tasks-filter:hover { border-color: var(--accent); color: var(--accent-hover); }
.tasks-filter.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); }
/* "Deschise" — pressed, "Închise" (and back), first in the row as on the phone; the arrows say it flips. */
.tasks-filter.is-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; }
/* The QC chip is the phone's: the bubble alone, violet while on (qc-bubble-on.png), grey while off (qc-bubble-off.png) — two pictures, one shown. */
.tasks-filter.is-icon img { display: block; width: 20px; height: 20px; }
.tasks-filter.is-icon .qc-on { display: none; }
.tasks-filter.is-icon.is-active .qc-on { display: block; }
.tasks-filter.is-icon.is-active .qc-off { display: none; }
.tasks-filter.is-status { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--fw-semibold); }
.tasks-filter.is-status svg { opacity: .7; }
.tasks-filter.is-status.is-closed { background: var(--ink-2); border-color: var(--ink-2); color: var(--card); }
.tasks-filter.is-status.is-all { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tasks-filters-sep { flex: none; align-self: center; width: 1px; height: 16px; margin: 0 2px; background: var(--border); }
/* Sarcini: the filters in one bar across the page (.todo-bar, as in Calendar), with Repetitive, Echipa and + at its right; the
   row of filters scrolls sideways under its edge arrows when the window is too narrow for all of them. */
.tasks-bar { margin-bottom: 12px; }
.todo-bar-row .tasks-filterbar { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.todo-bar-row .tasks-filterbar .tasks-filters { padding-bottom: 0; }
.todo-bar-row .tasks-filterbar-nav { bottom: 0; }
/* The tag button ("#") of the Sarcini search, in the top bar: in line, before the shortcut. */
.app-topnav-search .tasks-search-tag { position: static; flex: none; transform: none; width: 22px; height: 22px; }
/* Grupuri / De la / Către / Proiect / Stare open a list (caret); a person or project picked shows its name and a × that
   takes it off. */
.tasks-filter.is-picker { display: inline-flex; align-items: center; gap: 3px; max-width: 220px; }
.tasks-filter.is-picker[hidden] { display: none; }
.tasks-filter.is-picker::after { content: ""; width: 7px; height: 7px; margin: -3px 1px 0 2px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); opacity: .7; }
.tasks-filter.is-picker:has(.tasks-focus-clear:not([hidden]))::after { display: none; }
.tasks-focus-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-focus-clear { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: -5px; border-radius: 50%; background: rgba(58, 50, 184, .12); font-size: calc(13px + var(--fd, 0px)); line-height: 1; }
.tasks-focus-clear:hover { background: rgba(58, 50, 184, .24); }
.tasks-focus-clear[hidden] { display: none; }
.tasks-hidden-unread { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 6px 14px; background: var(--accent-soft); color: var(--accent-hover); font-size: 12px; line-height: 17px; font-weight: var(--fw-semibold); }
/* The unread line (N necitite · Arată · Marchează toate ca citite) keeps its size in every view — mică / mare don't touch it. */
.tasks-hidden-unread .tasks-link { font-size: 12px; line-height: 17px; }
.tasks-hidden-unread { cursor: pointer; }
.tasks-hidden-unread:hover { background: var(--accent-line, var(--accent-soft)); }
.tasks-hidden-unread #tHiddenUnreadText { flex: 1 1 auto; min-width: 0; }
.tasks-hidden-unread[hidden] { display: none; }

/* ---- The Sarcini bar (the user, 2026-10-18, "Propunere pagina Sarcini") ----
   ONE row, as tall as the bar was (48px + the two borders): the VIEWS as tabs (Toate / Necitite / Ale mele / Create de mine), "Filtre" with what is on as chips, the note about unread
   tasks the filters hide as a chip, and at the right ⋮, Quick Chat and "Sarcină nouă". The list starts at the top of its column. Colour only where it means something: the
   accent is for what is on (the tab, a chip, the unread number), everything else is grey. The Calendar's bar (.todo-bar without .tasks-bar) is the old one. */
.todo-bar.tasks-bar { padding: 0; }
.tasks-bar .todo-bar-row { height: 48px; padding: 0 10px 0 6px; gap: 8px; box-sizing: border-box; }
.tasks-bar .tasks-filterbar.tf-bar { align-items: center; align-self: stretch; gap: 8px; }
.tf-tabs { display: flex; align-self: stretch; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tf-tabs::-webkit-scrollbar { display: none; }
.tf-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-2); font-size: calc(13px + var(--fd, 0px)); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; }
.tf-tab:hover { color: var(--ink); }
.tf-tab:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent-line); border-radius: 8px; }
.tf-tab.is-active { color: var(--accent-hover); font-weight: var(--fw-semibold); }
.tf-tab.is-active { border-bottom-color: var(--accent); }
.tf-tab-count { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--accent); color: var(--accent-ink, #fff); font-size: 11px; font-weight: var(--fw-bold); line-height: 18px; text-align: center; }
.tf-tab-count[hidden] { display: none; }
.tf-sep { flex: none; width: 1px; height: 22px; margin: 0 4px; background: var(--border); }
.tf-filters { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 96px; padding: 0; overflow-x: auto; scrollbar-width: none; }
.tf-filters::-webkit-scrollbar { display: none; }
.tf-active { display: contents; }
.tf-filterbtn { display: inline-flex; align-items: center; gap: 5px; }
.tf-filterbtn svg { opacity: .7; }
.tf-filterbtn .tasks-filter-count:not(:empty)::before { content: "· "; }
/* what is on: the accent chip with an × (a chip that has a list — a person, a project, Stare — opens it) */
.tf-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 27px; padding: 0 5px 0 11px; border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-hover); font-size: calc(13px + var(--fd, 0px)); font-weight: var(--fw-medium); white-space: nowrap; }
.tf-chip[data-open] { cursor: pointer; }
.tf-chip[data-open]:hover { border-color: var(--accent); }
.tf-chip:focus-visible { outline: 0; box-shadow: var(--focus); }
.tf-chip-label { overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.tf-chip-x { display: inline-grid; place-items: center; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; background: rgba(58, 50, 184, .12); color: inherit; cursor: pointer; }
.tf-chip-x:hover { background: rgba(58, 50, 184, .26); }
.tf-chip-x svg { width: 10px; height: 10px; }
/* the note about unread tasks the filters hide: a dashed chip with a dot, then "Arată" */
.tf-filters .tasks-hidden-unread { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 11px; border: 1px dashed var(--accent-line); border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: calc(12.5px + var(--fd, 0px)); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; }
.tf-filters .tasks-hidden-unread::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tf-filters .tasks-hidden-unread:hover { background: var(--accent-soft); }
.tf-filters .tasks-hidden-unread .tasks-link { font-size: inherit; line-height: 1; color: var(--accent-hover); }
.tf-filters .tasks-hidden-unread[hidden] { display: none; }
/* the panel under "Filtre": one row per kind (label, then its chips) */
.tf-panel { position: absolute; z-index: 20; width: min(360px, calc(100% - 16px)); padding: 4px 12px 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(16, 24, 40, .16); }
.tf-panel[hidden] { display: none; }
/* ⋮ */
.tf-more { flex: none; position: relative; }
.tf-more-btn[aria-expanded="true"] { background: var(--card-2); color: var(--ink); }
.tf-more-menu { min-width: 16rem; padding: 4px; font-size: 13px; }
.tf-more-menu .dropdown-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 7px; font-size: 13px; color: var(--ink); text-align: left; }
.tf-more-menu .dropdown-item svg { flex: none; color: var(--ink-2); }
.tf-more-menu .dropdown-divider { margin: 4px 2px; }
.tf-more-menu .tf-more-sub { margin-left: auto; color: var(--ink-muted); font-size: 11.5px; }
.tf-more-menu .tf-check { margin-left: auto; display: none; color: var(--accent); font-weight: var(--fw-bold); }
.tf-more-menu .dropdown-item.is-on .tf-check { display: inline; }
.tf-more-menu .tf-ico-a { flex: none; display: inline-grid; place-items: center; width: 16px; color: var(--ink-2); font-weight: var(--fw-bold); line-height: 1; }
.tf-more-menu .tf-ico-a.is-s { font-size: 11px; }
.tf-more-menu .tf-ico-a.is-l { font-size: 16px; }
.tf-more-menu .tasks-tr-wrap .dropdown-header { padding: 6px 10px 2px; font-size: 11.5px; color: var(--ink-muted); }
.tf-more-menu .tasks-tr-wrap .dropdown-item.is-on { font-weight: var(--fw-semibold); color: var(--accent-hover); }
.tf-tools[hidden] { display: none; }
/* a narrow window (one pane at a time): the tabs on one line, scrolling sideways, the filters under them */
@media (max-width: 900px) {
    .tasks-bar .todo-bar-row { height: auto; min-height: 48px; padding: 6px 10px 6px 4px; }
    .tasks-bar .tasks-filterbar.tf-bar { flex-wrap: wrap; row-gap: 6px; }
    .tf-tabs { flex: 1 1 100%; min-height: 32px; }
    .tf-sep { display: none; }
    .tf-filters { flex: 1 1 100%; padding: 0 4px; }
}
.tasks-picker { position: absolute; left: 12px; right: 12px; z-index: 20; display: flex; flex-direction: column; max-height: min(420px, 70%); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(16, 24, 40, .16); overflow: hidden; }
.tasks-picker[hidden] { display: none; }
.tasks-picker-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-xs); }
.tasks-picker-actions { margin-left: auto; display: inline-flex; gap: 10px; }
.tasks-picker-search { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card-2); font-size: var(--fs-2xs); outline: none; }
.tasks-picker-search:focus { border-color: var(--accent); background: var(--card); }
.tasks-picker-list { overflow-y: auto; min-height: 0; padding: 4px 0; }
.tasks-picker-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
/* a label between groups of choices (the contributor list: "Grupuri · adaugă toți membrii lor" / "Persoane") */
.tasks-picker-sep { padding: 8px 12px 3px; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-hover); }
.tasks-picker-item[hidden] { display: none; }
.tasks-picker-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; font-size: var(--fs-xs); color: var(--ink); }
.tasks-picker-check { color: var(--accent); font-weight: var(--fw-bold); }
.tasks-picker-group { display: flex; align-items: center; gap: 7px; padding: 5px 12px; font-size: var(--fs-xs); color: var(--ink); cursor: pointer; }
.tasks-picker-group:hover { background: var(--card-2); }
.tasks-picker-group input { accent-color: var(--accent); }

/* "Grupuri" — the phone's group filter page (GroupFilterPage) as a panel (wwwroot/js/group-picker.js): a hint, a row per group (a tile,
   its name, your place in it, a switch) indented by level, a group under a picked one dimmed, "Niciunul / Implicit / Gata" below. */
.tasks-picker.is-groups { min-width: 320px; max-height: min(520px, 80%); }
.grp-head { padding: 10px 14px 6px; }
.grp-head strong { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); }
.grp-hint { margin: 3px 0 0; font-size: var(--fs-2xs); line-height: 1.4; color: var(--ink-muted); }
.grp-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 4px 8px 6px; }
.grp-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 5px 8px 5px calc(8px + var(--grp-depth, 0) * 20px); border: 0; border-radius: var(--r-md); background: none; text-align: left; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.grp-row:hover { background: var(--card-2); }
.grp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.grp-row.is-covered { opacity: .55; }
.grp-row.is-covered:hover { opacity: .85; }
.grp-tile { flex: none; display: block; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: #e7e4fb; }
.grp-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.grp-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.grp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.grp-sub { font-size: var(--fs-3xs); color: var(--ink-muted); }
/* Several companies: each company's groups come under a row with its name, in its colour (picking it picks them all). */
.grp-row.is-company { margin-top: 8px; padding-left: 8px; border-top: 1px solid var(--border-soft); border-radius: 0 0 var(--r-md) var(--r-md); }
.grp-list > .grp-row.is-company:first-child { margin-top: 0; border-top: 0; }
.grp-company { align-self: flex-start; margin-bottom: 1px; padding: 1px 10px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.grp-switch { flex: none; position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--border); transition: background-color var(--dur-fast) var(--ease); }
.grp-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .3); transition: transform var(--dur-fast) var(--ease); }
.grp-row[aria-checked="true"] .grp-switch { background: var(--accent); }
.grp-row[aria-checked="true"] .grp-switch::after { transform: translateX(14px); }
.grp-foot { display: flex; gap: 8px; padding: 8px 12px 10px; border-top: 1px solid var(--border-soft); }
.grp-btn { flex: 1 1 0; height: 32px; border: 0; border-radius: 10px; background: var(--card-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; }
.grp-btn:hover { background: var(--border-soft); color: var(--ink); }
.grp-btn.is-primary { background: var(--accent); color: var(--accent-ink, #fff); }
.grp-btn.is-primary:hover { background: var(--accent-hover); color: var(--accent-ink, #fff); }
.grp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tasks-avatar.is-project { background: #fcf1d9; color: #8a5a0b; border-color: transparent; }
/* presence: the green dot on a face (someone active in the last couple of minutes) */
.tasks-avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; align-self: flex-start; }
.tasks-online { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--online); border: 2px solid var(--card); }
/* Status (the user, 2026-10-15): the mark of somebody who is not available (Indisponibil / Concediu / Bolnav) sits on their face, opposite the green dot. */
.tasks-status-badge { position: absolute; left: -4px; bottom: -4px; z-index: 1; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1.5px var(--card), 0 0 0 2.5px var(--border-soft); font-size: 10px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; cursor: default; }
/* the line under the conversation's header: who on the task is not available now */
.tasks-unavailable { flex: none; padding: 6px 16px; border-bottom: 1px solid var(--border-soft); background: var(--warn-soft); color: var(--ink-2); font-size: calc(12.5px + var(--fd, 0px)); line-height: 1.5; }
.tasks-unavailable[hidden] { display: none; }
.tasks-unavailable-label { font-weight: var(--fw-semibold); color: var(--warn); }
.tasks-unavailable-one strong { font-weight: var(--fw-semibold); color: var(--ink); }
.tasks-filter-count { margin-left: 2px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tasks-filter.is-active .tasks-filter-count { color: inherit; opacity: .85; }
.tasks-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.tasks-list-empty { padding: 24px 16px; text-align: center; font-size: var(--fs-xs); color: var(--ink-muted); }
.tasks-item { display: flex; gap: 10px; width: 100%; padding: 8px 12px 8px 10px; border: 0; border-bottom: 1px solid var(--border-soft); background: var(--card); text-align: left; cursor: pointer; }
.tasks-item:hover { background: var(--card-2); }
.tasks-item.is-active { background: var(--accent-soft); }
.tasks-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tasks-item-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tasks-item-title { flex: 1 1 auto; min-width: 0; font-size: calc(15px + var(--fd, 0px)); font-weight: var(--fw-normal); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-item.is-unread .tasks-item-title { font-weight: var(--fw-bold); }
/* An urgent task: a red band on the left of its row — the only mark, its title is the normal one (the user, 2026-10-17: 'banda rosie in stanga pentru urgent, titlul normal'; it was a full-height red edge plus a red bold title).
   The band is a background picture, 4px wide and 8px in from the top and bottom (floating, as in the mock-up); !important so that the rows' "background:" shorthands (hover, open, planned) do not wipe it. */
.tasks-item.is-urgent {
    background-image: linear-gradient(var(--row-urgent, #d33a3a), var(--row-urgent, #d33a3a)) !important;
    background-repeat: no-repeat !important; background-position: 0 8px !important; background-size: 4px calc(100% - 16px) !important;
}
.tasks-chip.is-urgent { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); font-weight: var(--fw-bold); }
.tasks-item-time { flex: 0 0 auto; font-size: calc(12px + var(--fd, 0px)); color: var(--ink-muted); }
.tasks-item.is-unread .tasks-item-time { color: var(--accent-hover); font-weight: var(--fw-semibold); }
.tasks-item-preview { flex: 1 1 auto; min-width: 0; font-size: calc(13px + var(--fd, 0px)); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-unread { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: calc(12px + var(--fd, 0px)); font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center; }
.tasks-chip { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; font-size: var(--fs-3xs); font-weight: var(--fw-semibold); padding: 1px 7px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-2); border: 1px solid var(--border-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.tasks-chip.is-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.tasks-chip.is-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.tasks-chip.is-closed { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.tasks-chip.is-muted { color: var(--ink-muted); }
.tasks-chip.is-link:hover { border-color: var(--accent); color: var(--accent-hover); }

/* Rows as in the mobile app: line 2 who wrote last (a small face), line 3 quiet meta (deadline coloured), quick actions on hover. */
.tasks-item { position: relative; }
.tasks-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tasks-item.is-closed .tasks-item-title { color: var(--ink-2); }
.tasks-item-preview.is-noreply { font-style: italic; }
.tasks-preview-author { font-weight: var(--fw-medium); color: var(--ink-2); }
.tasks-item-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 1px; font-size: calc(12px + var(--fd, 0px)); color: var(--ink-muted); }
.tasks-meta-part { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tasks-meta-part .tasks-ic { width: 14px; height: 14px; }
.tasks-meta-deadline.is-overdue { color: var(--danger); font-weight: var(--fw-semibold); }
.tasks-meta-part.is-soon { color: #a0470a; font-weight: var(--fw-semibold); }
.tasks-meta-deadline.is-closed { color: var(--ok); }
.tasks-meta-holder.is-working { color: var(--accent-hover); }
.tasks-muted-mark { display: inline-flex; vertical-align: -1px; margin-right: 4px; color: var(--ink-muted); }
/* The quick actions on hover (the user, 2026-10-17): a small card with a hairline, top right, square-ish buttons — not the shadowed pill at the bottom. While it shows, the row's time steps aside and
   the title stops short of it (--acts: how many buttons the row has, set by rowHtml). */
.tasks-row-actions { position: absolute; right: 10px; top: 8px; display: none; gap: 2px; padding: 2px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); }
.tasks-item:hover .tasks-row-actions, .tasks-item:focus-within .tasks-row-actions { display: inline-flex; }
.tasks-item:is(:hover, :focus-within):has(.tasks-row-actions) .tasks-item-time { display: none; }
.tasks-item:is(:hover, :focus-within):has(.tasks-row-actions) .tasks-item-body > .tasks-item-row:first-child { padding-right: calc(var(--acts, 3) * 28px + 16px); }
.tasks-row-act { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; line-height: 1; cursor: pointer; color: var(--ink-2); }
.tasks-row-act:hover { background: var(--accent-soft); color: var(--accent-hover); }
/* Several rows at once (the user, 2026-10-17): the round box shows only while picking; the hover actions step aside; the bar sits at the bottom of the list. */
.tasks-sel { display: none; flex: none; width: 20px; height: 20px; border: 2px solid var(--border-strong); border-radius: 50%; background: transparent; align-self: center; }
.tasks-app.is-selecting .tasks-sel { display: inline-block; }
.tasks-item.is-selected .tasks-sel { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.tasks-app.is-selecting .tasks-item.is-selected { background: var(--accent-soft); }
.tasks-app.is-selecting .tasks-row-actions { display: none !important; }
.tasks-app.is-selecting .tasks-item:is(:hover, :focus-within):has(.tasks-row-actions) .tasks-item-time { display: initial; }
.tasks-app.is-selecting .tasks-item:is(:hover, :focus-within) .tasks-item-body > .tasks-item-row:first-child { padding-right: 0; }
#tSelect.is-on { background: var(--accent-soft); color: var(--accent-hover); }
.tasks-bulkbar { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--card); }
.tasks-bulkbar[hidden] { display: none; }
.tasks-bulk-count { font-size: calc(13px + var(--fd, 0px)); font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; }
.tasks-bulk-spacer { flex: 1 1 auto; }
.tasks-bulk-btn { border: 1px solid var(--border); border-radius: 8px; background: var(--card); padding: 4px 10px; font-size: calc(12.5px + var(--fd, 0px)); font-weight: var(--fw-semibold); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.tasks-bulk-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); }
.tasks-bulk-btn.is-close:not(:disabled) { color: #0b8a50; }
.tasks-bulk-btn:disabled { opacity: .45; cursor: default; }
.tasks-bulk-btn.is-cancel { padding: 4px 9px; font-size: 16px; line-height: 1; }
.tasks-bulk-btn:focus-visible { outline: 0; box-shadow: var(--focus); }
.tasks-toast-undo { margin-left: 8px; padding: 0; border: 0; background: none; color: #fff; font-weight: 700; text-decoration: underline; cursor: pointer; }
.tasks-toast-undo:hover { color: #e9e6ff; }
.tasks-online.is-recent { background: #eab308; }
/* the thread: who gave it in the header, "Văzut" ticks, faces open a profile */
.tasks-face-btn { display: inline-flex; flex: 0 0 auto; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; align-self: flex-end; }
.tasks-thread-head .tasks-face-btn { align-self: center; }
.tasks-face-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tasks-head-sub { margin-top: 1px; font-size: calc(12.5px + var(--fd, 0px)); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-head-sub .tasks-link { font-size: inherit; }
.tasks-task-seen { color: #0e8faa; }
/* The ticks are the phone's glyphs (Material done / done_all, inline SVG): the double one has its two ticks overlapping. */
.tasks-ticks { display: inline-flex; align-items: center; vertical-align: -3px; margin-left: 3px; color: #8696a0; }
.tasks-ticks.is-seen { color: #0e8faa; }
.tasks-tick-ic { width: 16px; height: 16px; }
.tasks-head-sub .tasks-ticks { margin-left: 0; vertical-align: -4px; }
.tasks-seen-by { align-self: flex-end; margin: -2px 6px 2px 0; font-size: calc(11px + var(--fd, 0px)); color: var(--ink-muted); }
/* quick days (deadline dialog, new task) and the editor's recent assignees / projects */
.tasks-quick-days { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tasks-quick-day.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tasks-quick-day.is-active small { color: inherit; opacity: .85; }
/* The deadline's day and, beside it, its hour (optional). */
/* ---- "Termen" dialog (Sarcini and Calendar): a card in the editor's style — a header with the task, "ZIUA" with quick days as chips,
   the date and the hour as fields, the reason, one wide button and two quiet links. ---- */
.dl-modal .modal-dialog { max-width: 440px; }
.dl-modal .modal-content { border: 0; border-radius: 20px; background: var(--card); box-shadow: 0 24px 64px rgba(16, 24, 40, .28); overflow: hidden; }
.dl-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 6px 20px; }
.dl-head-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-hover); }
.dl-head-text { flex: 1 1 auto; min-width: 0; }
.dl-head-text h5 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.dl-task { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-muted); }
.dl-task:empty { display: none; }
.dl-close { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer; }
.dl-close:hover { background: var(--card-2); color: var(--ink); }
.dl-close:focus-visible { outline: 0; box-shadow: var(--focus); }
.dl-body { padding: 4px 20px 6px; }
.dl-label { margin: 14px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--accent-hover); }
/* the quick days: the editor's chips */
.dl-modal .tasks-quick-days { gap: 6px; margin: 0; }
.dl-modal .tasks-quick-day { gap: 6px; padding: 7px 12px; border: 0; border-radius: 16px; background: #eef1f4; color: var(--ink-2); font-size: 13.5px; font-weight: 500; line-height: 1.2; }
.dl-modal .tasks-quick-day small { font-size: 12px; color: var(--ink-muted); }
.dl-modal .tasks-quick-day:hover { background: #e3e8ee; color: var(--ink); }
.dl-modal .tasks-quick-day:focus-visible { outline: 0; box-shadow: var(--focus); }
.dl-modal .tasks-quick-day.is-active { background: var(--accent); color: var(--accent-ink); }
.dl-modal .tasks-quick-day.is-active small { color: inherit; opacity: .85; }
.dl-fields { display: flex; gap: 10px; margin-top: 10px; }
.dl-field { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 4px; margin: 0; }
.dl-field.is-hour { flex: 0 0 132px; }
.dl-field > span { font-size: 12px; color: var(--ink-muted); }
.dl-modal .form-control { height: 42px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background: var(--field-bg); font-size: 15px; color: var(--ink); box-shadow: none; }
.dl-modal .form-control:focus { border-color: var(--accent); background: var(--card); box-shadow: var(--focus); }
.dl-modal textarea.dl-reason { height: auto; min-height: 64px; padding: 10px 12px; resize: none; line-height: 1.4; }
.dl-hint { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; font-size: 12.5px; color: var(--ink-muted); }
.dl-foot { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px 14px; }
.dl-save { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 15.5px; font-weight: 600; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.dl-save:hover { background: var(--accent-hover); }
.dl-save:focus-visible { outline: 0; box-shadow: var(--focus); }
.dl-save:disabled { opacity: .6; cursor: default; }
.dl-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dl-link { padding: 8px 6px; border: 0; border-radius: 8px; background: none; font-size: 14px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.dl-link:hover { background: var(--card-2); color: var(--ink); }
.dl-link.is-danger { color: #c62f2f; }
.dl-link.is-danger:hover { background: #fdecec; color: #c62f2f; }
.dl-link:focus-visible { outline: 0; box-shadow: var(--focus); }
.dl-link[hidden] { display: none; }
.dl-foot-row .dl-link:last-child { margin-left: auto; }

/* ---- a group's composition (Sarcini, "Grup" dialog): the same card — the people with their level, then the subgroups ---- */
.grpm-body { padding: 6px 12px 16px; }
.grpm-summary { padding: 4px 8px 8px; font-size: 13px; color: var(--ink-muted); }
.grpm-list { display: flex; flex-direction: column; }
.grpm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; }
.grpm-row:hover { background: var(--card-2); }
.grpm-row:focus-visible { outline: 0; box-shadow: var(--focus); }
.grpm-row .tasks-avatar { width: 40px; height: 40px; font-size: 14px; }
.grpm-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.grpm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--ink); }
.grpm-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-muted); }
.grpm-chip { flex: none; padding: 2px 9px; border-radius: var(--r-pill); background: #eef1f4; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.grpm-chip.is-sup { background: var(--accent-soft); color: var(--accent-hover); }
.grpm-chip.is-head { background: #fff3d6; color: #8a5a00; }
.grpm-label { margin: 14px 8px 8px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-hover); }
.grpm-subgroups { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
.grpm-sub-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 16px; background: #eef1f4; color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.grpm-sub-chip:hover { background: #e3e8ee; color: var(--ink); }
.grpm-sub-chip:focus-visible { outline: 0; box-shadow: var(--focus); }
/* a group's name that opens it: a link in the header, in a list row and in a profile */
.tasks-group-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; cursor: pointer; }
.tasks-group-link:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
@media (max-width: 480px) { .dl-modal .modal-dialog { margin: 12px; } .dl-fields { flex-wrap: wrap; } .dl-field.is-hour { flex: 1 1 100%; } }
/* Sarcini+ "Repetă": the frequency's fields under the deadline; ↻ on a task that repeats (list row, header). */
.tasks-repeat { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-2); }
.tasks-repeat[hidden], .tasks-repeat-row[hidden], .tasks-repeat-days[hidden] { display: none; }
.tasks-repeat-row { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--ink-2); }
.tasks-repeat-num { width: 4rem; flex: 0 0 auto; }
.tasks-repeat-end { width: auto; flex: 0 1 10rem; }
.tasks-repeat-days { display: flex; flex-wrap: wrap; gap: 4px; }
.tasks-repeat-day { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.tasks-repeat-day input { position: absolute; opacity: 0; pointer-events: none; }
.tasks-repeat-day span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 7px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); }
.tasks-repeat-day input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.tasks-repeat-day input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.tasks-info.is-repeat { color: var(--accent-hover); font-weight: var(--fw-semibold); }
.tasks-info.is-repeat.is-muted { color: var(--ink-muted); font-weight: inherit; }
/* Echipa: the icon with how many are active, the list, a profile */
.tasks-team-btn { position: relative; width: 30px; height: 30px; }
.tasks-team-count { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--online); color: #fff; font-size: calc(10px + var(--fd, 0px)); font-weight: var(--fw-bold); line-height: 16px; text-align: center; border: 2px solid var(--card); box-sizing: content-box; }
.tasks-team-count[hidden] { display: none; }
.tasks-team-search { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.tasks-team-search .tasks-picker-search { width: 100%; }
.tasks-team-head { padding: 10px 14px 4px; font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-muted); }
.tasks-team-list .tasks-avatar.is-sm { width: 34px; height: 34px; }
.tasks-profile-top { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding-bottom: 10px; }
.tasks-profile-photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.tasks-profile-photo.is-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-hover); font-size: calc(36px + var(--fd, 0px)); font-weight: var(--fw-bold); }
.tasks-profile-name { margin-top: 6px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); text-wrap: balance; }
.tasks-profile-details { font-size: var(--fs-xs); color: var(--ink-muted); }
.tasks-profile-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.tasks-status-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #8696a0; }
.tasks-profile-status.is-active .tasks-status-dot { background: var(--online); border-color: var(--online); }
.tasks-profile-status.is-recent .tasks-status-dot { background: #eab308; border-color: #eab308; }
.tasks-profile-section { padding: 10px 0; border-top: 1px solid var(--border-soft); font-size: var(--fs-xs); }
.tasks-profile-label { margin-bottom: 4px; font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-muted); }
.tasks-profile-group { padding: 2px 0; }
.tasks-profile-tasks { margin: 0 -16px; border-top: 1px solid var(--border-soft); }
/* Contributori: the executant (or the group), then the ones added (who added them, when, × to take them off); "Adaugă
   contributor" opens a people picker under them. The executanți of a group's task use the same rows (ticked while picking). */
.tasks-member { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--border-soft); }
.tasks-member .tasks-face-btn { align-self: center; }
.tasks-member-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tasks-member-text strong { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.tasks-members-add { padding: 10px 16px 6px; border-bottom: 1px solid var(--border-soft); background: var(--card-2); }
.tasks-members-add[hidden] { display: none; }
.tasks-members-add .tasks-picker-search { width: 100%; height: 32px; }
.tasks-members-pick { max-height: 280px; overflow-y: auto; margin: 6px -16px 0; }
#tMembersFoot[hidden] { display: none; }
.tasks-buzz-pick { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; margin: 0; }
.tasks-buzz-pick input { flex: 0 0 auto; margin: 0; }
.tasks-buzz-pick:hover { background: var(--card-2); }
.tasks-buzz-pick[hidden] { display: none; }
.tasks-buzz-find { padding: 8px 12px 0; }
.tasks-buzz-find:has(input[hidden]) { display: none; }
.tasks-buzz-all { background: var(--card-2); }
.tasks-members-note { padding: 10px 16px; font-size: var(--fs-2xs); color: var(--ink-muted); }
/* The task's text in the editor, for whoever may edit the rest but not what it says (only its creator does). */
#teText[readonly] { background: var(--card-2); color: var(--ink-2); cursor: default; }
#tExecFoot[hidden] { display: none; }
.tasks-exec-pick { margin: 0; cursor: pointer; }
.tasks-exec-pick .form-check-input { flex: 0 0 auto; }
.tasks-exec-seg { display: inline-flex; align-items: center; gap: 5px; }
.tasks-exec-seg.is-working, .tasks-exec-seg.is-working .tasks-ic { color: var(--accent-hover); }
.tasks-info.tasks-exec-info { max-width: 100%; gap: 8px; }

/* avatars */
.tasks-avatar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.tasks-avatar.is-sm { width: 28px; height: 28px; }
.tasks-avatar.is-lg { width: 36px; height: 36px; }
.tasks-avatar.is-icon, .tasks-avatar.is-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--card-2); color: var(--ink-2); border: 1px solid var(--border-soft); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.tasks-avatar.is-dept { background: var(--accent-soft); color: var(--accent-hover); border-color: transparent; }
/* A group's face: the phone's orbit picture (a round image on the pale violet); inline in a line of text it is the small mark (.tasks-group-mini). */
.tasks-avatar.is-group-face { border: 0; background: #e7e4fb; object-fit: cover; }
.tasks-group-mini { flex: none; display: inline-block; vertical-align: -3px; margin-right: 4px; border-radius: 50%; background: #e7e4fb; }
.tasks-avatar.is-private { background: var(--warn-soft); color: var(--warn); border-color: transparent; }

/* ---- right: conversation ---- */
.tasks-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.tasks-placeholder { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-muted); font-size: var(--fs-sm); }
.tasks-placeholder svg { color: var(--accent); opacity: .6; }
.tasks-loading { padding: 24px; text-align: center; color: var(--ink-muted); font-size: var(--fs-xs); }
.tasks-thread { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.tasks-thread[hidden], .tasks-editor[hidden], .tasks-placeholder[hidden] { display: none; }
/* The header: who gave it, the title and the state on top; the info line (icons, as in the app) with Buzz at its end; a
   group's Preiau / Mă ocup / Prelungire. The lines under the top one start under the title. */
.tasks-thread-head { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 12px; background: var(--card); border-bottom: 1px solid var(--border); }
.tasks-head-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tasks-head-body { flex: 1 1 auto; min-width: 0; }
.tasks-head-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: calc(15px + var(--fd, 0px)); line-height: 21px; font-weight: var(--fw-bold); color: var(--ink); overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
/* A long text is folded to two lines (as on the phone); "Arată tot" unfolds it — the whole text, up to a third of the screen, then it scrolls. */
.tasks-head-title.is-open { display: block; -webkit-line-clamp: unset; max-height: 34vh; overflow-y: auto; }
.tasks-head-more { display: inline-block; margin: 1px 0 0; padding: 0; border: 0; background: none; color: var(--accent); font-size: calc(12.5px + var(--fd, 0px)); font-weight: var(--fw-semibold); line-height: 17px; cursor: pointer; }
.tasks-head-more:hover { color: var(--accent-hover); text-decoration: underline; }
.tasks-head-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.tasks-head-more[hidden] { display: none; }
.tasks-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tasks-head-actions .btn { font-size: calc(13px + var(--fd, 0px)); padding: 5px 12px; }
.tasks-thread-head .tasks-avatar.is-lg { width: 38px; height: 38px; font-size: calc(14px + var(--fd, 0px)); }
.tasks-state-btn { display: inline-flex; align-items: center; gap: 6px; }
/* Închide / Redeschide with the phone's glyphs (Material check_circle / replay): the close one in the success green, as there. */
.tasks-state-ic { display: inline-flex; }
/* The header's one main action (the user, 2026-10-17): Închide / Redeschide, outlined in the accent; everything else is in the ⋮ menu (Preiau, Mă ocup, Executanți, Prelungire, Buzz …). */
.tasks-state-btn.is-main { border: 1px solid var(--accent-line); background: var(--card); color: var(--accent-hover); font-weight: var(--fw-semibold); }
.tasks-state-btn.is-main:hover, .tasks-state-btn.is-main:focus-visible { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.tasks-thread-head .dropdown-item.is-on { color: var(--accent-hover); font-weight: var(--fw-semibold); }
.tasks-thread-head .dropdown-item .tasks-ic { color: var(--ink-muted); flex: none; }
.tasks-thread-head .dropdown-item.is-on .tasks-ic { color: var(--accent-hover); }
.tasks-thread-head .dropdown-item.tasks-menu-buzz, .tasks-thread-head .dropdown-item.tasks-menu-buzz .tasks-ic { color: #b42318; }
.tasks-thread-head .dropdown-header { padding-top: 4px; padding-bottom: 2px; font-size: calc(11.5px + var(--fd, 0px)); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); }
.tasks-state-ic.is-close, .tasks-row-act.is-close { color: #0b8a50; }
.tasks-row-act.is-close:hover { background: #ddf6e9; color: #0b8a50; }
.tasks-info { display: inline-flex; align-items: center; gap: 4px; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.tasks-info .tasks-ic { width: 14px; height: 14px; color: var(--ink-muted); }
.tasks-info .tasks-link { font-size: inherit; }
.tasks-info.is-overdue, .tasks-info.is-overdue .tasks-ic { color: var(--danger); font-weight: var(--fw-semibold); }
.tasks-info.is-soon, .tasks-info.is-soon .tasks-ic { color: #a0470a; font-weight: var(--fw-semibold); }
.tasks-info.is-muted { color: var(--ink-muted); }
.tasks-info.is-working, .tasks-info.is-working .tasks-ic { color: var(--accent-hover); }
.tasks-info.is-warn, .tasks-info.is-warn .tasks-ic { color: var(--danger); }
.tasks-info.is-urgent { padding: 2px 8px; border-radius: var(--r-pill); background: var(--danger-soft); color: var(--danger); font-size: calc(12px + var(--fd, 0px)); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); }
.tasks-info-btn { margin: -3px -6px; padding: 3px 6px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; cursor: pointer; }
.tasks-info-btn:hover { background: var(--card-2); }
/* Buzz, as in the app: a round button with a red bell (only whoever gave the task). */
.tasks-buzz { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #eef1f4; color: #b42318; cursor: pointer; transition: background var(--dur-fast); }
.tasks-buzz:hover { background: #fde0dc; }
.tasks-buzz:focus-visible { outline: 0; box-shadow: var(--focus); }
.tasks-status { font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--accent-hover); background: var(--accent-soft); border-radius: var(--r-pill); padding: 2px 8px; }
.tasks-status.is-closed { color: var(--ink-muted); background: var(--card-2); }
.tasks-muted { color: var(--ink-muted); font-weight: var(--fw-normal); }
.tasks-link { border: 0; background: none; padding: 0; color: var(--accent-hover); font-size: var(--fs-2xs); text-decoration: underline; cursor: pointer; }
.tasks-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.tasks-icon-btn:hover { background: var(--card-2); color: var(--ink); }
/* Translate the conversation (Chrome / Edge): the button is lit while the conversation is translated, pulses while it works. */
.tasks-tr-btn.is-on { background: #e8e7fb; color: #3c39e3; }
.tasks-tr-btn.is-on:hover { background: #dcdaf7; color: #3c39e3; }
/* the combo: while it is on it carries the language in use (RO / EN / NE) beside the icon */
.tasks-tr-code { font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.tasks-tr-btn.is-on { width: auto; padding: 0 9px 0 8px; gap: 3px; border-radius: 15px; }
.tasks-tr-btn.is-on .tasks-tr-code:empty { display: none; }
.tasks-tr-wrap .dropdown-item.is-on { font-weight: 600; color: #3c39e3; }
.tasks-tr-wrap .dropdown-menu { min-width: 11rem; font-size: 13px; }
.tasks-tr-btn.is-busy { animation: tasks-tr-pulse 1s ease-in-out infinite; }
@keyframes tasks-tr-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tasks-tr-btn.is-busy { animation: none; opacity: .6; } }
.tasks-tr-note { margin-top: 3px; font-size: 11px; font-style: italic; opacity: .7; }
.tasks-back { display: none; }

/* The conversation's backdrop: the app's pale lavender (ThreadBg). Messages may take up to 80% of it, capped where lines
   would get too long to read. */
.tasks-messages { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 12px 20px 16px; display: flex; flex-direction: column; gap: 6px; background-color: #f1effa; }
.tasks-day { align-self: center; margin: 10px 0 4px; }
.tasks-day span { display: inline-block; font-size: calc(12.5px + var(--fd, 0px)); font-weight: var(--fw-normal); color: var(--ink-2); background: var(--card); border-radius: 10px; padding: 3px 10px 4px; }
.tasks-msg { display: flex; align-items: flex-end; gap: 8px; max-width: min(80%, 900px); }
.tasks-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
/* The rest of one person's series: no face (its place kept) and no name, closer to the one before. */
.tasks-msg.is-cont { margin-top: -3px; }
.tasks-msg.is-cont .tasks-face-btn { visibility: hidden; }
.tasks-msg .tasks-avatar.is-sm { width: 32px; height: 32px; font-size: calc(12px + var(--fd, 0px)); }
/* The bubbles (the user, 2026-10-16: "stanga un gri la cal WhatsApp, dreapta albastrul de la icoana de Nudge cu alb"): what others wrote is white (#fff with a lilac border #e0ddf4 — it lifts off the lilac thread and contrasts with my blue; the user chose it from six variants after "gri" #e9ebee -> #f4f5f7 -> #fafbfc: "sa mearga pe fundalul ala si sa fie in contrast cu albastrul"), what I wrote the blue
   of the Nudge icon (#3C39E3) with white lettering (the lettering inside my bubble: the block after .tasks-quote below). Before: others white (var(--card), border
   var(--border-soft)), mine lilac #dcd6fa (border #cbc3f6). */
.tasks-bubble { position: relative; min-width: 88px; padding: 8px 12px 6px; background: #ffffff; border: 1px solid #e0ddf4; border-radius: 14px 14px 14px 4px; box-shadow: var(--sh-xs); }
.tasks-msg.is-mine .tasks-bubble { background: #3c39e3; border-color: #3330c9; border-radius: 14px 14px 4px 14px; }
/* The task itself (its first message): pale blue, whoever gave it — the same as the phone's task bubble. */
.tasks-msg.is-task .tasks-bubble { background: #eef3fa; border-color: #dce5f2; }
.tasks-msg.is-task.is-mine .tasks-bubble { background: #eef3fa; border-color: #dce5f2; }
.tasks-bubble-author { font-size: calc(13px + var(--fd, 0px)); line-height: 17px; font-weight: var(--fw-bold); color: var(--accent-hover); margin-bottom: 3px; }
/* The colour of a person's name in a conversation (the phone's NameColors): ten hues, a different one for everyone who writes there (tasks.js
   nameSlot). On the name, on the bar and the name of a quote, and on an initials face. */
[data-nc="0"] { --nc: #D1342F; } [data-nc="1"] { --nc: #D8650A; } [data-nc="2"] { --nc: #8A7300; } [data-nc="3"] { --nc: #2A8F4B; } [data-nc="4"] { --nc: #0E8FAA; }
[data-nc="5"] { --nc: #1E78C8; } [data-nc="6"] { --nc: #8E44AD; } [data-nc="7"] { --nc: #C2318F; } [data-nc="8"] { --nc: #8B5A2B; } [data-nc="9"] { --nc: #4F7A28; }
.tasks-bubble-author[data-nc] { color: var(--nc); }
.tasks-quote[data-nc] { border-left-color: var(--nc); }
.tasks-quote[data-nc] .tasks-quote-author { color: var(--nc); }
.tasks-msg .tasks-avatar.is-initials[data-nc] { color: var(--nc); background: color-mix(in srgb, var(--nc) 16%, #fff); }
/* Replies: the quoted message on top of the bubble (click: go to it), ↩ next to a message on hover, the bar over the
   composer while writing one. */
.tasks-quote { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 5px 8px 6px; border-left: 4px solid var(--accent); border-radius: 8px; background: rgba(15, 42, 79, .06); cursor: pointer; max-width: 460px; }
.tasks-msg.is-mine .tasks-quote { background: rgba(58, 50, 184, .10); }
/* My own bubble is blue now: white lettering, a pale quote bar, white links / tags; not on the task's own bubble (pale blue, dark text) nor on an emoji alone (no bubble). */
.tasks-msg.is-mine:not(.is-task):not(.is-bare) .tasks-bubble-text,
.tasks-msg.is-mine:not(.is-task):not(.is-bare) .tasks-link-out,
.tasks-msg.is-mine:not(.is-task):not(.is-bare) .tasks-hashtag { color: #fff; }
.tasks-msg.is-mine:not(.is-task):not(.is-bare) .tasks-bubble-time { color: rgba(255, 255, 255, .75); }
.tasks-msg.is-mine:not(.is-task):not(.is-bare) .tasks-quote { background: rgba(255, 255, 255, .16); border-left-color: rgba(255, 255, 255, .85); }
.tasks-msg.is-mine:not(.is-task):not(.is-bare) .tasks-quote .tasks-quote-author { color: #fff; }
.tasks-msg.is-mine:not(.is-task):not(.is-bare) .tasks-quote .tasks-quote-text { color: rgba(255, 255, 255, .9); }
.tasks-msg.is-mine:not(.is-task):not(.is-bare) .tasks-mention.is-me { background: #fff; color: #3c39e3; }
.tasks-msg.is-mine:not(.is-task):not(.is-bare) mark.tasks-find-mark { color: var(--ink); }
.tasks-quote-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tasks-quote-author { font-size: calc(13px + var(--fd, 0px)); font-weight: var(--fw-bold); color: var(--accent-hover); }
.tasks-quote-text { font-size: calc(14px + var(--fd, 0px)); line-height: 19px; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tasks-quote-photo { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; flex: none; }
.tasks-reply-btn { align-self: center; visibility: hidden; border: 0; background: transparent; color: var(--ink-muted); padding: 4px; border-radius: 50%; cursor: pointer; flex: none; }
.tasks-msg:hover .tasks-reply-btn, .tasks-reply-btn:focus-visible { visibility: visible; }
.tasks-reply-btn:hover { background: var(--card-2); color: var(--accent-hover); }
.tasks-msg.is-flash .tasks-bubble { animation: tasks-flash 1.2s ease-out; }
@keyframes tasks-flash { 0%, 30% { box-shadow: 0 0 0 3px rgba(80, 71, 232, .45); } 100% { box-shadow: var(--sh-xs); } }
.tasks-replybar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 8px 7px 10px; border-left: 4px solid var(--accent); border-radius: 12px; background: var(--card-2); }
/* Editing one of my messages: the bar over the composer while its text is in it; "editat" by an edited message's time. */
.tasks-replybar.is-edit .tasks-quote-author { display: inline-flex; align-items: center; gap: 5px; }
.tasks-edited { font-style: italic; }
/* (the conversation's text is the list title's size: 15px, 13 in "mică" — the user, 2026-10-09) */
.tasks-bubble-text { font-size: calc(15px + var(--fd, 0px)); line-height: 22px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.tasks-bubble-time { font-size: calc(11px + var(--fd, 0px)); line-height: 14px; color: #667781; text-align: right; margin-top: 2px; }
/* ---- the conversation, without the spare space: a message's time sits beside its text (on the line below only when the text fills the
   line, or when it is a photo's), as in WhatsApp — a one-line message is one line tall, not three; tighter padding and gaps. The author,
   the quoted message and the photos take a line of their own. ---- */
.tasks-messages { gap: 4px; padding: 10px 18px 12px; }
.tasks-msg:not(.is-cont) { margin-top: 7px; }
.tasks-msg.is-cont { margin-top: 0; }
.tasks-bubble { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 10px; min-width: 64px; padding: 5px 11px 4px; }
.tasks-bubble > .tasks-bubble-author, .tasks-bubble > .tasks-quote, .tasks-bubble > .tasks-photos, .tasks-bubble > .tasks-doc { flex: 0 0 100%; box-sizing: border-box; }
.tasks-bubble > .tasks-doc { max-width: 280px; }
.tasks-bubble-author { margin-bottom: 0; line-height: 16px; }
.tasks-quote { margin: 2px 0 4px; }
.tasks-photos { margin: 4px 0 2px; }
.tasks-bubble-text { flex: 0 1 auto; min-width: 0; max-width: 100%; line-height: 21px; }
.tasks-bubble-time { flex: 0 0 auto; margin: 0 0 1px auto; }
/* Events (deadline changes, Preiau / Mă ocup, Buzz, close / reopen): a quiet line with its icon. Stand-outs keep a colour:
   the executant pushing their own deadline (red), a deleted message (a pill), a buzz (red text). */
.tasks-event { align-self: center; max-width: 90%; text-align: center; margin: 4px 0; }
.tasks-event span { display: inline-flex; align-items: center; gap: 5px; font-size: calc(13px + var(--fd, 0px)); line-height: 17px; color: var(--ink-2); background: var(--card); border-radius: 12px; padding: 5px 12px 6px; }
.tasks-event.is-warn span { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); }
.tasks-event.is-deleted span { font-style: italic; }
.tasks-event.is-buzz span { background: transparent; color: #b42318; }
/* The checklist (the user, 2026-10-17, web only): a bar under the header — "3/5" and a thin progress line — that opens onto the steps. */
.tasks-checklist { flex: none; border-bottom: 1px solid var(--border); background: var(--card); }
.tasks-checklist[hidden] { display: none; }
.tasks-cl-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 16px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink-2); font-size: calc(13px + var(--fd, 0px)); }
.tasks-cl-head:hover { background: var(--card-2); }
.tasks-cl-head:focus-visible { outline: 0; box-shadow: inset var(--focus); }
.tasks-cl-ic { display: inline-flex; color: var(--accent-hover); }
.tasks-cl-title { font-weight: var(--fw-semibold); color: var(--ink); }
.tasks-cl-n { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tasks-cl-bar { flex: 0 1 140px; height: 5px; border-radius: 3px; background: var(--card-2); overflow: hidden; }
.tasks-cl-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.tasks-cl-caret { margin-left: auto; display: inline-flex; color: var(--ink-muted); transition: transform var(--dur-fast) var(--ease); }
.tasks-cl-head[aria-expanded="true"] .tasks-cl-caret { transform: rotate(180deg); }
.tasks-cl-body { padding: 2px 16px 10px 40px; display: flex; flex-direction: column; gap: 2px; max-height: 38vh; overflow-y: auto; }
.tasks-cl-body[hidden] { display: none; }
.tasks-cl-item { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.tasks-cl-box { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.tasks-cl-text { flex: 1 1 auto; min-width: 0; font-size: calc(14px + var(--fd, 0px)); color: var(--ink); overflow-wrap: anywhere; }
.tasks-cl-item.is-done .tasks-cl-text { color: var(--ink-muted); text-decoration: line-through; }
.tasks-cl-by { flex: none; font-size: calc(11.5px + var(--fd, 0px)); color: var(--ink-muted); white-space: nowrap; }
.tasks-cl-del { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); font-size: 16px; line-height: 1; cursor: pointer; visibility: hidden; }
.tasks-cl-item:hover .tasks-cl-del, .tasks-cl-del:focus-visible { visibility: visible; }
.tasks-cl-del:hover { background: var(--danger-soft); color: var(--danger); }
.tasks-cl-add, .tasks-cl-edit { width: 100%; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: var(--field-bg); font-size: calc(14px + var(--fd, 0px)); color: var(--ink); outline: 0; }
.tasks-cl-add { margin-top: 4px; }
.tasks-cl-add:focus, .tasks-cl-edit:focus { border-color: var(--accent); background: var(--card); box-shadow: var(--focus); }
.tasks-meta-part.is-ok { color: var(--row-ok, #0b8a50); }/* Reactions (the user, 2026-10-17): a row of small chips at the bottom of a bubble, one per emoji; mine is violet. */
.tasks-reacts { flex: 0 0 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px; }
.tasks-react { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); font-size: calc(13px + var(--fd, 0px)); line-height: 1; color: var(--ink-2); cursor: pointer; }
.tasks-react:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.tasks-react.is-mine { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-hover); font-weight: var(--fw-semibold); }
.tasks-react-e { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: calc(14px + var(--fd, 0px)); }
.tasks-react-n { font-size: calc(12px + var(--fd, 0px)); font-variant-numeric: tabular-nums; }
.tasks-msg.is-mine:not(.is-task):not(.is-bare) .tasks-react { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .16); color: #fff; }
.tasks-msg.is-mine:not(.is-task):not(.is-bare) .tasks-react.is-mine { background: #fff; color: #3c39e3; border-color: #fff; }
.tasks-react-pop { position: fixed; z-index: 1090; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: 22px; background: var(--card); box-shadow: 0 6px 22px rgba(16, 24, 40, .18); }
.tasks-react-pick { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 20px; line-height: 1; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.tasks-react-pick:hover { background: var(--accent-soft); transform: scale(1.18); }
.tasks-react-pick.is-on { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-line); }/* A run of quiet system events folded into one line (groupEvents in tasks.js): "3 modificări · 14:02 ▾"; a click opens the lines. */
.tasks-evgroup { align-self: center; max-width: 90%; margin: 4px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tasks-evgroup-head { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 12px; padding: 5px 12px 6px; background: var(--card); color: var(--ink-2); font-size: calc(13px + var(--fd, 0px)); line-height: 17px; cursor: pointer; }
.tasks-evgroup-head:hover { background: var(--card-2); color: var(--ink); }
.tasks-evgroup-head:focus-visible { outline: 0; box-shadow: var(--focus); }
.tasks-evgroup-head .tasks-ic { transition: transform var(--dur-fast) var(--ease); }
.tasks-evgroup.is-open .tasks-evgroup-head .tasks-ic { transform: rotate(180deg); }
.tasks-evgroup-body { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tasks-evgroup-body[hidden] { display: none; }
.tasks-evgroup-body .tasks-event { margin: 0; }
.tasks-chip.is-warn { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }

.tasks-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 120px)); gap: 4px; margin: 6px 0 4px; }
.tasks-photos.is-single { grid-template-columns: minmax(0, 260px); }
.tasks-photo { display: block; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--card-2); cursor: zoom-in; max-height: 260px; }
.tasks-photos:not(.is-single) .tasks-photo { aspect-ratio: 1 / 1 !important; }
.tasks-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tasks-new-messages { position: absolute; right: 18px; bottom: 64px; z-index: 5; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: var(--fw-bold); padding: 4px 12px; box-shadow: var(--sh-pop); cursor: pointer; }

/* The composer: one rounded field holding the attach button and the text; send beside it. */
.tasks-composer { padding: 10px 16px 12px; background: var(--card); border-top: 1px solid var(--border); }
.tasks-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.tasks-composer-field { display: flex; align-items: flex-end; gap: 2px; flex: 1 1 auto; min-width: 0; padding: 0 8px 0 4px; border: 1px solid transparent; border-radius: 23px; background: var(--field-bg); }
.tasks-composer-field:focus-within { border-color: var(--accent); background: var(--card); box-shadow: var(--focus); }
.tasks-composer textarea { flex: 1 1 auto; min-height: 44px; max-height: 160px; resize: none; padding: 11px 6px; border: 0; background: transparent; font-size: calc(15px + var(--fd, 0px)); line-height: 22px; color: var(--ink); outline: none; }
.tasks-attach { width: 38px; height: 38px; margin-bottom: 3px; color: var(--ink-muted); }
.tasks-attach:disabled { opacity: .4; cursor: default; }
.tasks-send { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.tasks-send:hover { background: var(--accent-hover); }
.tasks-send:disabled { opacity: .6; cursor: default; }

.tasks-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tasks-pending[hidden] { display: none; }
.tasks-pending-item { position: relative; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--card-2); }
.tasks-pending-item img { width: 100%; height: 100%; object-fit: cover; }
.tasks-pending-item.is-uploading img { opacity: .45; }
.tasks-pending-item.is-uploading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: tasks-spin .8s linear infinite; }
.tasks-pending-item.is-error { border-color: var(--danger); }
/* a document waiting to be sent: its icon and name in the same 56px box */
.tasks-pending-item.is-doc { width: 96px; }
.tasks-pending-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; padding: 4px; font-size: calc(.7rem + var(--fd, 0px)); line-height: 1.1; text-align: center; }
.tasks-pending-doc-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; max-width: 100%; }
.tasks-pending-item.is-doc.is-uploading .tasks-pending-doc { opacity: .45; }
/* a document in a message: icon, name, size */
.tasks-doc { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--border); color: inherit; text-decoration: none; max-width: 280px; }
.tasks-doc:hover { border-color: var(--accent); color: inherit; }
.tasks-doc-icon { font-size: calc(1.5rem + var(--fd, 0px)); line-height: 1; }
.tasks-doc-body { display: flex; flex-direction: column; min-width: 0; }
.tasks-doc-name { font-size: calc(14px + var(--fd, 0px)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-doc-size { font-size: calc(12px + var(--fd, 0px)); color: var(--muted, #6b7785); }
/* a video in a message (the user, 2026-10-15): its poster with a play button — the browser's player takes the tile's place when it is pressed —,
   and under it the name, the size and the download */
.tasks-bubble > .tasks-video { flex: 0 0 100%; box-sizing: border-box; }
.tasks-video { margin: 6px 0 2px; max-width: 100%; }
.tasks-video-tile { position: relative; display: block; max-width: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #1c1f26; cursor: pointer; }
.tasks-video-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.tasks-video-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; transition: background var(--dur-fast); }
.tasks-video-tile:hover .tasks-video-play, .tasks-video-tile:focus-visible .tasks-video-play { background: var(--accent); }
.tasks-video-time { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: calc(11px + var(--fd, 0px)); line-height: 16px; font-variant-numeric: tabular-nums; }
.tasks-video-player { display: block; max-width: 100%; border-radius: 8px; background: #000; }
.tasks-video-cap { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; font-size: calc(12px + var(--fd, 0px)); color: var(--ink-muted); }
.tasks-video-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-video-size { flex: 0 0 auto; }
.tasks-video-dl { flex: 0 0 auto; display: inline-flex; color: var(--ink-muted); }
.tasks-video-dl:hover { color: var(--accent); }
.tasks-video-fail { padding: 10px 12px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--border); font-size: calc(13px + var(--fd, 0px)); color: var(--ink-2); }
/* a video waiting to be sent: its poster in the box, a play mark, and the bar of what has gone up (instead of the spinner) */
.tasks-pending-item.is-video { width: 84px; }
.tasks-pending-play { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(0, 0, 0, .55); pointer-events: none; }
.tasks-pending-play::before { content: ""; position: absolute; left: 8px; top: 6px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.tasks-pending-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .35); }
.tasks-pending-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s linear; }
.tasks-pending-item.is-video.is-uploading::after { display: none; }
.tasks-pending-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
@keyframes tasks-spin { to { transform: rotate(360deg); } }

.tasks-drop { position: absolute; inset: 8px; z-index: 20; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--accent); border-radius: var(--r-lg); background: rgba(238, 236, 253, .92); color: var(--accent-hover); font-weight: var(--fw-bold); pointer-events: none; }
.tasks-drop[hidden] { display: none; }

/* ---- new / edit ---- */
.tasks-editor { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: var(--card); }

/* ---- photo viewer ---- */
.tasks-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(12, 16, 14, .88); }
.tasks-lightbox[hidden] { display: none; }
.tasks-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.tasks-lightbox-close { position: absolute; top: 12px; right: 18px; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.tasks-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 34px; cursor: pointer; }
.tasks-lightbox-nav.is-prev { left: 18px; }
.tasks-lightbox-nav.is-next { right: 18px; }
.tasks-lightbox-nav[hidden] { display: none; }
.tasks-lightbox-open { position: absolute; bottom: 16px; color: #fff; font-size: var(--fs-xs); opacity: .8; }
/* A photo of a profile's Media: who sent it, when, and the conversation it came in (a click opens it). */
.tasks-lightbox-caption { position: absolute; bottom: 42px; max-width: 88vw; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .55); color: #fff; font-size: var(--fs-xs); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tasks-lightbox-caption[hidden] { display: none; }
.tasks-lightbox-goto { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
/* ---- a person's profile: Media, a grid of small thumbnails (newest first); a chat bubble marks one that came in a Quick Chat ---- */
.tasks-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; }
.tasks-media-grid:empty { display: none; }
.tasks-media-item { position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--card-2); cursor: pointer; }
.tasks-media-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tasks-media-item:hover img { filter: brightness(.92); }
.tasks-media-item:focus-visible { outline: 0; box-shadow: var(--focus); }
.tasks-media-qc { position: absolute; left: 4px; bottom: 4px; display: grid; place-items: center; width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.tasks-media-item .tasks-media-qc .tasks-qc-ico { width: 20px; height: 20px; filter: none; }

/* ---- the task editor (new / change), as the phone's TaskEditorPage: the text first (17px, no box), its files under it, then small violet
   caps labels over a card ("Pentru cine"), chips (the picked one in the brand colour), switches, and one wide button at the bottom.
   Sizes are the phone's; the font sizes carry --fd so "mică" takes 2px off them (the .view-small block below packs it). ---- */
.te-head { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
/* Several companies: the one a new task is made in (colours inline, the company's own); a click lists the others. */
.te-company { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 12px; border: 0; border-radius: var(--r-pill); font-size: calc(13px + var(--fd, 0px)); font-weight: var(--fw-bold); cursor: pointer; }
.te-company:hover { filter: brightness(.96); }
.te-company:focus-visible { outline: 0; box-shadow: var(--focus); }
.te-company-dot { width: 12px; height: 12px; margin: 8px; border-radius: 50%; }
.te-head h2 { margin: 0; font-size: calc(18px + var(--fd, 0px)); font-weight: var(--fw-bold); color: var(--ink); }
.te-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.te-scroll { container-type: inline-size; }
.te-col { position: relative; max-width: 1000px; margin: 0 auto; padding: 16px 20px 20px; }
/* Two zones: the left up to the contributori, the right a panel with the rest (Termen, Urgentă, Proiect, Publică) — one under the other when the pane is narrow. */
.te-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.te-left, .te-right { position: relative; min-width: 0; }
.te-right { align-self: stretch; padding: 12px 14px 10px; border-radius: 12px; background: var(--field-bg); }
.te-right > :first-child { margin-top: 0; }
.te-right .te-label:not(:first-child) { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.te-right .te-chip:not(.is-on):hover { background: #f4f6f9; }
.te-right .te-datebox { background: var(--card); }
.te-right .te-urgent { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
@container (max-width: 640px) { .te-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.te-text { display: block; width: 100%; min-height: 110px; max-height: 45vh; resize: vertical; padding: 4px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: calc(17px + var(--fd, 0px)); line-height: 1.45; }
.te-text[readonly] { color: var(--ink-2); }
.te-text::placeholder { color: var(--ink-muted); }
.te-hint { margin-top: 6px; font-size: calc(12.5px + var(--fd, 0px)); color: var(--ink-2); }
.te-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.te-tiles .tasks-pending { display: contents; }
.te-tile { display: inline-grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 10px; background: #eef1f4; color: var(--ink-2); cursor: pointer; }
.te-tile:hover { background: #e3e8ee; color: var(--ink); }
.te-tile:focus-visible { outline: 0; box-shadow: var(--focus); }
.te-tile.is-hash { font-size: calc(24px + var(--fd, 0px)); font-weight: var(--fw-bold); line-height: 1; }
.te-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.te-tags[hidden] { display: none; }
.te-tag { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 10px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-hover); font-size: calc(13px + var(--fd, 0px)); font-weight: var(--fw-medium); }
.te-tag button { display: inline-flex; padding: 4px; border: 0; background: none; color: inherit; cursor: pointer; }
.te-label { margin: 18px 0 8px; font-size: calc(12px + var(--fd, 0px)); font-weight: var(--fw-bold); letter-spacing: .03em; color: var(--accent-hover); }
.te-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--field-bg); text-align: left; cursor: pointer; }
.te-card:hover { background: #e6eaef; }
.te-card:focus-visible { outline: 0; box-shadow: var(--focus); }
.te-faces { position: relative; display: inline-flex; flex: none; }
.te-faces .tasks-avatar { width: 36px; height: 36px; border: 0; font-size: calc(13px + var(--fd, 0px)); font-weight: 600; }
.te-faces .tasks-avatar svg { width: 19px; height: 19px; }
.te-card-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.te-card-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(15px + var(--fd, 0px)); font-weight: 600; color: var(--ink); }
.te-chev { display: inline-flex; flex: none; color: var(--ink-muted); }
.te-label + .te-chips { margin-top: 0; }
#teMembersBox[hidden] { display: none; }
.te-datebox { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--field-bg); }
.te-datebox[hidden], .te-repeatbox[hidden], .te-summary[hidden] { display: none; }
.te-field { display: flex; flex-direction: column; flex: 1 1 140px; gap: 3px; margin: 0; }
.te-field > span { font-size: calc(12px + var(--fd, 0px)); color: var(--ink-muted); }
.te-summary { margin: 8px 2px 0; font-size: calc(13px + var(--fd, 0px)); font-weight: var(--fw-medium); color: var(--accent-hover); }
.te-repeatbox { margin-top: 8px; }
.te-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-radius: 10px; cursor: pointer; }
.te-row:focus-visible { outline: 0; box-shadow: var(--focus); }
.te-row.is-static { cursor: default; }
.te-row[hidden] { display: none; }
.te-row-ic { display: inline-flex; flex: none; color: var(--ink-2); }
.te-row-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: calc(14.5px + var(--fd, 0px)); color: var(--ink); }
.te-row-text.is-empty { color: var(--ink-2); }
.te-row-text > strong { font-weight: 600; }
.te-row-clear { display: inline-flex; padding: 8px; border-radius: 50%; color: var(--ink-muted); }
.te-row-clear:hover { background: var(--card-2); color: var(--ink); }
.te-urgent .te-row-ic { color: #d33a3a; }
.te-urgent .te-row-text > strong { color: var(--danger); }
.te-switch { position: relative; flex: none; width: 46px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: #c9d1d9; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.te-switch > span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--dur-fast) var(--ease); }
.te-switch[aria-checked="true"] { background: var(--accent); }
.te-switch.is-urgent[aria-checked="true"] { background: #d33a3a; }
.te-switch[aria-checked="true"] > span { transform: translateX(18px); }
.te-switch:focus-visible { outline: 0; box-shadow: var(--focus); }
.te-error { margin-top: 14px; padding: 8px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: calc(13px + var(--fd, 0px)); }
.te-error[hidden] { display: none; }
.te-foot { padding: 10px 20px 14px; border-top: 1px solid var(--border-soft); background: var(--card); }
.te-save { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 960px; height: 50px; margin: 0 auto; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: calc(15.5px + var(--fd, 0px)); font-weight: 600; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.te-save:hover { background: var(--accent-hover); }
.te-save:focus-visible { outline: 0; box-shadow: var(--focus); }
.te-save:disabled { opacity: .6; cursor: default; }
.te-pop-sec { padding: 6px 14px 2px; font-size: calc(11.5px + var(--fd, 0px)); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; color: var(--accent-hover); }
.te-pop .te-faces .tasks-avatar { width: 28px; height: 28px; font-size: calc(11px + var(--fd, 0px)); }
.te-pop .te-faces .tasks-avatar svg { width: 16px; height: 16px; }
/* "mică": the same editor, packed — a screen of it holds more */
.view-small .te-col { padding: 10px 16px 12px; }
.view-small .te-right { padding: 8px 12px 6px; }
.view-small .te-grid { gap: 18px; }
.view-small .te-text { min-height: 84px; }
.view-small .te-label { margin: 12px 0 6px; }
.view-small .te-tile { width: 46px; height: 46px; }
.view-small .te-card { padding: 6px 8px; }
.view-small .te-faces .tasks-avatar { width: 30px; height: 30px; }
.view-small .te-chip { padding: 5px 10px; }
.view-small .te-row { padding: 5px 2px; }
.view-small .te-save { height: 42px; }
.view-small .te-foot { padding: 8px 16px 10px; }
.view-small .te-pop-item { padding-top: 4px; padding-bottom: 4px; }
.view-small .te-pop .te-faces .tasks-avatar { width: 24px; height: 24px; }
/* TRIAL 2026-10-16 ("fontul cu 2 mai mic la sarcina noua, sa para mai aierisit" — then "facem +1 la font, adica mai mic cu unu decat era original"; kept or dropped by
   the user): everything in the new / change-task panel, its pop-overs (who, project, emoji, @) included, takes 1px off its type; spacing, icons and the boxes stay as
   they are, so the feeling is the same, only airier. "Mică" already has 2px off (its own .view-small block above), so it is left alone. The date picker's calendar
   (flatpickr, fixed-size cells) is not touched. To drop the trial: delete this whole block. */
.tasks-app:not(.view-small) .tasks-editor { --fd: -1px; --fs-3xs: 9px; --fs-2xs: 9.5px; --fs-xs: 10.5px; --fs-sm: 11.5px; --fs-md: 12px; --fs-base: 13px; --fs-lg: 15px; --fs-xl: 19px; }
.tasks-app:not(.view-small) .tasks-editor :is(.form-control, .form-select) { font-size: 12px; }
.tasks-app:not(.view-small) .tasks-editor :is(.form-control-sm, .form-select-sm) { font-size: 11.25px; }
body:has(.tasks-app:not(.view-small) .tasks-editor:not([hidden])) :is(.emo-search, .emo-empty) { font-size: 12px; }
body:has(.tasks-app:not(.view-small) .tasks-editor:not([hidden])) .emo-tab { font-size: 15px; }
body:has(.tasks-app:not(.view-small) .tasks-editor:not([hidden])) .emo-item { font-size: 19px; }
body:has(.tasks-app:not(.view-small) .tasks-editor:not([hidden])) .mn-name { font-size: 13px; }
body:has(.tasks-app:not(.view-small) .tasks-editor:not([hidden])) .mn-sub { font-size: 11px; }
/* ---- emoji (wwwroot/js/emoji-picker.js): the button in the composer and the editor, the picker, and one to three emoji alone in a message shown big ---- */
.emo-pop { position: fixed; z-index: 1080; display: flex; flex-direction: column; max-height: 320px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 24, 40, .18); overflow: hidden; }
.emo-head { flex: none; padding: 6px; border-bottom: 1px solid var(--border-soft); }
.emo-search { width: 100%; height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; background: var(--field-bg); font-size: 13px; color: var(--ink); outline: 0; }
.emo-search:focus { border-color: var(--accent); background: var(--card); box-shadow: var(--focus); }
.emo-tabs { flex: none; display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border-soft); }
.emo-tab { flex: 1 1 0; height: 28px; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; background: none; font-size: 16px; line-height: 1; cursor: pointer; filter: grayscale(1); opacity: .65; }
.emo-tab:hover { background: var(--card-2); opacity: 1; }
.emo-tab.is-on { border-bottom-color: var(--accent); filter: none; opacity: 1; }
.emo-grid { display: grid; grid-template-columns: repeat(8, 1fr); align-content: start; gap: 2px; height: 192px; min-height: 0; padding: 6px; overflow-y: auto; }
.emo-item { height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 20px; line-height: 1; cursor: pointer; }
.emo-item:hover, .emo-item:focus-visible { background: var(--accent-soft); outline: 0; }
.emo-empty { grid-column: 1 / -1; padding: 18px 8px; text-align: center; font-size: 13px; color: var(--ink-muted); }
.tasks-bubble-text.is-emoji { font-size: calc(34px + var(--fd, 0px)); line-height: 1.25; }
/* "@username" in a message, the task's text and the Menționări list — as on the phone (Linkify.MentionStyle, the user, 2026-10-15): a small rounded tag, bold; soft violet
   (#E9E6FF, letters #3F35C9) for the others, solid violet (#5047E8, white letters) for the person naming me — typed from the "@" list (mention-picker.js). */
.tasks-mention { display: inline-block; padding: 1.5px 5px; margin: 0 1px; border-radius: 5px; background: #E9E6FF; color: #3F35C9; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.tasks-mention[data-profile] { cursor: pointer; }
.tasks-mention[data-profile]:hover { background: #DCD7FF; }
.tasks-mention.is-me { background: #5047E8; color: #fff; }
.tasks-mention.is-me[data-profile]:hover { background: #4339D6; }
/* the list of people that opens at "@" */
.mn-pop { position: fixed; z-index: 1200; display: flex; flex-direction: column; gap: 1px; max-height: 270px; overflow-y: auto; padding: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 24, 40, .18); }
.mn-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; }
.mn-item:hover, .mn-item.is-on { background: var(--accent-soft); }
.mn-face { display: inline-flex; flex: none; }
.mn-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ink); }
.mn-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-muted); }
@media (max-width: 767.98px) {
    /* minmax(0, …): the one-row filters and the nowrap titles mustn't stretch the column past the screen. */
    .tasks-app { grid-template-columns: minmax(0, 1fr); }
    .tasks-app .tasks-main { display: none; }
    .tasks-app.is-detail .tasks-side, .tasks-bar.is-detail { display: none; }
    .tasks-app.is-detail .tasks-main { display: flex; }
    .tasks-back { display: inline-flex; }
    .tasks-msg { max-width: 92%; }
    .tasks-head-actions .tasks-status { display: none; }
    .tasks-thread-head { padding: 10px 12px; }
    .tasks-messages { padding: 12px; }
}
.is-embed .tasks-app { grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; box-shadow: none; }
.is-embed .tasks-app .tasks-main { display: flex; }
.is-embed .tasks-back { display: inline-flex; }

/* photo viewer: a click zooms to the real size (scrollable), another fits it back */
.tasks-lightbox.is-zoomed { overflow: auto; align-items: flex-start; justify-content: flex-start; }
.tasks-lightbox.is-zoomed #tLightboxImg { max-width: none; max-height: none; cursor: zoom-out; }
#tLightboxImg { cursor: zoom-in; }

/* ================================================================
   TODO (Home/Index) — as in the mobile app: the Sarcini filters, the month calendar, the picked day's tasks.
   The rows are the Sarcini list's (.tasks-item …).
   ================================================================ */
.todo-app { display: flex; flex-direction: column; gap: 12px; }
.todo-bar { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg, 12px); padding: 8px 0 0; }
.todo-bar .tasks-filters { border-bottom: 0; }
/* The filters and, at the right, the phone's round + (new task): always in view, outside the row that scrolls. */
.todo-bar-row { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px 0; }
.todo-bar-row .tasks-filters { flex: 1 1 auto; min-width: 0; padding-bottom: 0; }
.todo-add { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--accent); color: var(--accent-ink, #fff); text-decoration: none; box-shadow: 0 2px 6px rgba(16, 24, 40, .18); transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.todo-add:hover { background: var(--accent-hover); color: var(--accent-ink, #fff); }
.todo-add:active { transform: scale(.94); }
.todo-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The Quick Chat button: the QC picture itself (a round image), not the brand disc with a glyph. */
/* (the buttons that are a picture — Quick Chat and, since 2026-10-16, "Sarcină nouă": the same violet 3D disc, a white plus (the user: "un + un pic 3D, ca QC-ul nou")) */
.todo-add.is-qc, .todo-add.is-qc:hover, .todo-add.is-pic, .todo-add.is-pic:hover { background: transparent; }
.todo-add.is-qc img, .todo-add.is-pic img { display: block; width: 100%; height: 100%; border-radius: 50%; transition: filter var(--dur-fast) var(--ease); }
.todo-add.is-qc:hover img, .todo-add.is-pic:hover img { filter: brightness(1.1); }
/* The pickers open under their chip (the page script sets left / top) — not across the whole bar — and as tall as they need: the bar
   itself is short, a percentage of it would leave them a sliver. */
.todo-bar .tasks-picker { right: auto; width: min(380px, calc(100% - 24px)); max-height: 420px; }
.todo-cols { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 12px; align-items: start; }
.todo-cal-bar { gap: 6px; justify-content: space-between; }
.todo-month { flex: 1 1 auto; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); min-width: 12ch; text-align: center; }
/* The shortcuts under the month bar: a day, a week, the open tasks without a deadline — each with how many open tasks it
   holds after the filters. */
.todo-shortcuts { display: grid; grid-template-columns: repeat(var(--shortcut-cols, 3), minmax(0, 1fr)); gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.todo-shortcut { display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding: 4px 7px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.todo-shortcut:hover { border-color: var(--accent); color: var(--accent-hover); }
.todo-shortcut:focus-visible { outline: 0; box-shadow: var(--focus); }
.todo-shortcut.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); }
.todo-shortcut-count { min-width: 18px; padding: 0 4px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-2); font-size: var(--fs-3xs); font-weight: var(--fw-bold); line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.todo-shortcut-count:empty { display: none; }
/* "Toate" has seven: the days three to a line, then two and two — on a grid of six columns. */
.todo-shortcuts.is-all .todo-shortcut { grid-column: span 3; }
.todo-shortcuts.is-all .todo-shortcut[data-range="today"], .todo-shortcuts.is-all .todo-shortcut[data-range="yesterday"], .todo-shortcuts.is-all .todo-shortcut[data-range="tomorrow"] { grid-column: span 2; }
/* The shortcuts' type is fixed: it never follows the mică / mare view (--fs-* drop by 2px in .view-small); folded to the rail it is 2px bigger. */
.todo-cols .todo-shortcut { font-size: 10.5px; }
.todo-cols .todo-shortcut-count { font-size: 10px; }
.todo-cols.is-collapsed .todo-shortcut { font-size: 12.5px; }
.todo-cols.is-collapsed .todo-shortcut-count { min-width: 20px; font-size: 12px; line-height: 18px; }
.todo-shortcut.is-active .todo-shortcut-count { background: var(--accent); color: var(--accent-ink); }
.todo-grid .cal-cell { height: 48px; flex-direction: column; gap: 2px; }
.todo-grid .cal-cell.is-other-month { opacity: .35; }
.todo-grid .cal-cell.is-weekend:not(.is-selected) .cal-daynum { color: var(--ink-muted); }
.todo-grid .cal-cell.is-in-week:not(.is-selected) { background: var(--accent-soft); }
.todo-day { overflow: hidden; }
/* A task opened from a row: its conversation (the Sarcini page, ?embed=1) takes the place of the list; ← inside it brings the list back. */
.todo-day.is-embedded > :not(.todo-embed) { display: none; }
.todo-embed[hidden] { display: none; }
.todo-embed iframe { display: block; width: 100%; height: 560px; border: 0; background: var(--card); }

/* ---- "Colapsează" (Calendar): the calendar folds to the left to a rail as wide as its widest shortcut — the shortcuts one under another,
   each with its count, no month — and the list takes the rest; a task then opens to the right of the list (the pane of Sarcini) instead
   of in place of it. .is-collapsed is on .todo-cols (the page reads the nudge-cal-collapsed cookie, todo.js sets it). ---- */
.todo-cal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 0 14px; }
.todo-cal-label { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-hover); }
.todo-collapse svg { transition: transform var(--dur-fast) var(--ease); }
.todo-pane-empty { display: none; }
@media (min-width: 769px) {
    /* Folded, the Calendar is Sarcini's layout: the rail on the left (the periods), then the list of tasks, then the task's own pane —
       all as tall as the window (todo.js sets --todo-fit-h), each scrolling inside itself, so the page doesn't scroll. */
    .todo-cols.is-collapsed { grid-template-columns: max-content minmax(0, 1fr); height: var(--todo-fit-h, 640px); align-items: stretch; }
    .todo-cols.is-collapsed .todo-collapse svg { transform: rotate(180deg); }
    .todo-cols.is-collapsed .todo-cal { min-height: 0; overflow-y: auto; }
    .todo-cols.is-collapsed .todo-cal-bar, .todo-cols.is-collapsed .todo-cal-body { display: none; }
    .todo-cols.is-collapsed .todo-shortcuts { grid-template-columns: max-content; gap: 6px; padding: 8px 10px 12px; border-bottom: 0; }
    .todo-cols.is-collapsed .todo-shortcut { width: 100%; }
    .todo-cols.is-collapsed .todo-day { display: grid; grid-template-columns: var(--todo-list-w, 400px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; overflow: hidden; }
    .todo-cols.is-collapsed .todo-day > .todo-day-main { display: block; min-width: 0; min-height: 0; overflow-y: auto; border-right: 1px solid var(--border-soft); }
    .todo-cols.is-collapsed .todo-day > .todo-embed { min-width: 0; min-height: 0; }
    .todo-cols.is-collapsed .todo-embed iframe { height: 100%; }
    /* nothing open yet: the pane says so, as Sarcini's does */
    .todo-cols.is-collapsed .todo-pane-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; background: var(--card-2); color: var(--ink-muted); font-size: 14px; text-align: center; }
    .todo-cols.is-collapsed .todo-day.is-embedded > .todo-pane-empty { display: none; }

    /* ---- Folded = ONE surface (the user, 2026-10-07: "nu-mi place cum arată"): the rail, the list and the task's pane are columns of a single
       rounded card, as in Sarcini, not three cards with gaps between them. The rail is tinted and holds the periods as a list — one row each,
       the count at the right, in three groups (days | weeks | by deadline); the list has a title bar with how many tasks it holds; the empty pane
       invites to pick one or to make one. The period type keeps its folded size (12.5 / 12 px) whatever small / large says. ---- */
    .todo-cols.is-collapsed { gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-card); overflow: hidden; }
    .todo-cols.is-collapsed > .details-panel { border: 0; border-radius: 0; box-shadow: none; background: transparent; }

    .todo-cols.is-collapsed .todo-cal { min-width: 178px; background: var(--card-2); border-right: 1px solid var(--border); }
    .todo-cols.is-collapsed .todo-cal-top { padding: 14px 10px 8px 18px; }
    .todo-cols.is-collapsed .todo-cal-label { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .09em; color: var(--ink-muted); }
    .todo-cols.is-collapsed .todo-collapse { color: var(--ink-muted); }
    .todo-cols.is-collapsed .todo-collapse:hover { color: var(--accent-hover); }
    .todo-cols.is-collapsed .todo-shortcuts { display: flex; flex-direction: column; gap: 2px; padding: 2px 10px 16px; }
    .todo-cols.is-collapsed .todo-shortcut { position: relative; width: 100%; height: 36px; padding: 0 10px 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font-weight: var(--fw-medium); }
    .todo-cols.is-collapsed .todo-shortcut:hover { background: var(--card); color: var(--ink); }
    .todo-cols.is-collapsed .todo-shortcut.is-active { background: var(--accent-soft); color: var(--accent-hover); font-weight: var(--fw-bold); }
    .todo-cols.is-collapsed .todo-shortcut-count { min-width: 0; padding: 0 2px; background: transparent; color: var(--ink-muted); font-weight: var(--fw-semibold); }
    .todo-cols.is-collapsed .todo-shortcut.is-active .todo-shortcut-count { min-width: 22px; padding: 0 6px; background: var(--accent); color: var(--accent-ink); }
    /* the groups: a hairline above the first week and above "Cu termen" */
    .todo-cols.is-collapsed .todo-shortcut[data-range="thisweek"],
    .todo-cols.is-collapsed .todo-shortcut[data-range="withdeadline"] { margin-top: 11px; }
    .todo-cols.is-collapsed .todo-shortcut[data-range="thisweek"]::before,
    .todo-cols.is-collapsed .todo-shortcut[data-range="withdeadline"]::before { content: ""; position: absolute; left: 6px; right: 6px; top: -7px; height: 1px; background: var(--border); }

    .todo-cols.is-collapsed :is(.todo-day-main, .todo-cal) { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    /* the next five days with a task, under the periods */
    .todo-cols.is-collapsed .todo-nextdays { display: block; padding: 0 10px 16px; }
    .todo-cols.is-collapsed .todo-nextdays[hidden] { display: none; }
    .todo-nextdays-label { margin: 0 0 6px; padding: 12px 8px 0; border-top: 1px solid var(--border); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); }
    .todo-nextdays-list { display: flex; flex-direction: column; gap: 2px; }
    .todo-cols.is-collapsed .todo-day { background: var(--card); }
    .todo-cols.is-collapsed .todo-day > .todo-day-main { border-right: 1px solid var(--border); background: var(--card); }
    .todo-cols.is-collapsed .todo-day-head { position: sticky; top: 0; z-index: 3; min-height: 54px; padding: 10px 14px 10px 18px; gap: 8px; background: var(--card); border-bottom: 1px solid var(--border-soft); }
    .todo-cols.is-collapsed .todo-day-title { font-size: 16px; line-height: 22px; letter-spacing: -.005em; }
    .todo-cols.is-collapsed .todo-day-count { display: inline-block; margin-right: auto; padding: 1px 9px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-muted); font-size: 12px; font-weight: var(--fw-semibold); line-height: 18px; white-space: nowrap; }
    .todo-cols.is-collapsed .todo-day-count:empty { display: none; }
    .todo-cols.is-collapsed .todo-section-title { padding: 8px 18px 6px; background: var(--card-2); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); font-size: 12px; letter-spacing: .01em; }
    .todo-cols.is-collapsed .todo-list { border-top: 0; }
    .todo-cols.is-collapsed.view-small .todo-day-head { min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
    .todo-cols.is-collapsed.view-small .todo-section-title { padding: 6px 18px 5px; }

    .todo-cols.is-collapsed .todo-pane-empty { gap: 6px; background: radial-gradient(ellipse at 50% 42%, var(--card) 0, var(--card-2) 70%); }
    .todo-cols.is-collapsed .todo-pane-ic { box-sizing: border-box; width: 88px; height: 88px; padding: 24px; margin-bottom: 8px; border-radius: 50%; background: var(--card); color: var(--accent); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 28px rgba(80, 71, 232, .12); }
    .todo-cols.is-collapsed .todo-pane-title { font-size: 16px; font-weight: var(--fw-semibold); color: var(--ink-2); }
    .todo-cols.is-collapsed .todo-pane-sub { font-size: 13.5px; color: var(--ink-muted); }
    .todo-cols.is-collapsed .todo-pane-new { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-top: 14px; padding: 0 16px 0 12px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink, #fff); font-size: 13.5px; font-weight: var(--fw-semibold); text-decoration: none; box-shadow: 0 2px 6px rgba(16, 24, 40, .16); transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
    .todo-cols.is-collapsed .todo-pane-new:hover { background: var(--accent-hover); color: var(--accent-ink, #fff); }
    .todo-cols.is-collapsed .todo-pane-new:active { transform: scale(.97); }
    .todo-cols.is-collapsed .todo-pane-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
/* the count beside the title, and the next days in the rail, are only for the folded calendar */
.todo-day-count { display: none; }
.todo-nextdays { display: none; }
@media (max-width: 768px) { .todo-collapse { display: none; } }
/* What's picked: its title (‹ › around it in the week view) and "Sarcină nouă". */
.todo-day-head { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 8px 10px 4px 14px; }
.todo-day-title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); text-wrap: balance; }
.todo-section-title { padding: 10px 14px 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--accent-hover); }
.todo-section-title.is-danger { color: var(--danger); }
/* "Fără termen": the group of open tasks with no deadline, last in a day, a week and "Cu termen" — a click folds it like a day */
.todo-nodeadline-title { display: flex; align-items: center; gap: 6px; margin-top: 6px; cursor: pointer; user-select: none; color: var(--ink-muted); }
.todo-nodeadline-title:hover { color: var(--accent-hover); }
.todo-nodeadline-title:focus-visible { outline: 0; box-shadow: var(--focus); border-radius: 6px; }
.todo-nodeadline-title svg { flex: none; transition: transform .15s ease; }
.todo-nodeadline-title.is-folded svg { transform: rotate(-90deg); }
.todo-nodeadline-n { padding: 0 6px; border-radius: var(--r-pill); background: var(--card-2); border: 1px solid var(--border-soft); font-weight: var(--fw-semibold); color: var(--ink-2); }
.todo-list { border-top: 1px solid var(--border-soft); }
.todo-list:empty { display: none; }
.todo-list .tasks-item { color: inherit; text-decoration: none; }
.todo-list a.tasks-item:hover { background: var(--card-2); }
.todo-error { margin: 10px 14px 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-xs); }
.todo-error[hidden] { display: none; }
/* Sarcini+: the occurrences still to come ("planificat") — a dashed badge on their day, dashed rows among the tasks. */
.cal-counts { display: inline-flex; gap: 2px; }
.cal-count.is-planned { background: transparent; color: var(--accent-hover); border: 1px dashed currentColor; padding: 0 3px; }
.cal-cell.is-selected .cal-count.is-planned { background: transparent; color: var(--accent-ink); }
.todo-list .tasks-item.is-planned { cursor: default; background: var(--card); outline: 1px dashed var(--border); outline-offset: -4px; border-radius: var(--r-md); }
.todo-list .tasks-item.is-planned .tasks-avatar-wrap { opacity: .6; }
.tasks-item.is-planned .tasks-item-title { color: var(--ink-2); }
.tasks-item.is-skipped { opacity: .7; }
.tasks-item.is-skipped .tasks-item-title { text-decoration: line-through; color: var(--ink-muted); }
.todo-planned-tag { color: var(--accent-hover); font-weight: var(--fw-semibold); }
.todo-planned-act { flex: 0 0 auto; font-size: calc(12px + var(--fd, 0px)); }

/* ---- the rows, as on the phone (TaskRowView / RowStyle) — the Calendar's day list and the Sarcini list: a big face centred on the row; the title with the time on its
   right; "who: the last message" with the unread badge; a quiet line with the deadline (the only coloured part), who it's for and the
   project. Padding 11 / 14, the face 48 and 12 from the text, and the line under a row starts at the text, not under the face. ---- */
:is(.todo-list, .tasks-list) { --row-ink: #1f2c34; --row-muted: #8696a0; --row-preview: #667781; --row-line: #e9edef; --row-late: #c62f2f; --row-soon: #a0470a; --row-ok: #0b8a50; --row-urgent: #d33a3a; }
:is(.todo-list, .tasks-list) .tasks-item { align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 0; }
:is(.todo-list, .tasks-list) .tasks-item::after { content: ""; position: absolute; left: 74px; right: 0; bottom: 0; height: 1px; background: var(--row-line); }
:is(.todo-list, .tasks-list) .tasks-item.is-planned::after { display: none; }
:is(.todo-list, .tasks-list) .tasks-avatar-wrap { align-self: center; }
:is(.todo-list, .tasks-list) .tasks-avatar { width: 48px; height: 48px; border: 0; font-size: calc(16px + var(--fd, 0px)); font-weight: 600; }
:is(.todo-list, .tasks-list) .tasks-avatar svg { width: 24px; height: 24px; }
/* The faces: a person's initials in one of seven tints (by the username's hash — the phone's palette), a group violet, a private task
   warm grey, nobody cool grey. */
:is(.todo-list, .tasks-list, .te-faces) .tasks-avatar.is-initials.tone-0 { background: #dcebfa; color: #0c447c; }
:is(.todo-list, .tasks-list, .te-faces) .tasks-avatar.is-initials.tone-1 { background: #ddf4e8; color: #0b5a38; }
:is(.todo-list, .tasks-list, .te-faces) .tasks-avatar.is-initials.tone-2 { background: #eeedfe; color: #3c3489; }
:is(.todo-list, .tasks-list, .te-faces) .tasks-avatar.is-initials.tone-3 { background: #fbe6ee; color: #72243e; }
:is(.todo-list, .tasks-list, .te-faces) .tasks-avatar.is-initials.tone-4 { background: #fcefd9; color: #6b4209; }
:is(.todo-list, .tasks-list, .te-faces) .tasks-avatar.is-initials.tone-5 { background: #dff3f6; color: #0b5563; }
:is(.todo-list, .tasks-list, .te-faces) .tasks-avatar.is-initials.tone-6 { background: #f3ece3; color: #5a3e22; }
:is(.todo-list, .tasks-list, .te-faces) .tasks-avatar.is-dept { background: #e7e4fb; color: #17103c; }
:is(.todo-list, .tasks-list, .te-faces) .tasks-avatar.is-private { background: #eceae6; color: #4a4944; }
:is(.todo-list, .tasks-list, .te-faces) .tasks-avatar.is-icon:not(.is-dept):not(.is-private) { background: #ecebf4; color: #4a4670; }
:is(.todo-list, .tasks-list) .tasks-online { width: 13px; height: 13px; border-width: 2.5px; border-color: var(--card); background: #16c47f; right: 1px; bottom: 1px; }
:is(.todo-list, .tasks-list) .tasks-item-body { gap: 2px; }
:is(.todo-list, .tasks-list) .tasks-item-title { font-size: calc(15px + var(--fd, 0px)); line-height: 19px; font-weight: 500; color: var(--row-ink); }
:is(.todo-list, .tasks-list) .tasks-item.is-unread .tasks-item-title { font-weight: 700; }
:is(.todo-list, .tasks-list) .tasks-item.is-closed .tasks-item-title { color: var(--row-ink); }
:is(.todo-list, .tasks-list) .tasks-item-time { font-size: calc(12px + var(--fd, 0px)); color: var(--row-muted); }
:is(.todo-list, .tasks-list) .tasks-item.is-unread .tasks-item-time { color: var(--accent); font-weight: 600; }
:is(.todo-list, .tasks-list) .tasks-item-row + .tasks-item-row { align-items: center; }
:is(.todo-list, .tasks-list) .tasks-item-preview { font-size: calc(14px + var(--fd, 0px)); line-height: 19px; color: var(--row-preview); }
:is(.todo-list, .tasks-list) .tasks-item.is-unread .tasks-item-preview { color: var(--row-ink); }
:is(.todo-list, .tasks-list) .tasks-preview-author { font-weight: 500; color: inherit; }
:is(.todo-list, .tasks-list) .tasks-unread { min-width: 20px; height: 20px; padding: 0 6px; font-size: calc(11.5px + var(--fd, 0px)); background: #5047e8; }
:is(.todo-list, .tasks-list) .tasks-unread.is-muted { background: var(--row-muted); }
:is(.todo-list, .tasks-list) .tasks-item-meta { gap: 2px 12px; margin-top: 0; font-size: calc(12.5px + var(--fd, 0px)); line-height: 17px; color: var(--row-muted); }
:is(.todo-list, .tasks-list) .tasks-meta-part { gap: 3px; }
:is(.todo-list, .tasks-list) .tasks-meta-part .tasks-ic { width: 14px; height: 14px; }
:is(.todo-list, .tasks-list) .tasks-meta-deadline.is-overdue { color: var(--row-late); font-weight: 400; }
:is(.todo-list, .tasks-list) .tasks-meta-part.is-soon, :is(.todo-list, .tasks-list) .tasks-meta-deadline.is-soon { color: var(--row-soon); font-weight: 400; }
:is(.todo-list, .tasks-list) .tasks-meta-deadline.is-closed { color: var(--row-ok); }
:is(.todo-list, .tasks-list) .tasks-meta-repeat, :is(.todo-list, .tasks-list) .tasks-meta-holder.is-working { color: var(--accent); }
/* An urgent task: just the red band on the left (see .tasks-item.is-urgent above) — no tint on the row, no red title (the user, 2026-10-17; on 2026-10-09 it was the red title). */

/* The open one in the Sarcini list keeps its tint under an urgent row's red; the repeat mark of a stopped series goes grey. */
:is(.todo-list, .tasks-list) .tasks-item.is-active, :is(.todo-list, .tasks-list) .tasks-item.is-active.is-urgent:hover { background: var(--accent-soft); }
:is(.todo-list, .tasks-list) .tasks-meta-repeat.is-stopped { color: var(--row-muted); }

@media (max-width: 768px) {
    .todo-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---- view size (Sarcini and Calendar): "mare" is the page as it is; "mică" takes 2px off every font in the list and in the open task
   (the conversation and the editor) and, in the Calendar, in its shortcuts, month and day list — .view-small is on #tasksApp /
   .todo-cols (the page reads the nudge-view cookie, wwwroot/js/view-size.js sets it), so the filter bars, the pickers, the dialogs and
   the top bar stay as they are. --fd is the delta the page's own px font sizes add (calc(… + var(--fd, 0px)) above); the dense type
   tokens drop by the same 2px, and Bootstrap's rem sizes inside (dropdowns, fields, buttons) follow. ---- */.view-small { --fd: -2px; --fs-3xs: 8px; --fs-2xs: 8.5px; --fs-xs: 9.5px; --fs-sm: 10.5px; --fs-md: 11px; --fs-base: 12px; --fs-lg: 14px; --fs-xl: 18px; font-size: 12px; }
:where(.view-small) :is(.dropdown-menu, .btn, .form-control, .form-select, .form-check-label) { font-size: 12px; }
:where(.view-small) :is(.btn-sm, .form-control-sm, .form-select-sm) { font-size: 10.25px; }
/* Small is denser too, not only smaller: rows, faces, bubbles and fields shrink with the type, so the list shows about a third more
   tasks and a conversation more messages. The list rows go from 82px to about 62. */
.view-small :is(.todo-list, .tasks-list) .tasks-item { gap: 10px; padding: 7px 12px; }
.view-small :is(.todo-list, .tasks-list) .tasks-item::after { left: 58px; }
.view-small :is(.todo-list, .tasks-list) .tasks-avatar { width: 36px; height: 36px; }
.view-small :is(.todo-list, .tasks-list) .tasks-avatar svg { width: 18px; height: 18px; }
.view-small :is(.todo-list, .tasks-list) .tasks-online { width: 10px; height: 10px; border-width: 2px; }
.view-small :is(.todo-list, .tasks-list) .tasks-item-body { gap: 1px; }
.view-small :is(.todo-list, .tasks-list) .tasks-item-title { line-height: 16px; }
.view-small :is(.todo-list, .tasks-list) .tasks-item-preview { line-height: 16px; }
.view-small :is(.todo-list, .tasks-list) .tasks-item-meta { gap: 1px 10px; line-height: 14px; }
.view-small :is(.todo-list, .tasks-list) .tasks-meta-part .tasks-ic { width: 12px; height: 12px; }
.view-small :is(.todo-list, .tasks-list) .tasks-unread { min-width: 17px; height: 17px; padding: 0 5px; }
.view-small :is(.todo-list, .tasks-list) .tasks-item.is-urgent { box-shadow: inset 3.5px 0 0 var(--row-urgent); }

/* ---- "Vedere simplă" (Sarcini and Calendar — the phone's button on both lists): each task is one line, its text and its time. .is-simple is
   on #tasksApp / .todo-cols (the page reads the nudge-simple / nudge-simple-cal cookie, wwwroot/js/view-simple.js sets it). No face, no
   preview, no line of details; before the text, the company's pill (several in the list) and the deadline's hour when it has one; an
   unread task has a dot in front, a bolder text and its time in the brand colour; the quick actions come on hover over the time. ---- */
.tasks-item-hour, .tasks-item-co { display: none; }
.view-simple[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-hover); }
.is-simple :is(.todo-list, .tasks-list) .tasks-item { align-items: center; gap: 0; min-height: 36px; padding: 6px 14px 6px 26px; }
.is-simple :is(.todo-list, .tasks-list) .tasks-item::after { left: 26px; }
.is-simple :is(.todo-list, .tasks-list) .tasks-avatar-wrap,
.is-simple :is(.todo-list, .tasks-list) .tasks-item-row + .tasks-item-row,
.is-simple :is(.todo-list, .tasks-list) .tasks-item-meta { display: none; }
.is-simple :is(.todo-list, .tasks-list) .tasks-item-row { align-items: center; gap: 8px; }
.is-simple :is(.todo-list, .tasks-list) .tasks-item-title { font-size: calc(14.5px + var(--fd, 0px)); line-height: 22px; }
.is-simple :is(.todo-list, .tasks-list) .tasks-item-time { font-size: calc(12px + var(--fd, 0px)); }
.is-simple :is(.todo-list, .tasks-list) .tasks-item.is-unread::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); }
.is-simple :is(.todo-list, .tasks-list) .tasks-item.is-urgent::before { background: var(--row-urgent); }
.is-simple :is(.todo-list, .tasks-list) .tasks-item-hour { display: inline-block; flex: none; padding: 0 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-hover); font-size: calc(12px + var(--fd, 0px)); font-weight: 600; line-height: 19px; font-variant-numeric: tabular-nums; }
.is-simple :is(.todo-list, .tasks-list) .tasks-item-hour.is-late { background: #fdecec; color: var(--row-late); }
.is-simple :is(.todo-list, .tasks-list) .tasks-item-co { display: inline-block; flex: none; min-width: 46px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; padding: 0 7px; border-radius: var(--r-pill); font-size: calc(11px + var(--fd, 0px)); font-weight: 600; line-height: 17px; }
/* a planned occurrence (Calendar): no tag line any more, so a mark before the text says it */
.is-simple :is(.todo-list, .tasks-list) .tasks-item.is-planned .tasks-item-title::before { content: "↻ "; color: var(--accent); font-weight: 700; }
/* the row's quick actions, over the time (a line is too low for them beside it) */
.is-simple :is(.todo-list, .tasks-list) .tasks-row-actions { top: 50%; bottom: auto; transform: translateY(-50%); right: 8px; }
@media (hover: none) and (max-width: 768px) {
    .is-simple :is(.todo-list, .tasks-list) .tasks-row-actions { display: none !important; }
    .is-simple .todo-item { flex-wrap: nowrap; }
}
.view-small.is-simple :is(.todo-list, .tasks-list) .tasks-item { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
.view-small.is-simple :is(.todo-list, .tasks-list) .tasks-item-title { line-height: 20px; }
/* the Calendar's own blocks (.view-small is on its .todo-cols — the shortcuts, the month, the day's list; not the filter bar) */
/* (the calendar's shortcuts keep their size and spacing in every view — see the .todo-cols .todo-shortcut rules above) */
.view-small .todo-grid .cal-cell { height: 38px; gap: 1px; }
.view-small .todo-day-head { min-height: 38px; padding-top: 6px; padding-bottom: 2px; }
.view-small .todo-section-title { padding: 7px 12px 4px; }
/* the open task: the conversation and the editor */
.view-small .tasks-icon-btn { width: 26px; height: 26px; }
.view-small .tasks-thread-head { gap: 6px; padding: 7px 14px 8px; }
.view-small .tasks-thread-head .tasks-avatar.is-lg { width: 32px; height: 32px; }
.view-small .tasks-head-title { line-height: 18px; }
.view-small .tasks-buzz { width: 28px; height: 28px; }
.view-small .tasks-messages { padding: 8px 16px 10px; gap: 3px; }
.view-small .tasks-day { margin: 6px 0 2px; }
.view-small .tasks-day span { padding: 2px 8px 3px; }
.view-small .tasks-msg { gap: 6px; }
.view-small .tasks-msg:not(.is-cont) { margin-top: 5px; }
.view-small .tasks-msg .tasks-avatar.is-sm { width: 26px; height: 26px; }
.view-small .tasks-bubble { min-width: 60px; padding: 3px 9px 3px; border-radius: 12px 12px 12px 4px; }
.view-small .tasks-msg.is-mine .tasks-bubble { border-radius: 12px 12px 4px 12px; }
.view-small .tasks-bubble-author { line-height: 14px; margin-bottom: 0; }
.view-small .tasks-bubble-text { line-height: 18px; }
.view-small .tasks-bubble-time { line-height: 12px; margin-top: 0; }
.view-small .tasks-quote { margin: 1px 0 4px; padding: 3px 7px 4px; }
.view-small .tasks-quote-text { line-height: 16px; }
.view-small .tasks-event { margin: 2px 0; }
.view-small .tasks-event span { padding: 3px 10px 4px; line-height: 14px; }
.view-small .tasks-doc { margin-top: 4px; padding: 5px 8px; }
.view-small .tasks-composer { padding: 6px 14px 8px; }
.view-small .tasks-composer-field { border-radius: 19px; }
.view-small .tasks-composer textarea { min-height: 36px; padding: 8px 6px; line-height: 19px; }
.view-small .tasks-attach { width: 32px; height: 32px; margin-bottom: 2px; }
.view-small .tasks-send { width: 38px; height: 38px; }
.view-small .tasks-replybar { margin-bottom: 6px; padding: 4px 8px 5px 10px; border-radius: 10px; }
/* The switch in the filter bar: two A's, a small and a large one, the pressed one lifted — as a text-size control reads everywhere. */
.view-size { flex: none; display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--field-bg); }
.view-size button { display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink-muted); font-weight: var(--fw-bold); line-height: 1; cursor: pointer; }
.view-size button:hover { color: var(--ink); }
.view-size button[aria-pressed="true"] { background: var(--card); color: var(--accent-hover); box-shadow: 0 1px 2px rgba(23, 16, 60, .12); }
.view-size button:focus-visible { outline: 0; box-shadow: var(--focus); }
.view-size .is-s { font-size: 11px; }
.view-size .is-l { font-size: 16px; }
/* ---- 2026-10-06: what the phone had and the web didn't (tasks.js) ---- */
/* Links and #words in messages. */
.tasks-link-out { color: var(--accent-hover); text-decoration: underline; word-break: break-word; }
.tasks-hashtag { border: 0; background: none; padding: 0; font: inherit; font-weight: var(--fw-semibold); color: var(--accent-hover); cursor: pointer; }
.tasks-hashtag:hover { text-decoration: underline; }
/* The "#" of the search. */
.tasks-search-tag { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--accent-hover); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
.tasks-search-tag:hover { background: var(--accent-soft); }
/* "Marchează toate ca citite" beside "Înapoi la filtre". */
.tasks-mark-all { margin-left: auto; }
.tasks-mark-all[hidden] { display: none; }
/* Firme: another company's task in the list. */
.tasks-company-tag { padding: 0 6px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-hover); font-weight: var(--fw-semibold); }
/* The tag picker (Etichete / the search's "#"). */
.tasks-tag-overlay { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(16, 24, 40, .28); }
.tasks-tag-panel { display: flex; flex-direction: column; width: 340px; max-width: 100%; max-height: 72vh; border-radius: 12px; background: var(--card); box-shadow: 0 12px 40px rgba(16, 24, 40, .25); }
.tasks-tag-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.tasks-tag-add { display: flex; gap: 6px; padding: 10px 14px 6px; }
.tasks-tag-list { flex: 1 1 auto; overflow: auto; padding: 2px 14px 8px; }
.tasks-tag-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; font-size: var(--fs-sm); cursor: pointer; }
.tasks-tag-row span { flex: 1 1 auto; }
.tasks-tag-remove { display: inline-flex; padding: 3px; border: 0; border-radius: 6px; background: none; color: var(--ink-muted); cursor: pointer; }
.tasks-tag-remove:hover { background: var(--card-2); color: var(--danger); }
.tasks-tag-section { margin: 8px 0 2px; color: var(--ink-muted); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; }
.tasks-tag-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--border); }

/* ---- "mare" (the normal view) is a little smaller than it was (the user, 2026-10-09: "pe vizualizarea normală, micșorează cu 1 fontul din lista de
   sarcini și cu 2 fontul din conversație"): the list rows (Sarcini's and the Calendar's) a point down, the conversation (its header, messages,
   composer — not the editor) two points down — then "+1" (the user): one point down. Every size there is "calc(Npx + var(--fd))", so it is only --fd on the two containers; "mică" keeps its
   own (-2 on everything, .view-small above). To go back: delete this block. ---- */
.tasks-app:not(.view-small) .tasks-list,
.todo-cols:not(.view-small) .todo-list { --fd: -1px; }
.tasks-app:not(.view-small) .tasks-thread { --fd: -1px; }
.tasks-app:not(.view-small) .tasks-thread .tasks-bubble-text,
.tasks-app:not(.view-small) .tasks-thread .tasks-head-title { line-height: 20px; }
.tasks-app:not(.view-small) .tasks-thread .tasks-composer textarea { line-height: 20px; }
/* ---- Quick Chat (QC): a conversation with a fixed set of people, among the tasks. Distinct but quiet: a small "QC" tag after the name and a
   speech bubble on the face; the faces overlap when there are several people. ---- */
.tasks-qc-tag { flex: 0 0 auto; align-self: center; display: inline-block; height: 15px; padding: 0 5px; border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-hover); font-size: calc(9.5px + var(--fd, 0px)); line-height: 13px; font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
/* The QC mark (the phone's picture: a violet disc with a white bubble) — the same file as the chip, the button and icon('chat') in tasks.js. */
.tasks-item.is-qc .tasks-avatar-wrap::after { content: ""; position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%235047e8'/%3E%3Cpath transform='translate(12 12) scale(.64) translate(-12 -11.75)' fill='%23fff' d='M12 2.5c-5.25 0-9.5 3.8-9.5 8.5s4.25 8.5 9.5 8.5c1.2 0 2.35-.2 3.4-.55L19.8 21l-1.35-3.9C20.4 15.6 21.5 13.4 21.5 11c0-4.7-4.25-8.5-9.5-8.5z'/%3E%3C/svg%3E") center / cover no-repeat; box-shadow: 0 0 0 2px var(--card); }
.tasks-qc-faces { position: relative; display: inline-block; width: 48px; height: 48px; flex: 0 0 auto; }
.tasks-qc-faces .tasks-avatar { position: absolute; width: 33px; height: 33px; font-size: calc(12px + var(--fd, 0px)); box-shadow: 0 0 0 2px var(--card); }
.tasks-qc-faces .tasks-avatar:nth-child(1) { left: 0; top: 0; }
.tasks-qc-faces .tasks-avatar:nth-child(2) { right: 0; bottom: 0; }
.tasks-list-group { display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px; font-size: calc(11.5px + var(--fd, 0px)); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tasks-list-group-n { padding: 0 6px; border-radius: var(--r-pill); background: var(--card-2); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tasks-qc-empty { margin: auto; padding: 32px 20px; text-align: center; color: var(--ink-muted); }
.tasks-qc-empty .tasks-qc-ico { margin-bottom: 8px; }
.tasks-qc-empty p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.tasks-qc-top { padding: 12px 16px 8px; border-bottom: 1px solid var(--border-soft); }
.tasks-qc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tasks-qc-chips:empty { display: none; }
.tasks-qc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 3px; border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-hover); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.tasks-qc-chip .tasks-avatar.is-xs { width: 20px; height: 20px; font-size: 9px; }
.tasks-qc-chip button { border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; padding: 0 5px; cursor: pointer; }
.tasks-qc-top .tasks-picker-search { width: 100%; height: 32px; }
.tasks-qc-people { max-height: 220px; overflow-y: auto; border-bottom: 1px solid var(--border-soft); }
.tasks-qc-person, .tasks-qc-chat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 16px; border: 0; border-bottom: 1px solid var(--border-soft); background: var(--card); text-align: left; cursor: pointer; }
.tasks-qc-person:hover, .tasks-qc-chat:hover, .tasks-qc-person:focus-visible, .tasks-qc-chat:focus-visible { background: var(--card-2); outline: none; }
.tasks-qc-person:last-child, .tasks-qc-chat:last-child { border-bottom: 0; }
.tasks-qc-found-head { padding: 10px 16px 4px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tasks-qc-chat .tasks-qc-faces { width: 40px; height: 40px; }
.tasks-qc-chat .tasks-qc-faces .tasks-avatar { width: 27px; height: 27px; font-size: 10px; }
.tasks-qc-chat .tasks-avatar:not(.is-sm) { width: 34px; height: 34px; }
.tasks-qc-chat .tasks-member-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-qc-when { flex: 0 0 auto; font-size: var(--fs-2xs); }
.tasks-qc-note { flex: 1 1 auto; font-size: var(--fs-2xs); }
.tasks-qc-top, .tasks-qc-people, .tasks-qc-found { background: var(--card); }
/* Quick Chat: search inside a conversation (the bar under the header; the matches marked in the bubbles), the profile's two buttons, the
   "Scrie-i lui …" row of a search. */
.tasks-find { display: flex; align-items: center; gap: 6px; padding: 6px 16px; background: var(--card); border-bottom: 1px solid var(--border); }
.tasks-find[hidden] { display: none; }
.tasks-find-input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card-2); color: var(--ink); font-size: calc(13px + var(--fd, 0px)); }
.tasks-find-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; background: var(--card); }
.tasks-find-count { flex: 0 0 auto; min-width: 64px; text-align: right; font-size: var(--fs-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tasks-find .tasks-icon-btn:disabled { opacity: .35; cursor: default; }
mark.tasks-find-mark { padding: 0 1px; border-radius: 3px; background: rgba(255, 205, 64, .55); color: inherit; }
.tasks-msg.is-find-hit .tasks-bubble { box-shadow: 0 0 0 1.5px var(--accent-line); }
.tasks-msg.is-find-current .tasks-bubble { box-shadow: 0 0 0 2.5px var(--accent); }
.tasks-msg.is-find-current mark.tasks-find-mark { background: rgba(255, 170, 0, .8); }
.tasks-profile-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.tasks-profile-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.tasks-item.is-qcnew .tasks-item-title { color: var(--accent-hover); font-weight: var(--fw-semibold); }
.tasks-item.is-qcnew .tasks-item-preview { color: var(--ink-muted); }
.tasks-item.is-qcnew .tasks-avatar-wrap .tasks-avatar { opacity: .85; }
/* Quick Chat dialog: the person (or group) the text points to, to write to at once. */
.tasks-qc-direct { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; border: 0; border-bottom: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-hover); text-align: left; cursor: pointer; }
.tasks-qc-direct:hover, .tasks-qc-direct:focus-visible { background: var(--accent-line); outline: none; }
.tasks-qc-direct strong { color: var(--accent-hover); }
.tasks-qc-direct small { color: var(--ink-muted); }
.tasks-qc-direct-key { flex: 0 0 auto; margin-left: auto; padding: 1px 8px; border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--card); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); color: var(--accent-hover); }
/* A message of only emoji is shown big; its line has to be as tall as the emoji. The thread's "line-height: 20px" (the font-size setting) and the small view's
   won over .is-emoji, so a 33px smiley hung out of its bubble (the user, 2026-10-12). */
.tasks-bubble .tasks-bubble-text.is-emoji,
.tasks-app:not(.view-small) .tasks-thread .tasks-bubble-text.is-emoji,
.view-small .tasks-bubble .tasks-bubble-text.is-emoji { font-size: calc(34px + var(--fd, 0px)); line-height: 1.3; padding: 1px 0 3px; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
/* An emoji-only message has no bubble: the emoji stands on its own on the thread's background, with its time under it (the user, 2026-10-12). */
.tasks-msg.is-bare .tasks-bubble,
.tasks-msg.is-bare.is-mine .tasks-bubble,
.view-small .tasks-msg.is-bare .tasks-bubble { min-width: 0; padding: 0 2px; background: transparent; border-color: transparent; box-shadow: none; }
.tasks-msg.is-bare .tasks-bubble-time { margin-top: -2px; }
.tasks-msg.is-bare.is-find-hit .tasks-bubble { box-shadow: 0 0 0 1.5px var(--accent-line); border-radius: 12px; }
.tasks-msg.is-bare.is-find-current .tasks-bubble { box-shadow: 0 0 0 2.5px var(--accent); }
/* A Quick Chat's header is one line: the Buzz sits with the search and the menu, the size of an icon button. */
.tasks-head-actions .tasks-buzz { width: 30px; height: 30px; }
/* The conversation's background: the solar system's planets and stars as fine line art, very quiet (the user, 2026-10-12; images/chat-space.svg, the stroke is the
   lilac at 10% over this background). It stays where it is while the messages scroll. */
.tasks-messages { background-image: url("/images/chat-space.svg"); background-size: 220px 220px; background-repeat: repeat; }
/* The same pattern behind "Alege o sarcină din listă…", when no task is open (the user, 2026-10-13). */
.tasks-placeholder { background-image: url("/images/chat-space.svg"); background-size: 220px 220px; background-repeat: repeat; }
/* A task's header is two lines under one another's roof: the title; then who gave it and when, with the info items on the same line (they were a row of their
   own, with the Buzz at its end — the Buzz is with the buttons on the right now). */
.tasks-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 1px; font-size: calc(13px + var(--fd, 0px)); line-height: 18px; color: var(--ink-2); }
.tasks-head-meta .tasks-head-sub { flex: 0 1 auto; min-width: 0; margin-top: 0; }
.tasks-head-meta .tasks-group-link { font-weight: 600; }
.view-small .tasks-head-meta { line-height: 15px; gap: 1px 10px; }

/* ---- Nudge's top bar (_NudgeTopNav.cshtml; the user, 2026-10-13): Sarcini · Calendar · Setări as one segmented control on the left, the page's
   search in the middle of the bar (Ctrl+E), the company chip and the avatar on the right. No other modules, no "Nou". Moved here from the shared site.css
   (and the pieces that had landed in this file) on 2026-10-13 — Nudge-only CSS lives in nudge.css. ---- */
.nudge-nav .nudge-nav-inner {
    display: grid;
    /* The two sides never shrink under their content (the segments + logo, the chip + avatar); the search takes what is left, up to 500px. */
    grid-template-columns: minmax(min-content, 1fr) minmax(200px, 500px) minmax(min-content, 1fr);
    align-items: center;
    column-gap: 16px;
    min-height: 54px;
    padding: 0 12px;
}
.nudge-nav-left { display: flex; align-items: center; gap: 14px; min-width: 0; justify-self: start; }
/* The logo in the corner: the full one (icon + lettering, dark for the light bar) on wide windows, the icon alone on narrow ones (below). */
.nudge-nav .app-topnav-brand-logo.is-full { width: auto; height: 34px; }
.nudge-nav .app-topnav-brand-logo.is-icon { display: none; }
.nudge-nav-center { min-width: 0; }
.nudge-nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; justify-self: end; }
/* The button with NudgeSpace's logo (the full one, dark lettering for the light bar): a link to the other application. On narrow windows the logo gives
   way and the avatar menu has the same link (.nudge-space-menu). */
.nudge-space-link { display: inline-flex; align-items: center; flex: none; padding: 4px 8px; border-radius: 10px; line-height: 0; }
.nudge-space-link:hover { background: var(--accent-soft); }
.nudge-space-link:focus-visible { outline: 0; box-shadow: var(--focus); }
.nudge-space-link img { display: block; width: auto; height: 26px; }
@media (min-width: 760px) { .nudge-space-menu { display: none; } }
@media (max-width: 1099.98px) { .nudge-space-link img { height: 22px; } }
@media (max-width: 759.98px) { .nudge-space-link { display: none; } }
.nudge-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--accent-soft); }
.nudge-seg-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 15px 0 12px;
    border-radius: var(--r-pill);
    color: var(--accent-hover);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.nudge-seg-item svg { flex: none; }
.nudge-seg-item:hover { background: rgba(80, 71, 232, .11); color: var(--accent-hover); }
.nudge-seg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nudge-seg-item.is-active { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
/* The unread counter is a dot on the corner of the Sarcini button at every width: its digits never change the width of the bar's left side, so the search stays exactly in the middle. */
.nudge-seg-item .app-topnav-badge { position: absolute; top: 0; right: 0; margin: 0; transform: translate(25%, -15%); }
/* The search: as wide as the middle of the bar lets it, a little taller than the old one, and it lights up when you are in it. */
.nudge-nav .app-topnav-search.is-page {
    width: 100%;
    max-width: none;
    height: 38px;
    gap: 10px;
    padding: 0 8px 0 7px;
    border-color: transparent;
    transition: background var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.nudge-nav .app-topnav-search.is-page:hover { background: rgba(30, 33, 31, .065); }
.nudge-nav .app-topnav-search.is-page:focus-within { background: #ffffff; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.nudge-nav .app-topnav-search-icon { width: 26px; height: 26px; }
.nudge-nav .app-topnav-search.is-page input { font-size: var(--fs-sm); }
.nudge-nav .app-topnav-search.is-page .app-topnav-kbd { display: inline-block; }
.nudge-nav .app-topnav-search.is-page:focus-within .app-topnav-kbd { display: none; }
@media (max-width: 991.98px) {
    .nudge-nav .app-topnav-search.is-page { flex: initial; min-width: 0; }
    .nudge-nav .app-topnav-search.is-page .app-topnav-kbd { display: none; }
}
/* Narrow windows: the segments keep their icons only (the title says the name), the logo and the search share what is left. */
@media (max-width: 1099.98px) {
    .nudge-nav .nudge-nav-inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; }
    .nudge-seg-label { display: none; }
    .nudge-seg-item { padding: 0 11px; }
    .nudge-nav .app-topnav-brand-logo.is-full { display: none; }
    .nudge-nav .app-topnav-brand-logo.is-icon { display: block; width: 30px; height: 30px; }
}
@media (max-width: 599.98px) {
    .nudge-nav .nudge-nav-inner { padding: 0 8px; column-gap: 8px; }
    .nudge-nav-left { gap: 8px; }
    .nudge-nav .app-topnav-brand { display: none; }
    .nudge-nav-right { gap: 6px; }
}
/* A group's composition under it while a search leaves just that group (Pentru cine, Adaugă contributor): who is in it, the supervisors marked, its subgroups. */
.grp-prev { margin: 0 8px 8px 44px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--card-2); font-size: var(--fs-xs); cursor: default; }
.grp-prev-sum { margin-bottom: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-muted); }
.grp-prev-people { display: flex; flex-wrap: wrap; gap: 4px; }
.grp-prev-chip { padding: 1px 8px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--border-soft); color: var(--ink-2); }
.grp-prev-chip.is-sup { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); font-weight: var(--fw-semibold); }
.grp-prev-more { align-self: center; color: var(--ink-muted); }
.grp-prev-sub { margin-top: 6px; color: var(--ink-muted); }

/* Status (the user, 2026-10-15): "Statusul meu" in the avatar menu, and the mark of a status other than Disponibil on the avatar button. */
.app-topnav-user-avatar { position: relative; }
.nudge-status-mark { position: absolute; left: -5px; bottom: -5px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1.5px var(--card), 0 0 0 2.5px var(--border-soft); font-size: 11px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.nudge-status-mark[hidden] { display: none; }
.nudge-status-menu { padding: 2px 0; }
.nudge-status-title { padding: 4px 10px 2px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.nudge-status-item { width: 100%; border: 0; background: transparent; text-align: left; }
.nudge-status-item .nudge-status-ic { flex: none; width: 18px; text-align: center; font-size: 14px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.nudge-status-item .nudge-status-check { margin-left: auto; visibility: hidden; }
.nudge-status-item.is-active .nudge-status-check { visibility: visible; }
/* the same four choices as chips on Setări cont ("Statusul meu") */
.account-status { display: flex; flex-wrap: wrap; gap: 8px; }
.nudge-status-item.is-chip { display: inline-flex; align-items: center; gap: 7px; width: auto; height: 32px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; }
.nudge-status-item.is-chip:hover { border-color: var(--accent); color: var(--accent-hover); }
.nudge-status-item.is-chip.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); font-weight: var(--fw-semibold); }

/* Menționări (the user, 2026-10-15; as the phone's tab): the top bar's tab with the unread number; here the bar in place of the filters while it is on —
   the title, what the list holds and the check that marks them all read — and the rows of where I was tagged (a face, "username · te-a menționat", where, the
   message in three lines, the time, a dot while unread). */
.tasks-mentions-bar { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 2px; }
.tasks-mentions-bar[hidden] { display: none; }
.tasks-mentions-title { flex: none; font-size: calc(16px + var(--fd, 0px)); font-weight: var(--fw-bold); color: var(--ink); }
.tasks-mentions-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12.5px + var(--fd, 0px)); color: var(--ink-muted); }
.tasks-mentions-read { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-left: auto; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); color: var(--accent-hover); font-size: calc(13px + var(--fd, 0px)); font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer; }
.tasks-mentions-read:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.tasks-mentions-read[hidden] { display: none; }
.tasks-bar.is-mentions .tasks-filterbar { display: none; }
.tasks-item.is-mention .tasks-item-title { font-weight: var(--fw-medium); }
.tasks-item.is-mention.is-unread .tasks-item-title { font-weight: var(--fw-bold); }
.tasks-mention-dot { flex: none; align-self: flex-start; width: 10px; height: 10px; margin: 6px 2px 0 0; border-radius: 50%; background: var(--accent); }
.tasks-mention-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; font-size: calc(13px + var(--fd, 0px)); line-height: 1.4; color: var(--ink-2); word-break: break-word; }

/* The small @ on a task's row (the user, 2026-10-15: "ca la mobile"): the brand disc with a white @ — a message in the task names me. In the one-line view it goes before the title. */
.tasks-at { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin-right: 5px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); line-height: 0; vertical-align: middle; cursor: default; }
.tasks-at svg { display: block; width: 9px; height: 9px; }
.tasks-at.tasks-meta-part { margin-right: 0; }
.tasks-at.is-lead { display: none; }
.is-simple :is(.todo-list, .tasks-list) .tasks-at.is-lead { display: inline-grid; vertical-align: middle; }

/* A mention row says its company when several are in the list (as a task's row does in the one-line view). */
.tasks-item.is-mention .tasks-item-co { display: inline-block; flex: none; max-width: 110px; margin-right: 6px; padding: 0 7px; overflow: hidden; border-radius: var(--r-pill); font-size: calc(11px + var(--fd, 0px)); font-weight: 600; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Setări cont, as the phone's Cont page (the user, 2026-10-18): a profile card with the language tile, then groups of rows — icon, what it is, its value, a chevron —
   that open a window; a switch where it is yes / no. One column. ===== */
.acct { max-width: 760px; margin: 0 auto; }
.acct-profile { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.acct-photo { position: relative; flex: none; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent-hover); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: var(--fw-bold); cursor: pointer; }
.acct-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.acct-photo:focus-visible { outline: 0; box-shadow: var(--focus); }
.acct-photo-badge { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.acct-who { flex: 1; min-width: 0; }
.acct-name { font-size: 1.15rem; font-weight: var(--fw-bold); color: var(--ink); overflow-wrap: anywhere; }
.acct-sub { font-size: var(--fs-sm); color: var(--ink-2); }
.acct-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acct-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--card-2); border: 1px solid var(--border-soft); color: var(--ink-2); font-size: var(--fs-sm); }
.acct-chip.is-empty { color: var(--ink-muted); }
.acct-chip-level { font-size: 10px; font-weight: var(--fw-semibold); color: var(--accent-hover); background: var(--accent-soft); border-radius: var(--r-pill); padding: 0 6px; }
.acct-lang { flex: none; position: relative; margin-bottom: 8px; }
.acct-lang-btn { position: relative; width: 64px; height: 64px; padding: 0 0 6px; border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; }
.acct-lang-btn:hover { background: var(--accent-hover); }
.acct-lang-btn:focus-visible { outline: 0; box-shadow: var(--focus); }
.acct-lang-code { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 1px 10px; border-radius: 11px; background: var(--card); border: 1.5px solid var(--accent); color: var(--accent-hover); font-size: 13px; font-weight: var(--fw-bold); line-height: 1.4; }
.acct-sec { margin: 22px 4px 8px; font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.acct-grp { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.acct-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 16px; border: 0; border-top: 1px solid var(--border-soft); background: transparent; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; margin: 0; }
.acct-row:first-child { border-top: 0; }
button.acct-row:hover, a.acct-row:hover, label.acct-row:hover { background: var(--card-2); color: var(--ink); }
.acct-row:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent-line); }
.acct-tile { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-hover); display: flex; align-items: center; justify-content: center; }
.acct-tile.is-danger { background: var(--danger-soft); color: var(--danger); }
.acct-tile-mark { font-size: 18px; line-height: 1; }
.acct-text { flex: 1; min-width: 0; }
.acct-title { display: block; margin: 0; font-size: var(--fs-md, 1rem); font-weight: var(--fw-semibold); color: var(--ink); }
.acct-hint { display: block; font-size: var(--fs-sm); line-height: 1.35; color: var(--ink-2); }
.acct-value { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--ink-2); }
.acct-chev { flex: none; color: var(--ink-muted); }
.acct-row.is-danger .acct-title { color: var(--danger); }
.acct-link { padding: 0; border: 0; background: none; color: var(--accent-hover); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.acct-link:hover { text-decoration: underline; }
.acct-error { padding: 8px 12px; border-radius: 10px; background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); font-size: var(--fs-sm); }
.acct-modal .modal-title { font-size: 1.05rem; font-weight: var(--fw-bold); }
.acct-modal .modal-content { border-radius: 14px; }
.acct-links { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 575.98px) { .acct-profile { flex-wrap: wrap; } .acct-value { max-width: 34%; } }

/* "Invită pe cineva" window (the user, 2026-10-18). */
.acct-note { padding: 8px 12px; margin-bottom: 12px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-hover); font-size: var(--fs-sm); }
.acct-sublist-title { margin: 20px 0 6px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.acct-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.acct-sub-row:first-child { border-top: 0; }
.acct-sub-text { min-width: 0; overflow-wrap: anywhere; }
.acct-sub-text small { display: block; color: var(--ink-2); }

/* ---- The Sarcini page as drawn in "Propunere pagina Sarcini" (the user, 2026-10-18: "fix spatierea, contururile, liniile și lățimile — toată organizarea de div-uri") ----
   The top bar, the bar of tabs / filters, the list and the conversation are four separate cards, 10px apart, each with a 1px outline and 14px corners; the list is 470px wide (392 +20%, the user 2026-10-18; at most 44% of the page)
   (the conversation takes the rest); the line between two rows runs the whole width of the list — none under the last one, the card's outline closes it. The Calendar and the other
   pages keep their own. (The shadow of the old one-piece card stays on the list and on the conversation.) */
body:has(#tasksBar) .app-topnav { margin-bottom: 10px; border-radius: 14px; }
.todo-bar.tasks-bar { margin-bottom: 10px; border-radius: 14px; }
.tasks-app { grid-template-columns: min(470px, 44%) minmax(0, 1fr); gap: 10px; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.tasks-side, .tasks-main { border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sh-card); overflow: hidden; }
.tasks-app .tasks-list .tasks-item::after { left: 0; background: var(--border); }
.tasks-app .tasks-list .tasks-item:last-child::after { display: none; }
@media (max-width: 767.98px) { .tasks-app { grid-template-columns: minmax(0, 1fr); } }
/* a task open inside the Calendar (?embed=1): as before — no cards, no outline */
.is-embed .tasks-app { gap: 0; }
.is-embed .tasks-side, .is-embed .tasks-main { border: 0; border-radius: 0; box-shadow: none; }

/* The scrollbars of the whole app (the user, 2026-10-18: "implementeaza si 6", after the floating one of the list): the same quiet look everywhere — thin, rounded, light violet, no arrows, no track —:
   the page's own bar, the lists in the filter panels and pickers, the dialogs, the text boxes. The list, the conversation and the new-task form draw their own floating thumb (float-scroll.js) and
   hide this one. Chrome / Edge / Safari use ::-webkit-scrollbar; Firefox (no such pseudo-element) gets the thin one through scrollbar-width / scrollbar-color. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { min-height: 36px; min-width: 36px; border: 3px solid transparent; border-radius: 999px; background-color: var(--lavender, #c8bff6); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--accent) 55%, #fff); }
*::-webkit-scrollbar-thumb:active { background-color: color-mix(in srgb, var(--accent) 80%, #fff); }
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-width: thin; scrollbar-color: var(--lavender, #c8bff6) transparent; }
}

/* ---- Reading a task as drawn in "Propunere pagina Sarcini" (the user, 2026-10-18: "fa la fel div-urile si din citire sarcina, fix ca in poza"): the conversation's card is white; the header is a
   band (12px 14px) with a line under it; the messages are a box inset 10px with its own 1px outline and 12px corners (the lavender backdrop stays inside it, the composer under it).
   The small view keeps its own denser paddings; a narrow window (one pane) and a task open in the Calendar (?embed=1) keep the old edge-to-edge look. ---- */
.tasks-main { background: var(--card); }
.tasks-placeholder { background-color: var(--bg); }
.tasks-thread-head { padding: 12px 14px; }
.tasks-messages { margin: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
@media (max-width: 767.98px) { .tasks-messages { margin: 0; padding: 12px; border: 0; border-radius: 0; } }
.is-embed .tasks-main { background: var(--bg); }
.is-embed .tasks-messages { margin: 0; padding: 12px 20px 16px; border: 0; border-radius: 0; }

/* "Ziua ta" (the user, 2026-10-18): the panel on the right while no task is open — a sun, the title, a line, and three summaries that are buttons (a big number, what it counts). */
.tasks-placeholder { padding: 24px; text-align: center; }
.tasks-placeholder p { margin: 0; }
.tasks-day-title { font-size: 16px; font-weight: var(--fw-semibold); color: var(--ink); }
/* (the boxes of "Ziua ta": the end of this file, "The filter panel and the boxes as drawn in ...") */

/* Floating scrollbar (float-scroll.js; the user, 2026-10-18: variant C, "mov deschis"): the thin native bar above is the fallback; once the script is on, the element carries .fs-native-off
   (no system bar at all) and a light-violet thumb floats over its right edge — 5px, 7px under the pointer —, shown while the pointer is over the element or it scrolls. */
.fs-native-off { scrollbar-width: none; }
.fs-native-off::-webkit-scrollbar { display: none; width: 0; height: 0; }
.fs-track { position: absolute; z-index: 6; width: 14px; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.fs-track.is-on { opacity: 1; pointer-events: auto; }
.fs-track.is-off { display: none; }
.fs-thumb { position: absolute; right: 0; width: 5px; border-radius: 999px; background-color: var(--lavender, #c8bff6); touch-action: none; transition: width .12s ease, background-color .12s ease; }
.fs-track:hover .fs-thumb { width: 7px; background-color: color-mix(in srgb, var(--accent) 55%, #fff); }
.fs-track.is-drag .fs-thumb { width: 7px; background-color: color-mix(in srgb, var(--accent) 80%, #fff); }
@media (prefers-reduced-motion: reduce) { .fs-track, .fs-thumb { transition: none; } }

/* ---- POINT 4 — details of the picture (the user, 2026-10-18: "implementeaza punctul 4, posibil sa fac revert": DELETE THIS WHOLE BLOCK to go back) ----
   the chips of the bar and of the "Filtre" panel are 29px high (were 27) with 12.5px type (was 13); the box of the messages has the dashed outline of the picture (was a solid line). */
.tf-filters .tasks-filter, .tf-chip, .tf-filters .tasks-hidden-unread, .tf-panel .tasks-filter { height: 29px; font-size: calc(12.5px + var(--fd, 0px)); }
.tasks-messages { border-style: dashed; border-color: var(--border-strong, #cfd3de); }
/* ---- end of POINT 4 ---- */

/* Variant F of "Iconițele QC și Sarcină nouă" (the user, 2026-10-18: "F, dar ambele pline"): both round buttons are a flat violet disc with a little depth — a fine highlight on top, a short shadow under it, like
   the cards — and a white glyph: the logo's bubble (Quick Chat) and a plus (Sarcină nouă), drawn as SVGs; the pictures with the degrade and the gloss are no longer used here. */
.todo-add.is-flat { color: #fff; background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 1px 2px rgba(58, 50, 184, .45), 0 3px 8px rgba(80, 71, 232, .22); }
.todo-add.is-flat:hover, .todo-add.is-qc.is-flat:hover, .todo-add.is-pic.is-flat:hover { color: #fff; background: var(--accent-hover); }
.todo-add.is-qc.is-flat, .todo-add.is-pic.is-flat { background: var(--accent); }
.todo-add.is-flat svg { display: block; width: 18px; height: 18px; }

/* The ⋮ menu of a conversation, aesthetic (the user, 2026-10-18: "nu arată bine fontul de la acțiuni"): the app's own look instead of Bootstrap's — a white card with a 1px outline and 12px corners, 13px type in the
   app's ink, rows 34px high with rounded hover, every line with its icon in one column, small quiet labels over the groups (the same as the ⋮ of the bar). */
.tasks-thread-head .dropdown-menu { min-width: 15rem; padding: 5px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: 0 10px 30px rgba(16, 24, 40, .16); font-size: 13px; }
.tasks-thread-head .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: var(--fw-medium); line-height: 1.35; color: var(--ink); white-space: nowrap; }
.tasks-thread-head .dropdown-item:hover, .tasks-thread-head .dropdown-item:focus-visible { background: var(--card-2); color: var(--ink); }
.tasks-thread-head .dropdown-item:active { background: var(--accent-soft); color: var(--accent-hover); }
.tasks-thread-head .dropdown-item > svg, .tasks-thread-head .dropdown-item > .tasks-ic { flex: none; width: 15px; height: 15px; color: var(--ink-2); }
.tasks-thread-head .dropdown-item .tasks-muted { font-weight: var(--fw-normal); }
.tasks-thread-head .dropdown-item.text-danger, .tasks-thread-head .dropdown-item.text-danger > svg { color: var(--danger) !important; }
.tasks-thread-head .dropdown-item.text-danger:hover { background: var(--danger-soft); }
.tasks-thread-head .dropdown-item.tasks-menu-buzz:hover { background: var(--danger-soft); }
.tasks-thread-head .dropdown-header { padding: 8px 10px 3px; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .06em; color: var(--ink-muted); }
.tasks-thread-head .dropdown-divider { margin: 5px 2px; border-top-color: var(--border); opacity: 1; }

/* "Închide" / "Redeschide" in the header of a task — variant B of "Butonul Închide" (the user, 2026-10-18): a lavender pill like the active chips and tabs — soft violet fill, a fine outline, 13px violet text and a violet
   icon (it was a square-ish white button with a green icon). Round like the search and ⋮ beside it. */
.tasks-state-btn.is-main { height: 32px; padding: 0 14px 0 11px; gap: 6px; border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: var(--fw-semibold); line-height: 1; box-shadow: inset 0 0 0 1px var(--accent-line); transition: background-color var(--dur-fast), box-shadow var(--dur-fast); }
.tasks-state-btn.is-main:hover, .tasks-state-btn.is-main:focus-visible { border: 0; background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--accent); }
.tasks-state-btn.is-main:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--accent), var(--focus); }
.tasks-state-btn.is-main .tasks-state-ic, .tasks-state-btn.is-main .tasks-state-ic.is-close { color: currentColor; }
.tasks-state-btn.is-main .tasks-state-ic svg { width: 15px; height: 15px; }

/* ---- The header of a task, proposal B of 2026-10-18 ("antetul sarcinii"; the user: "B e bine, dar «Arată tot» nu îmi place unde stă și fontul") ----
   Up top (12px 14px): the face, the title with who gave the task and when under it, a quiet chevron at the end of a long title ("Arată tot" is its tooltip), and the buttons, all aligned to the top.
   Under it a band (grey ground, a line over it): equal 26px chips — urgent, deadline, whom it is for, the executants, the project… — and at its right who has seen the task. */
.tasks-thread-head, .view-small .tasks-thread-head { padding: 0; gap: 0; }
.tasks-thread-head .tasks-head-top { padding: 12px 14px; }
.view-small .tasks-thread-head .tasks-head-top { padding: 7px 14px 8px; }
@media (max-width: 767.98px) { .tasks-thread-head .tasks-head-top { padding: 10px 12px; } }
.tasks-thread-head:has(.tasks-head-band) .tasks-head-top { align-items: flex-start; }
.tasks-thread-head:has(.tasks-head-band) .tasks-face-btn { align-self: flex-start; }
.tasks-thread-head:has(.tasks-head-band) .tasks-head-sub { white-space: normal; overflow: visible; text-overflow: clip; }
/* "Arată tot ▾" / "Arată mai puțin ▴" stays a text link (the user, 2026-10-18), but quiet and elsewhere: on the row of "Ai dat sarcina · data", at the right end of it, in the header's grey 12px
   medium (it was violet and bold under the title, on a line of its own). */
.tasks-head-subrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 1px; }
.tasks-head-subrow .tasks-head-sub { margin-top: 0; min-width: 0; }
.tasks-thread-head .tasks-head-more { flex: none; margin: 0; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 12px; font-weight: var(--fw-medium); line-height: 17px; white-space: nowrap; cursor: pointer; }
.tasks-thread-head .tasks-head-more:hover { color: var(--accent-hover); text-decoration: underline; }
.tasks-thread-head .tasks-head-more[hidden] { display: none; }.tasks-head-band { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 14px; background: var(--card-2); border-top: 1px solid var(--border-soft); }
.view-small .tasks-head-band { gap: 4px 6px; padding: 6px 14px; }
@media (max-width: 767.98px) { .tasks-head-band { padding: 8px 12px; } }
.tasks-band-sp { flex: 1 1 0; min-width: 0; }
.tasks-head-band .tasks-info { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); font-size: calc(12px + var(--fd, 0px)); font-weight: var(--fw-medium); color: var(--ink); max-width: 100%; }
.tasks-head-band .tasks-info .tasks-ic { color: var(--ink-muted); }
.tasks-head-band .tasks-info-btn { margin: 0; padding: 0 10px; border: 0; font-family: inherit; cursor: pointer; }
.tasks-head-band .tasks-info-btn:hover { background: var(--card-2); box-shadow: inset 0 0 0 1px var(--border-strong, #cfd3de); }
.tasks-head-band .tasks-info.is-urgent { background: var(--danger-soft); box-shadow: none; color: var(--danger); font-size: calc(11px + var(--fd, 0px)); font-weight: var(--fw-bold); }
.tasks-head-band .tasks-info.is-overdue { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }
.tasks-head-band .tasks-info.is-soon { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.tasks-head-band .tasks-info.is-warn { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }
.tasks-head-band .tasks-task-seen { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: calc(12px + var(--fd, 0px)); color: #0e8faa; white-space: nowrap; }
.tasks-head-band .tasks-task-seen:empty { display: none; }

/* The way back from an open task (the user, 2026-10-18: "dacă am selectat o sarcină, cum ajung pe «Ziua ta»? înapoi?"): the ← button of the header, which was only for a narrow window, is there on a wide one
   too — it closes the task and the right-hand panel shows "Ziua ta" again (Backspace and Esc do the same from the keyboard). */
.tasks-thread-head .tasks-back { display: inline-flex; flex: none; color: var(--ink-2); }
.tasks-thread-head:has(.tasks-head-band) .tasks-back { margin-top: 5px; }
/* ---- Setări in a container (the user, 2026-10-18: "un container frumos, în același stil de div ca la Sarcini") ----
   The whole page is one card — 1px outline, 14px corners, the card shadow, as the Sarcini cards — with the top bar a 14px card 10px above it; inside, each group of rows
   is a 12px box, as the messages box inside a conversation. Only the page with .settings-wrap (Views/Settings/Index.cshtml). */
body:has(.settings-wrap) .app-topnav { margin-bottom: 10px; border-radius: 14px; }
.settings-wrap { max-width: 800px; padding: 16px 20px 22px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sh-card); }
.settings-wrap .page-header { margin-bottom: 0; }
.settings-wrap .page-header + .acct-sec { margin-top: 16px; }
.settings-wrap .acct-grp { border-radius: 12px; }
@media (max-width: 575.98px) { .settings-wrap { padding: 12px 12px 16px; } }

/* ===== The filter panel, the boxes of "Ziua ta" and Ordine, as drawn in "Filtrele, regândite după ce fac" (the user, 2026-10-18; "posibil să dau revert" — the files before this change are in
   %USERPROFILE%\.csvinsights\backups\filtre-2026-10-18) ===== */
/* The panel: three sections by what they do — Afișează / Adaugă la listă / Restrânge la. Grey = as usual, violet = changed. */
.tf-panel.tfp { width: min(380px, calc(100% - 16px)); padding: 0; border-radius: 14px; overflow-y: auto; max-height: min(680px, calc(100vh - 150px)); }
.tfp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 6px; }
.tfp-head strong { font-size: calc(14px + var(--fd, 0px)); font-weight: var(--fw-bold); }
.tfp-reset { padding: 0; border: 0; background: none; color: var(--accent-hover); font-size: 12px; font-weight: var(--fw-semibold); cursor: pointer; }
.tfp-reset:hover:not(:disabled) { text-decoration: underline; }
.tfp-reset:disabled { color: var(--ink-muted); font-weight: var(--fw-medium); opacity: .6; cursor: default; }
.tfp-sec { padding: 9px 16px 10px; border-top: 1px solid var(--border-soft); }
.tfp-head + .tfp-sec { border-top: 0; padding-top: 4px; }
.tfp-st { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; }
.tfp-st b { font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.tfp-st span { font-size: 11px; color: var(--ink-muted); }
.tfp-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--border); }
.tfp-seg button { flex: 1; padding: 5px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: calc(12.5px + var(--fd, 0px)); font-weight: var(--fw-semibold); cursor: pointer; }
.tfp-seg button:hover { color: var(--ink); }
/* (the user, 2026-10-18: the chosen one is always violet — Deschise too, not only when it is changed) */
.tfp-seg button.is-on { background: var(--accent); color: var(--accent-ink, #fff); box-shadow: 0 1px 3px rgba(80, 71, 232, .35); }
.tfp-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 3px 0; border: 0; background: none; color: var(--ink); text-align: left; font-size: calc(13px + var(--fd, 0px)); }
.tfp-row[hidden] { display: none; }
button.tfp-row { cursor: pointer; }
button.tfp-row:hover .tfp-t { color: var(--accent-hover); }
button.tfp-row:focus-visible { outline: 0; box-shadow: var(--focus); border-radius: 8px; }
.tfp-t { flex: 1; min-width: 0; font-weight: var(--fw-medium); }
.tfp-t small { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; line-height: 1.3; color: var(--ink-muted); }
.tfp-v { flex: none; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tfp-row.is-dev .tfp-t { color: var(--accent-hover); font-weight: var(--fw-semibold); }
.tfp-row.is-dev .tfp-v { color: var(--accent); font-weight: var(--fw-bold); }
.tfp-chev { flex: none; width: 7px; height: 7px; margin: -3px 4px 0 0; border-right: 1.8px solid var(--ink-muted); border-bottom: 1.8px solid var(--ink-muted); transform: rotate(45deg); }
.tfp-row[aria-expanded="true"] .tfp-chev { margin-top: 3px; transform: rotate(-135deg); }
/* a switch: off = light, on as usual = grey, on and changed = violet */
.tfp-sw { flex: none; position: relative; width: 32px; height: 19px; border-radius: 999px; background: #d5d9e0; transition: background-color .12s; }
.tfp-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .12s; }
.tfp-row.is-on .tfp-sw { background: #8e99a3; }
.tfp-row.is-on .tfp-sw::after { transform: translateX(13px); }
.tfp-row.is-on.is-dev .tfp-sw { background: var(--accent); }
.tfp-lbl { flex: none; width: 68px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--ink-2); }
.tfp-pick { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border-strong, #cfd3de); color: var(--ink-muted); font-size: calc(12.5px + var(--fd, 0px)); font-weight: var(--fw-medium); text-align: left; cursor: pointer; }
.tfp-pick[hidden] { display: none; }
.tfp-pick:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.tfp-pick::after { content: ""; flex: none; width: 6px; height: 6px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .7; }
.tfp-pick:has(.tasks-focus-clear:not([hidden]))::after { display: none; }
.tfp-pick[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.tfp-pick.is-dev { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--accent-hover); font-weight: var(--fw-semibold); }
.tfp-row.is-chips { align-items: flex-start; padding-top: 4px; }
.tfp-row.is-chips .tfp-lbl { padding-top: 5px; }
.tfp-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tfp-o { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border-strong, #cfd3de); color: var(--ink); font-size: calc(12.5px + var(--fd, 0px)); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; }
.tfp-o:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.tfp-o:focus-visible { outline: 0; box-shadow: var(--focus); }
.tfp-n { font-style: normal; font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tfp-o.is-on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--accent-hover); font-weight: var(--fw-bold); }
.tfp-o.is-on .tfp-n { color: var(--accent); }
.tfp-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; border-top: 1px solid var(--border-soft); background: var(--card-2); }
.tfp-foot #tfpCount { font-size: 12.5px; color: var(--ink-2); }
.tfp-done { padding: 0; border: 0; background: none; color: var(--accent-hover); font-size: 12.5px; font-weight: var(--fw-bold); cursor: pointer; }
.tfp-done:hover { text-decoration: underline; }
/* the lists (groups, people, projects) open inside the panel, under their row */
.tasks-picker.is-inline { position: static; width: auto; max-height: 280px; margin: 4px 0 6px; border-radius: 10px; box-shadow: none; }
.tasks-picker.is-groups.is-inline { min-width: 0; max-height: 320px; }
/* a chip of what was added to the list: green with a "+" (the violet ones cut it) */
.tf-chip.is-add { border-color: #b3e4c8; background: #ddf6e9; color: #0b6e41; }
.tf-chip.is-add::before { content: "+"; margin-right: -2px; font-weight: var(--fw-bold); }
.tf-chip.is-add .tf-chip-x { background: rgba(11, 110, 65, .14); }
.tf-chip.is-add .tf-chip-x:hover { background: rgba(11, 110, 65, .28); }
/* Ordine */
.tf-order { flex: none; position: relative; }
.tf-order-btn { display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font-size: calc(12.5px + var(--fd, 0px)); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; }
.tf-order-btn:hover, .tf-order-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-hover); }
.tf-order-btn svg { opacity: .7; }
.tf-order-now { font-size: 11.5px; color: var(--ink-muted); }
.tf-order-now:not(:empty)::before { content: "· "; }
.tf-order-btn.is-changed { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); }
.tf-order-btn.is-changed .tf-order-now { color: inherit; }
@media (max-width: 900px) { .tf-order-now { display: none; } }
/* "Ziua ta": eight boxes, each with its own colour; the number takes the colour while there is something to see, the box fills in while its filter is on */
.tasks-day-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 540px; margin-top: 10px; }
.tasks-day-tile { --tc: var(--accent); --tb: var(--accent-soft); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--ink-2); font-size: 12px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s, background-color .12s; }
.tasks-day-ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 2px; border-radius: 50%; background: var(--tb); color: var(--tc); transition: background-color .12s, color .12s; }
.tasks-day-tile b { font-size: 22px; font-weight: var(--fw-semibold); line-height: 1.15; color: var(--tc); font-variant-numeric: tabular-nums; }
.tasks-day-lbl { font-weight: var(--fw-medium); line-height: 1.2; text-align: center; }
.tasks-day-tile:hover { border-color: var(--tc); box-shadow: 0 3px 10px color-mix(in srgb, var(--tc) 20%, transparent); transform: translateY(-1px); }
.tasks-day-tile:focus-visible { outline: 0; box-shadow: var(--focus); }
.tasks-day-tile.is-zero b { color: var(--ink-muted); font-weight: var(--fw-medium); }
.tasks-day-tile.is-zero .tasks-day-ic { opacity: .55; }
.tasks-day-tile.is-on { border-color: var(--tc); background: var(--tb); color: var(--tc); box-shadow: inset 0 0 0 1px var(--tc); }
.tasks-day-tile.is-on .tasks-day-ic { background: var(--tc); color: #fff; }
.tasks-day-tile.is-late { --tc: #b13434; --tb: #fae4e4; }
.tasks-day-tile.is-today { --tc: #946200; --tb: #fdf0d5; }
.tasks-day-tile.is-urgent { --tc: #a3195b; --tb: #fde6f0; }
.tasks-day-tile.is-none { --tc: #4d5e69; --tb: #e9edf1; }
.tasks-day-tile.is-unread { --tc: #5047e8; --tb: #eeecfd; }
.tasks-day-tile.is-mentions { --tc: #1c6fb0; --tb: #e1effb; }
.tasks-day-tile.is-created { --tc: #0b7a6b; --tb: #d9f3ee; }
.tasks-day-tile.is-closed { --tc: #0b8a50; --tb: #ddf6e9; }
@media (max-width: 600px) { .tasks-day-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- The panel wide, not deep (the user, 2026-10-18: "mult mai lat, prefer lățime în loc de adâncime; păstrează grupările; layout-ul butoanelor mai curat, puțin mărite") ----
   The three sections side by side — Afișează (a stack of three choices), Adaugă la listă (rows with switches), Restrânge la (rows with a label) — under one head and over one foot; the buttons a little bigger.
   On a narrow window the sections go one under the other again, as before. */
.tf-panel.tfp { width: min(1100px, calc(100% - 16px)); }
.tfp-body { display: grid; grid-template-columns: minmax(160px, .6fr) minmax(235px, .85fr) minmax(0, 2.5fr); border-top: 1px solid var(--border-soft); }
.tfp-body .tfp-sec { padding: 14px 18px 18px; border-top: 0; border-left: 1px solid var(--border-soft); }
.tfp-body .tfp-sec:first-child { border-left: 0; }
.tfp-head { padding: 14px 18px 12px; }
.tfp-foot { padding: 10px 18px; }
.tfp-st { margin: 0 0 10px; }
.tfp-st b { font-size: 11px; }
.tfp-seg { flex-direction: column; gap: 3px; padding: 4px; }
.tfp-seg button { padding: 8px 12px; border-radius: 8px; font-size: calc(13px + var(--fd, 0px)); text-align: left; }
.tfp-row { min-height: 40px; font-size: calc(13.5px + var(--fd, 0px)); }
.tfp-t small { font-size: 11.5px; }
.tfp-v { font-size: 12.5px; }
.tfp-sw { width: 36px; height: 21px; }
.tfp-sw::after { width: 17px; height: 17px; }
.tfp-row.is-on .tfp-sw::after { transform: translateX(15px); }
.tfp-lbl { width: 82px; font-size: 12.5px; }
.tfp-pick { height: 34px; padding: 0 12px; font-size: calc(13px + var(--fd, 0px)); }
.tfp-chips { gap: 8px; }
.tfp-o { height: 32px; padding: 0 13px; font-size: calc(13px + var(--fd, 0px)); }
.tfp-n { font-size: 11.5px; }
.tfp-row.is-chips { padding-top: 5px; padding-bottom: 5px; }
.tfp-row.is-chips .tfp-lbl { padding-top: 7px; }
.tasks-picker.is-inline { margin: 6px 0 8px; }
@media (max-width: 900px) {
    .tf-panel.tfp { width: min(430px, calc(100% - 16px)); }
    .tfp-body { grid-template-columns: minmax(0, 1fr); }
    .tfp-body .tfp-sec { border-left: 0; border-top: 1px solid var(--border-soft); }
    .tfp-body .tfp-sec:first-child { border-top: 0; }
    .tfp-seg { flex-direction: row; }
    .tfp-seg button { text-align: center; }
}

/* ---- Third pass on the panel (the user, 2026-10-18): centred, the Termen / Stare buttons as a clean grid, Resetează and Gata as buttons on one line ---- */
.tf-filterbtn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); }
/* Termen / Stare: the same square-cornered fields as the lists above them, four to a row (Termen is one row), the label on the left and the number on the right of each; "Închise recent" takes two */
.tfp-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tfp-o { justify-content: space-between; gap: 8px; height: 34px; padding: 0 12px; border-radius: 9px; }
.tfp-o > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tfp-o[data-work="closedRecent"] { grid-column: span 2; }
.tfp-lbl { width: 72px; }
.tfp-row.is-chips { padding-top: 4px; padding-bottom: 4px; }
.tfp-row.is-chips .tfp-lbl { padding-top: 9px; }
/* Resetează + Gata: buttons, side by side at the right of the foot */
.tfp-btns { display: inline-flex; gap: 8px; }
.tfp-btn { height: 34px; padding: 0 20px; border: 1px solid var(--border-strong, #cfd3de); border-radius: 9px; background: var(--card); color: var(--ink); font-size: calc(13px + var(--fd, 0px)); font-weight: var(--fw-semibold); cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.tfp-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-hover); }
.tfp-btn:focus-visible { outline: 0; box-shadow: var(--focus); }
.tfp-btn:disabled { opacity: .5; cursor: default; }
.tfp-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.tfp-btn.is-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink, #fff); }
@media (max-width: 900px) {
    .tfp-chips { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .tfp-o[data-work="closedRecent"] { grid-column: auto; }
}

/* The numbers of Termen / Stare in one colour, no background (the user, 2026-10-18: "toate aceeași culoare, fără background color"). */
.tfp-n { min-width: 0; height: auto; padding: 0; background: none; color: var(--accent); font-size: 12px; font-weight: var(--fw-bold); font-style: normal; font-variant-numeric: tabular-nums; }
.tfp-o.is-on .tfp-n { color: var(--accent-hover); }

/* The switches: on = blue (the user, 2026-10-18: "toggle on / off, pe on să fie albastru"); a switch row does not change its label's colour when it is changed */
.tfp-row.is-on .tfp-sw, .tfp-row.is-on.is-dev .tfp-sw { background: #2f6fe4; }
.tfp-row[role="switch"].is-dev .tfp-t { color: var(--ink); font-weight: var(--fw-medium); }

/* The actions of a task, the ⋮ menu of the header (the user, 2026-10-18: "toate acțiunile făcute pe o sarcină să fie fără fundal și centrate; cele care acum au roșu, cu roșu fontul, restul normal"): no background on
   a row (not even on hover — the colour of the text answers), the icon and the words centred; the red ones (Buzz, Șterge) have red text, all the others the normal ink — also "Renunț la sarcină" / "Nu mă mai ocup",
   which said they were on by a violet colour (their own words say it). The quiet labels over the groups are centred too. */
.tasks-thread-head .dropdown-item { justify-content: center; text-align: center; background: transparent; }
.tasks-thread-head .dropdown-item.is-on, .tasks-thread-head .dropdown-item.is-on .tasks-ic { color: var(--ink); font-weight: var(--fw-medium); }
.tasks-thread-head .dropdown-item:hover, .tasks-thread-head .dropdown-item:focus-visible, .tasks-thread-head .dropdown-item:active { background: transparent; color: var(--accent-hover); }
.tasks-thread-head .dropdown-item:hover > svg, .tasks-thread-head .dropdown-item:hover .tasks-ic, .tasks-thread-head .dropdown-item:focus-visible > svg { color: var(--accent-hover); }
.tasks-thread-head .dropdown-item.text-danger, .tasks-thread-head .dropdown-item.text-danger > svg, .tasks-thread-head .dropdown-item.tasks-menu-buzz, .tasks-thread-head .dropdown-item.tasks-menu-buzz .tasks-ic { color: var(--danger) !important; }
.tasks-thread-head .dropdown-item.text-danger:hover, .tasks-thread-head .dropdown-item.text-danger:hover > svg, .tasks-thread-head .dropdown-item.tasks-menu-buzz:hover, .tasks-thread-head .dropdown-item.tasks-menu-buzz:hover .tasks-ic { background: transparent; color: #8c1d1d !important; }
.tasks-thread-head .dropdown-header { text-align: center; }

/* "Prelungire termen" (+1 / +2 / +3 days) in red too (the user, 2026-10-18: "și prelungirea de termen să fie cu roșu"): the same red text as Buzz and Șterge, the date a little lighter. */
.tasks-thread-head .dropdown-item[data-action="extend"], .tasks-thread-head .dropdown-item[data-action="extend"] > svg, .tasks-thread-head .dropdown-item[data-action="extend"] .tasks-ic { color: var(--danger) !important; }
.tasks-thread-head .dropdown-item[data-action="extend"] .tasks-muted { color: inherit !important; opacity: .72; }
.tasks-thread-head .dropdown-item[data-action="extend"]:hover, .tasks-thread-head .dropdown-item[data-action="extend"]:hover > svg, .tasks-thread-head .dropdown-item[data-action="extend"]:hover .tasks-ic { background: transparent; color: #8c1d1d !important; }

/* The lines the system writes in a conversation — closed, a new deadline, Preiau / Mă ocup, a Buzz …: all on the same white pill, no outline, centred; only the colour of the text differs (the user, 2026-10-18:
   "acțiunile de sistem le facem pe toate pe fundal alb, doar culoarea textului diferă"): red for a Buzz and for a deadline an executant extended by themselves (it was a red box), the normal ink for the rest. */
.tasks-event span, .tasks-event.is-warn span, .tasks-event.is-buzz span { background: var(--card); border: 0; border-radius: 12px; }
.tasks-event { display: flex; justify-content: center; }
.tasks-event.is-warn span, .tasks-event.is-buzz span { color: var(--danger); }
/* ---- "Afișează" above "Adaugă la listă", the two in one wide column (the user, 2026-10-18: "…adaugă în listă să aibă lățimea de la afișează + cât e acum, ca să pot vedea ierarhia de grupuri cum trebuie") ----
   Two columns now: the left one holds Afișează (its three choices side by side) over Adaugă la listă; the right one is Restrânge la, as wide as before. */
.tfp-body { grid-template-columns: minmax(340px, .37fr) minmax(0, .63fr); }
.tfp-col { min-width: 0; }
.tfp-col .tfp-sec, .tfp-col .tfp-sec:first-child { border-left: 0; }
.tfp-col .tfp-sec + .tfp-sec { border-top: 1px solid var(--border-soft); }
.tfp-body > .tfp-sec { border-left: 1px solid var(--border-soft); }
.tfp-seg { flex-direction: row; }
.tfp-seg button { text-align: center; }
@media (max-width: 900px) {
    .tfp-body { grid-template-columns: minmax(0, 1fr); }
    .tfp-body > .tfp-sec { border-left: 0; border-top: 1px solid var(--border-soft); }
}