/* Trello-clone styles. All sizing/colors come from Aura/Starpass tokens
   so dark/light parity stays consistent with the shell. */

/* FontAwesome <FontIcon> renders as a span; size it like Vaadin Icons by
   default so we can drop FA icons into buttons / nav slots without
   per-call sizing. The shell expects icons to fit inside ~16-22px slots. */
.fa-solid,
.fa-regular,
.fa-light,
.fa-brands {
    font-size: 1em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
}

vaadin-side-nav-item .fa-solid,
vaadin-side-nav-item .fa-regular,
vaadin-side-nav-item .fa-light {
    width: 18px;
    height: 18px;
    color: currentColor;
    font-size: 16px;
}

/* ==========================================================================
   Generic content scaffolding
   ========================================================================== */

.inbox-view,
.project-view,
.projects-grid-view,
.board-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.trello-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l) var(--vaadin-padding-l);
    overflow-y: auto;
}

/* ==========================================================================
   Inbox: quick-capture field + row list
   ========================================================================== */

.inbox-capture {
    display: flex;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-l);
    align-items: flex-end;
}

.inbox-capture-field {
    flex: 1;
}

.inbox-row {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--aura-surface-color);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.inbox-row:hover {
    border-color: var(--vaadin-border-color);
}

.inbox-row-icon {
    width: 18px;
    height: 18px;
    color: var(--vaadin-text-color-secondary);
    flex: none;
}

.inbox-row-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.inbox-row-title {
    font-weight: 600;
    color: var(--vaadin-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-row-snippet {
    font-size: var(--vaadin-font-size-xs);
    color: var(--vaadin-text-color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-row-chevron {
    width: 16px;
    height: 16px;
    color: var(--vaadin-text-color-secondary);
    flex: none;
}

.inbox-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-l);
    text-align: center;
    color: var(--vaadin-text-color-secondary);
}

/* All-inboxes overview at /inbox */
.inbox-sections {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-l);
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l) var(--vaadin-padding-l);
    overflow-y: auto;
}

.inbox-section {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-s);
    border: 1px solid transparent;
    border-radius: var(--vaadin-radius-l);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.inbox-section.drop-target-active {
    border-color: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
    background: color-mix(in srgb, var(--vaadin-color-accent, var(--vaadin-focus-ring-color)) 8%, transparent);
}

.inbox-section-header {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-s);
}

.inbox-section-header-link {
    cursor: pointer;
    border-radius: var(--vaadin-radius-m);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    margin: calc(-1 * var(--vaadin-padding-xs)) calc(-1 * var(--vaadin-padding-s));
    transition: background 0.12s ease;
}

.inbox-section-header-link:hover,
.inbox-section-header-link:focus-visible {
    background: color-mix(in srgb, currentColor 6%, transparent);
    outline: none;
}

.inbox-section-title {
    margin: 0;
    font-size: var(--vaadin-font-size-l);
    font-weight: 700;
    color: var(--vaadin-text-color);
}

.inbox-section-icon {
    color: var(--vaadin-text-color-secondary);
    display: flex;
    align-items: center;
}

.inbox-section-count {
    color: var(--vaadin-text-color-secondary);
    background: var(--vaadin-background-container);
    padding: 1px 8px;
    border-radius: var(--vaadin-radius-s);
    font-size: var(--vaadin-font-size-xs);
}

.inbox-section-rows {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
}

.inbox-section-empty {
    color: var(--vaadin-text-color-secondary);
    font-style: italic;
    font-size: var(--vaadin-font-size-s);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border: 1px dashed var(--vaadin-border-color);
    border-radius: var(--vaadin-radius-m);
}

.inbox-row.dragging {
    opacity: 0.45;
}

.inbox-empty-icon {
    width: 48px;
    height: 48px;
    opacity: 0.55;
}

.inbox-empty-title {
    font-size: var(--vaadin-font-size-l);
    color: var(--vaadin-text-color);
    font-weight: 600;
}

.inbox-empty-body {
    max-width: 32rem;
    line-height: 1.45;
}

/* On the projects landing page the empty state sits just below the title
   (top-aligned, centered horizontally) to match the teams page — it does
   NOT fill + vertically centre the way the inbox/archive views do. */
.projects-grid-view > .inbox-empty {
    flex: none;
    padding-block-start: var(--vaadin-padding-l);
}

/* ==========================================================================
   Projects landing grid + tile
   ========================================================================== */

.projects-grid {
    display: grid;
    gap: var(--vaadin-gap-m);
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l) var(--vaadin-padding-l);
    overflow-y: auto;
}

.project-tile {
    --project-color: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    background: var(--aura-surface-color);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
    position: relative;
    overflow: hidden;
}

.project-tile:hover {
    border-color: var(--vaadin-border-color);
}

.project-tile-color {
    height: 6px;
    width: 100%;
    background: var(--project-color);
    border-radius: var(--vaadin-radius-s);
    margin-bottom: var(--vaadin-gap-xs);
}

.project-tile-name {
    margin: 0;
    font-size: var(--vaadin-font-size-l);
    font-weight: 700;
    color: var(--vaadin-text-color);
}

.project-tile-description {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-s);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Color dot used in the projects sidenav. */
.project-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
    flex: none;
}

/* Custom project nav row — plain Div, styled to match SideNavItem
   visual density. Click navigates; drag is handled by the inner grip. */
.project-nav-item {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-xs);
    padding: 6px 10px;
    margin: 1px 0;
    border-radius: var(--vaadin-radius-m);
    cursor: pointer;
    color: var(--vaadin-text-color);
    font-size: var(--vaadin-font-size-s);
    transition: background 0.12s ease, color 0.12s ease;
}

.project-nav-item:hover {
    background: var(--vaadin-background-container);
}

.project-nav-item.active {
    background: color-mix(in srgb, var(--vaadin-color-accent, var(--vaadin-focus-ring-color)) 22%, var(--vaadin-background-container));
    color: var(--vaadin-text-color);
}

.project-nav-name {
    flex: 1;
    /* min-width: 0 lets the span shrink below its content width so the
       ellipsis actually kicks in — without it, flex children default to
       min-content and the long project name pushes the row wider than
       the rail. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-nav-item.dragging {
    opacity: 0.45;
}

.project-prefix {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Grip handle: drag affordance for reordering. Faint by default,
   readable on hover so users don't accidentally fight the link. */
.project-grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: color-mix(in srgb, var(--vaadin-text-color-secondary) 60%, transparent);
    cursor: grab;
}

.project-grip:active {
    cursor: grabbing;
}

.project-nav-item:hover .project-grip {
    color: var(--vaadin-text-color-secondary);
}

.project-nav-item.drop-project-over {
    box-shadow: inset 3px 0 0 0 var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
    background: color-mix(in srgb, var(--vaadin-color-accent, var(--vaadin-focus-ring-color)) 14%, transparent);
}

/* Project edit dialog */
.project-edit-section-label {
    font-size: var(--vaadin-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--vaadin-text-color-secondary);
    margin-top: var(--vaadin-gap-xs);
}

.project-edit-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vaadin-gap-xs);
}

.project-edit-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.project-edit-swatch:hover,
.project-edit-swatch:focus-visible {
    border-color: var(--vaadin-text-color);
    box-shadow: 0 0 0 2px var(--vaadin-background-container);
}

/* ==========================================================================
   Project page
   ========================================================================== */

.project-header {
    --project-color: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-l);
}

.project-header-color {
    width: 6px;
    height: 28px;
    background: var(--project-color);
    border-radius: var(--vaadin-radius-s);
}

.project-header-description {
    color: var(--vaadin-text-color-secondary);
    line-height: 1.4;
}

.project-inbox-button {
    flex: none;
}

/* Compact "Boards" chip row above the default-board kanban. */
.project-other-boards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vaadin-gap-xs);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-l) 0;
    margin-bottom: var(--vaadin-gap-xs);
}

.project-other-boards-label {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-right: var(--vaadin-gap-xs);
}

.project-board-chip {
    padding: 2px 10px;
    border-radius: var(--vaadin-radius-s);
    border: 1px solid var(--vaadin-border-color-secondary);
    color: var(--vaadin-text-color);
    cursor: pointer;
    font-size: var(--vaadin-font-size-xs);
    background: var(--vaadin-background-container);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.project-board-chip:hover,
.project-board-chip:focus-visible {
    border-color: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
}

.project-board-chip.active {
    background: color-mix(in srgb, var(--vaadin-color-accent, var(--vaadin-focus-ring-color)) 22%, var(--vaadin-background-container));
    border-color: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
    cursor: default;
}

.project-board-chip.add {
    background: transparent;
    border-style: dashed;
    color: var(--vaadin-text-color-secondary);
}

.project-board-chip.add:hover,
.project-board-chip.add:focus-visible {
    color: var(--vaadin-text-color);
    border-color: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
}

/* The kanban panel, when used inside the project page, sits below the
   header — make sure it grows to fill the remaining height. */
.kanban-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.kanban-panel .kanban-columns {
    flex: 1;
}

.kanban-back-row {
    padding: 0 var(--vaadin-padding-l);
}

.project-boards-section {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l);
    overflow-y: auto;
}

.project-boards-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vaadin-gap-s);
}

.project-boards-title {
    margin: 0;
    font-size: var(--vaadin-font-size-l);
    font-weight: 700;
}

.project-boards-grid {
    display: grid;
    gap: var(--vaadin-gap-s);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.board-tile {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    padding: var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    background: var(--aura-surface-color);
    cursor: pointer;
    transition: border-color 0.12s ease;
}

.board-tile:hover {
    border-color: var(--vaadin-border-color);
}

.board-tile-icon {
    width: 22px;
    height: 22px;
    color: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
}

.board-tile-name {
    font-weight: 600;
    color: var(--vaadin-text-color);
}

.board-tile-project {
    font-size: var(--vaadin-font-size-xs);
    color: var(--vaadin-text-color-secondary);
}

/* ==========================================================================
   Kanban board
   ========================================================================== */

.kanban-toolbar {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-l);
}

.kanban-columns {
    flex: 1;
    display: flex;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-l) var(--vaadin-padding-l);
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-start;
}

.kanban-column {
    display: flex;
    flex-direction: column;
    width: 18rem;
    min-width: 18rem;
    max-height: 100%;
    background: var(--aura-surface-color);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    overflow: hidden;
}

/* The inbox wrapper now lives as the first child of `.kanban-columns`
   so it scrolls alongside the lists. `.kanban-content` is just a
   flex container that hands its full size to the columns scroller —
   no padding or inter-child gap of its own. */
.kanban-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    padding: 0;
    gap: 0;
}

.kanban-content > .kanban-columns {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
}

.kanban-inbox-wrapper {
    flex: none;
    width: 18rem;
    /* Same translucent-card framing as the StarPass details panel so
       the two side panels read as siblings of the same shell. */
    background: color-mix(in srgb, var(--aura-surface-color) 70%, transparent);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    padding: var(--vaadin-padding-s);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--aura-shadow-s, 0 1px 4px -1px rgb(0 0 0 / 0.2));
    /* Slide-in from the left, matching the StarPass details panel's
       slide-in from the right. width animates the layout slot, the
       inner column transform handles the visual slide, opacity hides
       residual pixels mid-anim. */
    transition: width 0.22s ease, opacity 0.22s ease,
                padding 0.22s ease, margin 0.22s ease,
                border-color 0.22s ease, box-shadow 0.22s ease;
}

.board-view[data-inbox-hidden] .kanban-inbox-wrapper {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    /* Cancel the parent flex gap so no gap remains between the
       hidden wrapper and the first real list. The negative margin
       transitions smoothly with the rest of the slide-out. */
    margin-right: calc(-1 * var(--vaadin-gap-m));
    opacity: 0;
    border-color: transparent;
    box-shadow: none;
}

.kanban-inbox-wrapper .kanban-inbox-column {
    /* Wrapper provides the frame; column inside is borderless so the
       two don't double-frame each other.
       Pinning the inner column to a fixed width (instead of 100% of
       the wrapper) is what lets the hide animation read as a clean
       slide-out: the wrapper width shrinks to 0 while the inner
       content keeps its natural size and translates left. With width
       100% the content shrank with the wrapper, so the headline,
       button labels and rows visibly compressed mid-anim. */
    background: transparent;
    border: none;
    width: 17rem;
    min-width: 17rem;
    flex: none;
    transition: transform 0.22s ease;
}

.board-view[data-inbox-hidden] .kanban-inbox-wrapper .kanban-inbox-column {
    transform: translateX(-100%);
}


.kanban-inbox-header {
    color: var(--vaadin-text-color);
}

.kanban-inbox-icon {
    color: var(--vaadin-text-color-secondary);
    margin-right: 4px;
    flex: none;
}

.kanban-inbox-hint {
    color: var(--vaadin-text-color-secondary);
    font-style: italic;
    font-size: var(--vaadin-font-size-xs);
    text-align: center;
    padding: var(--vaadin-padding-m);
}

/* Archive wrapper — same framing pattern as the inbox wrapper, but
   hidden by default unless the board has data-archive-shown. */
.kanban-archive-wrapper {
    flex: none;
    width: 18rem;
    background: color-mix(in srgb, var(--aura-surface-color) 70%, transparent);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    padding: var(--vaadin-padding-s);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--aura-shadow-s, 0 1px 4px -1px rgb(0 0 0 / 0.2));
    transition: width 0.22s ease, opacity 0.22s ease,
                padding 0.22s ease, margin 0.22s ease,
                border-color 0.22s ease, box-shadow 0.22s ease;
    margin-left: var(--vaadin-gap-m);
}

.board-view:not([data-archive-shown]) .kanban-archive-wrapper {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: calc(-1 * var(--vaadin-gap-m));
    opacity: 0;
    border-color: transparent;
    box-shadow: none;
}

.kanban-archive-wrapper .kanban-archive-column {
    background: transparent;
    border: none;
    width: 17rem;
    min-width: 17rem;
    flex: none;
    transition: transform 0.22s ease;
}

.board-view:not([data-archive-shown]) .kanban-archive-wrapper .kanban-archive-column {
    transform: translateX(100%);
}

.kanban-archive-header {
    color: var(--vaadin-text-color);
}

.kanban-archive-icon {
    color: var(--vaadin-text-color-secondary);
    margin-right: 4px;
    flex: none;
}

.kanban-archived-card {
    opacity: 0.7;
}

/* Due date chip — used on inbox rows + kanban cards. Color-coded
   via attribute: overdue (red), today (amber), upcoming (neutral). */
.due-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: var(--vaadin-radius-s);
    font-size: var(--vaadin-font-size-xs);
    font-weight: 600;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: var(--vaadin-text-color-secondary);
    white-space: nowrap;
}

.due-chip[data-due="overdue"] {
    background: color-mix(in srgb, var(--vaadin-color-error, #ef4444) 18%, transparent);
    color: var(--vaadin-color-error, #ef4444);
}

.due-chip[data-due="today"] {
    background: color-mix(in srgb, #f59e0b 22%, transparent);
    color: #d97706;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-xs);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border-bottom: 1px solid var(--vaadin-border-color-secondary);
    cursor: grab;
}

.kanban-column.dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.kanban-column-grip {
    color: var(--vaadin-text-color-secondary);
    display: flex;
    align-items: center;
    flex: none;
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.kanban-column-grip vaadin-icon,
.kanban-column-grip [class*="fa-"] {
    width: 100%;
    height: 100%;
}

.kanban-column-title {
    font-weight: 700;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-column-count {
    font-size: var(--vaadin-font-size-xs);
    color: var(--vaadin-text-color-secondary);
    background: var(--vaadin-background-container);
    border-radius: var(--vaadin-radius-s);
    padding: 1px 8px;
}

.kanban-column-cards {
    flex: 1;
    overflow-y: auto;
    padding: var(--vaadin-padding-s);
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    min-height: 4rem;
}

.kanban-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
    cursor: grab;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.kanban-card:hover {
    border-color: var(--vaadin-border-color);
    box-shadow: 0 1px 4px -1px rgb(0 0 0 / 0.3);
}

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

/* DnD drop indicators on the board. Card-drop hover paints the entire
   column body; list-drop paints a left-edge insertion line so the user
   sees they're moving columns, not cards. */
.kanban-column.drop-card-over {
    box-shadow: inset 0 0 0 2px var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
    background: color-mix(in srgb, var(--vaadin-color-accent, var(--vaadin-focus-ring-color)) 8%, var(--aura-surface-color));
}

.kanban-column.drop-list-over {
    position: relative;
}

.kanban-column.drop-list-over::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
    pointer-events: none;
}

/* Insertion line above a card when another card is dragged over it. */
.kanban-card.drop-insert-before {
    position: relative;
}

.kanban-card.drop-insert-before::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -3px;
    height: 3px;
    border-radius: 2px;
    background: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
    pointer-events: none;
}

.kanban-card-title {
    font-weight: 500;
    color: var(--vaadin-text-color);
}

.kanban-card-snippet {
    font-size: var(--vaadin-font-size-xs);
    color: var(--vaadin-text-color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-column-footer {
    border-top: 1px solid var(--vaadin-border-color-secondary);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
}

.kanban-column-add {
    width: 100%;
    justify-content: flex-start;
    color: var(--vaadin-text-color-secondary);
}

.kanban-column-compose {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    padding: var(--vaadin-padding-xs);
}

.kanban-column-compose-actions {
    display: flex;
    gap: var(--vaadin-gap-xs);
}

/* ==========================================================================
   Card details panel (used by inbox + board)
   ========================================================================== */

.card-details {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-m);
    /* No horizontal overflow inside the slide-in pane — text wraps,
       inputs respect their parent width, long unbreakable strings
       (URLs in a description, opaque IDs, …) ellipsis instead of
       pushing the pane wider than its viewport. */
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.card-details-eyebrow {
    margin: 0;
    font-size: var(--vaadin-font-size-l);
    font-weight: 700;
}

.card-details-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-xs);
}

.card-details-meta-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.card-details-meta-value {
    color: var(--vaadin-text-color);
}

.card-details-actions {
    display: flex;
    align-items: center;
    /* Done/archive on the left, Delete on the right — space-between
       enforces the gap so the Delete affordance never sits next to
       the safe primary action. */
    justify-content: space-between;
    gap: var(--vaadin-gap-m);
    border-top: 1px solid var(--vaadin-border-color);
    padding-top: var(--vaadin-padding-s);
}

.card-details-location {
    display: flex;
    flex-direction: column;
}

.card-details-tags {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
}

.card-details-section-label {
    font-weight: 600;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-details-tags-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vaadin-gap-xs);
    align-items: center;
    min-height: 1.5em;
}

.card-details-tags-empty {
    color: var(--vaadin-text-color-secondary);
    font-style: italic;
    font-size: var(--vaadin-font-size-s);
}

.card-details-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 8px;
    background: color-mix(in srgb, var(--vaadin-color-accent, var(--vaadin-focus-ring-color)) 18%, transparent);
    border-radius: var(--vaadin-radius-s);
    font-size: var(--vaadin-font-size-xs);
}

.card-details-tag-chip vaadin-button {
    padding: 0;
    height: 18px;
    width: 18px;
    min-width: 18px;
    color: var(--vaadin-text-color-secondary);
}

/* Tag chips on the kanban card itself. Smaller and unobtrusive — full
   editing happens in the details panel. */
.kanban-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.kanban-card-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--vaadin-radius-s);
    background: color-mix(in srgb, var(--vaadin-color-accent, var(--vaadin-focus-ring-color)) 18%, transparent);
    color: var(--vaadin-text-color);
}

.dialog-helper {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-s);
}

/* ==========================================================================
   Command palette (Cmd+K overlay)
   ========================================================================== */

.command-palette-dialog {
    --palette-pad: var(--vaadin-padding-s);
}

.command-palette-dialog [part="overlay"] {
    background: color-mix(in srgb, var(--aura-surface-color) 90%, var(--vaadin-background-container));
    border: 1px solid var(--vaadin-border-color-secondary);
}

.palette-input {
    margin: 0 0 var(--vaadin-gap-s);
}

.palette-input-hotkey {
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-s);
    padding: 1px 6px;
    font-size: var(--vaadin-font-size-xs);
    color: var(--vaadin-text-color-secondary);
    font-family: ui-monospace, monospace;
}

.palette-results {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
    margin: 0 calc(-1 * var(--palette-pad));
    padding: 0 var(--palette-pad);
}

.palette-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--vaadin-text-color-secondary);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-s) 4px;
}

.palette-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-s);
    border-radius: var(--vaadin-radius-m);
    cursor: pointer;
    transition: background 0.1s ease;
}

/* In keyboard mode, hover styles are suppressed — only `.selected`
   highlights, so the user's arrow-key selection stays unambiguous
   even if the cursor is parked over a different result. */
.palette-results[data-mode="mouse"] .palette-item:hover,
.palette-item.selected {
    background: color-mix(in srgb, var(--vaadin-color-accent, var(--vaadin-focus-ring-color)) 14%, transparent);
}

.palette-item-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vaadin-text-color-secondary);
}

.palette-item-title {
    color: var(--vaadin-text-color);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette-item-meta {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.palette-item-create {
    background: color-mix(in srgb, var(--vaadin-color-accent, var(--vaadin-focus-ring-color)) 18%, transparent);
}

.palette-results[data-mode="mouse"] .palette-item-create:hover,
.palette-item-create.selected {
    background: color-mix(in srgb, var(--vaadin-color-accent, var(--vaadin-focus-ring-color)) 28%, transparent);
}

.palette-empty {
    text-align: center;
    color: var(--vaadin-text-color-secondary);
    padding: var(--vaadin-padding-l);
}

.palette-footer {
    display: flex;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-s) 0 0;
    border-top: 1px solid var(--vaadin-border-color-secondary);
    margin-top: var(--vaadin-gap-s);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-xs);
}

.palette-kbd-row {
    display: inline-flex;
    align-items: center;
    gap: var(--vaadin-gap-xs);
}

.palette-kbd {
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-s);
    padding: 0 6px;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    background: var(--vaadin-background-container);
}

.palette-kbd-label {
    color: var(--vaadin-text-color-secondary);
}

/* Smooth horizontal scroll on tablets where the column rail can overflow. */
@media (max-width: 899px) {
    .kanban-column {
        width: 16rem;
        min-width: 16rem;
    }
}

@media (max-width: 599px) {
    .project-boards-grid,
    .projects-grid {
        grid-template-columns: 1fr;
    }

    /* The kanban toolbar (Hide inbox / Add list / Show archive) packs
       three labelled buttons into a single flex row. Below 600px that
       overflows the viewport so the trailing button gets clipped —
       wrap onto a second line and tighten gaps so each button stays
       fully visible. */
    .kanban-toolbar {
        flex-wrap: wrap;
        row-gap: var(--vaadin-gap-xs);
        padding-inline: var(--vaadin-padding-m);
    }

    /* Boards-row chips already wrap (flex-wrap above), but the row
       itself was clipping its trailing chip on the right edge — tighter
       horizontal padding to match the wrapped toolbar above. */
    .project-other-boards {
        padding-inline: var(--vaadin-padding-m);
    }

    /* Command palette keyboard hints wrap into 3+ lines on phones
       because each hint is `<kbd> <span>label</span>`. Stack the
       label under the kbd so each hint is its own column and the
       four-hint row collapses gracefully into two rows of two. */
    .palette-footer {
        flex-wrap: wrap;
        row-gap: var(--vaadin-gap-xs);
    }
}

/* ==========================================================================
   Notifications view
   ========================================================================== */
.notifications-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.notif-sections {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-l);
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l) var(--vaadin-padding-l);
    overflow-y: auto;
}

.notif-section {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
}

.notif-section-label {
    margin: 0;
    color: var(--vaadin-text-color);
    font-size: var(--vaadin-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.notif-row {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--aura-surface-color);
}

.notif-row.unread {
    border-color: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
    background: color-mix(in srgb, var(--vaadin-color-accent, var(--vaadin-focus-ring-color)) 8%, var(--aura-surface-color));
}

.notif-row-main {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-s);
    flex: 1;
    min-width: 0;
}

.notif-row-icon {
    color: var(--vaadin-text-color-secondary);
    width: 16px;
    height: 16px;
    flex: none;
}

.notif-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.notif-row-title {
    font-weight: 600;
    color: var(--vaadin-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-row-meta {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-xs);
}

.notif-row-actions {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-xs);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.notif-snooze-row {
    display: flex;
    gap: 2px;
}

.notif-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-l);
    text-align: center;
    color: var(--vaadin-text-color-secondary);
}

.notif-empty-icon {
    width: 48px;
    height: 48px;
    opacity: 0.55;
}

.notif-empty-title {
    font-size: var(--vaadin-font-size-l);
    color: var(--vaadin-text-color);
    font-weight: 600;
}

.notif-empty-body {
    max-width: 32rem;
    line-height: 1.45;
}

/* Card details: due-date row layout. */
.card-details-due {
    display: flex;
    align-items: end;
    gap: var(--vaadin-gap-s);
}
.card-details-due > vaadin-date-time-picker { flex: 1; }


/* ==========================================================================
   Settings page
   ========================================================================== */
.settings-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.settings-sections {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-l);
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l) var(--vaadin-padding-l);
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    background: var(--aura-surface-color);
}

.settings-section-title {
    margin: 0;
    font-size: var(--vaadin-font-size-l);
    font-weight: 600;
    color: var(--vaadin-text-color);
}

.settings-section-hint {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-s);
    line-height: 1.4;
    margin-bottom: var(--vaadin-gap-xs);
}

/* Vaadin Checkbox renders the box + label inline-flex by default —
   leave it that way (don't force display: block, that wraps the
   label below the box at narrow widths). margin:0 just kills the
   default block margins so the column gap stays consistent. */
.settings-section vaadin-checkbox {
    margin: 0;
}

.settings-section vaadin-text-field,
.settings-section vaadin-email-field,
.settings-section vaadin-multi-select-combo-box {
    width: 100%;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--vaadin-padding-s);
}

/* ==========================================================================
   My account view — same card-section structure as Settings so the two
   configuration pages feel like siblings. The class names are namespaced
   under .account- to stay decoupled (a future settings refactor mustn't
   silently restyle the account page).
   ========================================================================== */
.account-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.account-sections {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-l);
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l) var(--vaadin-padding-l);
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}

.account-section {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    background: var(--aura-surface-color);
}

.account-section-title {
    margin: 0;
    font-size: var(--vaadin-font-size-l);
    font-weight: 600;
    color: var(--vaadin-text-color);
}

.account-section-hint {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-s);
    line-height: 1.4;
    margin-bottom: var(--vaadin-gap-xs);
}

.account-section vaadin-text-field,
.account-section vaadin-password-field {
    width: 100%;
}

.account-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--vaadin-padding-s);
}

/* Identity rows — one provider per line, with the human-friendly
   provider label on the left and the opaque external id (sub /
   github user id / etc.) muted on the right. */
.account-identities {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
}

.account-identity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

.account-identity-provider {
    font-weight: 600;
    color: var(--vaadin-text-color);
}

.account-identity-external {
    color: var(--vaadin-text-color-secondary);
    font-family: var(--vaadin-font-family-mono, monospace);
    font-size: var(--vaadin-font-size-s);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-identities-empty {
    color: var(--vaadin-text-color-secondary);
    font-style: italic;
    padding: var(--vaadin-padding-s);
}

/* ==========================================================================
   Teams view — list of teams the user belongs to. Each team is a
   surface card with a header (name + description + add-member action)
   and a roster of members. Same card-section visual language as
   Settings / Account so all three configuration pages feel like
   siblings.
   ========================================================================== */
.teams-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.teams-list {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-l);
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l) var(--vaadin-padding-l);
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}

.team-card {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    background: var(--aura-surface-color);
}

.team-card-header {
    align-items: flex-start;
}

.team-card-title {
    margin: 0;
    font-size: var(--vaadin-font-size-l);
    font-weight: 600;
    color: var(--vaadin-text-color);
}

.team-card-description {
    margin: 0;
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-s);
    line-height: 1.4;
}

.team-roster {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-xs);
    margin-top: var(--vaadin-gap-xs);
}

.team-member-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vaadin-gap-s);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    background: var(--vaadin-background-container);
}

.team-member-name {
    font-weight: 600;
    color: var(--vaadin-text-color);
}

.team-member-email {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-s);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-role-badge {
    flex: none;
    font-size: var(--vaadin-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   Login + signup — standalone pages (no shell layout). Center the
   card vertically + horizontally over the page background so the
   form is the focal point.
   ========================================================================== */
.login-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: var(--vaadin-padding-l);
    box-sizing: border-box;
}

.login-card {
    display: flex;
    flex-direction: column;
    gap: var(--vaadin-gap-m);
    padding: var(--vaadin-padding-xl, 2rem);
    width: 100%;
    max-width: 26rem;
    background: var(--aura-surface-color);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.login-card h1 {
    margin: 0;
    font-size: var(--vaadin-font-size-xxl, 1.75rem);
    font-weight: 700;
    color: var(--vaadin-text-color);
}

.login-card p {
    margin: 0;
    color: var(--vaadin-text-color-secondary);
}

.login-card vaadin-login-form {
    --vaadin-login-form-padding: 0;
    background: transparent;
}

.login-or-separator {
    display: flex;
    align-items: center;
    gap: var(--vaadin-gap-s);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-or-separator::before,
.login-or-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--vaadin-border-color-secondary);
}

.login-oauth-link {
    display: block;
    text-align: center;
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-m);
    color: var(--vaadin-text-color);
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.login-oauth-link:hover,
.login-oauth-link:focus-visible {
    background: var(--vaadin-background-container);
    border-color: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
}

.login-signup-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--vaadin-gap-xs);
    padding-top: var(--vaadin-padding-s);
    border-top: 1px solid var(--vaadin-border-color-secondary);
    margin-top: var(--vaadin-gap-xs);
    color: var(--vaadin-text-color-secondary);
    font-size: var(--vaadin-font-size-s);
}

.login-signup-link a {
    color: var(--vaadin-color-accent, var(--vaadin-focus-ring-color));
    text-decoration: none;
    font-weight: 600;
}

.login-signup-link a:hover,
.login-signup-link a:focus-visible {
    text-decoration: underline;
}

/* Inline error banner above the signup form fields. */
.signup-error {
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    border-radius: var(--vaadin-radius-m);
    background: color-mix(in srgb, var(--vaadin-color-error, crimson) 12%, transparent);
    color: var(--vaadin-color-error, crimson);
    font-size: var(--vaadin-font-size-s);
    line-height: 1.4;
}

/* Command palette card-hit metadata. The meta row sits below the title
   and stacks small chips for due date, tags, and an "Archived" badge. */
.palette-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.palette-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: var(--vaadin-font-size-xs);
    color: var(--vaadin-text-color-secondary);
}

.palette-item-meta-text {
    color: var(--vaadin-text-color-secondary);
}

.palette-item-meta-archived {
    padding: 1px 6px;
    border-radius: var(--vaadin-radius-s);
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}

.palette-item-meta-tag {
    color: var(--vaadin-text-color-secondary);
}

.palette-item-archived {
    opacity: 0.75;
}

/* Archive list — the dedicated /archive page renders rows via
   InboxCardRow, which already has its own styling. The wrapper just
   gets a sensible max-width and scrolls its overflow. */
.archive-view .archive-list {
    flex: 1;
    padding: var(--vaadin-padding-m) var(--vaadin-padding-l);
    width: 100%;
}

.kanban-archive-list {
    flex: 1;
    min-height: 0;
}

/* CardDetails header — eyebrow on the left, "open full page" icon on
   the right. Inside the slide-in details panel and the dedicated
   /cards/:id page. */
.card-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vaadin-gap-s);
}

.card-details-open-page {
    margin: 0;
}

/* Full-page card view — give the embedded CardDetails a sensible
   max-width so the form doesn't stretch across a wide screen. */
.card-page-view {
    overflow-y: auto;
}

.card-page-body {
    padding: var(--vaadin-padding-l);
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;
}