/* ============================================================================
   Proposal app styles on top of DesignKit (css/designkit.css).

   The DesignKit export used here ships theme tokens and buttons but not the list-page
   pieces, so they live here, modeled on Time Entry's list pages. Class names follow the
   DesignKit.Blazor package's (app-table, app-cell-title, ...) so moving to the package later
   is mostly deleting this file. Colors come only from --bs-* / --app-* tokens, so Light,
   Dark and Brand all work. Pills are app-pill-* to avoid the legacy .pill in app.css.
   ============================================================================ */

/* ---- Page header ------------------------------------------------------------- */
.app-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding-top: 0.25rem;
    margin-bottom: 1.25rem;
}

    /* Title block takes the room and wraps its text, so the actions stay top-right
       instead of dropping under a long subtitle. */
    .app-page-header > :first-child {
        flex: 1 1 20rem;
        min-width: 0;
    }

    .app-page-header > :last-child:not(:first-child) {
        flex-shrink: 0;
    }

.app-page-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.app-page-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--app-muted);
}

/* Sizing for toolbar/header buttons (btn-ink / btn-quiet carry the colors). */
.app-btn {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ---- Toolbar (search, filters, count) ----------------------------------------- */
.app-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.app-toolbar-end {
    margin-left: auto;
}

.app-search {
    position: relative;
    flex: 1 1 16rem;
    max-width: 24rem;
}

    .app-search svg {
        position: absolute;
        left: 0.65rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--app-faint);
        pointer-events: none;
    }

    .app-search .form-control {
        padding-left: 2rem;
    }

.app-toolbar .form-control,
.app-toolbar .form-select {
    height: 34px;
    font-size: 0.85rem;
    border-color: var(--app-hairline);
    border-radius: 8px;
}

.app-toolbar .form-select {
    width: auto;
}

.app-count {
    font-size: 0.8rem;
    color: var(--app-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Table ------------------------------------------------------------------- */
.app-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: var(--bs-body-color);
}

    .app-table thead th {
        padding: 0.9rem 0.75rem 0.7rem 0;
        border-bottom: 1px solid var(--app-hairline);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--app-muted);
        white-space: nowrap;
        text-align: left;
    }

    /* A little inset at both ends so text doesn't sit on the zebra stripe's edge. */
    .app-table th:first-child,
    .app-table td:first-child {
        padding-left: 0.5rem;
    }

    .app-table th:last-child,
    .app-table td:last-child {
        padding-right: 0.5rem;
    }

.app-row td {
    padding: 0.95rem 0.75rem 0.95rem 0;
    border-bottom: 1px solid var(--app-hairline);
    vertical-align: top;
}

.app-row:nth-child(even) td {
    background: var(--app-zebra);
}

.app-row:hover td {
    background: var(--app-row-hover);
}

.app-cell-title {
    display: block;
    font-weight: 500;
    line-height: 1.35;
    color: var(--bs-emphasis-color);
}

a.app-cell-title {
    text-decoration: none;
}

    a.app-cell-title:hover {
        color: var(--app-primary-text);
        text-decoration: underline;
    }

.app-cell-sub {
    margin-top: 0.1rem;
    font-size: 0.75rem;
    color: var(--app-muted);
    overflow-wrap: anywhere;
}

/* Long text: three lines, then "…" (full text in the title tooltip). */
.app-cell-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1.45;
}

.app-cell-muted {
    color: var(--app-muted);
}

/* Row actions: the flex layout lives on a div inside the <td>, never on the <td> itself
   (that drops the cell out of the table's fixed column widths). */
.app-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.app-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    /* Same hover as the other neutral buttons (2026-11-06, see "Button states" in app.css). */
    .app-row-btn:hover:not(:disabled) {
        background: color-mix(in srgb, var(--app-accent) 20%, var(--color-surface));
        border-color: var(--app-accent);
        color: var(--color-text);
    }

    .app-row-btn:disabled {
        opacity: 0.6;
    }

.app-row-btn-danger {
    color: var(--app-danger-text);
}

    .app-row-btn-danger:hover:not(:disabled) {
        background: color-mix(in srgb, var(--app-danger-text) 12%, var(--color-surface));
        border-color: var(--app-danger-text);
        color: var(--app-danger-text);
    }

/* ---- Tags (keywords) ---------------------------------------------------------- */
.app-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.app-tag {
    max-width: 100%;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: var(--app-subtle);
    color: var(--app-neutral-text);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-tag-more {
    background: transparent;
    color: var(--app-faint);
    padding-left: 0.15rem;
}

/* ---- Pills (status) ------------------------------------------------------------ */
.app-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.app-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.app-pill-positive {
    background: var(--app-positive-bg);
    color: var(--app-positive-text);
}

.app-pill-neutral {
    background: var(--app-neutral-bg);
    color: var(--app-neutral-text);
}

.app-pill-draft {
    background: var(--app-draft-bg);
    color: var(--app-draft-text);
}

    .app-pill-draft .app-pill-dot {
        background: var(--app-draft-dot);
    }

.app-pill-danger {
    background: color-mix(in srgb, var(--app-danger) 12%, transparent);
    color: var(--app-danger-text);
}

.app-pill-info {
    background: color-mix(in srgb, var(--app-accent) 12%, transparent);
    color: var(--app-accent);
}

/* ---- Upload: drop zone, page sections, progress strip, log ----------------------- */
.app-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 2rem 1rem;
    border: 1.5px dashed var(--app-hairline);
    border-radius: 10px;
    background: var(--app-subtle);
    color: var(--app-muted);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .app-dropzone:hover {
        border-color: var(--app-accent);
    }

    .app-dropzone.is-disabled {
        opacity: 0.6;
        pointer-events: none;
    }

    /* The real file input covers the whole zone, so drag-and-drop lands on it. */
    .app-dropzone input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

.app-dropzone-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.app-dropzone-hint {
    font-size: 0.8rem;
}

.app-section {
    margin-top: 2rem;
}

.app-section-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.app-section-title {
    margin: 0 0.25rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

/* Summary figures in one soft strip (Time Entry's week activity). */
.app-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin-bottom: 0.75rem;
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    background: var(--app-subtle);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-emphasis-color);
}

.app-stat-label {
    margin-right: 0.2rem;
    font-weight: 400;
    color: var(--app-muted);
}

    .app-stat-label::after {
        content: ":";
    }

.app-stat-danger {
    color: var(--app-danger-text);
}

.app-note {
    font-size: 0.8rem;
    color: var(--app-muted);
}

.app-log {
    max-height: 18rem;
    overflow: auto;
    margin: 0;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--app-hairline);
    border-radius: 8px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.75rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---- Loading / empty states, pager -------------------------------------------- */
.app-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 0;
    color: var(--app-muted);
    font-size: 0.9rem;
}

.app-state-empty {
    flex-direction: column;
    gap: 0.25rem;
}

    .app-state-empty strong {
        color: var(--bs-emphasis-color);
        font-weight: 600;
    }

.app-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding-top: 1rem;
}

@media (max-width: 767.98px) {
    .app-search {
        max-width: none;
    }

    .app-toolbar-end {
        margin-left: 0;
    }
}