.btn-block {
    width: 100%;
}

body {
    font-size: .875rem;
}

/*
 * Sidebar
 */

.sidebar {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    background-color: var(--bs-body-tertiary);
}

@media (max-width: 767.98px) {
    .sidebar {
        top: 0;
    }
}

.sidebar-sticky {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
    font-weight: 500;
    color: var(--bs-body-color);
}

.sidebar .nav-link .bi {
    margin-right: 4px;
    color: var(--bs-secondary-color);
}

.sidebar .nav-link.active {
    color: var(--bs-primary);
}

.sidebar .nav-link:hover .bi,
.sidebar .nav-link.active .bi {
    color: inherit;
}

.sidebar-heading {
    font-size: .75rem;
}

/* ---- libraNav: light theme = dark slate rows (except first) + light-blue active; dark theme = #212529 rows ---- */
nav.sidebar { background-color: #32404e !important; }
nav.sidebar .navbar-brand { color: #dfe4e8 !important; }
[data-xtype=nav] tr[data-selected] td,
[data-xtype=nav] tbody tr[data-selected] td,
[data-xtype=nav] td[data-selected] { background-color: #35baf6 !important; color: #fff !important; }
nav.sidebar libra-nav a { color: #dfe4e8; }
nav.sidebar libra-nav a:hover { color: #fff; }
nav.sidebar libra-nav tr[data-selected] a,
nav.sidebar libra-nav td[data-selected] a { color: #fff !important; }
.brand-band { background-color: #35baf6 !important; color: #fff !important; }
body { background-color: #f6f6f6 !important; }
[data-xtype=nav] :first-child td { background-color: #35baf6 !important; color: #fff !important; }
[data-xtype=nav] tr[data-selected]:first-child td { background-color: #35baf6 !important; color: #fff !important; }

/* ---- nav theme tokens (inherit into shadow DOM); nav rows except first match the header bg ---- */
:root, [data-bs-theme="light"] {
  --libra-nav-bg: #32404e;
  --libra-nav-text: #dfe4e8;
  --libra-nav-hover-bg: #3c4854;
  --libra-nav-active-bg: #35baf6;
  --libra-nav-active-text: #ffffff;
  --libra-tree-hover-bg: #e9ecef;
}
[data-bs-theme="dark"] {
  --libra-nav-bg: var(--bs-body-bg);
  --libra-nav-text: #e9ecef;
  --libra-nav-hover-bg: #1a1d1f;
  --libra-nav-active-bg: #161719;
  --libra-nav-active-text: #e9ecef;
  --libra-tree-hover-bg: #1a1d1f;
}

/* ---- dark theme: nav rows except first match the header (var --bs-body-bg = #212529); first button + body = darker gray #1a1d1f ---- */
[data-bs-theme="dark"] nav.sidebar { background-color: #212529 !important; }
[data-bs-theme="dark"] body { background-color: #161719 !important; }
[data-bs-theme="dark"] nav.sidebar .navbar-brand { color: #e9ecef !important; }
[data-bs-theme="dark"] nav.sidebar libra-nav a { color: #e9ecef; }
[data-bs-theme="dark"] nav.sidebar libra-nav a:hover { color: #f8f9fa; }
[data-bs-theme="dark"] [data-xtype=nav] tr[data-selected] td,
[data-bs-theme="dark"] [data-xtype=nav] td[data-selected] { background-color: #1a1d1f !important; color: #e9ecef !important; }
[data-bs-theme="dark"] .brand-band,
[data-bs-theme="dark"] [data-xtype=nav] :first-child td,
[data-bs-theme="dark"] [data-xtype=nav] tr[data-selected]:first-child td { background-color: #161719 !important; color: #e9ecef !important; }
[data-bs-theme="dark"] .wmMenuView tbody[data-xtype=tree] tr[data-loid]:hover,
[data-bs-theme="dark"] .wmMenuView tbody[data-xtype=tree] tr:hover,
[data-bs-theme="dark"] .wmMenuView tbody[data-xtype=table] tr:hover { background-color: #1a1d1f; }

/* ---- header layout: attach to nav, no gaps ---- */
nav.sidebar + div { margin: 0; padding: 0; }

/* ---- nav menu: fill the sidebar; scroll only when items overflow ---- */
nav.sidebar { overflow: hidden !important; }
nav.sidebar libra-nav { height: 100% !important; }
nav.sidebar libra-nav [data-xtype=nav] { overflow: hidden !important; }
nav.sidebar .sidebar-sticky { height: 100%; }
/* fixed per-item row height (no color change) */
nav.sidebar libra-nav tbody tr { height: 56px; }
nav.sidebar libra-nav tbody tr td { height: 56px; }

/* ---- uniform wmView heights (top/left/right/bottom) ---- */
.wmView { margin: 7px !important; border-radius: var(--bs-border-radius, 0.375rem) !important; border: 1px solid var(--bs-border-color) !important; }
.wmMenuView { margin: 7px 0 7px 7px !important; }
.wmPocket { margin: 7px 7px 7px 0 !important; }

/* ---- pocket GNOME taskbar: Bootstrap btn-outline-secondary look (icons left) ---- */
.widgets-container .btn { border-radius: var(--bs-btn-border-radius, var(--bs-border-radius, 0.375rem)); }
.widgets-container .btn-outline-secondary { border-color: var(--bs-secondary); color: var(--bs-secondary); }
.widgets-container .btn-outline-secondary:hover { background-color: var(--bs-secondary); color: #fff; }
.widgets-container .btn .bi { font-size: 1rem; }

/* ---- header tools: vertical alignment (anonymous === globe icon) ---- */
header .btn, header libra-a, header .nav-link,
header libra-menu > a, header a.nav-link {
  display: inline-flex !important; align-items: center !important;
  line-height: 1 !important; vertical-align: middle !important;
}
header libra-menu { display: inline-flex !important; align-items: center !important; }
header libra-menu .nav-link { padding-top: .35rem !important; padding-bottom: .35rem !important; }
header libra-container, header libra-container * { vertical-align: middle !important; }
/* binding: [hidden] must win over the inline-flex alignment above */
header .btn[hidden], header libra-a[hidden], header libra-menu[hidden],
header .nav-link[hidden], header libra-container button[hidden] { display: none !important; }
[hidden] { display: none !important; }

/*
 * Navbar
 */

.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(var(--bs-emphasis-color-rgb), .05);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
    top: .25rem;
    right: 1rem;
}

.navbar .form-control {
    padding: .75rem 1rem;
}

.form-control-dark {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

.form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(53, 186, 246, .25);
}

/* ---- auth views (signin/signup/signon) ---- */
.auth-left { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 2rem 1.5rem; }
.auth-right { min-height: 100vh; background-color: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; }
.auth-logo { margin-bottom: 1.5rem; }
.auth-logo img { max-height: 48px; width: auto; }
.auth-title { font-weight: 700; color: var(--bs-body-color); }
.auth-subtitle { color: var(--bs-secondary-color); }
.divider { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.divider:before, .divider:after { content: ""; flex: 1; border-top: 1px solid var(--bs-border-color); }
.text-gray-600 { color: var(--bs-secondary-color); }
.has-icon-left { position: relative; }
.has-icon-left .form-control-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); z-index: 2; }
.has-icon-left .form-control { padding-left: 2.5rem; }

/* ---- user menu (WmOne header) ---- */
#user-menu .dropdown-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem; }
#user-menu .dropdown-menu { min-width: 11rem; padding-left: 0; padding-right: 0; }
#user-menu .dropdown-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; padding-left: 1rem; text-align: left; }
#user-menu .dropdown-menu .dropdown-item .bi { margin-right: .5rem; flex: 0 0 auto; }
#user-menu a.nav-link.dropdown-toggle { cursor: pointer; }
#user-menu .dropdown-menu .dropdown-item { justify-content: flex-start; text-align: left; }
#user-menu .dropdown-menu .dropdown-item > a,
#user-menu .dropdown-menu .dropdown-item > button { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: .5rem; }
#user-menu .dropdown-menu .dropdown-item > button.btn { padding-left: 0; padding-right: .5rem; }

/* ---- libra-menu: nested libra-container trigger (dropdown toggle) ---- */
.menu > li > libra-container { display: inline-flex !important; align-items: center !important; gap: .5rem; padding: .25rem .5rem; cursor: pointer; }
.menu > li > libra-container libra-button, .menu > li > libra-container .btn { display: inline-flex; align-items: center; }
.menu > li > libra-container > * { align-self: center; }
#user-menu .dropdown-menu { min-width: 11rem; padding-left: 0; padding-right: 0; }
#user-menu .dropdown-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; padding-left: 1rem; text-align: left; }
#user-menu .dropdown-menu .dropdown-item .bi { margin-right: .5rem; flex: 0 0 auto; }
#user-menu a.nav-link.dropdown-toggle, #user-menu libra-container.nav-link.dropdown-toggle { cursor: pointer; }

/* ---- fix top-right menu overflow: keep dropdown border inside the window (+5px) ---- */
#bd-theme-menu .dropdown-menu,
#bd-theme-menu.dropdown-menu,
#user-menu .dropdown-menu { right: 5px !important; left: auto !important; max-width: calc(100vw - 10px); }

/* ---- pocket theme menu: dropdown items like the user-menu (plain, no button box) ---- */
#bd-theme-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; padding-left: 1rem; text-align: left; }
#bd-theme-menu .dropdown-item .bi { margin-right: .5rem; flex: 0 0 auto; }
#bd-theme-menu .dropdown-item.btn,
#bd-theme-menu .dropdown-item.cp { border: 0; border-radius: 0; background-color: transparent; }

/* ---- wmMenuView: fixed centered menu title (card-header) + scrollable body ---- */
.wmMenuView .carousel-item.active { display: flex !important; flex-direction: column; overflow-x: hidden !important; overflow-y: auto !important; }
.wmMenuView .carousel-item.active > .card-header { flex: 0 0 auto; min-height: 0; text-align: center; padding: .4rem .75rem; font-size: .8rem; font-weight: 600; border-bottom: 1px solid var(--bs-border-color); }
.wmMenuView .carousel-item.active > libra-tree,
.wmMenuView .carousel-item.active > libra-table,
.wmMenuView .carousel-item.active > libra-expander { flex: 0 0 auto !important; min-height: 0; }


/* ---- table filters panel: compact and/or toggle (pressed smaller), narrow left-aligned rule select ---- */
.le-tog{ padding:.08rem .3rem; font-size:.66rem; line-height:1.15; min-width:1.9rem }
.le-tog.le-tog-on, .le-tog.le-tog-on:hover, .le-tog.le-tog-on:focus{ padding:.03rem .18rem; font-size:.58rem; min-width:1.5rem }
.le-rule{ width:2.3rem; flex:0 0 auto; padding:.15rem .1rem; font-size:.62rem; text-align:left }