/* Add-to-Trip modal — shared across all place-card surfaces */
.att-overlay {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.att-sheet {
    width: 100%; max-width: 440px; max-height: 80vh;
    background: #0f1723; border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
    color: #fff; box-shadow: 0 16px 48px rgba(0,0,0,.45);
    display: flex; flex-direction: column; overflow: hidden;
}
@media (max-width: 639px) {
    .att-overlay { padding: 0; align-items: flex-end; }
    .att-sheet { max-width: 100%; max-height: 85vh; border-radius: 16px 16px 0 0; }
}
.att-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.att-title { font-size: .95rem; font-weight: 600; color: #fff; }
.att-place { color: #E05A2B; }
.att-close {
    background: transparent; border: 0; color: rgba(255,255,255,.55);
    font-size: 1.4rem; line-height: 1; padding: 2px 8px; border-radius: 8px;
    cursor: pointer;
}
.att-close:hover { background: rgba(255,255,255,.08); color: #fff; }

.att-list {
    flex: 1 1 auto; overflow-y: auto; padding: 8px;
}
.att-loading, .att-empty {
    padding: 24px 18px; text-align: center;
    color: rgba(255,255,255,.55); font-size: .875rem;
}
.att-empty p { margin-bottom: 12px; }
.att-create-btn, .att-manage {
    display: inline-flex; align-items: center; gap: 6px;
    background: #E05A2B; color: #fff; font-weight: 600; font-size: .85rem;
    padding: 8px 14px; border-radius: 10px; text-decoration: none;
    transition: background .15s;
}
.att-create-btn:hover { background: #c44d22; }

.att-row {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; text-align: left; background: transparent; border: 0;
    padding: 12px 14px; border-radius: 10px; cursor: pointer;
    color: #fff; transition: background .15s;
}
.att-row:hover { background: rgba(255,255,255,.06); }
.att-row.is-busy { opacity: .5; pointer-events: none; }
.att-row-name { font-weight: 600; font-size: .92rem; }
.att-row-sub  { font-size: .78rem; color: rgba(255,255,255,.5); }

.att-footer {
    padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.06);
    display: flex; justify-content: flex-end;
}
.att-footer .att-manage {
    background: transparent; color: rgba(255,255,255,.6);
    padding: 6px 10px; font-size: .8rem; font-weight: 500;
}
.att-footer .att-manage:hover { color: #fff; }

/* Light mode */
html:not(.dark) .att-overlay { background: rgba(0,0,0,.45); }
html:not(.dark) .att-sheet   { background: #fff; color: #111827; border-color: rgba(0,0,0,.08); }
html:not(.dark) .att-header  { border-bottom-color: rgba(0,0,0,.06); }
html:not(.dark) .att-title   { color: #111827; }
html:not(.dark) .att-close   { color: rgba(0,0,0,.5); }
html:not(.dark) .att-close:hover { background: rgba(0,0,0,.06); color: #111827; }
html:not(.dark) .att-row     { color: #111827; }
html:not(.dark) .att-row:hover { background: rgba(0,0,0,.04); }
html:not(.dark) .att-row-sub { color: rgba(0,0,0,.5); }
html:not(.dark) .att-loading, html:not(.dark) .att-empty { color: rgba(0,0,0,.55); }
html:not(.dark) .att-footer  { border-top-color: rgba(0,0,0,.06); }
html:not(.dark) .att-footer .att-manage { color: rgba(0,0,0,.55); }
html:not(.dark) .att-footer .att-manage:hover { color: #111827; }