html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

/* THEME VARIABLES */
:root[data-theme="light"] {
    --capp-body-bg: #ffffff;
    --capp-body-fg: #212529;
    --capp-navbar-bg: #0d6efd; /* bootstrap primary */
    --capp-navbar-fg: #000000;
    --capp-link: #0d6efd;
    --capp-link-hover: #0a58ca;
    --capp-sidebar-bg: #f8f9fa;
    --capp-sidebar-border: rgba(0,0,0,.1);
    --capp-sidebar-group: #343a40;
    --capp-subitem-indent: 1rem;
    --capp-menu-hover: rgba(0,0,0,.05);
}
:root[data-theme="dark"] {
    --capp-body-bg: #121212;
    --capp-body-fg: #e5e5e5;
    --capp-navbar-bg: #222222;
    --capp-navbar-fg: #f1f1f1;
    --capp-link: #66b2ff;
    --capp-link-hover: #9ecbff;
    --capp-sidebar-bg: #1b1b1b;
    --capp-sidebar-border: rgba(255,255,255,.1);
    --capp-sidebar-group: #e9ecef;
    --capp-subitem-indent: 1rem;
    --capp-menu-hover: rgba(255,255,255,.08);
}
:root[data-theme="ocean"] {
    --capp-body-bg: #0b2538;
    --capp-body-fg: #d9ecff;
    --capp-navbar-bg: #0e3147;
    --capp-navbar-fg: #d9ecff;
    --capp-link: #4db8ff;
    --capp-link-hover: #80d4ff;
    --capp-sidebar-bg: #102a40;
    --capp-sidebar-border: rgba(255,255,255,.12);
    --capp-sidebar-group: #cfe8ff;
    --capp-subitem-indent: 1rem;
    --capp-menu-hover: rgba(255,255,255,.08);
}
:root[data-theme="forest"] {
    --capp-body-bg: #0f1f14;
    --capp-body-fg: #e4f5e9;
    --capp-navbar-bg: #163524;
    --capp-navbar-fg: #e4f5e9;
    --capp-link: #5fd68a;
    --capp-link-hover: #86e6a6;
    --capp-sidebar-bg: #142a1d;
    --capp-sidebar-border: rgba(255,255,255,.12);
    --capp-sidebar-group: #cfeedd;
    --capp-subitem-indent: 1rem;
    --capp-menu-hover: rgba(255,255,255,.08);
}
:root[data-theme="amber"] {
    --capp-body-bg: #1f1604;
    --capp-body-fg: #ffe9b6;
    --capp-navbar-bg: #3a2907;
    --capp-navbar-fg: #ffe9b6;
    --capp-link: #ffc107;
    --capp-link-hover: #ffd556;
    --capp-sidebar-bg: #2a1f08;
    --capp-sidebar-border: rgba(255,255,255,.15);
    --capp-sidebar-group: #ffe9b6;
    --capp-subitem-indent: 1rem;
    --capp-menu-hover: rgba(255,255,255,.08);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}



html { position: relative; min-height: 100%; }
body { margin-bottom: 60px; background-color: var(--capp-body-bg); color: var(--capp-body-fg); }

/* Links */
a { color: var(--capp-link); }
a:hover, a:focus { color: var(--capp-link-hover); }

/* Navbar overrides to use theme variables */
.navbar.bg-primary { background-color: var(--capp-navbar-bg) !important; }
.navbar, .navbar .navbar-brand, .navbar .nav-link, .navbar .btn, #themeDropdownBtn { color: var(--capp-navbar-fg) !important; }
.navbar .btn.btn-outline-light, .navbar .btn.btn-outline-dark { border-color: rgba(255,255,255,.35); }

/* Sidebar styling */
.sidebar { background: var(--capp-sidebar-bg); border-right: 1px solid var(--capp-sidebar-border); min-height: calc(100vh - 56px); color: var(--capp-body-fg); }
.sidebar .sidebar-nav { padding-left: .5rem; padding-right: .5rem; }
.sidebar .sidebar-group { font-weight: 600; color: var(--capp-sidebar-group); }
.sidebar .btn-toggle-nav { margin-left: var(--capp-subitem-indent); border-left: 2px solid var(--capp-sidebar-border); padding-left: .75rem; }
.sidebar .btn-toggle-nav .nav-link { padding: .25rem 0; color: inherit; opacity: .9; }
.sidebar .btn-toggle-nav .nav-link.active { font-weight: 600; opacity: 1; }
.sidebar .btn-toggle-nav .nav-link:hover { text-decoration: underline; }

/* Theme dropdown uses theme colors */
.dropdown-menu {
    background-color: var(--capp-body-bg);
    color: var(--capp-body-fg);
    border-color: var(--capp-sidebar-border);
}
.dropdown-item { color: var(--capp-body-fg); display: flex; align-items: center; gap: .25rem; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--capp-menu-hover); color: var(--capp-body-fg); }
.dropdown-item.active, .dropdown-item.active:hover { background-color: var(--capp-menu-hover); color: var(--capp-body-fg); font-weight: 600; }
.dropdown-item::before { content: ''; display: inline-block; width: 1.25rem; margin-left: -.25rem; text-align: center; }
.dropdown-item.active::before { content: '✓'; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }