/* SPRU Projects 0.1.10 */

.projects-panel {
    font-family: Scada, Verdana, Helvetica, Arial, sans-serif;
    font-size: 15px;
}

/* The forum style sets .panel p to 1.2em; keep Projects text at the requested 15px. */
.panel.projects-panel p {
    font-size: 15px !important;
}

.panel.projects-panel h2 {
    font-size: 16px !important;
}

.projects-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.projects-heading h2,
.projects-heading p {
    margin-top: 0;
}

.projects-heading-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    justify-content: flex-start;
    flex: 0 0 220px;
}

/* Filters */
.projects-filters {
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid #a19fb1;
    border-radius: 3px;
}

.projects-filter-section {
    display: flex;
    gap: 8px 12px;
    align-items: flex-start;
    margin: 4px 0;
}

.projects-country-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.projects-filter-link,
.projects-alphabet a {
    text-decoration: none;
}

.projects-filter-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
}

.projects-filter-link img,
.projects-country-link img,
.projects-country-checkboxes img,
.projects-bar-label img {
    width: 16px;
    height: auto;
    vertical-align: middle;
}

.projects-filter-count {
    color: #888;
    opacity: 1;
    font-size: .88em;
}

.projects-filter-link.is-active,
.projects-alphabet a.is-active {
    color: red !important;
    font-weight: bold;
    border-color: red !important;
}

.projects-filter-secondary {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
}

.projects-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

.projects-alphabet a,
.projects-alphabet span {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 2px 7px !important;
    border: 1px solid #a19fb1;
    border-radius: 3px;
    font-family: Play, Verdana, sans-serif;
    font-size: 17px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
}

.projects-alphabet a {
    cursor: pointer;
}

.projects-alphabet span.disabled {
    color: #aaa;
    opacity: .45;
}

.projects-active-filters {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
}

#projectsClearFilters {
    margin-left: 8px;
}

.projects-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 2px 5px 2px 0;
    padding: 2px 4px 2px 8px;
    border: 1px solid rgba(81, 102, 133, .22);
    border-radius: 12px;
    background: rgba(81, 102, 133, .07);
    vertical-align: middle;
}

.projects-active-chip-label {
    line-height: 18px;
}

.projects-active-chip-remove {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #777;
    font: inherit;
    font-size: 16px;
    line-height: 18px;
    cursor: pointer;
}

.projects-active-chip-remove:hover,
.projects-active-chip-remove:focus {
    background: rgba(231, 109, 22, .11);
    color: #e76d16;
    outline: none;
}

/* Search and result count live directly between filters and table. */
.projects-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 8px 0 10px;
}

.projects-summary {
    margin: 0;
    white-space: nowrap;
}

.projects-toolbar-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.projects-search-wrapper {
    position: relative;
    width: 300px;
    max-width: 100%;
}

.projects-search-wrapper input {
    box-sizing: border-box;
    width: 100%;
    height: 26px;
    padding: 2px 28px 2px 7px;
    border: 1px solid #b4bac0;
    border-radius: 0;
    outline: 0;
    font-family: Scada, Verdana, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: normal;
}

.projects-search-clear {
    display: none;
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    padding: 0 3px;
    border: 0;
    background: transparent;
    color: #888;
    opacity: .65;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.projects-search-clear:hover {
    opacity: 1;
}

.projects-search-wrapper.has-value .projects-search-clear {
    display: block;
}

.projects-mobile-sort {
    display: none;
}

/* Keep the dynamic part of the page tall enough that the footer does not jump
   upward when a filter leaves only one or two records. Unlike the old 110dvh
   rule this reserve applies only to the results area. */
.projects-results {
    min-height: 85dvh;
}

/* Public/manage tables */
.projects-table {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: separate;
    border-spacing: 1px;
    background-color: #dfdfdf;
    font-size: 15px;
}

.projects-table th,
.projects-table td {
    padding: 5px 10px;
    text-align: left;
    vertical-align: middle !important;
    line-height: 1.25;
}

.projects-table th {
    cursor: pointer;
    background-color: #f1f1f1;
}

.projects-table th:hover {
    background-color: #e9e9e9;
}

.projects-table th.sorttable_nosort {
    cursor: default;
}

.projects-table td {
    background-color: #fff;
}

/* Filtering uses the HTML hidden state, but the mobile layout explicitly sets
   project rows to display:grid. Some browsers let that author rule win over
   the hidden presentation, so keep an explicit filtering class as a reliable
   cross-layout fallback. */
.projects-table tr.projects-row-filtered,
.projects-table tr[hidden] {
    display: none !important;
}

.projects-table tbody tr.projects-row-unidentified td {
    background-color: #fff5f2;
}

.projects-table tbody tr:hover td,
.projects-table tbody tr.projects-row-unidentified:hover td {
    background-color: #f1f1f1;
}

.projects-table th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort)::after {
    content: " \25B4\25BE";
    opacity: .45;
}

.projects-table td a {
    color: #3f5db5;
    font-weight: normal;
}

.projects-table td a:hover,
.projects-table td a:focus {
    color: #e76d16;
}

.projects-project-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: bold !important;
}

.projects-project-link--plain {
    color: inherit;
    font-weight: bold;
}

.projects-artist-link,
.projects-country-link {
    font-weight: normal !important;
}

.projects-country-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.projects-project-image {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: middle;
    transition: transform .3s ease;
}

.projects-project-image:hover {
    position: relative;
    z-index: 10;
    transform: scale(1.9);
    box-shadow: 3px 3px 22px 0 rgba(128, 128, 128, 1);
}

.projects-search-aliases {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.projects-no-results {
    padding: 24px 10px;
    text-align: center;
    font-style: italic;
}

.projects-row-archived td {
    opacity: .58;
}

/* Management table actions */
.projects-actions-cell {
    white-space: nowrap;
}

.projects-actions-cell form {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
}

.projects-open-link {
    margin-left: 6px;
}

.projects-icon-action,
.projects-actions-cell button.projects-icon-action {
    display: inline-block;
    box-sizing: border-box;
    min-width: 26px;
    padding: 2px 5px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #3f5db5;
    font: inherit;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.projects-icon-action:hover,
.projects-icon-action:focus,
.projects-actions-cell button.projects-icon-action:hover,
.projects-actions-cell button.projects-icon-action:focus {
    color: #e76d16;
    background: transparent;
}

/* Compact custom editor. It deliberately does not use fieldset/dl/dt/dd so
   global phpBB form layout rules cannot shift it 41% to the right. */
.projects-editor-panel {
    font-size: 13px;
}

.projects-edit-form {
    width: 100%;
    max-width: 900px;
    margin-top: 8px;
    font-family: Scada, Verdana, Helvetica, Arial, sans-serif;
    font-size: 13px;
}

.projects-form-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 8px 14px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #e1e1e1;
}

.projects-form-row--countries {
    align-items: start;
}

.projects-form-label {
    min-width: 0;
    text-align: left;
    line-height: 1.25;
}

.projects-form-label label,
.projects-form-label-title {
    display: block;
    padding: 0;
    font-size: 13px;
    font-weight: bold;
}

.projects-form-label > span:not(.projects-form-label-title) {
    display: block;
    margin-top: 2px;
    color: #777;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.25;
}

.projects-form-control {
    width: 100%;
    max-width: 620px;
    min-width: 0;
}

.projects-edit-form input[type="text"],
.projects-edit-form input[type="url"],
.projects-edit-form input[type="number"],
.projects-edit-form textarea,
.projects-edit-form select {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: 1px solid #b4bac0;
    border-radius: 2px;
    background: #fff;
    box-shadow: inset 0 7px 5px -6px #e7e7e7;
    color: inherit;
    font-family: Scada, Verdana, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: normal;
}

.projects-edit-form input[type="text"],
.projects-edit-form input[type="url"],
.projects-edit-form input[type="number"],
.projects-edit-form select {
    height: 26px;
    padding: 3px 6px;
}

.projects-edit-form textarea {
    min-height: 62px;
    padding: 5px 6px;
    resize: vertical;
    line-height: 1.3;
}

.projects-form-control--short {
    max-width: 260px;
}

.projects-form-control--id {
    max-width: 120px;
}

.projects-country-checkboxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(145px, 1fr));
    gap: 3px 10px;
    max-width: 620px;
}

.projects-country-checkboxes label,
.projects-status-label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 1px 0;
    white-space: normal;
    font-size: 13px;
}

.projects-country-checkboxes input,
.projects-status-label input {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

.projects-extra-country {
    display: grid;
    grid-template-columns: 72px minmax(180px, 1fr);
    gap: 7px;
}

.projects-image-preview {
    margin-top: 7px;
}

.projects-image-preview img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 3px;
}

.projects-form-actions {
    display: flex;
    gap: 7px;
    margin-top: 12px;
    padding-left: 194px;
}

.projects-form-button {
    display: inline-flex;
    box-sizing: border-box;
    height: 26px;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid #b4bac0;
    border-radius: 2px;
    background: #f7f7f7;
    color: #3f5db5;
    box-shadow: none;
    font-family: Scada, Verdana, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
}

.projects-form-button--primary {
    font-weight: bold;
}

.projects-form-button:hover,
.projects-form-button:focus {
    border-color: #999;
    background: #eee;
    color: #e76d16;
    text-decoration: none;
}

/* Statistics */
.projects-stat-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 10px;
    margin: 14px 0 22px;
}

.projects-stat-cards > div {
    padding: 12px;
    border: 1px solid #d4d8dc;
    border-radius: 4px;
    background: rgba(255,255,255,.5);
}

.projects-stat-cards strong {
    display: block;
    font-size: 24px;
}

.projects-stat-cards span {
    font-size: .9em;
    opacity: .78;
}

.projects-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.projects-bar-row {
    display: grid;
    grid-template-columns: minmax(130px, 38%) 1fr 42px;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    text-decoration: none;
}

.projects-bar-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.projects-bar-track {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: rgba(0,0,0,.08);
    overflow: hidden;
}

.projects-bar-track > span {
    display: block;
    height: 100%;
    background: currentColor;
    opacity: .42;
}

@media (max-width: 900px) {
    .projects-heading {
        display: block;
    }

    .projects-heading-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin: 8px 0 12px;
    }

    .projects-heading-cta {
        height: 100%;
    }

    .projects-filter-section {
        display: block;
    }

    .projects-filter-section > strong {
        display: block;
        margin-bottom: 4px;
    }

    .projects-country-list {
        max-height: 138px;
        overflow: auto;
        align-content: flex-start;
    }

    .projects-toolbar {
        align-items: flex-end;
    }

    .projects-toolbar-controls {
        align-items: flex-end;
    }

    .projects-mobile-sort {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 150px;
        font-size: 12px;
    }

    .projects-mobile-sort select {
        height: 26px;
        font-family: Scada, Verdana, sans-serif;
        font-size: 13px;
    }

    .projects-table,
    .projects-table tbody,
    .projects-table tr,
    .projects-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .projects-table {
        border: 0;
        background: transparent;
    }

    .projects-table thead {
        display: none;
    }

    .projects-table tr {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 10px;
        padding: 8px 6px;
        border-bottom: 1px solid #d5d8dc;
        background: transparent;
    }

    .projects-table tr.projects-row-unidentified {
        background: #fff5f2;
    }

    .projects-table tr:hover {
        background: #f1f1f1;
    }

    .projects-table td,
    .projects-table tbody tr.projects-row-unidentified td,
    .projects-table tbody tr:hover td,
    .projects-table tbody tr.projects-row-unidentified:hover td {
        padding: 0;
        line-height: 1.35;
        background: transparent;
    }

    .projects-table td:first-child {
        grid-column: 1 / -1;
        margin-bottom: 2px;
    }

    .projects-project-image {
        width: 42px;
        height: 42px;
        border-radius: 4px;
    }

    .projects-project-image:hover {
        transform: scale(1.5);
    }

    .projects-project-link {
        gap: 9px;
        font-size: 15px;
    }

    .projects-table td:nth-child(2) {
        grid-column: 1;
        padding-left: 51px;
    }

    .projects-table td:nth-child(3) {
        grid-column: 2;
        text-align: right;
    }

    .projects-country-name,
    .projects-comma {
        display: none;
    }

    .projects-country-link {
        gap: 2px;
    }

    .projects-country-link img {
        width: 18px;
    }

    .projects-manage-table tr {
        display: block;
    }

    .projects-manage-table td {
        margin: 3px 0;
    }

    .projects-manage-table td:first-child {
        margin-bottom: 6px;
    }

    .projects-actions-cell {
        margin-top: 7px !important;
        white-space: normal;
    }

    .projects-form-row {
        grid-template-columns: 155px minmax(0, 1fr);
    }

    .projects-form-actions {
        padding-left: 169px;
    }

    .projects-country-checkboxes {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }

    .projects-stat-cards {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .projects-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .projects-toolbar {
        display: block;
    }

    .projects-summary {
        margin-bottom: 7px;
        white-space: normal;
    }

    .projects-toolbar-controls {
        display: block;
    }

    .projects-search-wrapper {
        width: 100%;
    }

    .projects-mobile-sort {
        margin-top: 7px;
    }

    .projects-heading-cta {
        gap: 6px;
        padding: 6px 7px;
    }

    .projects-heading-cta-icon {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
        font-size: 15px;
    }

    .projects-heading-cta-copy strong {
        font-size: 13px;
    }

    .projects-heading-cta-copy small {
        font-size: 10px;
    }

    .projects-results {
        min-height: 75dvh;
    }

    .projects-form-row {
        grid-template-columns: 1fr;
        gap: 4px;
        align-items: start;
        padding: 7px 0;
    }

    .projects-form-control,
    .projects-form-control--short,
    .projects-form-control--id {
        max-width: none;
    }

    .projects-form-actions {
        padding-left: 0;
    }

    .projects-country-checkboxes {
        grid-template-columns: repeat(2, minmax(115px, 1fr));
    }

    .projects-extra-country {
        grid-template-columns: 65px 1fr;
    }

    .projects-stat-cards {
        grid-template-columns: 1fr 1fr;
    }

    .projects-bar-row {
        grid-template-columns: minmax(105px, 42%) 1fr 32px;
    }
}

@media (max-width: 420px) {
    .projects-country-checkboxes {
        grid-template-columns: 1fr;
    }

    .projects-heading-cta-copy small {
        display: none;
    }
}

/* 0.1.5 refinements */
.projects-heading-copy {
    min-width: 0;
}

.projects-intro-block {
    margin-top: 4px;
    margin-bottom: 10px;
}

.panel.projects-panel p.projects-intro {
    margin: 3px 0 10px !important;
    font-size: 15px !important;
    line-height: 1.35;
}

.panel.projects-panel p.projects-info-line {
    margin: 1px 0 !important;
    font-size: 15px !important;
    line-height: 1.35;
}

.projects-info-line .fa-info-circle {
    margin-right: 4px;
    color: #516685;
}

/* Shared call-to-action style for Statistics and Manage Projects. */
.projects-heading-cta {
    display: flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #a19fb1;
    border-radius: 4px;
    background: linear-gradient(to bottom, #fafafd, #eef0f5);
    color: #3f5db5;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.projects-heading-cta:hover,
.projects-heading-cta:focus {
    border-color: #e76d16;
    color: #e76d16;
    background: #f7f7f7;
    text-decoration: none;
}

.projects-heading-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: rgba(81, 102, 133, .09);
    font-size: 18px;
}

.projects-heading-cta-copy {
    display: block;
    min-width: 0;
    line-height: 1.15;
}

.projects-heading-cta-copy strong,
.projects-heading-cta-copy small {
    display: block;
}

.projects-heading-cta-copy strong {
    font-size: 14px;
}

.projects-heading-cta-copy small {
    margin-top: 2px;
    color: #777;
    font-size: 11px;
    font-weight: normal;
}

/* A block-level flex box does not create the baseline/descender gap that an
   inline-flex box leaves inside a table cell. */
.projects-project-link {
    display: flex;
    width: fit-content;
    max-width: 100%;
    line-height: 1;
}

.projects-project-link > span {
    line-height: 1.2;
}

.projects-country-link {
    vertical-align: middle;
    line-height: 1;
}

.projects-country-link .projects-country-name {
    line-height: 1.2;
}

.projects-toolbar-controls {
    justify-content: flex-start;
}

.projects-summary {
    margin-left: auto;
    text-align: right;
}

@media (max-width: 620px) {
    .projects-toolbar-controls {
        display: block;
    }

    .projects-summary {
        margin: 7px 0 0;
        text-align: right;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .projects-heading-cta-copy small {
        display: none;
    }
}

/* 0.1.5 ordered artist/country editor */
.projects-form-row--entities {
    align-items: start;
}

.projects-entity-list {
    width: 100%;
    max-width: 620px;
    margin-bottom: 6px;
}

.projects-entity-list:empty {
    margin-bottom: 0;
}

.projects-entity-item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    margin: 0 0 3px;
    padding: 2px 4px;
    border: 1px solid #d5d9dd;
    border-radius: 3px;
    background: #fafafa;
    transition: border-color .12s ease, background-color .12s ease, opacity .12s ease;
}

.projects-entity-item.is-dragging {
    opacity: .45;
}

.projects-entity-item.is-drag-over {
    border-color: #3f5db5;
    background: #f2f5fb;
}

.projects-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a8a8a;
    cursor: grab;
    font-size: 12px;
}

.projects-entity-item:active .projects-drag-handle {
    cursor: grabbing;
}

.projects-entity-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.25;
}

.projects-country-entity .projects-entity-name {
    display: flex;
    align-items: center;
    gap: 5px;
}

.projects-country-entity .projects-entity-name img {
    width: 16px;
    height: auto;
    flex: 0 0 auto;
}

.projects-entity-actions {
    display: flex;
    align-items: center;
    gap: 1px;
}

.projects-entity-actions button {
    box-sizing: border-box;
    width: 24px;
    height: 23px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    box-shadow: none;
    color: #75808e;
    font: inherit;
    font-size: 11px;
    line-height: 23px;
    text-align: center;
    cursor: pointer;
}

.projects-entity-actions button:hover,
.projects-entity-actions button:focus {
    background: #eceff3;
    color: #e76d16;
}

.projects-autocomplete {
    position: relative;
    max-width: 620px;
}

.projects-autocomplete-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #aeb4bb;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}

.projects-autocomplete-option {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 5px 7px;
    border: 0;
    border-bottom: 1px solid #ededed;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: #333;
    font-family: Scada, Verdana, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.projects-autocomplete-option:last-child {
    border-bottom: 0;
}

.projects-autocomplete-option:hover,
.projects-autocomplete-option:focus {
    background: #f1f1f1;
    color: #3f5db5;
}

.projects-autocomplete-create {
    color: #3f5db5;
    font-weight: bold;
}

.projects-country-autocomplete {
    max-width: 420px;
}

.projects-country-autocomplete-option {
    display: flex;
    align-items: center;
    gap: 7px;
}

.projects-country-autocomplete-option img {
    width: 16px;
    height: auto;
    flex: 0 0 auto;
}

.projects-entity-order-note {
    margin-top: 4px;
    color: #777;
    font-size: 11px;
    line-height: 1.25;
}

.projects-entity-order-note .fa {
    margin-right: 3px;
}

@media (max-width: 620px) {
    .projects-entity-item {
        grid-template-columns: 18px minmax(0, 1fr) auto;
    }

    .projects-country-autocomplete {
        max-width: none;
    }
}


/* 0.1.8: third heading CTA and per-filter removal chips. */
@media (min-width: 901px) {
    .projects-heading-actions {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "stats"
            "discuss";
    }

    .projects-heading-actions--can-manage {
        grid-template-areas:
            "stats"
            "manage"
            "discuss";
    }

    .projects-stats-cta { grid-area: stats; }
    .projects-manage-cta { grid-area: manage; }
    .projects-discuss-cta { grid-area: discuss; }
}

@media (max-width: 900px) {
    .projects-heading-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "stats discuss";
    }

    .projects-heading-actions--can-manage {
        grid-template-areas:
            "stats manage"
            "discuss discuss";
    }

    .projects-stats-cta { grid-area: stats; }
    .projects-manage-cta { grid-area: manage; }
    .projects-discuss-cta { grid-area: discuss; }
}


/* 0.1.10: compact mobile project cards.
   The thumbnail is taken out of normal flow and anchored to the left of the
   whole row. Project title and artists then share the same text column, so the
   artist line no longer starts below the bottom edge of the thumbnail. */
@media (max-width: 900px) {
    .projects-table tr {
        gap: 1px 10px;
    }

    .projects-table td:first-child {
        margin-bottom: 0;
    }

    /* The old mobile rule indented every artist cell, even rows without an
       image. Reset it and apply the indent only when this row has a thumbnail. */
    .projects-table td:nth-child(2) {
        padding-left: 0;
        align-self: center;
    }

    .projects-table td:nth-child(3) {
        align-self: center;
    }

    .projects-table tr.projects-row--has-image {
        min-height: 58px;
    }

    .projects-table tr.projects-row--has-image td:first-child,
    .projects-table tr.projects-row--has-image td:nth-child(2) {
        padding-left: 51px;
    }

    .projects-table tr.projects-row--has-image .projects-project-image {
        position: absolute;
        top: 8px;
        left: 6px;
        margin: 0;
    }

    .projects-table tr.projects-row--has-image .projects-project-link {
        gap: 0;
    }
}