/* Tally Light theme for AdamRMS (avgear.tallylight.com).
   Injected by NPM proxy host 50 (sub_filter before </head>); served from
   /opt/static/avgear/ in the NPM container. Brand values: claudefolder/brand/tallylight/brand.md */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

:root {
  --tl-red: #e8281e; --tl-red-deep: #c41f16; --tl-red-dim: #9b1a13;
  --tl-ink: #0a0a0b; --tl-ink-2: #0e0e10; --tl-ink-3: #161619; --tl-ink-4: #1f1f23;
  --tl-off: #f0ede8; --tl-muted: #7a7a82;
}

body, .brand-text, .btn, .form-control, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Primary colour -> brand red */
a { color: var(--tl-red-deep); }
a:hover { color: var(--tl-red-dim); }
.btn-primary, .btn-primary:disabled, .btn-primary.disabled,
.bg-primary, .badge-primary, .page-item.active .page-link,
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--tl-red) !important; border-color: var(--tl-red) !important; color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--tl-red-deep) !important; border-color: var(--tl-red-deep) !important;
}
.btn-outline-primary { color: var(--tl-red); border-color: var(--tl-red); }
.btn-outline-primary:hover { background: var(--tl-red); border-color: var(--tl-red); color: #fff; }
.text-primary { color: var(--tl-red) !important; }
.card-primary:not(.card-outline) > .card-header { background-color: var(--tl-red); }
.card-primary.card-outline { border-top-color: var(--tl-red); }
.form-control:focus, .custom-select:focus, .select2-container--focus .select2-selection {
  border-color: var(--tl-red) !important; box-shadow: 0 0 0 .2rem rgba(232, 40, 30, .2) !important;
}
.page-link { color: var(--tl-red-deep); }

/* Header + sidebar: ink with a red tally accent, in both light and dark mode */
.main-header { border-bottom: 3px solid var(--tl-red) !important; }
.main-sidebar, .main-sidebar::before { background-color: var(--tl-ink) !important; }
.main-sidebar .brand-link { background-color: var(--tl-ink); border-bottom: 1px solid var(--tl-ink-4) !important; }
.main-sidebar .brand-link { display: flex; align-items: center; padding-left: .75rem; padding-right: .75rem; }
.main-sidebar .brand-link .brand-image {
  opacity: 1 !important; box-shadow: none !important; float: none; flex: none;
  margin: 0 .65rem 0 .1rem !important;
}
.main-sidebar .brand-text {
  color: var(--tl-off) !important; font-weight: 700 !important; font-size: 1.05rem;
  letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.main-sidebar .nav-sidebar .nav-link { color: #c9c6c0; }
.main-sidebar .nav-sidebar .nav-link:hover { color: #fff; background-color: var(--tl-ink-3); }
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-pills .nav-link.active {
  background-color: var(--tl-red) !important; color: #fff !important; box-shadow: none !important;
}
.main-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background-color: var(--tl-ink-4) !important; color: #fff !important; border-left: 3px solid var(--tl-red);
}
.main-sidebar .nav-header { color: var(--tl-muted); }
.main-sidebar .user-panel { border-bottom-color: var(--tl-ink-4) !important; }

/* Dark mode surfaces (AdamRMS per-user toggle adds body.dark-mode) */
.dark-mode a { color: #f0574e; }
.dark-mode a:hover { color: #ff8078; }
.dark-mode .content-wrapper, .dark-mode .main-footer { background-color: var(--tl-ink-2) !important; }
.dark-mode .main-header.navbar { background-color: var(--tl-ink-3) !important; }
.dark-mode .card, .dark-mode .modal-content, .dark-mode .dropdown-menu { background-color: var(--tl-ink-3) !important; }
.dark-mode .card-header { border-bottom-color: var(--tl-ink-4); }
.dark-mode .main-sidebar .nav-link.active, .dark-mode a.btn, .dark-mode .btn-primary { color: #fff; }

/* Login page (plain Bootstrap, black background) */
#masterBox .btn-secondary {
  background-color: var(--tl-red); border-color: var(--tl-red); color: #fff; font-weight: 700;
}
#masterBox .btn-secondary:hover { background-color: var(--tl-red-deep); border-color: var(--tl-red-deep); }
#masterBox .form-control:focus { border-color: var(--tl-red); box-shadow: 0 0 0 .2rem rgba(232, 40, 30, .25); }
#bCMSLogoHeader { height: 4.5em !important; max-width: 100%; }