/* ─── Theme variables ──────────────────────────────────────────────────────── */
:root {
    --color-bg:           #f7f8fa;
    --color-bg-elev:      #ffffff;
    --color-bg-nav:       #2c3e50;
    --color-text:         #1f2933;
    --color-text-muted:   #5b6770;
    --color-border:       #d8dde3;
    --color-border-soft:  #eef0f3;
    --color-accent:       #3498db;
    --color-success:      #2ecc71;
    --color-success-bg:   #ebfbf1;
    --color-warning:      #f39c12;
    --color-warning-bg:   #fef5e7;
    --color-danger:       #e74c3c;
    --color-danger-bg:    #fdecea;
    --color-info:         #1abc9c;
    --color-neutral:      #95a5a6;
    --color-orange:       #e67e22;
    --color-code-bg:      #f4f5f7;
    --color-pre-bg:       #1e1e1e;
    --color-pre-text:     #d4d4d4;
    --color-table-stripe: #fafbfc;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
}

[data-theme="dark"] {
    --color-bg:           #15181d;
    --color-bg-elev:      #1e2228;
    --color-bg-nav:       #0f1115;
    --color-text:         #e2e6ea;
    --color-text-muted:   #8e96a0;
    --color-border:       #2c323b;
    --color-border-soft:  #232830;
    --color-accent:       #4aa6e6;
    --color-success:      #2ecc71;
    --color-success-bg:   #14301f;
    --color-warning:      #f39c12;
    --color-warning-bg:   #3a2c10;
    --color-danger:       #e74c3c;
    --color-danger-bg:    #3a1715;
    --color-info:         #1abc9c;
    --color-neutral:      #6c7680;
    --color-orange:       #e67e22;
    --color-code-bg:      #2a2f37;
    --color-pre-bg:       #0c0e11;
    --color-pre-text:     #d4d4d4;
    --color-table-stripe: #1a1e24;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */
html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5em; margin: 0 0 16px 0; }
h2 { font-size: 1.15em; margin: 0 0 10px 0; }

code, pre {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
code {
    background: var(--color-code-bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}
pre {
    background: var(--color-pre-bg);
    color: var(--color-pre-text);
    padding: 10px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 0.85em;
}

/* ─── Nav ──────────────────────────────────────────────────────────────────── */
.wsm-nav {
    background: var(--color-bg-nav);
    color: white;
    padding: 8px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.wsm-nav .brand {
    color: white;
    margin-right: 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-weight: 600;
}
.wsm-nav .brand img { width: 28px; height: 28px; margin-right: 8px; }
.wsm-nav a.nav-link {
    color: #bdc3c7;
    margin-right: 6px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wsm-nav a.nav-link:hover { background: rgba(255,255,255,0.08); color: white; text-decoration: none; }
.wsm-nav .nav-spacer { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wsm-nav .theme-btn,
.wsm-nav .logout-btn {
    background: transparent;
    color: #bdc3c7;
    border: 1px solid #4a5868;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wsm-nav .theme-btn:hover,
.wsm-nav .logout-btn:hover { background: rgba(255,255,255,0.08); color: white; }

/* ─── Layout container ─────────────────────────────────────────────────────── */
.wsm-main { padding: 0 16px 32px 16px; max-width: 1400px; margin: 0 auto; }

/* ─── Cards / sections ─────────────────────────────────────────────────────── */
section {
    background: var(--color-bg-elev);
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

/* ─── Tables ───────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
table thead th {
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    padding: 6px 8px;
    font-size: 0.9em;
    color: var(--color-text-muted);
}
table tbody td { padding: 6px 8px; border-bottom: 1px solid var(--color-border-soft); }
table tbody tr:nth-child(even) { background: var(--color-table-stripe); }

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 500;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); }
.btn-success { background: var(--color-success); }
.btn-danger  { background: var(--color-danger); }
.btn-warning { background: var(--color-warning); color: #4a3500; }
.btn-orange  { background: var(--color-orange); }
.btn-neutral { background: var(--color-neutral); }
.btn-sm { padding: 2px 8px; font-size: 0.85em; }

/* ─── Status banner ────────────────────────────────────────────────────────── */
.status-banner {
    border: 2px solid;
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 16px;
}
.status-banner.online  { border-color: var(--color-success); background: var(--color-success-bg); }
.status-banner.offline { border-color: var(--color-danger);  background: var(--color-danger-bg); }
.status-banner h2 { margin-top: 0; }
.status-banner .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.status-banner.online  .dot { background: var(--color-success); }
.status-banner.offline .dot { background: var(--color-danger); }

/* ─── Alerts ───────────────────────────────────────────────────────────────── */
.alert {
    border-left: 4px solid;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}
.alert-warning { border-color: var(--color-warning); background: var(--color-warning-bg); }
.alert-danger  { border-color: var(--color-danger);  background: var(--color-danger-bg); }
.alert-success { border-color: var(--color-success); background: var(--color-success-bg); }

/* ─── Forms ────────────────────────────────────────────────────────────────── */
input[type="text"], input[type="password"], input[type="number"], textarea, select {
    background: var(--color-bg-elev);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 0.95em;
    font-family: inherit;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

/* ─── Badges ───────────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; font-weight: 500; color: white; }
.badge-restart { background: var(--color-orange); }
.badge-announce { background: var(--color-accent); }

/* ─── Mobile responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wsm-nav { padding: 8px 12px; }
    .wsm-nav .brand { margin-right: 8px; font-size: 0.95em; }
    .wsm-nav a.nav-link { padding: 6px 8px; font-size: 0.95em; }
    .wsm-nav .nav-spacer { width: 100%; margin-top: 6px; justify-content: flex-end; }
    .wsm-main { padding: 0 12px 32px 12px; }
    section { padding: 10px 12px; }
    h1 { font-size: 1.3em; }
    table { font-size: 0.9em; }
    table thead th, table tbody td { padding: 4px 6px; }
    /* Stack form fields vertically on narrow screens. */
    input[type="text"], textarea, select { width: 100% !important; box-sizing: border-box; }
}

/* ─── Theme toggle icon swap ───────────────────────────────────────────────── */
.theme-btn .bi-moon { display: inline; }
.theme-btn .bi-sun  { display: none; }
[data-theme="dark"] .theme-btn .bi-moon { display: none; }
[data-theme="dark"] .theme-btn .bi-sun  { display: inline; }