/* Menu → Manage Spots (spots-manage.js), in the viewer's modal overlay
   (#dc-spots-overlay in index.html). Rows, buttons and fields are Settings →
   Vessel's (boats.css), the type icons the map's spot markers (spots-layer.css). The
   same size as the spot picker (.dc-cc-list) on desktop, full screen on a phone. */

.dc-acct-modal.dc-sm-modal {
    display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; box-sizing: border-box;
    height: min(640px, calc(100vh - 48px)); height: min(640px, calc(100dvh - 48px));
}
.dc-sm-modal .dc-acct-title { flex: none; margin-bottom: 12px; }
/* "+" in the title bar: My Forecasts' round "+" (.dc-fc-new), left of the close and level with it. */
.dc-sm-modal { position: relative; }
.dc-fc-new.dc-sm-add { position: absolute; top: 12px; right: 42px; }
.dc-fc-new.dc-sm-add:disabled { opacity: .45; cursor: default; box-shadow: none; }
.dc-fc-new.dc-sm-add:disabled:hover { background: #FF8504; }
/* Add mode: the title bar says so ("Add Spot" / "Import Spots"), a back chevron replaces the "+". */
.dc-sm-back {
    display: none; position: absolute; top: 12px; left: 20px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px;
    align-items: center; justify-content: center; background: none; color: rgba(255,255,255,.7); cursor: pointer;
}
.dc-sm-back svg { width: 20px; height: 20px; }
.dc-sm-back:hover { color: #fff; background: rgba(255,255,255,.08); }
.dc-sm-back:focus-visible { outline: 2px solid #FF8504; outline-offset: 1px; }
#dc-spots-overlay.dc-sm-adding .dc-sm-back { display: flex; }
#dc-spots-overlay.dc-sm-adding .dc-sm-add { display: none; }
/* Adding has the view to itself. */
#dc-spots-overlay.dc-sm-adding .dc-sm-tabs,
#dc-spots-overlay.dc-sm-adding .dc-sm-searchbar,
#dc-spots-overlay.dc-sm-adding .dc-sm-list { display: none; }
/* The add-method chooser (AddSpotV2View). */
.dc-sm-chooser { display: flex; flex-direction: column; gap: 8px; }
.dc-sm-chooser-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 2px 2px 2px; }
.dc-sm-chooser-title { font-size: 15px; font-weight: 700; color: #fff; }
.dc-sm-chooser-sub { margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.55); }
.dc-sm-method {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; box-sizing: border-box; text-align: left;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #fff; font: inherit; cursor: pointer;
}
.dc-sm-method:hover, .dc-sm-method:focus-visible { border-color: #FF8504; outline: none; }
.dc-sm-method svg { flex: none; width: 22px; height: 22px; fill: none; stroke: #FF8504; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dc-sm-method > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-sm-method b { font-size: 14px; font-weight: 600; }
.dc-sm-method small { font-size: 12px; color: rgba(255,255,255,.6); }
.dc-sm-method .dc-sm-method-chev { width: 16px; height: 16px; stroke: rgba(255,255,255,.35); }
/* Stepped aside while its "Find on Map" crosshair is up. */
#dc-spots-overlay.dc-sm-away { display: none; }
/* Runs to the modal's edges so its scrollbar sits there (as .dc-set-body). */
#dc-sm {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 8px; min-width: 0;
    margin: 0 -28px; padding: 0 28px 24px;
}
.dc-sm-top { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dc-sm-top:empty { display: none; }

/* ---- search ------------------------------------------------------------------ */
/* Stays at the top of the scrolling list. */
.dc-sm-searchbar {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px;
    margin: 0 -28px; padding: 4px 28px; background: #0F2041;
}
.dc-sm-searchbar[hidden] { display: none; }
#dc-sm .dc-sm-search {
    flex: 1 1 auto; min-width: 0; height: 36px; box-sizing: border-box; padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px; background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 14px; font-family: inherit; outline: none; color-scheme: dark;
}
#dc-sm .dc-sm-search:focus { border-color: #FF8504; }
#dc-sm .dc-sm-search::placeholder { color: rgba(255, 255, 255, .35); }

/* ---- All Spots / My Spots / Favorites: Settings' tab bar (.dc-set-tabs), with counts ---- */
.dc-sm-tabs { margin-bottom: 12px; }
.dc-sm-tabn { margin-left: 6px; font-weight: 500; color: rgba(255, 255, 255, .5); }
.dc-sm-tabs button[aria-selected="true"] .dc-sm-tabn { color: rgba(255, 255, 255, .75); }

/* ---- a spot -------------------------------------------------------------------- */
.dc-sm-row { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 0; }
.dc-sm-go {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 10px 0 10px 12px; border: 0; border-radius: 10px 0 0 10px; background: none;
    color: #fff; text-align: left; cursor: pointer;
}
.dc-sm-row:hover { background: rgba(255, 255, 255, .09); }
.dc-sm-go:focus-visible { outline: 2px solid #FF8504; outline-offset: -2px; }
.dc-sm-go:focus { outline: none; }
.dc-sm-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dc-sm-row .dc-bt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-sm-row .dc-bt-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-sm-row .dc-bt-link { flex: none; }
/* Edit / Delete, spaced as Boats' row links (.dc-bt-actions). */
.dc-sm-acts { flex: none; display: flex; gap: 18px; }
.dc-sm-go .dc-sp-static { cursor: inherit; }
.dc-sm-foot { display: flex; justify-content: center; padding: 8px 0 0; }
.dc-sm-none { flex-direction: column; align-items: flex-start; gap: 2px; }
.dc-sm-clear { margin-top: 8px; }
.dc-sm-more { justify-content: center; }
/* "Public" / "Private" in the apps' colours (green / blue). */
.dc-sm-public { color: #66bb6a; }
.dc-sm-private { color: #4fc3f7; }
/* The star (the apps' favorite toggle). */
.dc-sm-star {
    flex: none; width: 32px; height: 32px; margin-right: -6px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: rgba(255, 255, 255, .55); font-size: 20px; line-height: 1; cursor: pointer;
}
.dc-sm-star:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.dc-sm-star-on, .dc-sm-star-on:hover { color: #FFC107; }
.dc-sm-star:disabled, .dc-sm-star[aria-disabled="true"] { opacity: .5; cursor: default; }
.dc-sm-limit { padding: 0 2px 2px; }
/* Favorites: the type icon with a small star, as the apps' FavoriteCardView. */
.dc-sm-favicon { position: relative; flex: none; display: inline-flex; }
.dc-sm-favmark {
    position: absolute; right: -5px; top: -6px; font-size: 11px; line-height: 1; color: #FFC107;
    text-shadow: 0 0 2px #0F2041, 0 0 2px #0F2041;
}
.dc-sm-none b { font-size: 14px; color: #fff; }

/* ---- add form ------------------------------------------------------------------ */
.dc-sm-coords-head { display: flex; align-items: center; gap: 10px; margin-bottom: -4px; }
.dc-sm-label { font-size: 11px; color: rgba(255, 255, 255, .55); }
.dc-sm-maplink { margin-left: auto; }
/* DD / DDM, as the Settings unit switches (.dc-units-seg), smaller. */
.dc-sm-seg { display: inline-flex; border: 1px solid rgba(255, 255, 255, .2); border-radius: 6px; overflow: hidden; }
.dc-sm-seg button {
    height: 22px; padding: 0 8px; border: 0; background: none; cursor: pointer;
    color: rgba(255, 255, 255, .7); font-size: 11px; font-weight: 600; line-height: 1;
}
.dc-sm-seg button + button { border-left: 1px solid rgba(255, 255, 255, .2); }
.dc-sm-seg button[aria-checked="true"] { background: #FF8504; color: #fff; }
.dc-sm-ddm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 64px; gap: 8px; }
#dc-sm .dc-sm-ddm .dc-bt-unit input { padding-right: 24px; }

/* ---- import -------------------------------------------------------------------- */
.dc-sm-imp { gap: 10px; }
.dc-sm-file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dc-sm-file .dc-bt-btn { flex: none; }
.dc-sm-fname { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; font-size: 13px; color: #fff; }
.dc-sm-fname span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-sm-fsize { flex: none; color: rgba(255, 255, 255, .5); }
.dc-sm-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.dc-sm-check input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: #FF8504; }
.dc-sm-check > span { display: flex; flex-direction: column; gap: 2px; }
.dc-sm-check-title { font-size: 13px; font-weight: 600; color: #fff; }
.dc-sm-result { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .75); }
.dc-sm-result > div:first-child { color: #81c784; font-weight: 600; }
.dc-sm-failed { color: #ef9a9a; }

/* ---- phones: full screen, as the create sheets ------------------------------------- */
@media (max-width: 600px) {
    .dc-acct-modal.dc-sm-modal {
        width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0;
        padding-left: 16px; padding-right: 16px;
    }
    #dc-sm { margin: 0 -16px; padding: 0 16px 24px; }
    .dc-sm-back { left: 8px; }
    .dc-sm-searchbar { margin: 0 -16px; padding: 4px 16px; }
}