/* ============================================================
   林林桌面 — Bootstrap 5 主题覆盖层
   Paxton 风格参考：Comfortaa 标题 / Poppins 正文 / #059f81 accent
   支持 prefers-color-scheme 自动切换：米白（亮）/ 深灰（暗）
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&family=Poppins:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ── 亮色模式 token (默认) ── */
:root {
    --bs-body-font-family: 'Poppins', 'PingFang SC', 'Noto Sans SC', sans-serif;
    --bs-success:     #059f81;
    --bs-success-rgb: 5, 159, 129;
    --accent:         #059f81;
    --accent-dark:    #047a63;
    --accent-soft:    rgba(5,159,129,0.09);

    /* Zone 1 — 亮色页面底 */
    --z1-bg:        #f5f4f1;
    --z1-bg-deep:   #eceae5;
    --z1-card:      #ffffff;
    --z1-border:    rgba(17,17,17,0.09);
    --z1-border-md: rgba(17,17,17,0.16);

    /* Zone 2 — 深色区块（侧边栏/导航/页脚） */
    --z2-bg:        #111111;
    --z2-border:    rgba(255,255,255,0.09);
    --z2-text:      rgba(255,255,255,0.88);
    --z2-muted:     rgba(255,255,255,0.52);

    /* 文本 */
    --ink:          #222222;
    --muted:        #666666;
    --faint:        #999999;

    /* 状态色 */
    --success-soft: #d4f0e8;
    --warning-soft: #fef3d0;
    --danger-soft:  #fde8e6;

    /* 指标图颜色 */
    --metric-axis:   #d8dee8;
    --metric-empty:  #6c757d;
    --metric-cpu:    #198754;
    --metric-memory: #0dcaf0;
    --metric-disk:   #ffc107;

    /* 深色带（页面内嵌 dark section 背景） */
    --dark-band-bg:  #111111;
    --dark-band-text: rgba(255,255,255,0.50);
    --dark-band-text-primary: rgba(255,255,255,0.60);

    /* 对话框背景 */
    --dialog-bg:    #ffffff;
}

/* ── 暗色模式 token ── */
@media (prefers-color-scheme: dark) {
    :root {
        --z1-bg:        #1c1b1a;
        --z1-bg-deep:   #151413;
        --z1-card:      #252422;
        --z1-border:    rgba(255,255,255,0.08);
        --z1-border-md: rgba(255,255,255,0.14);

        --z2-bg:        #0e0e0e;
        --z2-border:    rgba(255,255,255,0.10);
        --z2-text:      rgba(255,255,255,0.88);
        --z2-muted:     rgba(255,255,255,0.50);

        --ink:          #ede9e3;
        --muted:        #9a9490;
        --faint:        #6a6662;

        --success-soft: rgba(5,159,129,0.18);
        --warning-soft: rgba(242,190,0,0.14);
        --danger-soft:  rgba(220,60,50,0.15);

        --metric-axis:   rgba(255,255,255,0.18);
        --metric-empty:  rgba(255,255,255,0.52);
        --metric-cpu:    #4ecba3;
        --metric-memory: #6bdbf0;
        --metric-disk:   #e0b84a;

        --dark-band-bg:  #0e0e0e;
        --dark-band-text: rgba(255,255,255,0.50);
        --dark-band-text-primary: rgba(255,255,255,0.60);

        --dialog-bg:    #252422;
    }
}

/* ── html / body ── */
html { color-scheme: light dark; }
body {
    font-family: var(--bs-body-font-family);
    color: var(--muted);
    background-color: var(--z1-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Comfortaa', 'PingFang SC', cursive;
    font-weight: 700;
    color: var(--ink);
}

/* ── Links ── */
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

/* ── Accent / Success buttons ── */
.btn-success, .btn-accent {
    background-color: #059f81; border-color: #059f81; color: #fff;
}
.btn-success:hover, .btn-accent:hover {
    background-color: #047a63; border-color: #047a63; color: #fff;
}
.btn-outline-success { border-color: #059f81; color: #059f81; }
.btn-outline-success:hover { background-color: #059f81; border-color: #059f81; color: #fff; }

/* ── Forms ── */
.form-control, .form-select, textarea {
    background-color: var(--z1-card);
    border-color: var(--z1-border-md);
    color: var(--ink);
}
.form-control:focus, .form-select:focus, textarea:focus {
    border-color: #059f81;
    box-shadow: 0 0 0 .2rem rgba(5,159,129,.2);
    background-color: var(--z1-card);
    color: var(--ink);
}
.form-control::placeholder, textarea::placeholder { color: var(--faint); }
.form-label { color: var(--ink); }

/* ── Bootstrap overrides for dark mode ── */
.bg-white  { background-color: var(--z1-card) !important; }
.bg-light  { background-color: var(--z1-bg-deep) !important; }
.text-secondary { color: var(--muted) !important; }
.text-dark  { color: var(--ink) !important; }
.border-bottom { border-color: var(--z1-border) !important; }

/* ── Card (Bootstrap default) ── */
.card {
    background-color: var(--z1-card);
    border-color: var(--z1-border);
    color: var(--ink);
}
.card-header { background-color: var(--z1-bg); border-color: var(--z1-border); }

/* ── Sidebar nav ── */
.nav-link { transition: background .15s, color .15s; }
.nav-link:hover { color: #fff !important; background: rgba(5,159,129,.18) !important; border-radius: 6px; }
.nav-link.active { color: #fff !important; background: rgba(5,159,129,.3) !important; border-radius: 6px; }

/* ── Tables ── */
.table-responsive {
    border: 1px solid var(--z1-border);
    background: var(--z1-card);
    overflow: auto;
    scrollbar-gutter: stable;
}
.table-responsive.table-responsive-limited {
    max-height: var(--table-visible-height, 28rem);
}
.table {
    color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--z1-border);
}
.table thead th {
    font-size: .73rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 2px solid #059f81 !important;
    background: var(--z1-bg); color: var(--muted);
    white-space: nowrap;
}
.table-responsive.table-responsive-limited .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.table tbody tr:hover { background: rgba(5,159,129,.035); }
.table td, .table th { vertical-align: middle; border-color: var(--z1-border); }

.connection-link-copy {
    width: min(100%, 260px);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #047a63;
    text-align: left;
    cursor: pointer;
}
.connection-link-copy:hover .connection-link-copy-value { text-decoration: underline; }
.connection-link-copy-value {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: left;
    font-family: var(--bs-font-monospace);
}
.connection-link-copy-hint {
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 1px solid rgba(5,159,129,.18);
    border-radius: 999px;
    background: var(--accent-soft);
    color: #047a63;
    font-size: .68rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* ── Status badge ── */
.status-badge {
    display: inline-flex; align-items: center;
    padding: 2px 10px; font-size: .7rem; font-weight: 600;
    border: 1px solid var(--z1-border); border-radius: 30px;
    background: var(--z1-bg); color: var(--muted);
    white-space: nowrap;
}

/* ── App chip ── */
.app-chip {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 30px; font-size: .7rem; font-weight: 600;
    border: 1px solid rgba(5,159,129,.3); background: rgba(5,159,129,.07); color: #047a63;
    margin: 1px;
}
.app-chip-list { display: flex; flex-wrap: wrap; gap: 3px; }

/* ── Code ── */
code {
    color: #047a63; background: var(--accent-soft);
    padding: .1rem .35rem; border-radius: 3px;
    font-size: .85em;
}

/* ── Eyebrow label ── */
.eyebrow {
    display: block; text-transform: uppercase; letter-spacing: .14em;
    font-size: .65rem; font-weight: 700; color: #059f81; margin-bottom: 4px;
    font-family: 'Poppins', sans-serif;
}

/* ── Metric card accent bar ── */
.metric-card { position: relative; }
.metric-card::before {
    content: ""; position: absolute; left: 0; top: 0;
    width: 3px; height: 100%; background: #059f81; border-radius: 2px 0 0 2px;
}

/* ── Progress ── */
.progress { height: 5px; border-radius: 2px; background: var(--z1-bg-deep); }

/* ── QR box ── */
.qr-box { display: inline-block; width: 132px; padding: 6px; background: #fff; border: 1px solid #d6dbe4; border-radius: 4px; }
.qr-box-large { width: 200px; }
.qr-box svg { width: 100%; height: auto; display: block; background: #fff; }
.qr-box svg path { fill: #111 !important; }

/* ── Connection dialog ── */
.conn-dialog    { border: none; padding: 0; border-radius: 10px; overflow: hidden;
    width: min(960px, calc(100vw - 24px)); max-width: 960px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    background: var(--dialog-bg);
}
.conn-dialog::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }

/* ── Remote overlay ── */
.remote-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--z2-bg);
}
.remote-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--dark-band-text-primary);
    font-size: 14px;
}
.remote-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: none;
}
.remote-close-btn {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 10000;
    background: rgba(0,0,0,.55);
    border: 1px solid var(--z2-border);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}

/* ── Dark section card (inside bg-dark areas) ── */
.dark-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 6px;
    padding: .9rem 1rem;
    transition: background .15s;
}
.dark-card:hover { background: rgba(255,255,255,.12); }
.dark-card-index {
    font-size: .65rem; font-weight: 700; letter-spacing: .1em;
    color: #059f81; text-transform: uppercase; display: block; margin-bottom: 4px;
}
.dark-card-label {
    font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.55);
    text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 6px;
}
.dark-card strong { display: block; font-size: .88rem; color: #fff; margin-bottom: 4px; }
.dark-card p { font-size: .8rem; color: rgba(255,255,255,.5); margin: 0; }

/* ── Dark band （页面内嵌深色区块，取代 style="background:#111" 内联样式） ── */
.dark-band {
    background-color: var(--dark-band-bg);
    color: var(--z2-text);
}
.dark-band .eyebrow { color: #059f81; }
.dark-band .text-white { color: #fff !important; }
.dark-band .small-muted, .dark-band .text-secondary { color: var(--dark-band-text) !important; }
.dark-band p:not(.text-white) { color: var(--dark-band-text-primary); }
.dark-band .small:not(.text-white) { color: var(--dark-band-text); }

/* ── Utility: text accent colour ── */
.text-accent { color: #059f81 !important; }

/* ── User header (public pages dark banner) ── */
.user-dark-banner {
    background-color: var(--z2-bg);
    color: var(--z2-text);
}
.user-dark-banner h1, .user-dark-banner h2, .user-dark-banner strong { color: #fff; }
.user-dark-banner p, .user-dark-banner .banner-muted { color: var(--dark-band-text-primary); }
.user-dark-banner .stat-label, .user-dark-banner .small:not(.small-muted) { color: var(--dark-band-text); }

/* ── Dialog content panel (replaces style="background:#fff") ── */
.dialog-panel {
    background-color: var(--dialog-bg);
}

/* ── Feature points ── */
.feature-points { list-style: none; padding: 0; display: grid; gap: 5px; }
.feature-points li {
    padding: 8px 14px;
    background: var(--z1-card);
    border: 1px solid var(--z1-border); border-left: 3px solid #059f81;
    font-size: .86rem; color: var(--muted); border-radius: 0 4px 4px 0;
}
.feature-points li:hover { border-left-color: #f0a500; color: var(--ink); }

/* ── Compact stat row ── */
.stat-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.stat-item { text-align: center; }
.stat-item .stat-label { display: block; font-size: .7rem; color: rgba(255,255,255,.5); }
.stat-item .stat-value { display: block; font-size: 1.1rem; font-weight: 700; color: #fff; }

/* ── Dashboard sidebar ── */
.dashboard-sidebar {
    width: 220px;
    min-width: 220px;
    min-height: 100vh;
    background-color: var(--z2-bg);
}
@media (max-width: 991.98px) {
    .dashboard-sidebar {
        width: 100%;
        min-width: 0;
        min-height: auto;
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    .dashboard-sidebar .flex-grow-1 {
        flex-direction: row !important;
        flex-wrap: wrap;
        padding: 4px 8px;
    }
    .dashboard-sidebar .flex-grow-1 ul {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 2px;
    }
}

/* ── Dashboard top header bar ── */
.dash-header-bar {
    background-color: var(--z1-card);
    border-bottom: 1px solid var(--z1-border);
}
.dash-header-bar h1 { color: var(--ink); }
.dash-header-bar p  { color: var(--muted); }

/* ── Public nav (dark zone) ── */
.public-navbar {
    background-color: var(--z2-bg);
}

/* ── Public footer (dark zone) ── */
.public-footer {
    background-color: var(--z2-bg);
    color: var(--z2-text);
}

/* ── Utility: zone-2 muted text ── */
.z2-muted-text { color: var(--z2-muted) !important; }
.z2-border-color { border-color: var(--z2-border) !important; }
.sidebar-subtitle { font-size: .72rem; color: var(--z2-muted); }
.dash-intro { color: var(--muted) !important; }
.footer-muted { color: var(--z2-muted) !important; }

/* ── Alert overrides in dark mode ── */
@media (prefers-color-scheme: dark) {
    .alert-info    { background-color: rgba(13,202,240,0.12); color: #6bdbf0; border-color: rgba(13,202,240,0.20); }
    .alert-success { background-color: var(--success-soft);   color: #4ecba3; border-color: rgba(5,159,129,0.24); }
    .alert-warning { background-color: var(--warning-soft);   color: #e0b84a; border-color: rgba(242,190,0,0.22); }
    .alert-danger  { background-color: var(--danger-soft);    color: #e07070; border-color: rgba(220,60,50,0.22); }
    .table-warning > * > * { background-color: var(--warning-soft) !important; }
}