/* binbot-grid — shell propio + ajustes sobre Bracket (que aporta la base Bootstrap 4). */

:root {
    --bg:        #0f1115;
    --panel:     #171a21;
    --panel-2:   #1c2029;
    --border:    #262b35;
    --border-2:  #20242e;
    --text:      #c9ced6;
    --text-dim:  #8a93a2;
    --text-hi:   #e7ebf0;
    --up:        #24d17e;
    --down:      #ff5b5b;
    --sidebar-w: 210px;
    --header-h:  52px;
}

body.binbot {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------ shell */

.br-logo,
.br-logo a {
    position: fixed; top: 0; left: 0;
    width: var(--sidebar-w); height: var(--header-h);
    display: flex; align-items: center; padding: 0 18px;
    background: #12151b; border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    color: var(--text-hi); font-weight: 700; letter-spacing: .02em;
    text-decoration: none; z-index: 30;
}
.br-logo a span { color: var(--up); }

.br-sideleft {
    position: fixed; top: var(--header-h); left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: #12151b; border-right: 1px solid var(--border);
    padding: 12px 0; overflow-y: auto; z-index: 20;
}
.br-sideleft .sidebar-label {
    display: block; padding: 12px 18px 6px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-dim);
}
.br-sideleft .br-menu-link {
    display: block; text-decoration: none;
}
.br-sideleft .br-menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px; color: var(--text-dim); font-size: 13px;
    border-left: 2px solid transparent;
}
.br-sideleft .br-menu-link:hover .br-menu-item { color: var(--text-hi); background: #171b22; }
.br-sideleft .br-menu-link.active .br-menu-item {
    color: var(--text-hi); background: #1a1f27;
    border-left-color: var(--up);
}
.br-sideleft .menu-item-icon { width: 16px; text-align: center; font-size: 14px; }

.br-header {
    position: fixed; top: 0; left: var(--sidebar-w); right: 0;
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
    background: var(--panel); border-bottom: 1px solid var(--border);
    z-index: 25;
}
.br-header .env-tag { font-size: 12px; }
.br-header a { color: var(--text-dim); text-decoration: none; }
.br-header a:hover { color: var(--text-hi); }

.br-mainpanel {
    margin-left: var(--sidebar-w);
    padding-top: var(--header-h);
    min-height: 100vh;
}
.br-pagebody { padding: 22px 25px; }
.bg-page-title { padding: 18px 25px 4px; }
.bg-page-title h4 { color: var(--text-hi); margin: 0; font-weight: 600; }
.bg-page-title .sub { color: var(--text-dim); font-size: 12px; }

@media (max-width: 800px) {
    .br-sideleft, .br-logo { transform: translateX(-100%); transition: transform .2s; }
    body.nav-open .br-sideleft, body.nav-open .br-logo { transform: none; }
    .br-header { left: 0; }
    .br-mainpanel { margin-left: 0; }
    #navToggle { display: inline-block !important; }
}
#navToggle { display: none; background: none; border: 0; color: var(--text-dim); font-size: 18px; cursor: pointer; }

/* ------------------------------------------------------------------ componentes */

.card-bg { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.card-bg .card-header {
    background: var(--panel-2); border-bottom: 1px solid var(--border);
    color: var(--text-hi); font-weight: 600; padding: 10px 15px;
}

.kv { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.tx-up { color: var(--up); }
.tx-down { color: var(--down); }
.tx-muted { color: #6c7686; }
.tx-warning { color: #e7b64b; }
.tx-danger { color: var(--down); }

.grid-status { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.grid-status.draft    { background:#2b2f3a; color:#9aa4b2; }
.grid-status.armed    { background:#3a3320; color:#e7b64b; }
.grid-status.active   { background:#123726; color:#24d17e; }
.grid-status.paused   { background:#33240f; color:#e79b3b; }
.grid-status.stopping { background:#33240f; color:#e79b3b; }
.grid-status.stopped  { background:#3a1f1f; color:#ff7b7b; }

.login-wrap { min-height: 100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.login-card { width: 340px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:28px; }
.login-card h5 { color:var(--text-hi); margin-bottom: 4px; }
.login-card .brand { color:var(--up); font-weight:700; }

table.grid-table { width:100%; border-collapse: collapse; }
table.grid-table th { color:var(--text-dim); font-weight:600; font-size:11px; text-transform:uppercase; border-bottom:1px solid var(--border); padding:8px 10px; text-align:left; }
table.grid-table td { border-bottom:1px solid var(--border-2); padding:8px 10px; color:var(--text); vertical-align: middle; }

/* inputs/botones sobre Bracket */
.form-control { background:#0f1216; border:1px solid var(--border); color:var(--text); }
.form-control:focus { background:#0f1216; border-color:#3a6df0; color:var(--text-hi); box-shadow:none; }
label.kv { display:block; margin-bottom:4px; }