/* Settings → Vessel tab (boats.js), inside the Settings modal (.dc-set-modal in
   index.html). Manage Spots (spots-manage.js, #dc-sm) uses the same rows,
   buttons and fields. Same palette as the modal and the create flow: #0F2041
   ground, #FF8504 accent, #4fc3f7 links. */

body:not(.dc-authed) .dc-boats-field { display: none; }

#dc-boats, .dc-bt-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dc-bt-list:empty { display: none; }
#dc-boats button, #dc-sm button { font-family: inherit; }

.dc-bt-note {
    padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4;
    background: rgba(255, 133, 4, .1); border: 1px solid rgba(255, 133, 4, .35); color: #ffcc99;
}
.dc-bt-empty {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 2px;
    font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .6);
}
.dc-bt-hint { font-size: 12px; color: rgba(255, 255, 255, .5); }
.dc-bt-spin {
    flex: none; width: 14px; height: 14px; margin-right: 2px; box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, .25); border-top-color: #4fc3f7; border-radius: 50%;
    animation: dc-bt-spin .8s linear infinite;
}
@keyframes dc-bt-spin { to { transform: rotate(360deg); } }

/* ---- a boat / a candidate --------------------------------------------------- */
.dc-bt-row {
    padding: 10px 12px; border-radius: 10px; min-width: 0;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
}
.dc-bt-row.dc-bt-default { border-color: rgba(255, 133, 4, .45); }
.dc-bt-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dc-bt-text { flex: 1 1 auto; min-width: 0; }
.dc-bt-name { font-size: 15px; font-weight: 600; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.dc-bt-sub { margin-top: 2px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .6); }
.dc-bt-flag {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
    font-size: 12px; font-weight: 600; color: #FF8504;
}
.dc-bt-flag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FF8504; }
.dc-bt-tag {
    flex: none; margin-top: 1px; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 16px; white-space: nowrap;
    background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7);
}
.dc-bt-tag-default { background: rgba(255, 133, 4, .18); color: #FF8504; }
.dc-bt-tag-ok { background: rgba(102, 187, 106, .18); color: #81c784; }
.dc-bt-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.dc-bt-meta .dc-bt-sub { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.dc-bt-meta .dc-bt-tag { margin-top: 0; }
.dc-bt-done .dc-bt-name { color: rgba(255, 255, 255, .7); }

.dc-bt-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
.dc-bt-link {
    padding: 2px 0; border: 0; background: none; cursor: pointer;
    font-size: 13px; font-weight: 600; color: #4fc3f7;
}
.dc-bt-link:hover { color: #81d4fa; }
.dc-bt-link:disabled { opacity: .5; cursor: default; }
.dc-bt-link-strong { color: #FF8504; }
.dc-bt-link-strong:hover { color: #ffa640; }
.dc-bt-link-muted { color: rgba(255, 255, 255, .55); }
.dc-bt-link-muted:hover { color: #fff; }
.dc-bt-link-danger { color: #ef5350; }
.dc-bt-link-danger:hover { color: #ff7b78; }

/* ---- buttons -------------------------------------------------------------------- */
.dc-bt-bar { display: flex; flex-wrap: wrap; gap: 8px; }
/* Side by side when they fit, otherwise one full-width button per line. */
.dc-bt-bar .dc-bt-btn { flex: 1 1 auto; }
.dc-bt-btn {
    height: 32px; padding: 0 12px; box-sizing: border-box; border-radius: 8px; cursor: pointer;
    font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background .15s, color .15s;
}
.dc-bt-primary { border: 0; background: #FF8504; color: #fff; }
.dc-bt-primary:hover { background: #e67800; }
.dc-bt-ghost { border: 1px solid rgba(255, 255, 255, .2); background: none; color: rgba(255, 255, 255, .85); }
.dc-bt-ghost:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.dc-bt-btn:disabled { opacity: .5; cursor: default; }

/* ---- add / edit form ------------------------------------------------------------ */
.dc-bt-form {
    display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; min-width: 0;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 133, 4, .45);
}
.dc-bt-form-title { font-size: 15px; font-weight: 700; color: #fff; }
.dc-bt-flag-note { margin-top: -4px; font-size: 13px; line-height: 1.4; color: #ffcc99; }
.dc-bt-in { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dc-bt-in label { font-size: 11px; color: rgba(255, 255, 255, .55); }
.dc-bt-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 10px; }
:is(#dc-boats, #dc-sm) .dc-bt-in input, :is(#dc-boats, #dc-sm) .dc-bt-in select {
    width: 100%; 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;
}
:is(#dc-boats, #dc-sm) .dc-bt-in input:focus, :is(#dc-boats, #dc-sm) .dc-bt-in select:focus { border-color: #FF8504; }
:is(#dc-boats, #dc-sm) .dc-bt-in select { cursor: pointer; }
:is(#dc-boats, #dc-sm) .dc-bt-in input::placeholder { color: rgba(255, 255, 255, .35); }
.dc-bt-unit { position: relative; }
:is(#dc-boats, #dc-sm) .dc-bt-unit input { padding-right: 44px; -moz-appearance: textfield; }
:is(#dc-boats, #dc-sm) .dc-bt-unit input::-webkit-outer-spin-button,
:is(#dc-boats, #dc-sm) .dc-bt-unit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dc-bt-unit span {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: rgba(255, 255, 255, .5); pointer-events: none;
}
.dc-bt-err { font-size: 13px; line-height: 1.4; color: #ef9a9a; }
.dc-bt-row .dc-bt-err { margin-top: 6px; }
.dc-bt-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dc-bt-form-actions .dc-bt-btn { min-width: 84px; }

/* ---- import --------------------------------------------------------------------- */
.dc-bt-imp {
    display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, .2);
}
.dc-bt-imp-head { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .75); }
.dc-bt-imp .dc-bt-empty { padding: 2px; }
.dc-bt-imp-foot { display: flex; justify-content: flex-end; }
.dc-bt-imp-foot .dc-bt-btn { min-width: 84px; }