/* =========================================================
   zkun · 船舶管理专属样式
   Industrial Telemetry — 共享样式见 ../styles/system.css
   与 products.css 共享同一套 CRUD 外壳结构（crud-section / crud-shell）
   ========================================================= */

/* ---------- 船舶区 ---------- */
.crud-section {
  padding: 56px 0 80px;
  min-height: calc(100vh - var(--header-h) - 200px);
}

/* 容器外壳 */
.crud-shell {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 1px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* 状态条内嵌搜索（比共享 .search-box 更紧凑） */
.search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 1px;
  color: var(--text-3);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.search-input {
  width: 220px;
  max-width: 50vw;
  height: 32px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.search-input::placeholder {
  color: var(--text-4);
}
.search-input::-webkit-search-cancel-button {
  display: none;
}

/* ---------- 船舶表格（在共享 .data-table 基础上增列样式） ---------- */
.ship-table .col-id {
  width: 60px;
}
.ship-table .col-actions {
  width: 96px;
}
.cell-id {
  font-family: var(--font-mono);
  color: var(--text-4);
  font-size: 0.82rem;
}
.cell-name {
  color: var(--text);
  font-weight: 600;
}
.cell-name .cell-name-empty {
  color: var(--text-4);
  font-style: italic;
  font-weight: 400;
}
.cell-mono {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--phosphor-soft);
}
.cell-mono.cell-imei {
  color: var(--amber-soft);
}
.cell-muted {
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.cell-openid {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   响应式 · 船舶页专属断点
   ========================================================= */
@media (max-width: 760px) {
  .crud-section {
    padding: 36px 0 56px;
  }
  .statusbar {
    padding: 10px 12px;
  }
  .search {
    flex: 1;
    width: 100%;
  }
  .search-input {
    width: 100%;
    max-width: none;
    flex: 1;
  }
  .cell-openid {
    max-width: 120px;
  }
}