/* 船舶管理页 */
body.page { overflow: auto; height: auto; min-height: 100%; }
.sp { padding: 18px 22px 30px; }
.sp-head { display: flex; align-items: baseline; gap: 24px; margin-bottom: 14px; }
.sp-head h2 { font-size: 22px; color: #fff; letter-spacing: 2px; }
.sum { display: flex; gap: 20px; color: var(--dim); font-size: 13px; }
.sum b { font-size: 18px; color: #fff; margin-left: 4px; }
.sum .c-own { color: var(--cyan); }
.sum .c-lease { color: #c39bff; }
.sum .c-warn, .sum .c-warn b { color: var(--orange); }

.flt { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px 16px; }
.flt label { display: flex; flex-direction: column; gap: 6px; color: var(--dim); font-size: 12px; }
.flt .w2 { grid-column: span 2; }
.flt .rg { display: flex; gap: 6px; }
.flt .rg input { min-width: 0; }
.flt input, .flt select, .dlg input, .dlg select, .dlg textarea {
  background: rgba(4, 16, 36, 0.8); border: 1px solid var(--line); color: var(--txt); border-radius: 4px;
  padding: 7px 9px; font-size: 13px; font-family: inherit; width: 100%;
}
.flt input:focus, .flt select:focus, .dlg input:focus, .dlg select:focus, .dlg textarea:focus { outline: none; border-color: var(--cyan); }
.dlg input:disabled, .dlg select:disabled, .dlg textarea:disabled { opacity: 1; color: #fff; border-color: transparent; background: rgba(58, 209, 255, 0.06); }

.bar { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
.bar .grow { flex: 1; }
.bar .cnt { color: var(--dim); margin-left: 6px; }
.bar .cnt b { color: var(--orange); }
.btn { background: rgba(58, 209, 255, 0.08); border: 1px solid var(--line); color: var(--txt); padding: 7px 16px; border-radius: 4px; font-size: 13px; }
.btn:hover { border-color: var(--cyan); }
.btn.pri { background: #1f7fd6; border-color: #1f7fd6; color: #fff; }
.btn.add { background: rgba(34, 227, 154, 0.85); border-color: transparent; color: #04220f; font-weight: 600; }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.tbl { width: 100%; border-collapse: collapse; white-space: nowrap; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid rgba(58, 209, 255, 0.12); }
.tbl th { background: rgba(58, 209, 255, 0.1); color: #bcd3f0; font-weight: 600; position: sticky; top: 0; }
.tbl th[data-k] { cursor: pointer; user-select: none; }
.tbl th i::after { content: "⇅"; margin-left: 4px; color: var(--dim); font-style: normal; font-size: 11px; }
.tbl th.asc i::after { content: "▲"; color: var(--cyan); }
.tbl th.desc i::after { content: "▼"; color: var(--cyan); }
.tbl tbody tr:hover { background: rgba(58, 209, 255, 0.06); }
.tbl a { color: var(--cyan); text-decoration: none; }
.tbl .nm a { color: #fff; }
.tbl .nm a:hover { color: var(--cyan); }
.tbl .op a { margin-right: 12px; }
.tbl .op .del { color: #ff8a94; }
.tbl .empty { text-align: center; color: var(--dim); padding: 40px 0; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 12px; border: 1px solid; }
.tag.own { color: var(--cyan); border-color: rgba(58, 209, 255, 0.5); background: rgba(58, 209, 255, 0.1); }
.tag.lease { color: #c39bff; border-color: rgba(195, 155, 255, 0.5); background: rgba(195, 155, 255, 0.1); }
.tag.todo { color: var(--dim); border-style: dashed; border-color: var(--dim); }
.lw { margin-left: 6px; font-size: 12px; padding: 0 5px; border-radius: 3px; }
.lw.soon { color: #04220f; background: var(--yellow); }
.lw.over { color: #fff; background: var(--red); }
.st { font-size: 12px; }
.st::before { content: "●"; margin-right: 4px; }
.st-0 { color: var(--green); }
.st-1 { color: var(--yellow); }
.st-2 { color: var(--dim); }
.foot-note { color: var(--dim); font-size: 12px; margin-top: 12px; }
.foot-note a { color: var(--cyan); margin-left: 8px; }

.dlg { position: fixed; inset: 0; z-index: 3000; background: rgba(2, 8, 20, 0.65); display: flex; align-items: center; justify-content: center; }
.dlg.hidden { display: none; }
.dlg-box { width: 760px; max-height: 90vh; display: flex; flex-direction: column; background: rgba(8, 26, 54, 0.98); border: 1px solid var(--cyan); border-radius: 8px; box-shadow: 0 0 30px rgba(58, 209, 255, 0.3); }
.dlg-box h3 { padding: 14px 18px; font-size: 17px; color: #fff; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.dlg-box .x { background: none; border: 0; color: var(--dim); font-size: 22px; line-height: 1; }
.dlg-body { padding: 4px 18px 10px; overflow-y: auto; }
.dlg fieldset { border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin-top: 12px; }
.dlg legend { color: var(--cyan); font-size: 13px; font-weight: 600; margin-bottom: 8px; border-left: 3px solid var(--cyan); padding-left: 8px; }
.dlg label { display: flex; flex-direction: column; gap: 5px; color: var(--dim); font-size: 12px; }
.dlg label em { color: var(--red); font-style: normal; }
.dlg .w2 { grid-column: span 2; }
.dlg .w3 { grid-column: span 3; }
.dlg .err { color: #ff8a94; padding: 0 18px; min-height: 18px; font-size: 13px; }
.dlg-act { display: flex; gap: 10px; justify-content: flex-end; padding: 10px 18px 16px; }