@charset "UTF-8";

@import url("fonts.4f872fa82016.css");
@import url("colors.b9410b6c52ac.css");
@import url("comments.3c36d6aacdc8.css");
@import url("forms.d72e53845bd5.css");
@import url("modals.c1fcaeb921d9.css");
@import url("taskviews.abba07ff3b32.css");
@import url("attachments.b339f2377df7.css");

html
{
    font-size: 2.4px;
}

body
{
    font-size: 3.6rem;
    line-height: 1.3;
}

/* User preference styling */
.preference-item {
    margin-bottom: 12px;
}

.preference-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    margin-bottom: 4px;
}

.icon-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

@media (prefers-color-scheme: dark) {
    .icon-button img {
        filter: invert(1);
    }

    .icon-button:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

@media screen and (min-width: 240px)
{
    html
    {
        font-size: 1vw;
    }
}

@media screen and (min-width: 480px)
{
    body
    {
        font-size: 3.2rem;
    }
}

@media screen and (min-width: 760px)
{
    body
    {
        font-size: 2rem;
    }
}

@media screen and (min-width: 1000px)
{
    html
    {
        font-size: 10px;
    }
}

*,
*::before,
*::after
{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
}

a
{
  text-decoration: underline;
  color: inherit;
}

body
{
    position: relative;
    min-height: calc(100vh - 2rem);

    font-family: var(--sans-serif);
    padding: 2rem 2rem 4rem 2rem;

    color: var(--text);
    background: var(--bg);

    --page-width: 100rem;
}

.error-message {
    background-color: var(--bg-subtle);
    border-radius: 6px;
    padding: 2rem;
    margin: 2rem 0;
    max-width: 600px;
}

.global-header
{
    display: flex;
    gap: 0.35em;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: start;
    margin: 1em 0;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-subtle);
    font-size: 1em;
}

.global-header a
{
    text-decoration: none;
    display: contents;
}

.global-header .panic-logo
{
    color: transparent;
    background-color: var(--text);
    -webkit-mask-image: url("/static/images/panic.0651b23a5518.svg");
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    width: 2em;
    height: 2em;
    display: inline-block;
}

.global-header .heading,
.global-header .breadcrumb-nav
{
    display: contents;
    font: inherit;
}

.breadcrumb::before
{
    content: "/";
    color: var(--bg-subtle);
}

.global-menu,
.week-switcher
{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg);
    color: var(--text);
    gap: 2rem;
    font-size: 80%;
    flex-flow: row wrap;
}


.week-switcher
{
    gap: 1rem;
}

.week-switcher .week-now
{
    width: 14em;
    text-align: center;
}

.week-switcher .previous,
.week-switcher .next
{
    width: 7em;
}
.week-switcher .previous
{
    text-align: right;
}

.global-nav-container
{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 1rem;
    -webkit-backdrop-filter: blur(1rem) brightness(.8);
    backdrop-filter: blur(1rem) brightness(.8);
    background-color: rgba(200, 200, 200, 0.2);
    border-top: 0.1rem solid var(--bg-subtle);
    z-index: 9999;
}

.user-profile-container {
    position: fixed;
    top: 2rem;
    right: 2rem;
    margin: 0;
    padding: 0.6rem 1.2rem;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-strong);
    border-radius: 5rem;
    border: 0.1rem solid var(--bg-subtle);
    font-size: 90%;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.user-profile .user-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    margin-left: 0.3rem;
}

.user-profile .user-name {
    font-weight: 600;
}

.user-profile-container .org-name {
    color: var(--text);
    font-size: 90%;
    background-color: var(--bg-subtle);
    padding: 0.3rem 0.7rem;
    border-radius: 2rem;
    font-weight: 500;
    margin-left: 0.1rem;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-profile-container .org-name:hover {
    background-color: var(--blue);
    color: white;
}

.user-profile-container .org-logo {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    object-fit: contain;
}

.user-profile-container .search-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-profile-container .search-button:hover {
    background-color: var(--bg-subtle);
}

.user-profile-container .search-icon {
    width: 1.2rem;
    height: 1.2rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.user-profile-container .search-button:hover .search-icon {
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    .user-profile-container .search-icon {
        filter: invert(1);
    }
}

body
{
    padding: 3.5rem 1rem calc(8rem + 4em) 2rem;
}

.global-menu
{
    background: transparent;
    max-width: 120rem;
    margin: 0 auto;
}

.global-menu .menu-item
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--bg-strong);
    color: var(--text);
    flex: 0 0 auto;
    text-align: center;
    padding: 0.8em 0.6em;
    position: relative;
    border-radius: 0.8em;
    border: 0.3rem solid var(--text);
    font-weight: 600;
    cursor: pointer;
    width: auto;
    min-width: 6.5rem;
    margin: 0 0.3rem;
}

.global-menu .menu-item:hover
{
    color: var(--text);
    background: var(--bg);
    transform: translateY(-0.15rem);
}

.global-menu .menu-item::before
{
    content: "";
    display: block;
    width: 100%;
    height: 2em;
    background: var(--text);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    order: 2;
}

.task-count-badge {
    position: absolute;
    top: -0.5rem;
    right: -1.8rem;
    z-index: 1;
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.global-menu .menu-item.new-task {
    border-color: var(--blue);
    background: var(--bg-strong);
    width: auto;
    min-width: 8rem;
    padding: 0.8em 1.2em;
}
.global-menu .menu-item.new-task::before {
    background: var(--blue);
    margin-bottom: 0.5rem;
}
.new-task-text {
    order: 3;
}

.global-menu .menu-item.tasks::before { -webkit-mask-image: url("../images/checklist.5d7051bfcb95.svg"); }
.global-menu .menu-item.backlog::before { -webkit-mask-image: url("../images/backlog.d4952ec53dd0.svg"); }
.global-menu .menu-item.task-views::before { -webkit-mask-image: url("../images/views.5515d42e14cd.svg"); }
.global-menu .menu-item.inbox::before { -webkit-mask-image: url("../images/tray.590517fba437.svg"); }
.global-menu .menu-item.outbox::before { -webkit-mask-image: url("../images/paperplane.fill.afaa8c51fa6c.svg"); }
.global-menu .menu-item.organization::before { -webkit-mask-image: url("../images/people.e2608e0707ff.svg"); }
.global-menu .menu-item.notes::before { -webkit-mask-image: url("../images/notes.99d5c0032284.svg"); }
.global-menu .menu-item.new-task::before { -webkit-mask-image: url("../images/new.752c61bef305.svg"); }

.global-menu .menu-item a
{
    text-decoration: none;
    order: 3;
    margin-top: 0.5rem;
}

.global-menu .menu-item a::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.page-width-container
{
    max-width: var(--page-width);
    margin-right: auto;
    margin-left: auto;
}

.button a,
.button-link
{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    background-color: var(--text);
    color: var(--bg-strong);
    border: var(--borderWidth) solid var(--bg-strong);
    font-weight: 700;
    padding: 0.5em 1em;
    border-radius: var(--borderRadius);
    text-align: center;
    box-sizing: border-box;
    min-height: 2.5em;
    line-height: 1.2;
}

.button a:hover,
.button-link:hover
{
    background-color: var(--text-strong);
}

.section-heading
{
    margin-top: 1em;
    margin-bottom: .5em;
}

/* Style for task detail page section heading with checkbox */
.section.task.details .section-heading {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.section.task.details .task-checkbox {
    margin: 0;
    /* Ensure the checkbox doesn't shrink */
    flex: 0 0 auto;
}

.section-heading.centered
{
    text-align: center;
}

.section
{
    margin: 1em auto;
    padding: 1em;
    border-radius: 1em;
    background: var(--bg-strong);
}

/* Changelog specific styles */
.section.changelog-entry {
    margin-bottom: 2em;
    border-left: 4px solid var(--blue);
}

.section > .section-heading:first-child
{
    margin-top: 0;
}

.section .title
{
    color: var(--text-subtle);
}

.details-list dt
{
    font-weight: 700;
}

.sidebar
{
    display: inline-block;
}

.avatar
{
    border-radius: 100%;
    height: 2em;
    width: 2em;
    display: inline-grid;
    place-items: center;
    text-transform: uppercase;
    font-weight: 600;
    background: var(--text-subtle);
    color: var(--bg-strong);
    border: 1px solid transparent;
}

.user-profile-container .avatar {
    height: 2.4em;
    width: 2.4em;
}

/* User role indicators */
.user-with-role {
    position: relative;
    display: inline-block;
}

/* Colored border/ring option */
.avatar-owner {
    border: 3px solid var(--yellow);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.avatar-assignee {
    border: 3px solid var(--blue);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* Badge indicator option */
.role-badge {
    position: absolute;
    bottom: -0.3em;
    right: -0.3em;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: var(--bg-strong);
    border: 2px solid var(--bg);
    font-size: 0.6em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.role-badge.owner {
    background-color: var(--yellow);
}

.role-badge.assignee {
    background-color: var(--blue);
}

/* Text label option */
.role-text {
    font-size: 0.8em;
    font-weight: normal;
    margin-left: 0.3em;
    padding: 0.1em 0.4em;
    border-radius: 0.5em;
}

.role-text.owner {
    color: var(--yellow);
}

.role-text.assignee {
    color: var(--blue);
}

.icon
{
    border-radius: 100%;
    height: 2em;
    width: 2em;
    display: inline-grid;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    color: transparent;
}

.username
{
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

.username a
{
    display: contents;
}

.inline-icon
{
    height: 1.25em;
    width: 1.25em;
    display: inline-grid;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--text);
    color: transparent;
}

.hidden
{
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.details
{
    display: grid;
    gap: 0.25em;
}

.details .title
{
    width: calc(100% - 4em);
    flex: 1 1 auto;
    align-self: center;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0.125em;
}

.details .description
{
    margin: 1em 0;
}

.details .description p
{
    margin-bottom: .5em;
}

.details .metadata
{
    font-size: 0.7em;
    border-top: 0.2rem dotted var(--bg-subtle);
    padding-top: 0.5em;
    display: flex;
    flex-flow: row wrap;
    gap: 0.5em 1.5em;
    justify-content: start;
    color: var(--text-subtle);
}

/* Project badge in task details */
.details .metadata .project .project-pill {
    font-size: 1em; /* Relative to metadata font size */
    white-space: normal;
    line-height: 1.2;
    max-width: 100%;
}

.metadata+.metadata
{
    border: 0;
    padding: 0;
    margin: 0;
}

.metadata .metadata-group
{
    display: flex;
    gap: 0.25em;
    align-items: center;
    flex-flow: row wrap;
    gap: 0 0.5em;
    justify-content: start;
}

.metadata .metadata-group dt
{
    font-weight: 600;
    color: var(--text-subtle);
}

.metadata .metadata-group dd
{
    display: contents;
}

.action-buttons
{
    display: flex;
    flex-flow: row wrap;
    gap: 0.125em;
    justify-content: start;
    font-size: 0.7em;
    margin: 0;
}

.action-buttons .control
{
    flex: 1 1 auto;
}

.action-buttons .control button
{
    width: 100%;
}

.details .metadata .projects .project
{
    padding: 0.125em 0.5em;
    color: var(--bg);
    background: var(--text);
    border-radius: 0.5em;
    font-weight: 500;
    display: inline-flex;
}

.details .metadata .projects .project a
{
    text-decoration: none;
    color: inherit;
}

.comments-list .comment
{
    margin: 1.5em 1em;
    display: flex;
    flex-flow: row wrap;
    gap: 0.5em .5em;
    align-items: center;
    justify-content: start;
    padding: .5em 1em;
    background: var(--bg-strong);
    border: 0.2rem solid var(--bg);
    border-radius: 0.5em;
}

.comments-list .comment:first-child
{
    margin-top: 1em;
}

.comments-list .comment.nocomment
{
    margin: 0.5em 1em;
    padding: 0.125em 1em;
}

.comments-list .comment dt
{
    display: none;
}

.comments-list .comment .body
{
    order: 4;
    flex: 1 0 100%;
    color: var(--text);
}

.comments-list .comment .author
{
    order: 1;
    flex: 0 1 auto;
    color: var(--text-subtle);
    font-size: .7em;
}

.comments-list .comment dd.author
{
    display: flex;
    gap: .5em;
    align-items: center;
}

.comments-list .comment .date
{
    order: 2;
    flex: 0 1 auto;
    color: var(--text-subtle);
    font-size: 0.7em;
}

.tag-cloud
{
    list-style: none;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    gap: 2rem;
    justify-content: start;
    align-items: center;
}

.tag-cloud .tag
{
    margin: 0;
    padding: 0.25em .5em;
    border-radius: 1em;
    color: var(--text);
    background-color: var(--bg-subtle);
    font-weight: 600;
}

.tag-cloud .tag a
{
    text-decoration: none;
    color: inherit;
}

.heading
{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
}

.details .heading
{
    flex-flow: row wrap;
}

.heading .action-buttons
{
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-self: start;
    justify-content: end;
}

.details .heading .action-buttons
{
    justify-content: start;
    flex: 0 0 100%;
}

.checkboxselectmultiple
{
    flex-flow: row wrap;
    gap: .5em;
    margin: 0.25em 0 1em 0;
}

.checkboxselectmultiple .checkbox
{
    margin: 0;
    padding: 0;
}

.checkboxselectmultiple .checkbox .control
{
    position: absolute;
    visibility: hidden;
}

.checkboxselectmultiple .checkbox .label
{
    padding: .25em .5em;
    border-radius: 1em;
    border: .2rem solid transparent;
    background: var(--bg-strong);
    color: var(--bg-subtle);
    font-size: .8em;
    font-weight: 600;
}

.checkboxselectmultiple .checkbox:has(input:checked) .label
{
    background: var(--bg-subtle);
    color: var(--text);
    border-color: var(--text-subtle);
}

.markdown
{
    overflow-wrap: anywhere;
}

.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
    margin: 1em 0 0.5em 0;
    font-weight: 600;
}

.markdown h1 { font-size: 1.4em; }
.markdown h2 { font-size: 1.3em; }
.markdown h3 { font-size: 1.2em; }
.markdown h4 { font-size: 1.1em; }
.markdown h5, .markdown h6 { font-size: 1em; }

.markdown ul :first-child,
.markdown ol :first-child,
.markdown blockquote :first-child,
.markdown :first-child
{
    margin-top: 0;
}

.markdown p
{
    margin: 1em 0;
}

.markdown em
{
    font-style: italic;
}

.markdown strong
{
    font-weight: 600;
}

.markdown ul,
.markdown ol

{
    list-style-position: outside;
    padding: 0;
}

.markdown li
{
    margin: 0.25em 1em;
}

.markdown blockquote
{
    margin: 1em;
    padding: 0.5em 1em;
    border-radius: 0.25em;
    border-left: 0.5em solid var(--bg-subtle);
    font-size: 0.85em;
}

.markdown blockquote *:first-child,
.markdown blockquote *:last-child
{
    margin: 0;
}

.markdown code
{
    font-size: 0.85em;
    border: 0.2rem solid var(--bg);
    border-radius: 0.25em;
    padding: 0.125em .25em;
}

.markdown pre
{
    background: var(--bg);
    color: var(--text-subtle);
    border: 0.2rem solid var(--bg-subtle);
    padding: 0.25em .5em;
    border-radius: 0.25em;
    margin: 1.5em 0;
    overflow-x: auto;
}

.markdown pre code
{
    border: 0;
    padding: 0;
    display: block;
    font-family: "Space Mono", monospace;
    font-variant-ligatures: none;
}

.markdown table {
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%;
}

.markdown table th {
    font-weight: 600;
    text-align: left;
    padding: 0.5em;
    border-bottom: 2px solid var(--bg-subtle);
}

.markdown table td {
    padding: 0.5em;
    border-bottom: 1px solid var(--bg-subtle);
}

.markdown table tr:last-child td {
    border-bottom: none;
}

.markdown .task-list-item {
  list-style-type: none !important;
}

.markdown .task-list-item input[type="checkbox"] {
  margin: 0 4px 0.25em -20px;
  vertical-align: middle;
}

.markdown .task-list-control {
  display: inline; /* Ensure label is inline incase theme sets it to block.*/
}

.markdown .task-list-control {
  position: relative;
  display: inline-block;
  color: #555;
  cursor: pointer;
}

.markdown .task-list-control input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1; /* Put the input behind the label so it doesn't overlay text */
}

.markdown .task-list-indicator {
  position: absolute;
  top: -8px;
  left: -18px;
  display: block;
  width:  14px;
  height: 14px;
  color: #eee;
  background-color: #eee;
  border-radius: .25rem;
}

.markdown .task-list-control input[type="checkbox"]:checked + .task-list-indicator::before {
  display: block;
  margin-top: -4px;
  margin-left: 2px;
  font-size: 16px;
  line-height: 1;
  content: "✔";
  color: #1EBB52;
}

.button.submit
{
}

.button.submit button
{
}

.button.add button
{
}

.button.archive button,
.button.unarchive button
{
}

.button.lock button,
.button.unlock button
{
}

.button.edit button
{
}

.button.watch button
{
    background-color: var(--text);
    color: var(--bg);
}

.button.watching button
{
    background-color: var(--neutral);
}

.messages
{
    display: flex;
    font-size: .7em;
    margin: 0;
}

.message
{
    padding: 1em 2em;
    border-radius: .5em;
    background: var(--bg-strong);
    border: 0.2rem solid var(--bg-subtle);
}

.messages.staging
{
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    justify-content: center;
}

.messages.staging .message
{
    border-color: var(--lightyellow);
    text-align: center;
    padding: .125em .5em;
}

body.staging::before,
body.staging::after
{
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 1rem;
    border-bottom: 0.1rem solid var(--bg-subtle);
    background: repeating-linear-gradient(
        45deg,
        var(--lightyellow),
        var(--lightyellow) 1rem,
        var(--black) 1rem,
        var(--black) 2rem
    );
}

body.staging::after
{
    top: unset;
    bottom: 0;
    border-top: 0.1rem solid var(--bg-subtle);
}

.search
{
    margin: 2em auto;
    padding: 1em 0;
}


.search .control-group
{
    flex-direction: column;
    align-items: center;
}

.search .control-group .label
{
    font-size: 1.5em;
    font-weight: 600;
}

.search .control-group .control input
{
    font-size: 1.5em;
    border-radius: 2em;
    border-width: 0.2rem;
    padding: 0.15em 0.5em 0.25em 1.75em;
    background-position: 0.5em center;
    background-repeat: no-repeat;
    background-size: 1em;
    background-image: url("/static/images/search.5a3c8d5b21e4.svg");
}


.search .control-group .meta
{
    order: 3;
}

.results
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: column;
    gap: 1em;
}

.result
{
    padding: 0; margin: 0;
    display: flex;
    flex-flow: row wrap;
    gap: 0 0.25em;
    align-items: center;
}

.result .title
{
    flex: 1 1 auto;
    font-weight: 600;
}

.result-meta
{
    flex: 0 0 100%;
    display:flex;
    flex-flow: row;
    padding-left: 1.5em;
    gap: 1em;
}

.result-meta .comments,
{
    display: flex;
    flex-flow: row wrap;
    gap: 0.25em;
}

.page-header
{
    margin: 1em auto;
}

.filter-bar {
    margin: 1em auto;
    padding: 0.5em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--bg-subtle);
    border-bottom: 1px solid var(--bg-subtle);
}

.filter-options {
    display: flex;
    gap: 1.5em;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.8em;
    color: var(--text-subtle);
    cursor: pointer;
}

.filter-option:hover {
    color: var(--text);
}

.filter-option form {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.filter-option .filter-link {
    cursor: pointer;
    text-decoration: none;
    padding: 0.25em 0.75em;
    border-radius: 0.5em;
    color: var(--text-subtle);
    background-color: var(--bg);
    transition: all 0.2s ease;
}

.filter-option .filter-link:hover {
    color: var(--text);
    background-color: var(--bg-subtle);
}

.filter-option .filter-link.active {
    color: var(--text);
    background-color: var(--bg-subtle);
    font-weight: 500;
}

/* Week range dropdown styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-caret {
    font-size: 0.7em;
    margin-left: 0.3em;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bg-strong);
    min-width: 120px;
    border-radius: 0.5em;
    box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
    z-index: 1;
    top: 100%;
    left: 0;
    margin-top: 0.3em;
}

.dropdown.active .dropdown-content {
    display: block;
}

.dropdown-item {
    color: var(--text-subtle);
    padding: 0.5em 1em;
    text-decoration: none;
    display: block;
    font-size: 0.9em;
    border-radius: 0.3em;
}

.dropdown-item:hover {
    background-color: var(--bg-subtle);
    color: var(--text);
}

.dropdown-item.active {
    background-color: var(--bg-subtle);
    color: var(--text);
    font-weight: 500;
}

.list.tasks
{
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    margin: 0 auto;
    padding: 0;
    justify-content: start;
}

.list-item.user
{
    list-style: none;
    display: flex;
    flex-flow: row;
    margin: 0 auto;
    padding: 0;
    justify-content: stretch;
    align-items: center;
    gap: .5em;
    width: 100%;
}

.list-item.user .control-group.button
{
    font-size: 80%;
}

.list-item.task
{
    list-style: none;
    padding: 0.4em 0.3em; /* Reduced vertical padding for higher density */
    border-bottom: 0.125rem solid var(--bg-subtle);
    width: 100%;

    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto;

    gap: .0625em .4em; /* Reduced gaps for tighter spacing */
    align-items: center;
}

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

.list-item.task .checkbox
{
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-left: 24px; /* Reduced padding for higher density */
    position: relative;
    z-index: 3; /* Ensure checkbox appears above the indicator */
    margin-right: 6px; /* Reduced margin for tighter spacing */
}

.list-item.task .metadata
{
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    min-width: 0;
}

/* Task header row - name and main metadata */
.list-item.task .metadata .task-header
{
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

.list-item.task .metadata .task-name
{
    display: flex;
    gap: .5em;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Task footer row - dates, links, and secondary metadata */
.list-item.task .metadata .task-footer
{
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

/* Blur effect for secure task titles - always blurred */
.task_secure .task_link,
.task-secure,
.task-title-secure {
    filter: blur(4px);
    transition: filter 0.1s ease-in-out;
}

.task_secure .task_link:hover,
.task_secure .task_link:focus,
.task-secure:hover,
.task-secure:focus,
.task-title-secure:hover {
    filter: blur(0);
}

/* Individual task metadata elements - now using flexible positioning */
.list-item.task .metadata .task-assignee
{
    display: flex;
    align-items: center;
    gap: 0.25em;
}

.list-item.task .metadata .task-project
{
    display: flex;
    gap: .25em;
    align-items: center;
    max-width: 180px;
    min-width: 0;
}

.list-item.task .metadata .task-date,
.list-item.task .metadata .task-recurrence
{
    display: flex;
    gap: .25em;
    align-items: center;
    white-space: nowrap;
}

.list-item.task .metadata .task-links
{
    display: flex;
    gap: .25em;
    align-items: center;
}



span.private,
span.blocked,
span.related,
span.depends
{
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    overflow: clip;
    -webkit-mask-image: url("../images/eye-private.717342e65598.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

span.private
{
    -webkit-mask-image: url("../images/eye-private.717342e65598.svg");
}

span.blocked
{
    -webkit-mask-image: url("../images/warning.0ce689f58712.svg");
}

span.depends
{
    -webkit-mask-image: url("../images/depends.13e3a0ad0d13.svg");
}

span.related
{
    -webkit-mask-image: url("../images/related.62a63760f4d9.svg");
}

.relationship-checkbox {
    flex-shrink: 0;
    margin-right: 10px;
}

.relationship-info {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.relationship-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.relationship-link {
    text-decoration: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.relationship-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    overflow: clip;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    flex-shrink: 0;
}

.relationship-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.relationship-actions {
    display: flex;
    gap: 0.5em;
    flex-shrink: 0;
}

.list.relations
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.list.relations .list-item.relationship
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 0.5em;
    padding: 0.5em 1em;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-subtle);
    border-radius: 4px;
}

.list-relations .list-item .relation
{
    display: inline-flex;
    align-items: center;
    flex-flow: row wrap;
}

.list-item.task .actions
{
    font-size: 80%;
    grid-row: 1 / span 2;
    grid-column: 7;
}

.list-item.task .actions .control
{
    display: flex;
    height: 100%;
}

.list-item.relationship .actions
{
    font-size: 80%;
    flex-shrink: 0;
    display: flex;
    gap: 0.5em;
}

.actions.control-group,
.actions .control-group,
.control-group.button
{
    margin: 0;
    display: flex;
    align-items: center;
}

.list-item.task .actions .button:not(.quick-actions) button
{
    padding: .25em .5em;
    text-transform: uppercase;
    display: flex;
    gap: .25em;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.list-item.task .actions .button:not(.quick-actions) button::before,
.list-item.task .actions .button:not(.quick-actions) a::before
{
    content: "";
    width: 1em;
    height: 1.3em;
    background: var(--bg-strong);
    display: inline-block;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
}

.list-item.task .actions .button.pin button::before { -webkit-mask-image: url("../images/pin.7d6e36774bdc.svg"); }

.list-item.task .actions .button.pin button {
    background-color: var(--yellow);
}

/* Quick actions dropdown for consolidated action buttons */
.list-item.task .actions .button.quick-actions {
    position: relative;
}

.list-item.task .actions .button.quick-actions .quick-actions-toggle {
    background: transparent !important;
}

.list-item.task .actions .button.quick-actions .quick-actions-toggle::before {
    content: "";
    width: 2.2em;
    height: 2.2em;
    background: var(--text);
    display: inline-block;
    -webkit-mask-image: url("../images/filemenu.and.selection.514323f31d98.svg");
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
}

.quick-actions-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--bg-subtle);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 180px;
    margin-top: 0.25rem;
}

.quick-actions-menu button {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem !important;
    border: none !important;
    background: transparent !important;
    color: #333 !important;
    text-align: left;
    cursor: pointer;
    font-size: 1.3rem !important;
    min-height: 48px; /* Touch-friendly minimum height */
    justify-content: flex-start;
    text-transform: none !important;
}

.quick-actions-menu button:hover {
    background-color: var(--bg-subtle) !important;
}

.quick-actions-menu button:first-child {
    border-radius: 0.5rem 0.5rem 0 0;
}

.quick-actions-menu button:last-child {
    border-radius: 0 0 0.5rem 0.5rem;
}

.quick-actions-menu button:only-child {
    border-radius: 0.5rem;
}

.quick-actions-menu .action-icon {
    width: 1.5rem;
    height: 1.5rem;
    background: #333;
    flex-shrink: 0;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
}

.quick-actions-menu .action-icon.edit { -webkit-mask-image: url("../images/edit.dfcbd799b8de.svg"); }
.quick-actions-menu .action-icon.pin { -webkit-mask-image: url("../images/pin.7d6e36774bdc.svg"); }
.quick-actions-menu .action-icon.snooze { -webkit-mask-image: url("../images/snooze.61e0227145e6.svg"); }
.quick-actions-menu .action-icon.backlog { -webkit-mask-image: url("../images/backlog.d4952ec53dd0.svg"); }
.quick-actions-menu .action-icon.grab { -webkit-mask-image: url("../images/pinch.82fb7b93731e.svg"); }
.quick-actions-menu .action-icon.move { -webkit-mask-image: url("../images/arrowshape.left.arrowshape.right.fill.119dd7b3ac1e.svg"); }
.quick-actions-menu .action-icon.nudge { -webkit-mask-image: url("../images/hand.tap.fill.a3a0a09057e6.svg"); }
.quick-actions-menu .action-icon.new-related { -webkit-mask-image: url("../images/plus.square.fill.d0938e7d92b9.svg"); }

/* Dark mode support for quick-actions dropdown */
@media (prefers-color-scheme: dark) {
    .list-item.task .actions .button.quick-actions .quick-actions-toggle::before {
        background: var(--text);
    }

    .quick-actions-menu {
        background: var(--bg);
        border-color: var(--bg-subtle);
    }

    .quick-actions-menu button {
        color: var(--text) !important;
    }

    .quick-actions-menu .action-icon {
        background: var(--text);
    }
}

/* Future week task styling - Reserve space for the indicator for ALL task items */
.list-item.task {
    position: relative;
}

/* Future week indicator - fixed position before the task element */
.list-item.task.future-week::before {
    content: "";
    position: absolute;
    left: 0; /* Aligned to the far left, regardless of indentation */
    top: 0;
    bottom: 0;
    width: 4px; /* Slightly wider for better visibility */
    background-color: var(--blue);
    z-index: 1; /* Lower z-index than task relationship vertical lines */
    border-radius: 2px; /* Rounded corners */
}

/* Month label for future week tasks in a different month */
.list-item.task.future-week.different-month::before {
    content: attr(data-month);
    position: absolute;
    left: 0; /* Aligned to the far left, regardless of indentation */
    top: 0;
    bottom: 0;
    width: 18px; /* Width for the vertical text container - increased to accommodate longer month names */
    background-color: var(--blue);
    color: white;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px; /* Rounded corners */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Subtle shadow for depth */

    /* Perfect centering */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* Vertical text approach */
    writing-mode: vertical-lr;
    transform: rotate(180deg);

    /* Add padding around the text */
    padding: 0.8em 0;
    box-sizing: border-box;

    /* Add letter spacing for more room between characters */
    letter-spacing: 1px;

    /* Make sure month indicator doesn't hide relationship lines */
    z-index: 2; /* Above the blue border but below the relationship lines */
}

/* Task and Project Details */

.section.task.details,
.section.project.details
{
    display: flex;
    flex-flow: column;
    gap: 1em;
}

.section.task .metadata,
.section.project .metadata
{
    display: flex;
    flex-flow: row wrap;
    gap: 1em;
    font-size: .8em;
    align-items: center;
    align-content: center;
    justify-content: start;
}

.section.task .metadata .id,
.section.project .metadata .id
{
    display: none;
}

.section.task .metadata dt,
.section.project .metadata dt
{
    font-weight: 600;
}


.task-detail .actions,
.actions.control-group.inline
{
    justify-content: start;
    align-items: center;
}

.task-detail .actions .control-group,
.actions.control-group.inline .control-group
{
    flex: 0 0 auto;
    margin: 0;
}

.hide
{
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

.history
{
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.history-item
{
    display: flex;
    flex-direction: column;
    gap: .25em;
}

.history-item .change
{
    font-weight: 600;
    order: 1;
}

.history-item .value
{
    padding: .25em 0 .25em .5em;
    margin: .25em 0 .25em 0;
    border-left: .5rem solid var(--bg-subtle);
    order: 3;
}
.history-item .timestamp
{
    color: var(--text-subtle);
    font-size: 0.8em;
    order: 2;
}

.list
{
    display: flex;
    flex-direction: column;
    gap: .25em;
    list-style-position: inside;
}

.button.cancel button
{
    color: var(--text-subtle);
    background-color: var(--bg-subtle);
}

.button.submit button
{
    background-color: var(--blue);
    color: var(--white);
}

.footer-menu
{
    display: flex;
    flex-flow: row wrap;
    gap: 1em;
    align-items: center;
    justify-content: center;
}

/* Task Comments Section Styles */
.section.task.comments {
  margin-top: 2rem;
}

.comments-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment-item {
  padding: 1rem;
  border: 1px solid var(--bg-subtle);
  border-radius: 6px;
  background-color: var(--bg-strong);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  color: var(--text-subtle);
  font-size: 0.9em;
}

.comment-content {
  margin-bottom: 0.75rem;
  white-space: pre-wrap;
}



















.comment-form-container {
  padding: 1rem;
  border: 1px solid var(--bg-subtle);
  border-radius: 6px;
  background-color: var(--bg-strong);
}

.comment-form-container h3 {
  margin-bottom: 1rem;
  font-size: 1.1em;
  font-weight: 600;
}

.comment-form .form-group {
  margin-bottom: 1rem;
}

.comment-form .form-help {
  color: var(--text-subtle);
  font-size: 0.8em;
  margin-top: 0.25rem;
}

.comment-form textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.5rem;
  border: 1px solid var(--bg-subtle);
  border-radius: 3px;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--sans-serif);
  font-size: 0.9em;
}

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

.no-comments {
  padding: 1rem;
  color: var(--text-subtle);
  font-style: italic;
  text-align: center;
}

/* Project grouping styles */
.project-group {
  margin-bottom: 1em; /* Reduced from 2em for higher density */
  border-radius: 0.5em;
}

.project-group .project-header {
  padding: 0.4em 1em; /* Reduced vertical padding */
  border-bottom: 1px solid var(--bg-subtle);
  margin-bottom: 0.3em; /* Reduced margin for tighter spacing */
}

.project-group .list.tasks {
  margin-top: 0;
}

/* From rl.css */
.task_due
{
    color: var(--text-strong);
    background: var(--bg-strong);
    font-size: 85%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15em .35em;
    border-radius: 1.5em;
    min-width: 1.8em;
    min-height: 1.8em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    font-weight: 600;
}

.task_due time
{
    display: contents;
}

.task_due::before
{
    display: none;
}

.task_due_soon
{
    color: var(--orange);
}

.task_past_due
{
    color: var(--red);
    font-weight: 600;
}

.task_due_soon::before
{
    display: none;
}

.task_past_due::before {
    display: none;
}

/* Badge-specific styles for notification bubbles */
.task-count-badge .task_due {
    color: white;
    background: var(--text-strong);
}

.task-count-badge .task_due_soon {
    color: black;
    background: var(--lightyellow);
}

.task-count-badge .task_past_due {
    color: white;
    background: var(--red);
}

@media (prefers-color-scheme: dark) {
    .task-count-badge .task_due:not(.task_due_soon):not(.task_past_due) {
        color: black;
    }
}

.task_relationship {
    background-color: var(--bg-strong);
    border: none;
    color: var(--text);
    padding: .25em .5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: .25em;
    cursor: pointer;
    border-radius: 1em;
}

.relationship_depends_on::before {
    content: "";
    aria-hidden: true;
}

.relationship_blocked_by::before {
    content: "";
    aria-hidden: true;
}

.task_blocked::before {
    content: "";
    aria-hidden: true;
}

.relationship_related::before {
    content: "";
    aria-hidden: true;
}

.task_link {
    font-weight: bold;
}

.task_closed {
    text-decoration: line-through;
}

.note_private::after {
    content: "PRIVATE";
    aria-hidden: true;
}

.group {
    display: inline-flex;
}

.list-item.group {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

.group-name {
    font-size: 1.1em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.group-details {
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
}

.group-members-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.member-avatar {
    display: inline-flex;
    margin-right: 0.25rem;
}

.more-members {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.4em;
    background-color: var(--bg-subtle);
    border-radius: 1em;
    font-size: 0.8em;
    font-weight: 500;
}

.group-pill {
    background-color: transparent;
    color: var(--blue);
    padding: 0.25em 0.75em;
    border-radius: 1em;
    border: 1.5px dotted var(--blue);
    font-weight: 500;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
}

.group-pill a {
    color: var(--blue);
    margin-left: 0.5em;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.group-pill a:hover {
    opacity: 1;
}

.project-badge {
    background-color: var(--bg-strong);
    color: var(--text);
    padding: 0.25em 0.75em;
    border-radius: 1em;
    font-weight: 500;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
}

.project-pill {
    padding: 0.2em 0.4em;
    border-radius: 0.3em;
    display: inline-flex;
    align-items: center;
    white-space: normal;
    margin-right: 0.5em;
    font-size: 0.85em;
    line-height: 1.2;
}

/* Project name - no more truncation with ellipsis */
.project-pill span.project-name {
    display: inline-block;
}

/* Milestone styles */
.milestone-list {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-bottom: 2em;
}

.milestone-item {
  border-radius: 0.3em;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.milestone-item.completed .milestone-header {
  opacity: 0.8;
}

.milestone-header {
  padding: 0.7em 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.milestone-name {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
}

.milestone-due {
  font-size: 0.85em;
  margin-left: 1em;
}

.milestone-actions {
  margin-left: 1em;
  display: flex;
  align-items: center;
}

.list-item.project {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

.project-name {
    font-size: 1.1em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-details {
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.project-description {
    margin-top: 0.5rem;
    font-style: italic;
    color: var(--text-subtle);
}

/* Toast container */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Adds space between toasts */
    z-index: 1000; /* Ensures it appears above other content */
}

/* Toast message */
.toast {
    min-width: 250px;
    padding: 1rem;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s ease-out, fadeOut 0.5s ease-in 4.5s forwards;
}

/* Different styles for message levels */
.toast.success {
    background-color: #4caf50; /* Green */
    color: white;
}

.toast.error {
    background-color: #f44336; /* Red */
    color: white;
}

.toast.warning {
    background-color: #ff9800; /* Orange */
    color: black;
}

.toast.info {
    background-color: #2196f3; /* Blue */
    color: white;
}

/* Animations for appearance and disappearance */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

li.htmx-swapping {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

#sentry-feedback {
  --inset: 0 auto auto 0;
}

/* Task priority styling */
.priority-100, .task_priority_100 .task-name {
    font-weight: bold;
    color: #c62828; /* Deeper red for critical */
    background-color: rgba(198, 40, 40, 0.1);
    border-left: 5px solid #c62828;
    padding-left: 5px;
}

.priority-90, .task_priority_90 .task-name {
    font-weight: bold;
    /* color: #d3c62f; */
    border-left: 5px solid #d3c62f;
    padding-left: 5px;
}

.priority-50, .task_priority_50 .task-name {
    font-weight: normal;
    border-left: 5px solid #7c20f3;
    padding-left: 5px;
}

.priority-10, .task_priority_10 .task-name {
    font-weight: normal;
    border-left: 5px solid #9e9e9e;
    padding-left: 5px;
}

/* Priority select styling */
.priority-select, .progress-select {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--subtle-border);
    background-color: var(--bg-surface-1);
    font-size: 16px;
    min-width: 200px;
}

/* Style the select on focus */
.priority-select:focus, .progress-select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Task progress styling */
.task_progress {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.5em;
    border-radius: 0.25em;
    font-size: 0.8em;
    font-weight: 500;
    margin-left: 0.5em;
}

.progress_0 {
    /* Not Started */
    background-color: #e0e0e0;
    color: #424242;
}

.progress_10 {
    /* In Progress */
    background-color: #bbdefb;
    color: #0d47a1;
}

.progress_20 {
    /* Waiting */
    background-color: #fff9c4;
    color: #ff6f00;
}

.progress_30 {
    /* Deferred */
    background-color: #e1bee7;
    color: #4a148c;
}

/* Tabs */
.tabs, .org-nav-container {
  margin: 1em 0 0 0;
}

.tab-nav, .org-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 -1px 0; /* Negative margin to overlap the border */
  position: relative;
  z-index: 2;
}

.tab-nav-item, .org-nav-item {
  padding: 0;
  margin-right: 0.5em;
  cursor: pointer;
  border: 1px solid var(--subtle-border);
  border-bottom: none;
  border-radius: 0.5em 0.5em 0 0;
  background-color: var(--bg-surface-1);
  color: var(--text-subtle);
  transition: all 0.2s ease;
}

.tab-nav-item a, .org-nav-item a {
  padding: 0.5em 1em;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.tab-nav-item .count, .org-nav-item .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.4em;
  background-color: var(--bg-subtle);
  border-radius: 1em;
  font-size: 0.8em;
  font-weight: 500;
}

.tab-nav-item.active .count, .org-nav-item.active .count {
  background-color: var(--blue);
  color: white;
}

.tab-nav-item:hover, .org-nav-item:hover {
  background-color: var(--bg-subtle);
}

.tab-nav-item.active, .org-nav-item.active {
  background-color: var(--bg-strong);
  color: var(--text);
  border-color: var(--subtle-border);
  border-bottom: 1px solid var(--bg-strong);
  position: relative;
  z-index: 3;
  font-weight: 500;
}

.tab-nav-item.active a, .org-nav-item.active a {
  color: var(--text);
  font-weight: 500;
}

.tab-content {
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.tab-content .section, .org-content-section {
  margin-top: 0;
  padding: 1.5em;
  background-color: var(--bg-strong);
  border: 1px solid var(--subtle-border);
  border-radius: 0 0.5em 0.5em 0.5em;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.section-header, .org-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1em;
  width: 100%;
}

.section-header .section-heading, .org-content-heading {
  margin: 0;
}

.section-header .actions, .org-content-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
  margin-left: auto;
}

/* Alpine.js utilities */
[x-cloak] {
  display: none !important;
}

.shortcuts-list {
    max-width: 500px;
}

.shortcuts-list h2 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.shortcuts-section {
    margin-bottom: 24px;
}

.shortcuts-section h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.shortcut-item .key {
    background: var(--bg);
    border: 1px solid var(--bg-subtle);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: monospace;
    font-variant-ligatures: none;
    margin-right: 16px;
    min-width: 30px;
    text-align: center;
}

.shortcut-item .description {
    flex: 1;
}

.close-button {
    justify-content: flex-end;
    margin-top: 20px;
}

/* API Token styles */
.api-token-info {
    margin-top: 1em;
    max-width: 600px;
}

.token-display {
    margin-top: 1.5em;
    background-color: var(--bg-surface-2);
    padding: 1.5em;
    border-radius: 0.5em;
    border: 1px solid var(--subtle-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.token-field {
    display: flex;
    align-items: center;
    margin-top: 0.5em;
}

.token-input {
    flex-grow: 1;
    padding: 0.75em;
    font-family: monospace;
    font-variant-ligatures: none;
    font-weight: 600;
    font-size: 1.1em;
    color: var(--text-strong);
    background-color: var(--bg-strong);
    border: 1px solid var(--blue);
    border-radius: 0.25em;
    margin-right: 0.5em;
    letter-spacing: 0.05em;
}

.show-token-btn, .copy-token-btn {
    padding: 0.75em 1em;
    border: none;
    background-color: var(--blue);
    color: white;
    font-weight: 500;
    border-radius: 0.25em;
    cursor: pointer;
    margin-left: 0.5em;
}

.show-token-btn:hover, .copy-token-btn:hover {
    background-color: var(--blue-dark);
}
.relationship .relation .resolved {
    color: var(--text-subtle);
    font-style: italic;
}

/* Indented related tasks - support for multiple levels */
.child-task,
.child-task-depends,
.child-task-blocked {
    margin-left: 2.5rem; /* Increased margin to make relationship indicators more visible */
    position: relative;
}

/* "Related to" tasks shouldn't show the connection lines but keep some minimal indent */
.child-task-related {
    margin-left: 0.5rem; /* Minimal indent without the connection lines */
    position: relative;
}

/* No relationship indicators - only indentation for child tasks */

/* Support for multiple nesting levels */
.level-0 {
    margin-left: 0rem;
}

.level-1 {
    margin-left: 2.5rem;
}

.level-2 {
    margin-left: 5rem;
}

.level-3 {
    margin-left: 7.5rem;
}

.level-4 {
    margin-left: 10rem;
}

.level-5 {
    margin-left: 12.5rem;
}

/* Task Views - Dropdown Menu Styles */
.menu-item.dropdown {
  position: relative;
}

.menu-item.dropdown .dropdown-toggle {
  cursor: pointer;
}

.menu-item.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--bg-strong);
  border: 1px solid var(--bg-subtle);
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  z-index: 100;
}

.menu-item.dropdown:hover .dropdown-menu {
  display: block;
}

.menu-item.dropdown .dropdown-menu a {
  display: block;
  padding: 8px 12px;
  color: var(--text);
  text-decoration: none;
}

.menu-item.dropdown .dropdown-menu a:hover {
  background-color: var(--bg);
}

/* Milestone styles for organization and project pages */

/* Section styling */
.milestones {
    margin-top: 1.5em;
    margin-bottom: 2em;
}

.milestone-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-top: 0.75em;
    margin-bottom: 1em;
}

.milestone-item {
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.milestone {
    padding: 0.4em 0.5em;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.milestone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25em;
    width: 100%;
}

.milestone-name {
    font-weight: 600;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 0.35em;
}

.milestone-icon {
    opacity: 0.85;
    vertical-align: middle;
}

.milestone-meta {
    display: flex;
    align-items: center;
    gap: 0.75em;
}

.milestone-due-date {
    font-size: 0.85em;
    color: var(--text-subtle);
}

.milestone-actions {
    margin-left: auto;
}

.milestone-actions .button-link.small {
    font-size: 0.8em;
    padding: 0.2em 0.5em;
    white-space: nowrap;
}

.milestone-details {
    font-size: 0.85em;
    margin-top: auto;
}

.milestone-due-date {
    margin-bottom: 0.3em;
    margin-left: auto;
    margin-right: 1em;
}

.milestone-project a {
    color: inherit;
    text-decoration: none;
    opacity: 0.9;
}

.milestone-project a:hover {
    text-decoration: underline;
}

.milestone-completed {
    opacity: 0.75;
}

.no-milestones {
    padding: 1em;
    color: var(--text-subtle);
    font-style: italic;
}

.milestone-actions {
    margin-top: 0.5em;
}

/* Project page specific styles */
.section.project .section-subheading {
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-size: 1.2em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5em;
}

/* Card grid styles - shared between groups and projects */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.card {
  background-color: var(--bg-strong);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 200px;
}

/* Hover effect removed as requested */
.card:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

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

.card-title {
  font-weight: 600;
  font-size: 1.1em;
  margin: 0;
  padding-right: 3.25rem;
  display: flex;
  align-items: center;
}

.card-title .project-pill {
  padding: 0.5em 0.8em;
  border-radius: 0.5em;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 0.9em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-color: var(--bg-subtle);
  transition: transform 0.2s ease;
  max-width: 180px;
}

/* Hover effect removed as requested */
.card-title .project-pill:hover {
  transform: none;
}

.card-title .project-link,
.card-title a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
}

.card-edit {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--text);
  -webkit-mask-image: url("../images/edit.dfcbd799b8de.svg");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.card-edit:hover {
  opacity: 1;
}

.card-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.card-members .avatar {
  width: 2.25em;
  height: 2.25em;
  transition: transform 0.2s ease;
}

/* Hover effect removed as requested */
.card-members .avatar:hover {
  transform: none;
}

.card-meta {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.85em;
  color: var(--text-subtle);
}

.card-description {
  margin: 0.75rem 0;
  font-size: 0.9em;
  color: var(--text-subtle);
  max-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-promote {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--text);
  -webkit-mask-image: url("../images/promote.3c29433ae746.svg");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.card-promote:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.user-role {
  display: inline-block;
  padding: 0.3em 0.6em;
  border-radius: 0.5em;
  font-size: 0.8em;
  font-weight: 500;
  background-color: var(--bg-subtle);
  color: var(--text-subtle);
  margin-top: 0.5em;
}

/* User role colors for the people/members list */
.role-label {
  font-size: 0.85em;
  opacity: 0.7;
}

.role-admin {
  background-color: rgba(234, 51, 41, 0.15);
  color: var(--red);
  border: 1px solid rgba(234, 51, 41, 0.3);
}

.role-member {
  background-color: rgba(12, 140, 254, 0.15);
  color: var(--blue);
  border: 1px solid rgba(12, 140, 254, 0.3);
}

.role-guest {
  background-color: rgba(235, 106, 44, 0.15);
  color: var(--orange);
  border: 1px solid rgba(235, 106, 44, 0.3);
}

.card-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.card-empty {
  color: var(--text-subtle);
  font-style: italic;
  font-size: 0.9em;
}

/* Group specific classes - for backward compatibility */
.group-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.group-card {
  background-color: var(--bg-strong);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 200px;
}

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

.group-card-title {
  font-weight: 600;
  font-size: 1.1em;
  margin: 0;
  padding-right: 3.25rem;
  display: flex;
  align-items: center;
}

.card-title .group-pill,
.group-card-title .group-pill {
  padding: 0.5em 0.8em;
  border-radius: 0.5em;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 0.9em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-color: transparent;
  border: 1.5px dotted var(--blue);
  color: var(--blue);
  transition: transform 0.2s ease;
}

.card-title .group-link,
.group-card-title .group-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.group-card-edit {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--text);
  -webkit-mask-image: url("../images/edit.dfcbd799b8de.svg");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.group-card-edit:hover {
  opacity: 1;
}

.group-card-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.group-card-members .avatar {
  width: 2.25em;
  height: 2.25em;
  transition: transform 0.2s ease;
}

.group-card-empty {
  color: var(--text-subtle);
  font-style: italic;
  font-size: 0.9em;
}

/* Groups list layout */
.groups-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.group-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.group-list-item:last-child {
  border-bottom: none;
}

.group-list-item .group-name {
  flex: 0 0 auto;
  margin-bottom: 0;
  margin-right: 2rem;
}

.group-list-item .group-members {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
  justify-content: flex-end;
}

.group-list-item .no-members {
  color: var(--text-subtle);
  font-style: italic;
  font-size: 0.9em;
}

.groups-list .empty-state {
  color: var(--text-subtle);
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

/* Projects list layout */
.projects-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.project-list-item {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle);
  gap: 0;
}

.project-list-item:last-child {
  border-bottom: none;
}

.project-list-item .project-title {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  min-height: 2em;
  margin-right: 1rem;
}

.project-list-item .project-pill {
  vertical-align: baseline;
}

.project-list-item .text-subtle {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.4;
}

.members-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project-list-item .project-group {
  font-size: 0.9em;
  display: flex;
  align-items: center;
  min-height: 2em;
  margin-bottom: 0;
  margin-right: 1rem;
}

.project-list-item .project-owner {
  display: flex;
  align-items: center;
  margin-right: 1.5rem;
  margin-left: 0.5rem;
}

.project-list-item .project-group .group-name {
  margin-bottom: 0;
}

.project-list-item .group {
  margin: 0;
}

.project-list-item .group-pill {
  margin: 0;
  font-size: 0.85em;
  padding: 0.2em 0.6em;
  vertical-align: baseline;
}

.project-list-item .project-members {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

.project-list-item .no-members {
  color: var(--text-subtle);
  font-style: italic;
  font-size: 0.9em;
}

.projects-list .empty-state {
  color: var(--text-subtle);
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

/* People list layout */
.people-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.person-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.person-list-item:last-child {
  border-bottom: none;
}

.person-list-item .person-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.person-list-item .person-avatar {
  flex: 0 0 auto;
}

.person-list-item .person-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.person-list-item .person-name {
  font-weight: 500;
}

.person-list-item .person-name a {
  text-decoration: none;
  color: var(--text);
}

.person-list-item .person-name a:hover {
  text-decoration: underline;
}

.person-list-item .person-pronouns {
  font-size: 0.9em;
  color: var(--text-subtle);
  font-style: italic;
}

.person-list-item .person-role {
  flex: 0 0 auto;
  margin-left: 1rem;
}

.person-list-item .person-actions {
  flex: 0 0 auto;
  margin-left: 1rem;
}

.person-list-item .person-promote, .person-list-item .person-demote {
  background-color: var(--bg-subtle);
  color: var(--text);
  padding: 0.4em 0.8em;
  border-radius: 0.3em;
  text-decoration: none;
  font-size: 0.85em;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.person-list-item .person-promote:hover, .person-list-item .person-demote:hover {
  background-color: var(--red);
  color: var(--text);
}

.people-list .empty-state {
  color: var(--text-subtle);
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

/* User Profile Container */

/* Organization Header with Logo */
.org-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.org-header-logo {
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  object-fit: contain;
}

/* Organization Settings Styles */
.settings-section {
  margin-bottom: 3rem;
}

.settings-title {
  /* font-size: 1.2rem; */
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.logo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.current-logo {
  flex: 0 0 15rem;
}

.logo-upload-form {
  flex: 1 1 25rem;
}

.org-logo-preview {
  max-width: 12rem;
  max-height: 12rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: var(--bg-strong);
  margin-top: 1rem;
}

/* Bell icon informee toggle */
.informee-toggle-container {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.bell-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.bell-icon:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Organization Settings Styles */
.settings-section {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bg-subtle);
}

.settings-section:last-child {
    border-bottom: none;
}

.settings-title {
    margin-bottom: 0.5rem;
    color: var(--text);
}

.settings-description {
    color: var(--text-subtle);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.form-row {
    display: flex;
    gap: 1rem;
    align-items: start;
}

.form-row .control-group {
    flex: 1;
}

.status {
    padding: 0.75rem;
    border-radius: var(--borderRadius);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.status.success {
    background-color: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.status.error {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

/* Link favicon styling */
.link-favicon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    width: 1.5em;
    height: 1.5em;
    border-radius: 3px;
    object-fit: contain;
}

.link-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    margin-right: 4px;
    background-color: var(--text);
    -webkit-mask-image: url("/static/images/link.39a013919cc8.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}



.paperclip-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    margin-right: 4px;
    background-color: var(--text);
    -webkit-mask-image: url("/static/images/paperclip.4c1952540f73.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}