/* ============================================================================
   产品管理 · 卡片视图 + 视图切换
   ----------------------------------------------------------------------------
   色板（与主题既有 token 对齐）：
     边框/分割线  #e6ebf2      卡片底  #fff      页底渐变浅灰
     主绿 #059669/#10b981   浅绿底 #ecfdf5 + #a7f3d0 边
     续费蓝 #2563eb         主文字 #1e293b        次要 #8b9bb0
     CPU 条 #10b981         内存条 #4f46e5
   作用域：全部限定在 .pm-* 前缀 + #serviceCardView 内，不影响其它页面。
   ============================================================================ */

/* ---------- 视图切换器（列表 / 卡片 分段控件） ---------- */
.pm-viewswitch {
    display: inline-flex;
    align-items: center;
    background: #eef2f7;
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
    border: 1px solid #e2e8f0;
}

.pm-viewswitch__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8b9bb0;
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
    transition: background .18s cubic-bezier(.16, 1, .3, 1),
                color .18s ease, box-shadow .18s ease;
    white-space: nowrap;
}

.pm-viewswitch__btn:hover { color: #475569; }

.pm-viewswitch__btn.is-active {
    background: #fff;
    color: #059669;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 0 0 1px rgba(15, 23, 42, .03);
}

.pm-viewswitch__btn i { font-size: 15px; }

/* 切到卡片视图时隐藏表格容器，反之亦然（由 JS 加 class 驱动） */
.pm-hide { display: none !important; }

/* ---------- 卡片视图容器 ---------- */
#serviceCardView { margin-top: 14px; }

/* 卡片再小一档：默认 288px（原 360px），宽度更紧凑 */
.pm-cardgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 14px;
    align-items: start;
}

/* 全选条 */
.pm-selectall {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    margin-bottom: 13px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 9px;
}

.pm-selectall label {
    margin: 0;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
}

.pm-selectall__cb {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #10b981;
}

.pm-selectall__count {
    margin-left: auto;
    padding: 1px 9px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- 单张卡片 ---------- */
.pm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    padding: 13px 14px 12px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1);
}

.pm-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, #10b981, #34d399 55%, transparent);
    opacity: 0;
    transition: opacity .2s ease;
}

.pm-card:hover {
    border-color: #cfdcea;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

.pm-card:hover::before { opacity: 1; }

.pm-card.is-selected {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, .14), 0 6px 18px rgba(16, 185, 129, .08);
}

.pm-card.is-selected::before { opacity: 1; }

/* --- 卡片头部 --- */
.pm-card__head {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.pm-card__check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    cursor: pointer;
    accent-color: #10b981;
}

.pm-card__titlewrap { flex: 1 1 auto; min-width: 0; }

.pm-card__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 650;
    color: #1e293b;
    line-height: 1.45;
    margin: 0;
    letter-spacing: -.1px;
    word-break: break-all;
}

.pm-card__title a { color: inherit; text-decoration: none; }
.pm-card__title a:hover { color: #059669; }

/* 产品类型徽标（云服务器 / NAT …） */
.pm-badge-type {
    display: inline-block;
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 4px;
    background: #eef4ff;
    border: 1px solid #dbe7ff;
    color: #2563eb;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
}

/* 主机名 / 二级分类 小胶囊 */
.pm-card__sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    min-height: 22px;
}

.pm-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 1px 8px;
    border-radius: 5px;
    font-size: 11.5px;
    line-height: 1.8;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .16s ease, border-color .16s ease;
}

.pm-chip i { font-size: 12px; flex: 0 0 auto; }

/* 主机名：等宽字体、中性灰 */
.pm-chip--host {
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    color: #64748b;
}
.pm-chip--host b {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 600;
    color: #334155;
    letter-spacing: .2px;
}
.pm-chip--host.is-empty b { color: #a8b4c4; }

/* 产品分组：蓝，可点击跳到该分组购物页 */
.pm-chip--group {
    background: #f2f7ff;
    border: 1px solid #d6e4ff;
    color: #2563eb;
    font-weight: 600;
    cursor: pointer;
    max-width: 100%;
}
.pm-chip--group:hover {
    background: #e6f0ff;
    border-color: #b9d4ff;
    color: #1d4ed8 !important;
    text-decoration: none;
}
/* 「产品分组：」前缀弱化，名称保留强调 */
.pm-chip--group i { margin-right: 3px; }

/* --- 卡片属性行（更紧凑） --- */
.pm-card__specs { padding: 2px 0 8px; }

.pm-spec {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 12.5px;
    line-height: 1.55;
}

.pm-spec__k {
    flex: 0 0 auto;
    color: #93a1b3;
    white-space: nowrap;
}

.pm-spec__v {
    flex: 1 1 auto;
    text-align: right;
    color: #1e293b;
    font-weight: 600;
    min-width: 0;
    word-break: break-all;
}

.pm-spec__v--ip {
    color: #e60012;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
}
.pm-spec__v--price { color: #1e293b; }
.pm-spec__v--os { color: #1e293b; }

/* 独立 IP 数量徽标 */
.pm-ipcount {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 4px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 10.5px;
    font-weight: 700;
    vertical-align: 1px;
}

/* NAT 地址占位/结果 */
.pm-card__nat { color: #93a1b3; font-weight: 500; }
.pm-card__nat.is-found { color: #e60012; }

.pm-copyip {
    margin-left: 5px;
    color: #b6c0cd;
    cursor: pointer;
    font-size: 12px;
    transition: color .16s ease;
}
.pm-copyip:hover { color: #059669; }
.pm-copyip.is-done { color: #059669; }

/* 电源状态：圆点 + 文字 */
.pm-power { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pm-power__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #cbd5e1; flex: 0 0 auto;
}
.pm-power--on   { color: #059669; } .pm-power--on   .pm-power__dot { background: #10b981; }
.pm-power--off  { color: #e31519; } .pm-power--off  .pm-power__dot { background: #ef4444; }
.pm-power--ing  { color: #d97706; } .pm-power--ing  .pm-power__dot { background: #f59e0b; }
.pm-power--unknown { color: #93a1b3; }

/* --- 资源监控条 --- */
.pm-card__monitor {
    margin-top: 2px;
    padding: 9px 11px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 9px;
}

.pm-res { padding: 2px 0; }
.pm-res + .pm-res { margin-top: 3px; }

.pm-res__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 4px;
}

.pm-res__name { display: inline-flex; align-items: center; gap: 6px; color: #334155; font-weight: 600; }
.pm-res__dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.pm-res--cpu  .pm-res__dot { background: #10b981; }
.pm-res--mem  .pm-res__dot { background: #4f46e5; }

.pm-res__val { color: #93a1b3; font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-res--cpu .pm-res__val.is-num { color: #059669; }
.pm-res--mem .pm-res__val.is-num { color: #4f46e5; }

.pm-res__track {
    height: 5px;
    border-radius: 6px;
    background: #e6ebf2;
    overflow: hidden;
}
.pm-res__bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 6px;
    transition: width .5s cubic-bezier(.16, 1, .3, 1);
}
.pm-res--cpu .pm-res__bar { background: linear-gradient(90deg, #34d399, #10b981); }
.pm-res--mem .pm-res__bar { background: linear-gradient(90deg, #818cf8, #4f46e5); }

/* ---------- 卡片内联备注 ---------- */
.pm-note { margin-top: 8px; }

.pm-note__view {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 9px;
    border: 1px dashed #e6ebf2;
    border-radius: 7px;
    background: #fcfdfe;
    cursor: text;
    transition: border-color .16s ease, background .16s ease;
}
.pm-note__view:hover { border-color: #b9d4ff; background: #f8fbff; }

.pm-note__icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #b6c0cd;
    font-size: 12px;
}
.pm-note__view:hover .pm-note__icon { color: #2563eb; }

.pm-note__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #475569;
    word-break: break-all;
}

.pm-note__view.is-empty .pm-note__text { color: #b6c0cd; }

.pm-note__edit { display: flex; align-items: center; gap: 5px; }

.pm-note__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 9px;
    border: 1px solid #b9d4ff;
    border-radius: 7px;
    background: #fff;
    color: #1e293b;
    font-size: 12px;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
.pm-note__input::placeholder { color: #b6c0cd; }

.pm-note__save,
.pm-note__cancel {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
    white-space: nowrap;
}

.pm-note__save {
    border: 1px solid #10b981;
    background: #10b981;
    color: #fff;
}
.pm-note__save:hover { background: #059669; border-color: #059669; }
.pm-note__save:disabled { opacity: .6; cursor: default; }

.pm-note__cancel {
    border: 1px solid #e6ebf2;
    background: #fff;
    color: #64748b;
}
.pm-note__cancel:hover { background: #f8fafc; color: #334155; }

/* --- 卡片底部 --- */
.pm-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.pm-card__left { min-width: 0; }

.pm-statuspill {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 5px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.8;
    white-space: nowrap;
}
.pm-statuspill--pending   { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.pm-statuspill--suspended { background: #fffbeb; border-color: #fde68a; color: #d97706; }
.pm-statuspill--cancelled,
.pm-statuspill--deleted   { background: #f8fafc; border-color: #e6ebf2; color: #8b9bb0; }

.pm-card__due {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.pm-card__days {
    font-size: 13px;
    font-weight: 700;
    color: #059669;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pm-card__days.is-urgent { color: #e31519; }
.pm-card__days.is-soon   { color: #d97706; }

.pm-card__duedate {
    font-size: 11.5px;
    color: #93a1b3;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* 右下角操作按钮 */
.pm-card__ops { display: flex; align-items: stretch; gap: 0; flex: 0 0 auto; }

.pm-btn-manage,
.pm-btn-renew {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    min-height: 38px;
    font-size: 12.5px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    transition: background .16s ease, color .16s ease;
}

.pm-btn-manage {
    border: 1px solid #e6ebf2;
    border-right: 0;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    background: #fff;
    color: #475569;
}
.pm-btn-manage:hover { background: #f8fafc; color: #059669; text-decoration: none; }

.pm-btn-renew {
    border: 1px solid #2563eb;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    background: #2563eb;
    color: #fff;
}
.pm-btn-renew:hover { background: #1d4ed8; color: #fff; text-decoration: none; }

/* 停机原因 */
.pm-card__suspend {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 7px;
    color: #b91c1c;
    font-size: 11.5px;
    line-height: 1.6;
}

.pm-card__suspend i { flex: 0 0 auto; margin-top: 2px; }

/* 空状态 */
.pm-empty {
    padding: 52px 20px;
    text-align: center;
    background: #fff;
    border: 1px dashed #e6ebf2;
    border-radius: 12px;
}
.pm-empty__icon { font-size: 38px; color: #cfd8e3; }
.pm-empty__title { margin-top: 10px; font-size: 14px; font-weight: 600; color: #64748b; }
.pm-empty__desc { margin-top: 4px; font-size: 12.5px; color: #a8b4c4; }

/* ---------- 响应式 ---------- */
@media (max-width: 1199.98px) {
    .pm-cardgrid { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 12px; }
}

@media (max-width: 991.98px) {
    .pm-cardgrid { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
}

@media (max-width: 767.98px) {
    .pm-cardgrid { grid-template-columns: 1fr; gap: 11px; }
    .pm-card { padding: 12px 12px 11px; }
    .pm-card__title { font-size: 13px; }
    .pm-spec { font-size: 12px; }
    .pm-btn-manage,
    .pm-btn-renew { writing-mode: horizontal-tb; letter-spacing: 0; min-height: 36px; }
    .pm-card__foot { flex-direction: column; align-items: stretch; gap: 10px; }
    .pm-card__ops { justify-content: flex-end; }
}

/* 切到卡片视图时，表格工具条里的「续费/批量」按钮组仍可用，无需隐藏 */