/*
 * waylog 车本全局样式 — 同步/通知/分享
 * 职责：sync-panel、sync-app-info、notification-manager、share-manager/share-list、@container notification-manager 查询。
 * 拆分自原 styles.css 第 5758-6244 行：规则内容零改动，仅按行切分；级联顺序 = 本文件在 index.html 中的链接顺序。
 * EV 暗色主题适配：面板内卡片改玻璃（配方1）、输入井+发丝线（配方3）、启用/成功态改 --accent 软底强调（配方4）、主按钮改渐变深字（配方2）。
 */
.sync-panel {
  padding: 0;
  overflow: hidden;
}

.sync-panel summary {
  min-height: 54px;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  cursor: pointer;
  font-weight: 800;
}

.sync-panel summary::marker {
  color: var(--muted);
}

.sync-panel summary strong {
  color: var(--muted);
  font-size: 0.9rem;
}

.sync-body {
  padding: 0 var(--space-lg) var(--space-lg);
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
}

.app-page[data-tab-panel="vehicle"] .sync-body {
  grid-template-columns: 1fr;
}

.sync-app-info {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-md);
  border-radius: var(--control-radius);
  background: var(--glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  box-shadow: var(--soft-edge);
}

.sync-app-info img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.sync-app-info span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sync-app-info strong,
.sync-app-info small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-app-info strong {
  font-size: 0.92rem;
}

.sync-app-info small {
  color: var(--muted);
  font-size: 0.76rem;
}

.sync-app-info .install-button {
  min-height: 34px;
  padding: 0 var(--space-md);
}

.sync-preset {
  min-width: 0;
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-radius: var(--control-radius);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent), transparent 55%);
}

.sync-preset span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.sync-preset strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sync-preset small {
  color: color-mix(in oklch, var(--ink), transparent 30%);
  line-height: 1.4;
}

.sync-footer-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.sync-token-field {
  grid-column: 1 / -1;
}

.sync-footer-actions .text-action {
  color: var(--ink);
  background: transparent;
}

.sync-footer-actions .text-action,
.share-create-row .text-action {
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}

.sync-footer-actions .danger-action {
  color: var(--red);
  background: transparent;
}

.notification-manager,
.share-manager {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--control-radius);
  background: var(--glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  box-shadow: var(--soft-edge);
}

.notification-manager {
  container: notification-manager / inline-size;
}

.notification-setting-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
}

.notification-setting-row > svg {
  width: 20px;
  height: 20px;
  justify-self: center;
  color: var(--green);
}

.notification-setting-row > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.notification-setting-row > span > strong {
  font-size: var(--type-control);
}

.notification-setting-row > span > small,
.notification-hint {
  color: var(--muted);
  font-size: var(--type-control-sm);
  line-height: 1.45;
}

.notification-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.notification-test,
.notification-toggle {
  min-width: 88px;
  min-height: var(--control-height-sm);
  border: 0;
  border-radius: var(--control-radius);
  padding: 0 var(--space-md);
  color: oklch(0.15 0.02 240);
  background: var(--accent-gradient);
  box-shadow: var(--accent-glow);
  font-size: var(--type-control-sm);
  font-weight: 850;
}

.notification-test {
  color: var(--ink);
  background: var(--surface-control);
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.notification-test svg {
  width: 14px;
  height: 14px;
}

.notification-toggle[data-enabled="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent), transparent 60%);
}

.notification-test:disabled,
.notification-toggle:disabled {
  color: color-mix(in oklch, var(--muted), var(--canvas) 24%);
  background: color-mix(in oklch, var(--surface-control), var(--canvas) 28%);
  box-shadow: inset 0 0 0 1px var(--hairline);
  cursor: not-allowed;
}

.notification-hint {
  min-height: 1.2em;
  margin: 0 0 0 46px;
}

.notification-hint:empty {
  display: none;
}

.sync-section-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.sync-section-head span {
  color: var(--ink);
  font-size: var(--type-control);
  font-weight: 850;
}

.sync-section-head strong {
  color: var(--muted);
  font-size: var(--type-control-sm);
}

.share-create-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
}

.share-create-row .text-action {
  white-space: nowrap;
}

.share-create-row input {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  border: 0;
  border-radius: var(--control-radius);
  padding: 0 var(--space-md);
  color: var(--ink);
  background: var(--surface-control);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.share-create-row input::placeholder,
.share-note-input::placeholder {
  color: color-mix(in oklch, var(--muted), transparent 22%);
}

.share-list {
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
  list-style: none;
}

.share-list li {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-areas:
    "token meta expiry copy delete"
    "note note note copy delete";
  grid-template-columns: minmax(58px, max-content) minmax(0, 1fr) minmax(82px, 96px) 32px 32px;
  align-items: center;
  gap: var(--space-xs) 6px;
  padding: 5px var(--space-sm);
  border-radius: var(--control-radius);
  color: var(--ink);
  background: color-mix(in oklch, var(--surface), var(--canvas) 22%);
}

.share-list li.is-expired {
  color: color-mix(in oklch, var(--muted), var(--ink) 15%);
  background: color-mix(in oklch, var(--surface-control), var(--canvas) 18%);
}

.share-token {
  grid-area: token;
  font-size: var(--type-control-sm);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.share-meta {
  grid-area: meta;
}

.share-meta,
.share-empty {
  min-width: 0;
  color: var(--muted);
  font-size: var(--type-control-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-note-input {
  grid-area: note;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  padding: 0 var(--space-sm);
  color: var(--ink);
  background: color-mix(in oklch, var(--surface-control), var(--surface) 44%);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--type-control-sm);
}

.share-expiry-select {
  grid-area: expiry;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  padding: 0 28px 0 8px;
  color: var(--ink);
  background-color: color-mix(in oklch, var(--surface-control), var(--surface) 34%);
  background-image: var(--select-arrow);
  background-position: right 9px center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  appearance: none;
  -webkit-appearance: none;
  font-size: var(--type-control-sm);
  font-weight: 800;
}

.share-empty {
  grid-template-columns: 1fr !important;
  padding: var(--space-sm);
}

.share-copy,
.share-delete {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 0;
  border-radius: var(--control-radius);
  background: color-mix(in oklch, var(--surface-control), var(--surface) 32%);
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.share-copy {
  grid-area: copy;
  color: var(--muted);
}

.share-delete {
  grid-area: delete;
  color: var(--red);
}

.share-result {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--control-radius);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent), transparent 62%);
}

.share-result span {
  color: var(--muted);
  font-size: var(--type-control-sm);
  font-weight: 800;
}

.share-result strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--type-control-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-result .text-action {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-sm);
  background: var(--surface-control);
  font-size: var(--type-control-sm);
}

.share-hint {
  grid-column: 1 / -1;
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: var(--type-control-sm);
  line-height: 1.45;
}

.share-hint:empty,
.sync-hint:empty {
  display: none;
}

@container notification-manager (max-width: 520px) {
  .notification-setting-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .notification-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .notification-actions > button {
    flex: 1;
  }

  .notification-hint {
    margin-left: 0;
  }
}

.text-action:disabled,
.danger-action:disabled,
.sync-footer-actions .text-action:disabled,
.sync-footer-actions .danger-action:disabled,
.share-create-row .text-action:disabled,
.fleet-body .text-action:disabled,
.vehicle-profile-actions .text-action:disabled {
  color: color-mix(in oklch, var(--muted), var(--canvas) 20%);
  background: color-mix(in oklch, var(--surface-control), var(--canvas) 30%);
  box-shadow: inset 0 0 0 1px var(--hairline);
  cursor: not-allowed;
}

.sync-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


/* 外观主题切换（亮色 / 暗色） */
.theme-manager {
  min-width: 0;
  display: grid;
  gap: var(--space-sm);
}

.theme-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-control);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.theme-options button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 0 var(--space-sm);
  color: var(--muted);
  background: transparent;
  font-size: var(--type-control-sm);
  font-weight: 800;
}

.theme-options button .lucide {
  width: 1em;
  height: 1em;
}

.theme-options button.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}