:root{
    /* Light theme defaults */
    --bg: #f8fafc; /* slate-50 */
    --muted: #475569; /* slate-600 */
    --card: #ffffff;
    --card-grad-top: #ffffff;
    --card-grad-bottom: #f1f5f9; /* slate-100 */
    --border: #e2e8f0; /* slate-200 */
    --accent: #2563eb; /* blue-600 */
    --accent-contrast: #ffffff;
    --text: #0f172a; /* slate-900 */
    --surface: #f1f5f9; /* slate-100 */
    --link: #1d4ed8; /* blue-700 */
    --link-hover-bg: rgba(37, 99, 235, 0.12);
    --pill-bg: #e2e8f0; /* slate-200 */
    --pill-text: #0f172a; /* slate-900 */
    --header-sticky-top: 0;
}
[data-theme="dark"]{
    --bg:#0f172a; /* slate-900 */
    --muted:#94a3b8; /* slate-400 */
    --card:#111827; /* gray-900 */
    --card-grad-top: #101827;
    --card-grad-bottom: #0b1325;
    --border:#1f2937; /* slate-800 */
    --accent:#60a5fa; /* blue-400 */
    --accent-contrast: #0b1020;
    --text:#e5e7eb; /* slate-200 */
    --surface:#0b1020; /* near bg */
    --link:#93c5fd; /* blue-300 */
    --link-hover-bg: rgba(147, 197, 253, 0.12);
    --pill-bg:#1f2937; /* slate-800 */
    --pill-text:#e5e7eb;
}
*{ box-sizing:border-box }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:var(--surface); color:var(--text); }
header{ background:var(--bg); border-bottom:1px solid var(--border); position:sticky; top:var(--header-sticky-top); z-index:10; }
.wrap{ max-width:1280px; margin:0 auto; padding:14px 16px; }
.nav{ display:flex; gap:14px; align-items:center; justify-content:space-between; }
.nav .left{ display:flex; gap:14px; align-items:center; }
.nav a{ color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:6px; }
.nav a.active, .nav a:hover{ background:var(--link-hover-bg); color:var(--text); }
h1{ margin:0 0 12px; font-size:20px; }
main .wrap{ padding-top:18px; }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.card{ background:linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bottom)); border:1px solid var(--border); border-radius:10px; padding:14px; }
.alert{ border:1px solid var(--border); border-left-width:4px; padding:10px 12px; border-radius:8px; margin-bottom:12px; background: var(--bg); }
.alert-success{ border-left-color:#10b981; }
.alert-error{ border-left-color:#ef4444; }
.alert-warning{ border-left-color:#f59e0b; }
.kpi{ display:flex; justify-content:space-between; align-items:center; }
.muted{ color:var(--muted); font-size:12px; }
table{ width:100%; border-collapse: collapse; }
th,td{ padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; }
th{ color:var(--text); font-weight:600; background:var(--surface); position:sticky; top:48px; }
input,select,button{ background:var(--surface); border:1px solid var(--border); color:var(--text); padding:6px 8px; border-radius:6px; }
.controls{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.pill{ display:inline-block; padding:2px 8px; background:var(--pill-bg); color:var(--pill-text); border-radius:999px; font-size:12px; }
/* Pill variants */
.pill.synced{ background:#065f46; color:#d1fae5; } /* emerald-800 bg, emerald-100 text */
.pill.not-synced{ background:#1e3a8a; color:#dbeafe; } /* blue-900 bg, blue-100 text */
/* Status variants */
.pill.status-success, .pill[data-status="success"]{ background:#065f46; color:#d1fae5; } /* emerald */
.pill.status-failed, .pill.status-error, .pill[data-status="failed"], .pill[data-status="error"]{ background:#7f1d1d; color:#fee2e2; } /* red */
.pill.status-processing, .pill[data-status="processing"], .pill.status-not-synced{ background:#1e3a8a; color:#dbeafe; } /* blue */
/* queued/pending as yellow */
.pill.status-queued, .pill.status-pending, .pill[data-status="queued"], .pill[data-status="pending"]{ background:#f59e0b; color:#111827; }
/* Level badges */
.pill.level-info{ background:#1e3a8a; color:#dbeafe; }
.pill.level-debug{ background:#065f46; color:#d1fae5; }
.pill.level-error{ background:#7f1d1d; color:#fee2e2; }
.pill.level-warning{ background:#78350f; color:#fef3c7; }
footer{ color:var(--muted); padding:12px 0 30px; }
/* Simple tabs */
.tabs{ display:flex; gap:8px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.tab-link{ padding:6px 10px; border-radius:6px 6px 0 0; background:var(--surface); color:var(--muted); text-decoration:none; }
.tab-link.active{ background:var(--bg); color:var(--text); border:1px solid var(--border); border-bottom:none; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* Card titles */
.card-title{ font-size:16px; font-weight:700; display:block; padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--border); }

/* Small buttons */
.btn-sm{ padding:4px 8px; font-size:12px; border-radius:6px; }

/* High-contrast links/buttons */
a.link{ color:var(--link); text-underline-offset: 2px; text-decoration-thickness: 2px; }
a.link:hover{ background: var(--link-hover-bg); border-radius:4px; }
a.link:focus-visible, .btn:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; border:1px solid var(--border); background: var(--bg); color: var(--text); text-decoration:none; cursor:pointer; }
.btn{ font-size:12px; }
.btn:hover{ background: var(--link-hover-bg); }
.btn-primary{ background: var(--accent); color: var(--accent-contrast); border-color: rgba(0,0,0,0); }
.btn-primary:hover{ filter: brightness(0.95); }
.btn-danger{ background: var(--danger); color: var(--danger-contrast); border-color: rgba(0,0,0,0); }
.btn-danger:hover{ filter: brightness(0.95); }
.btn-success{ background: var(--success, #10b981); color: var(--success-contrast, #ffffff); border-color: rgba(0,0,0,0); }
.btn-success:hover{ filter: brightness(0.95); }

/* Disabled buttons */
.btn.disabled, .btn:disabled, button[disabled].btn, .menu .menu-item:disabled{
    opacity: .55;
    background: var(--border);
    color: var(--muted);
    border-color: var(--border);
    cursor: not-allowed;
    pointer-events: none;
}
.btn.disabled:hover, .btn:disabled:hover{ background: var(--border); filter:none; }
.btn-success{ background: var(--success, #10b981); color: var(--success-contrast, #ffffff); border-color: rgba(0,0,0,0); }
.btn-success:hover{ filter: brightness(0.95); }

/* Theme toggle */
.theme-toggle{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:var(--bg); color:var(--text); cursor:pointer; }
.theme-toggle:hover{ background:var(--link-hover-bg); }
.icon{ width:18px; height:18px; display:block; }
[data-theme="dark"] .icon-sun{ display:none; }
[data-theme="light"] .icon-moon{ display:none; }

/* Pagination fallback styling (without Tailwind) */
nav[role="navigation"] a,
nav[role="navigation"] span{
    display:inline-block;
    padding:6px 10px;
    margin-right:4px;
    border-radius:6px;
    border:1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    text-decoration:none;
}
nav[role="navigation"] a:hover{
    background: var(--link-hover-bg);
}

/* Smaller table text for lists */
.table-small th, .table-small td { font-size: 13px; }

/* Dropdown */
.dropdown{ position:relative; display:inline-block; }
.dropdown .menu{ display:none; position:absolute; top:100%; left:0; min-width:180px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:6px; z-index:20; }
.dropdown.open .menu{ display:block; }
.menu .menu-item{ display:block; width:100%; text-align:left; padding:6px 8px; border:none; background:transparent; color:var(--text); border-radius:6px; cursor:pointer; }
.menu .menu-item:hover{ background:var(--link-hover-bg); }

/* Filters panel */
.filters-toolbar{ display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; }
.filters-panel{ display:none; margin-bottom:10px; }
.filters-panel.open{ display:block; }
.filters-grid{ display:grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap:16px; }
.filters-grid .field{ display:flex; flex-direction:column; gap:8px; }
.filters-grid label{ font-size:12px; color:var(--muted); }
.filters-grid input, .filters-grid select{ line-height:1.8; }

/* Colors */
:root{ --danger:#ef4444; --danger-contrast:#fff; }
[data-theme="dark"]{ --danger:#ef4444; --danger-contrast:#0b1020; }
[data-theme="light"] .disabled, [data-theme="dark"] .disabled{ opacity:0.5; pointer-events:none; }
[data-theme="light"]{ --success:#10b981; --success-contrast:#ffffff; }
[data-theme="dark"]{ --success:#10b981; --success-contrast:#0b1020; }
.pagination-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.pagination-bar .pager{ display:flex; gap:8px; align-items:center; justify-content:center; flex:1; }
.pagination-bar .btn.disabled{ background: var(--border); color: var(--muted); pointer-events:none; }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.actions-right{ display:flex; align-items:center; gap:8px; }
.btn .icon-left{ width:14px; height:14px; display:inline-block; }

/* Inline spinner for buttons */
.spinner-inline{ width:14px; height:14px; border:2px solid var(--border); border-top-color: var(--text); border-radius:50%; display:inline-block; vertical-align:middle; margin-right:6px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toasts */
.toast-container{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:1000; }
.toast{ min-width:240px; max-width:360px; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background: var(--bg); color: var(--text); box-shadow: 0 10px 24px rgba(0,0,0,.18); opacity:0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.toast.show{ opacity:1; transform: translateY(0); }
.toast-success{ border-color: rgba(16,185,129,.3); }
.toast-error{ border-color: rgba(239,68,68,.35); }
.toast-info{ border-color: rgba(59,130,246,.35); }