/*
  Default "MvcBB Light" theme - a purple/lavender palette. Site name and logo
  are configurable from Admin Settings so a deployment isn't tied to one brand.
*/
:root {
  --mvcbb-light-purple: #9966AA;
  --mvcbb-light-purple-dark: #7a4f8a;
  --mvcbb-light-purple-light: #9966CC;
  --mvcbb-light-row-a: #F5F5F5;
  --mvcbb-light-row-b: #EDEDED;
  --mvcbb-light-container: #CCCCDD;
}

html {
  font-size: 14px;
}

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

.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%;
}

/* Flex column so the footer (.footer { margin-top: auto; } in
   _Layout.cshtml.css) sticks to the bottom of short pages without the old
   fixed-height/absolute-position trick - a footer of any height (e.g. once
   the admin-set disclaimer adds a second line) just pushes normally instead
   of overlapping the page content above it. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* BBCode and Smilie Styles */
.smilie {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
    margin: 0 2px;
}

.bbcode-toolbar {
    border: 1px solid #dee2e6;
    border-bottom: none;
    padding: 8px;
    background-color: #f8f9fa;
    border-radius: 4px 4px 0 0;
}

.bbcode-toolbar button {
    margin-right: 4px;
    margin-bottom: 4px;
}

.bbcode-toolbar .smilie-btn {
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 1;
}

.bbcode-toolbar .smilie-btn img {
    width: 16px;
    height: 16px;
}

/* Smilie picker modal grid buttons - distinct from the small inline toolbar
   buttons above, since these need room for a visible name label underneath
   the image rather than just a hover tooltip. */
.smilie-grid-btn {
    width: 72px;
    padding: 6px 4px;
}

.smilie-grid-btn img {
    width: 20px;
    height: 20px;
}

.smilie-grid-btn .smilie-btn-label {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bbcode-preview {
    border: 1px solid #dee2e6;
    padding: 15px;
    margin-top: 10px;
    border-radius: 4px;
    background-color: #fff;
}

blockquote {
    border-left: 3px solid #dee2e6;
    padding-left: 1rem;
    margin-left: 0;
    color: #6c757d;
}

pre code {
    display: block;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 4px;
    white-space: pre-wrap;
}

/* MvcBB Light theme */

body {
    background-color: #faf9fc;
}

.navbar {
    background-color: var(--mvcbb-light-purple) !important;
}

.navbar .navbar-brand img {
    height: 36px;
}

.navbar .nav-link,
.navbar .navbar-brand,
.navbar .dropdown-toggle {
    color: #fff !important;
}

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
    color: #e9ddf0 !important;
}

a {
    color: var(--mvcbb-light-purple);
}

a:hover {
    color: var(--mvcbb-light-purple-dark);
}

.btn-primary {
    background-color: var(--mvcbb-light-purple);
    border-color: var(--mvcbb-light-purple);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--mvcbb-light-purple-dark) !important;
    border-color: var(--mvcbb-light-purple-dark) !important;
}

.btn-outline-primary {
    color: var(--mvcbb-light-purple);
    border-color: var(--mvcbb-light-purple);
}

.btn-outline-primary:hover {
    background-color: var(--mvcbb-light-purple);
    border-color: var(--mvcbb-light-purple);
}

/* Category header bar - echoes the old forum's "tablecat" table headers */
.category-header {
    background-color: var(--mvcbb-light-purple-light);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin-bottom: 0;
}

.category-header .text-muted {
    color: #e9ddf0 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--mvcbb-light-row-a);
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--mvcbb-light-row-b);
}

.card-header {
    background-color: var(--mvcbb-light-container);
}

/* Thread title bar and Quick Reply header match the navbar's lilac so they
   read as page chrome, distinct from the plain post cards beneath them. */
.thread-header,
.quick-reply-header {
    background-color: var(--mvcbb-light-purple);
    color: #fff;
}

.thread-header h4,
.quick-reply-header h5 {
    color: #fff;
}

/* Thread/post action buttons (Reply, Watch, Report, Edit, Delete, Like,
   Quote) span several Bootstrap variants (success/info/warning/secondary/
   danger/primary) - some of those (btn-warning, btn-info) get dark text by
   Bootstrap's own default, which looked inconsistent next to the others'
   white text. Forcing white here keeps every button in these two groups
   visually consistent, in both the light and dark schemes (this rule isn't
   inside the dark-theme block, so it applies to both).
   Scoped to the Watch toggle itself (not >.btn-group>.btn, not any deeper)
   so the Subscribe/Unwatch buttons inside its dropdown panel are untouched -
   that panel sits on a plain light/dark card background, not the purple
   header, so forcing white there would make btn-outline-danger unreadable
   in light mode. */
.thread-header > div > .btn,
.thread-header > div > .btn-group > .btn,
.post-actions .btn {
    color: #fff !important;
}

/* Posts in a thread sit flush against each other like a single list rather
   than separate, gapped cards. */
.thread-posts .card {
    margin-bottom: 0;
    border-radius: 0;
}

.thread-posts .card + .card {
    border-top: none;
}

.thread-posts .card:first-child {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.thread-posts .card:last-child {
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

footer.footer {
    border-top-color: var(--mvcbb-light-purple) !important;
    /* Visual gap above the footer's text, below its top border. Padding
       rather than margin-top because margin-top is already "auto" on this
       element (see .footer in _Layout.cshtml.css) to stick it to the bottom
       of short pages - a literal margin-top would conflict with that; the
       matching bottom gap is set as a real margin-bottom there instead,
       since that side isn't claimed by auto. */
    padding-top: 10px;
}

/* Consecutive boards on the Boards index sit flush against each other
   rather than leaving a gap; a category header above/below still keeps
   its own spacing since this only matches board-after-board. */
.board-col + .board-col {
    margin-top: -1rem;
}

.board-col + .board-col .card {
    border-top: none;
}

/* ============================================================
   Dark scheme - toggled via <html data-theme="dark">, remembered
   per-browser (localStorage) by the navbar button - see site.js.
   Bootstrap here predates its own built-in dark mode (5.1, before
   data-bs-theme landed in 5.3), so this re-themes the Bootstrap
   components this app actually uses rather than relying on that.
   Redefining the --mvcbb-light-* variables under this selector is
   what makes the navbar, category headers, card headers and
   striped tables above pick up dark colors automatically - only
   the parts that were still hardcoded get their own rule here.
   ============================================================ */
:root[data-theme="dark"] {
    --mvcbb-light-purple: #7a5a92;
    --mvcbb-light-purple-dark: #5e4472;
    --mvcbb-light-purple-light: #8a68a0;
    --mvcbb-light-row-a: #26232c;
    --mvcbb-light-row-b: #2d2a35;
    --mvcbb-light-container: #352f3f;

    --mvcbb-dark-bg: #16141a;
    --mvcbb-dark-surface: #201d26;
    --mvcbb-dark-surface-alt: #2a2732;
    --mvcbb-dark-border: #3c3847;
    --mvcbb-dark-text: #e7e4ee;
    --mvcbb-dark-text-muted: #a9a4b8;
}

:root[data-theme="dark"] body {
    background-color: var(--mvcbb-dark-bg);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] a {
    color: #b596d6;
}

:root[data-theme="dark"] a:hover {
    color: #cdb3ea;
}

:root[data-theme="dark"] .card {
    background-color: var(--mvcbb-dark-surface);
    border-color: var(--mvcbb-dark-border);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .text-muted {
    color: var(--mvcbb-dark-text-muted) !important;
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--mvcbb-dark-surface-alt);
    border-color: var(--mvcbb-dark-border);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background-color: var(--mvcbb-dark-surface-alt);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .form-control::placeholder {
    color: var(--mvcbb-dark-text-muted);
}

:root[data-theme="dark"] .form-check-label {
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--mvcbb-dark-surface);
    border-color: var(--mvcbb-dark-border);
}

:root[data-theme="dark"] .dropdown-item {
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--mvcbb-dark-surface-alt);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .modal-content {
    background-color: var(--mvcbb-dark-surface);
    color: var(--mvcbb-dark-text);
}

/* Bootstrap's .btn-close icon is a near-black SVG with no dark-theme variant
   of its own - invert it so the X stays visible against a dark modal. */
:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%);
}

:root[data-theme="dark"] .bbcode-toolbar {
    background-color: var(--mvcbb-dark-surface-alt);
    border-color: var(--mvcbb-dark-border);
}

:root[data-theme="dark"] .bbcode-preview {
    background-color: var(--mvcbb-dark-surface-alt);
    border-color: var(--mvcbb-dark-border);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] blockquote {
    border-left-color: var(--mvcbb-dark-border);
    color: var(--mvcbb-dark-text-muted);
}

:root[data-theme="dark"] pre code {
    background-color: var(--mvcbb-dark-surface-alt);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .progress {
    background-color: var(--mvcbb-dark-surface-alt);
}

/* Bootstrap utility classes that bake in a literal light background/border
   regardless of theme - these are what were showing as big white blocks
   (Quick Links/Statistics/Latest Discussions on the portal page, the
   per-thread stats rows on the Boards index, the portal header banner). */
:root[data-theme="dark"] .bg-light:not(.badge) {
    background-color: var(--mvcbb-dark-surface-alt) !important;
}

:root[data-theme="dark"] .bg-white:not(.badge) {
    background-color: var(--mvcbb-dark-surface) !important;
}

/* .text-dark is also paired with bg-light on small status badges (e.g. the
   "Public" board badge) for guaranteed contrast - leaving both classes
   untouched there keeps that pairing readable; .text-dark used on its own
   (e.g. the Members table's sortable column headers) still needs to flip. */
:root[data-theme="dark"] .text-dark:not(.badge) {
    color: var(--mvcbb-dark-text) !important;
}

:root[data-theme="dark"] .list-group-item {
    background-color: var(--mvcbb-dark-surface);
    border-color: var(--mvcbb-dark-border);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .list-group-item-action:hover,
:root[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--mvcbb-dark-surface-alt);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end {
    border-color: var(--mvcbb-dark-border) !important;
}

/* Bootstrap's .table sets its own "color: #212529" directly on the element
   rather than inheriting from body, so table text (including header cells,
   e.g. the Smilie/Board/BBCode admin tables) stayed black-on-dark until
   this overrode it explicitly. */
:root[data-theme="dark"] .table {
    --bs-table-striped-color: var(--mvcbb-dark-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-active-color: var(--mvcbb-dark-text);
    --bs-table-active-bg: rgba(255, 255, 255, 0.1);
    --bs-table-hover-color: var(--mvcbb-dark-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
    color: var(--mvcbb-dark-text);
    border-color: var(--mvcbb-dark-border);
}

/* Select2 (the "To" recipient picker on New Message) ships its own CSS from
   a CDN with a hardcoded light theme - none of the dark-theme rules above
   touch it since it's not a Bootstrap component. Covers both the default
   theme Select2 actually renders with here and the bootstrap-5 theme class
   it's configured to use (its stylesheet isn't loaded, so elements may carry
   either class depending on version). */
:root[data-theme="dark"] .select2-container--default .select2-selection--single,
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--mvcbb-dark-surface-alt);
    border-color: var(--mvcbb-dark-border);
}

:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .select2-dropdown {
    background-color: var(--mvcbb-dark-surface);
    border-color: var(--mvcbb-dark-border);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .select2-search__field {
    background-color: var(--mvcbb-dark-surface-alt);
    border-color: var(--mvcbb-dark-border);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .select2-results__option {
    background-color: var(--mvcbb-dark-surface);
    color: var(--mvcbb-dark-text);
}

:root[data-theme="dark"] .select2-results__option--highlighted,
:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--mvcbb-dark-surface-alt);
    color: var(--mvcbb-dark-text);
}