/*
 * bontuu theme for Syncthing — mirror.bontuu.com
 * squawk design system v1.0 — 2026-04-20
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap');

* { font-family: 'JetBrains Mono','Fira Code','Cascadia Code','Consolas',monospace !important; letter-spacing: -0.01em; }

:root {
    --bg:#0d0f12; --bg-sidebar:#0a0c0f; --bg-input:#070809;
    --bg-hover:#0f1115; --bg-active:#0f1520; --border:#1e2229;
    --border-row:#111418; --accent:#5DCAA5; --accent-dark:#1D9E75;
    --text-primary:#c8cdd6; --text-secondary:#9ca3af;
    --text-muted:#566270; --text-dim:#3d4450;
    --ok:#5DCAA5; --ok-bg:#0f2018; --warn:#EF9F27; --warn-bg:#2a1f10;
    --crit:#E24B4A; --crit-bg:#2a1010; --info:#378ADD; --info-bg:#0c1e30;
}

body { background-color:var(--bg) !important; color:var(--text-primary) !important; }

.navbar,.navbar-default,nav.navbar { background-color:var(--bg-sidebar) !important; border-bottom:1px solid var(--border) !important; box-shadow:none !important; }
.navbar-default .navbar-brand,.navbar-brand { color:var(--accent) !important; font-weight:600 !important; font-size:15px !important; letter-spacing:0.02em !important; }
.navbar-default .navbar-nav > li > a,.navbar-nav > li > a { color:var(--text-secondary) !important; font-size:12px !important; }
.navbar-default .navbar-nav > li > a:hover { color:var(--text-primary) !important; background-color:var(--bg-hover) !important; }
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:hover { background-color:var(--bg-active) !important; color:var(--accent) !important; }

.panel,.panel-default { background-color:var(--bg) !important; border:1px solid var(--border) !important; box-shadow:none !important; border-radius:0 !important; }
.panel-heading,.panel-default > .panel-heading { background-color:var(--bg-sidebar) !important; border-bottom:1px solid var(--border) !important; color:var(--text-primary) !important; border-radius:0 !important; font-size:12px !important; font-weight:500 !important; text-transform:uppercase !important; letter-spacing:0.08em !important; }
.panel-body { background-color:var(--bg) !important; color:var(--text-secondary) !important; font-size:12px !important; }

table,.table { color:var(--text-secondary) !important; font-size:12px !important; }
.table > thead > tr > th { border-bottom:1px solid var(--border) !important; color:var(--text-muted) !important; font-weight:500 !important; text-transform:uppercase !important; letter-spacing:0.06em !important; font-size:11px !important; background-color:var(--bg-sidebar) !important; }
.table > tbody > tr > td { border-top:1px solid var(--border-row) !important; color:var(--text-secondary) !important; vertical-align:middle !important; }
.table > tbody > tr:hover > td { background-color:var(--bg-hover) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color:var(--bg-input) !important; }
.table-striped > tbody > tr:nth-of-type(even) { background-color:var(--bg) !important; }

.btn-default { background-color:var(--bg-input) !important; border:1px solid var(--border) !important; color:var(--text-secondary) !important; border-radius:0 !important; font-size:12px !important; }
.btn-default:hover { background-color:var(--bg-hover) !important; color:var(--text-primary) !important; border-color:var(--accent) !important; }
.btn-primary { background-color:var(--accent) !important; border-color:var(--accent-dark) !important; color:#0d0f12 !important; border-radius:0 !important; font-size:12px !important; font-weight:600 !important; }
.btn-primary:hover { background-color:var(--accent-dark) !important; }
.btn-sm { font-size:11px !important; border-radius:0 !important; }

input[type="text"],input[type="password"],input[type="email"],input[type="number"],select,textarea,.form-control { background-color:var(--bg-input) !important; border:1px solid var(--border) !important; color:var(--text-primary) !important; border-radius:0 !important; font-size:12px !important; box-shadow:none !important; }
input:focus,select:focus,textarea:focus,.form-control:focus { border-color:var(--accent) !important; box-shadow:0 0 0 1px var(--accent) !important; outline:none !important; }
.form-control::placeholder { color:var(--text-muted) !important; }
label { color:var(--text-muted) !important; font-size:11px !important; font-weight:500 !important; text-transform:uppercase !important; letter-spacing:0.06em !important; }

.label-success,.badge-success { background-color:var(--ok-bg) !important; color:var(--ok) !important; border:1px solid var(--ok) !important; border-radius:2px !important; font-size:10px !important; font-weight:500 !important; text-transform:uppercase !important; letter-spacing:0.06em !important; }
.label-warning,.badge-warning { background-color:var(--warn-bg) !important; color:var(--warn) !important; border:1px solid var(--warn) !important; border-radius:2px !important; font-size:10px !important; font-weight:500 !important; }
.label-danger,.badge-danger { background-color:var(--crit-bg) !important; color:var(--crit) !important; border:1px solid var(--crit) !important; border-radius:2px !important; font-size:10px !important; font-weight:500 !important; }
.label-info,.badge-info { background-color:var(--info-bg) !important; color:var(--info) !important; border:1px solid var(--info) !important; border-radius:2px !important; font-size:10px !important; }
.label-default,.badge-default { background-color:var(--bg-input) !important; color:var(--text-muted) !important; border:1px solid var(--border) !important; border-radius:2px !important; font-size:10px !important; }

.progress { background-color:var(--bg-input) !important; border-radius:0 !important; height:6px !important; box-shadow:none !important; }
.progress-bar { background-color:var(--accent) !important; box-shadow:none !important; }
.progress-bar-warning { background-color:var(--warn) !important; }
.progress-bar-danger { background-color:var(--crit) !important; }

.modal-content { background-color:var(--bg) !important; border:1px solid var(--border) !important; border-radius:0 !important; box-shadow:0 4px 32px rgba(0,0,0,0.6) !important; }
.modal-header { background-color:var(--bg-sidebar) !important; border-bottom:1px solid var(--border) !important; border-radius:0 !important; }
.modal-header h4,.modal-title { color:var(--text-primary) !important; font-size:13px !important; font-weight:500 !important; }
.modal-body { color:var(--text-secondary) !important; font-size:12px !important; }
.modal-footer { border-top:1px solid var(--border) !important; background-color:var(--bg-sidebar) !important; }
.modal-backdrop.in { opacity:0.7 !important; }

.dropdown-menu { background-color:var(--bg-input) !important; border:1px solid var(--border) !important; border-radius:0 !important; box-shadow:0 4px 16px rgba(0,0,0,0.5) !important; }
.dropdown-menu > li > a { color:var(--text-secondary) !important; font-size:12px !important; }
.dropdown-menu > li > a:hover { background-color:var(--bg-hover) !important; color:var(--text-primary) !important; }
.dropdown-menu .divider { background-color:var(--border) !important; }

.alert { border-radius:0 !important; font-size:12px !important; border-width:1px !important; border-left-width:3px !important; }
.alert-success { background-color:var(--ok-bg) !important; border-color:var(--ok) !important; color:var(--ok) !important; }
.alert-warning { background-color:var(--warn-bg) !important; border-color:var(--warn) !important; color:var(--warn) !important; }
.alert-danger { background-color:var(--crit-bg) !important; border-color:var(--crit) !important; color:var(--crit) !important; }
.alert-info { background-color:var(--info-bg) !important; border-color:var(--info) !important; color:var(--info) !important; }

a { color:var(--accent) !important; }
a:hover { color:var(--accent-dark) !important; text-decoration:none !important; }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-input); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:0; }
::-webkit-scrollbar-thumb:hover { background:var(--text-dim); }

footer,#footer { background-color:var(--bg-sidebar) !important; border-top:1px solid var(--border) !important; color:var(--text-dim) !important; font-size:11px !important; }
pre,code { background-color:var(--bg-input) !important; border:1px solid var(--border) !important; color:var(--accent) !important; border-radius:0 !important; font-family:'JetBrains Mono',monospace !important; font-size:11px !important; }

.tooltip-inner { background-color:var(--bg-input) !important; color:var(--text-primary) !important; border:1px solid var(--border) !important; border-radius:0 !important; font-size:11px !important; max-width:300px !important; }
.tooltip.top .tooltip-arrow { border-top-color:var(--border) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color:var(--border) !important; }

.panel-body .row { border-bottom:1px solid var(--border-row) !important; padding:8px 0 !important; margin:0 !important; }
.panel-body .row:last-child { border-bottom:none !important; }
.panel-body h5,.panel-body .lead { color:var(--text-primary) !important; font-size:13px !important; font-weight:500 !important; margin:0 0 4px 0 !important; }
small,.small,.text-muted { color:var(--text-muted) !important; font-size:11px !important; }
.text-success { color:var(--ok) !important; }
.text-warning { color:var(--warn) !important; }
.text-danger { color:var(--crit) !important; }
.text-info { color:var(--info) !important; }
.container-fluid,.container,#content,#wrapper,main { background-color:var(--bg) !important; }
.navbar-brand img { height:22px !important; width:auto !important; }