/* ============================================================
   BuilderNow - Panel Skin
   ------------------------------------------------------------
   Re-skins the admin panel and the client dashboard to match the
   public site. Loaded LAST, after master_style.css and
   skin-yellow.min.css, so it wins without either of them being
   edited.

   HOW TO TURN IT OFF
   ------------------
   Delete the one <link> to this file from
   admin/includes/layout-head.php and
   dashboard/includes/layout-head.php. Everything reverts to stock
   AdminLTE. No page markup was changed to make this work, which is
   the point: 68 pages get re-skinned and none of them can break
   functionally, because none of them were touched.

   WHERE THE VALUES COME FROM
   --------------------------
   Every color, size, radius and timing below is a var() from
   css/tokens.css. There is not one hard-coded hex in this file, and
   there must never be: Phase 2 themes the whole product for a
   holiday by redefining a handful of those variables, and any value
   written literally here is a value that will stay blue in December.

   The target look is the affiliate portal (affiliate/includes/
   header.php), which was already built on these tokens -- raised
   surface, 1px border, 10px radius, uppercase micro-labels, tabular
   figures. This file brings AdminLTE's own components to the same
   place rather than inventing a third style.
   ============================================================ */

/* ------------------------------------------------------------
   1. PAGE SHELL
   ------------------------------------------------------------ */

/* Bare html and body, NOT body.skin-yellow.
   ----------------------------------------
   Hanging the page background off AdminLTE's body classes looked
   tidier and was wrong: dashboard/support.php shipped for months
   with <body> and no classes at all, so a class-scoped rule would
   have skipped the one page that most needed help. The shell sets
   those classes now, but the skin should not depend on markup being
   right -- only panel pages load this file, so plain html/body is
   both safe and unmissable. A white body behind a dark panel shows
   as a flash on load and a white gutter past the content. */
html,
body,
.wrapper,
.content-wrapper {
    /* background-COLOR, not the shorthand. The shorthand also sets
       background-image: none, and with !important on it nothing
       later could put an image back -- which silently defeated the
       seasonal artwork on the sign-in pages, since body is matched
       here too. The color still wins over AdminLTE, which is the
       only thing this rule was ever for. */
    background-color: var(--bn-surface) !important;
    color: var(--bn-gray-700);
}
body,
.wrapper,
.content-wrapper {
    font-family: var(--bn-font-sans) !important;
}

/* AdminLTE renders at 14px with Source Sans; the public site is
   Inter. Setting it on the wrapper rather than on * keeps icon
   fonts (Font Awesome, Ionicons) alone -- overriding their family
   turns every glyph into a blank square, which is how the support
   page's missing font link showed up in the first place. */
.content-wrapper,
.main-header,
.main-sidebar,
.main-footer,
.box,
.btn,
.form-control,
.table {
    font-family: var(--bn-font-sans) !important;
}

/* ------------------------------------------------------------
   2. TOP BAR
   ------------------------------------------------------------ */

.main-header .navbar,
.main-header .logo {
    background: var(--bn-surface-deep) !important;
    border-bottom: 1px solid var(--bn-border);
    color: var(--bn-text-strong) !important;
}
.main-header .logo {
    font-weight: var(--bn-weight-extrabold);
    letter-spacing: var(--bn-tracking-tight);
    border-right: 1px solid var(--bn-border);
}
/* The wordmark is "BuilderNow" with the first half bold; the public
   site puts the brand amber on the second half. */
.main-header .logo b { color: var(--bn-text-strong); }
.main-header .logo .logo-lg { color: var(--bn-accent); }

.main-header .navbar .nav > li > a,
.main-header .sidebar-toggle {
    color: var(--bn-gray-500) !important;
    transition: var(--bn-transition-fast);
}
.main-header .navbar .nav > li > a:hover,
.main-header .sidebar-toggle:hover {
    color: var(--bn-text-strong) !important;
    background: var(--bn-surface-raised) !important;
}

/* ------------------------------------------------------------
   1b. THE BOOTSTRAP 3 FLOAT HELPERS
   ------------------------------------------------------------
   .pull-left and .pull-right are Bootstrap 3. This panel runs
   Bootstrap 4.0.0-beta, which renamed them to .float-* and defines
   .pull-* nowhere -- so every element wearing one has quietly not
   been floating since the Bootstrap upgrade, long before the
   re-skin.

   It is not a handful of places. The markup uses .pull-right on
   .box-tools in roughly thirty admin and dashboard pages, plus the
   sidebar badge and the two buttons in the user dropdown. Editing
   thirty files to rename a class is a lot of diff for no behaviour
   change and a lot of chances to fumble one; defining the two
   classes Bootstrap dropped fixes every one of them at once and
   keeps working if the markup is ever modernised.

   This is a restoration, not a new idea: these are Bootstrap 3's
   own declarations, verbatim. */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }

/* ------------------------------------------------------------
   2b. THE USER DROPDOWN
   ------------------------------------------------------------
   The panel under the avatar in the top right: name, role, then
   Settings and Sign out. It was the one piece of chrome the re-skin
   never reached -- AdminLTE renders it white, so clicking the avatar
   on a dark panel opened a white card.

   TWO THINGS ARE BEING FIXED HERE, NOT ONE.

   1. Colour. Straightforward: surfaces, border, text.

   2. Layout. The two buttons sit in <div class="pull-left"> and
      <div class="pull-right">, and .pull-* is Bootstrap 3 -- this
      panel runs Bootstrap 4.0.0-beta, where it is .float-* and
      .pull-* is defined nowhere. Exactly the same bug as the sidebar
      badge. So the buttons were not sitting at opposite ends of the
      footer, they were stacking. Making .user-footer a flex row with
      space-between puts them right without touching the markup, and
      keeps working if the markup is ever corrected to .float-*.

   Selectors are deliberately long. AdminLTE's own rules for this
   menu are specific, and the file that holds them is not in the
   repo, so these have to out-specify something unreadable. */

.main-header .navbar-nav > .user-menu > .dropdown-menu {
    background: var(--bn-surface-raised) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius-lg) !important;
    box-shadow: var(--bn-shadow-lg) !important;
    padding: 0 !important;
    overflow: hidden;
    width: 280px;
}

/* ---- Header: avatar, name, role ---- */
.main-header .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    background: var(--bn-surface-deep) !important;
    border-bottom: 1px solid var(--bn-border);
    height: auto !important;
    padding: var(--bn-space-5) var(--bn-space-4);
    text-align: center;
}
.main-header .navbar-nav > .user-menu > .dropdown-menu > li.user-header img {
    border: 2px solid var(--bn-border);
    box-shadow: none;
}
.main-header .navbar-nav > .user-menu > .dropdown-menu > li.user-header p {
    color: var(--bn-text-strong) !important;
    font-weight: var(--bn-weight-semibold);
    font-size: var(--bn-text-base);
    margin: var(--bn-space-3) 0 0;
    text-shadow: none;
}
.main-header .navbar-nav > .user-menu > .dropdown-menu > li.user-header p small {
    display: block;
    margin-top: 2px;
    color: var(--bn-gray-500) !important;
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-normal);
    text-transform: uppercase;
    letter-spacing: var(--bn-tracking-wide);
}

/* ---- Footer: the two actions ---- */
.main-header .navbar-nav > .user-menu > .dropdown-menu .user-footer {
    background: var(--bn-surface-raised) !important;
    padding: var(--bn-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bn-space-3);
}
/* The dead Bootstrap 3 float classes, neutralised so they cannot
   fight the flex row above if a later Bootstrap defines them. */
.main-header .navbar-nav > .user-menu > .dropdown-menu .user-footer .pull-left,
.main-header .navbar-nav > .user-menu > .dropdown-menu .user-footer .pull-right {
    float: none !important;
    margin: 0;
}
.main-header .navbar-nav > .user-menu > .dropdown-menu .user-footer .btn-default {
    background: var(--bn-surface-deep) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-gray-700) !important;
    border-radius: var(--bn-radius-md) !important;
    padding: 9px 16px;
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-medium);
    transition: var(--bn-transition-fast);
}
.main-header .navbar-nav > .user-menu > .dropdown-menu .user-footer .btn-default:hover {
    background: var(--bn-surface) !important;
    border-color: var(--bn-accent) !important;
    color: var(--bn-text-strong) !important;
}

/* The avatar strip in the bar itself. */
.main-header .navbar-nav > .user-menu > a > .user-image {
    border: 1px solid var(--bn-border);
}

/* Any other dropdown hung off the top bar gets the same treatment,
   so this cannot be the only dark one. */
.main-header .navbar .dropdown-menu {
    background: var(--bn-surface-raised);
    border: 1px solid var(--bn-border);
    box-shadow: var(--bn-shadow-lg);
}
.main-header .navbar .dropdown-menu > li > a {
    color: var(--bn-gray-700);
}
.main-header .navbar .dropdown-menu > li > a:hover {
    background: var(--bn-surface) !important;
    color: var(--bn-text-strong);
}

/* ------------------------------------------------------------
   3. SIDEBAR
   ------------------------------------------------------------ */

.main-sidebar,
.left-side,
.sidebar {
    background: var(--bn-surface-deep) !important;
}
.sidebar-menu > li > a {
    color: var(--bn-gray-500) !important;
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-medium);
    border-left: 3px solid transparent;
    transition: var(--bn-transition-fast);
}
.sidebar-menu > li > a:hover {
    color: var(--bn-text-strong) !important;
    background: var(--bn-surface-raised) !important;
}
/* Amber marks the current page, matching the affiliate portal's
   active tab rather than AdminLTE's full-width yellow block. */
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
    color: var(--bn-text-strong) !important;
    background: var(--bn-surface-raised) !important;
    border-left-color: var(--bn-accent);
}
.sidebar-menu > li.header {
    color: var(--bn-gray-400) !important;
    background: transparent !important;
    font-size: var(--bn-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--bn-tracking-wider);
    font-weight: var(--bn-weight-semibold);
}
.user-panel,
.sidebar-footer {
    border-bottom: 1px solid var(--bn-border);
    background: transparent !important;
}
.user-panel .info p,
.user-panel .info a { color: var(--bn-gray-600) !important; }
.sidebar-footer { border-top: 1px solid var(--bn-border); border-bottom: 0; }
.sidebar-footer .link { color: var(--bn-gray-500) !important; }
.sidebar-footer .link:hover { color: var(--bn-accent) !important; }

/* ------------------------------------------------------------
   4. PAGE HEADER AND BREADCRUMB
   ------------------------------------------------------------ */

.content-header > h1 {
    color: var(--bn-text-strong);
    font-size: var(--bn-text-2xl);
    font-weight: var(--bn-weight-bold);
    letter-spacing: var(--bn-tracking-tight);
}
.content-header > h1 > small { color: var(--bn-gray-500); }

.content-header > .breadcrumb {
    background: transparent !important;
    font-size: var(--bn-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--bn-tracking-wide);
}
.content-header > .breadcrumb a { color: var(--bn-gray-500); }
.content-header > .breadcrumb a:hover { color: var(--bn-accent); }
.content-header > .breadcrumb .active { color: var(--bn-gray-600); }

/* ------------------------------------------------------------
   5. BOXES -> PANELS
   ------------------------------------------------------------ */

.box {
    background: var(--bn-surface-raised) !important;
    border: 1px solid var(--bn-border) !important;
    border-top: 1px solid var(--bn-border) !important;   /* kills the 3px colored cap */
    border-radius: var(--bn-radius-lg);
    box-shadow: var(--bn-shadow-sm);
}
/* AdminLTE colors a box by putting a thick stripe on top. The
   public site uses a plain card, so the stripe is dropped and the
   meaning moves to the title icon where a page needs it. */
.box.box-primary, .box.box-info, .box.box-success,
.box.box-warning, .box.box-danger, .box.box-default {
    border-top-color: var(--bn-border) !important;
}
.box-header {
    color: var(--bn-text-strong);
    padding: var(--bn-space-4) var(--bn-space-5);
}
.box-header.with-border { border-bottom: 1px solid var(--bn-border); }

/* A HEADER THAT MATCHES ITS CARD'S CORNERS.
   -----------------------------------------
   AdminLTE's .box-solid paints the header a light grey (#d2d6de)
   with square corners, which on a rounded dark card reads as a
   different component bolted on -- the Lead Notifications bar being
   the one everybody sees. The box is not given overflow:hidden to
   crop it, because that would also crop any dropdown opened from
   the header; the header just takes the card's own top radius. */
.box > .box-header:first-child {
    border-top-left-radius: var(--bn-radius-lg);
    border-top-right-radius: var(--bn-radius-lg);
}
.box.box-solid,
.box.box-solid.box-default {
    background: var(--bn-surface-raised) !important;
    border-color: var(--bn-border) !important;
}
.box.box-solid > .box-header,
.box.box-solid.box-default > .box-header,
.box.box-solid.box-primary > .box-header,
.box.box-solid.box-info > .box-header {
    background: var(--bn-surface-deep) !important;
    color: var(--bn-text-strong) !important;
    border-bottom: 1px solid var(--bn-border);
}
.box.box-solid > .box-header .box-title { color: var(--bn-text-strong) !important; }
.box.box-solid > .box-header .btn-box-tool { color: var(--bn-gray-500) !important; }
.box-header .box-title {
    font-size: var(--bn-text-base);
    font-weight: var(--bn-weight-semibold);
    letter-spacing: var(--bn-tracking-tight);
}
.box-body  { padding: var(--bn-space-5); color: var(--bn-gray-700); }
.box-footer {
    background: transparent !important;
    border-top: 1px solid var(--bn-border) !important;
    padding: var(--bn-space-4) var(--bn-space-5);
}
.btn-box-tool { color: var(--bn-gray-500) !important; }
.btn-box-tool:hover { color: var(--bn-text-strong) !important; }

/* Stat widgets on the admin home. */
.info-box,
.small-box {
    background: var(--bn-surface-raised) !important;
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    box-shadow: var(--bn-shadow-sm);
    color: var(--bn-gray-700) !important;
}
/* THE ICON BECOMES A CORNER MARK, NOT A COLUMN.
   ----------------------------------------------
   AdminLTE reserves a 90px square at the left of every stat tile
   for its icon. Four tiles across a laptop leaves about 76px for
   the text beside it, which is not enough for a figure at this
   size -- "$17,650" clipped to "$17,65" and "Renewing This Week"
   to "RENEWIN". Shrinking the type to fit the icon would be
   solving it backwards: the number is the content, the icon is
   decoration.

   So the well is dropped and the icon is parked quietly in the top
   right, which is also what the affiliate portal's stat cards do
   (label, value, nothing else). Label and figure get the full
   width of the tile at every screen size. */
.info-box { position: relative; }
.info-box-icon,
.small-box > .icon {
    background: transparent !important;
    color: var(--bn-accent) !important;
    position: absolute !important;
    top: var(--bn-space-4);
    right: var(--bn-space-4);
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: 28px !important;
    opacity: .7;
    float: none !important;
}
.info-box-icon .ic { width: 28px; height: 28px; }

/* FOUR TILES ACROSS IS TOO MANY ON A SMALL LAPTOP.
   ------------------------------------------------
   The markup says col-md-3, so they go four-wide from 768px up.
   With the sidebar taking 230px that leaves each tile about 160px
   at a 900px window, and a figure clips again however the inside
   of the tile is arranged. The honest fix is fewer columns, not
   smaller numbers.

   :has() scopes this to columns that actually hold a stat tile, so
   no other col-md-3 on any page is touched. Where :has() is not
   supported the rule is ignored and the layout is simply the one
   it is today -- a worse narrow window, never a broken page. */
@media (min-width: 768px) and (max-width: 1199px) {
    .row > [class*="col-"]:has(> .info-box),
    .row > [class*="col-"]:has(> .small-box) {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.info-box-content,
.small-box .inner {
    margin-left: 0 !important;
    padding: var(--bn-space-4) var(--bn-space-5) !important;
    /* Keeps a long figure clear of the corner icon. */
    padding-right: var(--bn-space-10) !important;
}
.info-box-text,
.small-box p {
    color: var(--bn-gray-500) !important;
    font-size: var(--bn-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--bn-tracking-wide);
    font-weight: var(--bn-weight-semibold);
    /* AdminLTE pins this label to one line and hides the overflow,
       which is fine for its own sentence-case text but not once it
       is uppercase and letter-spaced: "Monthly Recurring" clipped to
       "MONTHLY RECUR...". Two short lines beat a truncated label. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: var(--bn-leading-snug);
}
/* ...and the tile has to be allowed to grow with it, since AdminLTE
   gives .info-box a fixed height.

   NOT display:flex on the tile itself. Making .info-box a flex
   container turns AdminLTE's floated 90px icon into a flex item,
   the content block then sizes to its text rather than filling the
   rest, and the figures end up clipped ("$17,65").

   height:100% does not work either: a percentage height inside a
   flex item that is itself sized by stretch does not resolve, so at
   1200px the tile whose label wrapped to two lines stood 17px
   taller than the three beside it.

   What does work is making the COLUMN a flex column and letting the
   tile grow inside it, which holds at every width.

   (Written out at length because this block was previously two
   spliced comments with stray text between them, which made the
   .info-box rule below an invalid selector -- so the browser threw
   the whole rule away.) */
.info-box {
    min-height: 90px;
    margin-bottom: var(--bn-space-4);
    overflow: visible;        /* AdminLTE hides it, which clips the number */
}
.row > [class*="col-"]:has(> .info-box),
.row > [class*="col-"]:has(> .small-box) { display: flex; flex-direction: column; }
.info-box, .small-box { flex: 1 1 auto; }
.info-box-number {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.info-box-number,
.small-box h3 {
    color: var(--bn-text-strong) !important;
    font-weight: var(--bn-weight-bold);
    letter-spacing: var(--bn-tracking-tight);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   6. TABLES
   ------------------------------------------------------------ */

.table { color: var(--bn-gray-700); margin-bottom: 0; }
.table > thead > tr > th {
    background: transparent;
    border-bottom: 1px solid var(--bn-border) !important;
    border-top: 0 !important;
    color: var(--bn-gray-500);
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--bn-tracking-wide);
    white-space: nowrap;
}
.table > tbody > tr > td {
    border-top: 0;
    border-bottom: 1px solid var(--bn-border);
    vertical-align: middle;
    color: var(--bn-gray-700);
}
.table > tbody > tr:last-child > td { border-bottom: 0; }

/* Striping on a dark surface reads as banding, so the zebra is
   dropped and the row border carries the separation instead --
   same decision the affiliate portal's table made. */
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even) {
    background: transparent;
}
.table-hover > tbody > tr:hover { background: var(--bn-surface) !important; }
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
    border-color: var(--bn-border) !important;
}
/* Money and counts line up column-wise. */
.table td.text-right, .table th.text-right { font-variant-numeric: tabular-nums; }

/* A WIDE TABLE SCROLLS INSTEAD OF ESCAPING ITS BOX.
   -------------------------------------------------
   This is an existing bug, not one the skin introduced: it does the
   same today with this file removed. The panel ships Bootstrap
   4.0.0-beta, where .table-responsive was still scoped inside a
   breakpoint media query rather than applying at every width, so it
   computes overflow-x: visible and does nothing. A 640px table in a
   470px box therefore renders straight over whatever sits to its
   right -- on a two-column page that is the next column, and the
   last two table columns end up underneath it.

   Restored to what Bootstrap 4 final does. min-width: 0 is the
   other half: .col-* are flex children, which refuse to shrink
   below their content unless told, so without it the column itself
   grows and the scroll never engages.

   SCOPED AWAY FROM <table> ON PURPOSE. In this codebase the class
   sits on the TABLE itself 31 times and on a wrapping div only 10,
   so the first version of this rule set display:block on three
   dozen tables -- which stops a table being a table, and its
   columns stop filling the width. That is what "the DataTable
   columns aren't expanding to 100%" was. */
div.table-responsive,
.table-responsive:not(table) {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* A table wearing the class keeps being a table and fills its box;
   the scrolling is the wrapper's job, and DataTables supplies one. */
table.table-responsive { display: table; width: 100%; }
.dataTables_wrapper { width: 100%; overflow-x: auto; }
table.dataTable { width: 100% !important; }
.box, .box-body, [class*="col-"] { min-width: 0; }

/* ------------------------------------------------------------
   7. FORMS
   ------------------------------------------------------------ */

/* ROOMIER THAN ADMINLTE, AND THAN THE AFFILIATE PORTAL.
   -----------------------------------------------------
   AdminLTE ships a 34px-tall field with 6px of vertical padding,
   which is tight to type in and tighter to tap. height:auto is the
   part that matters -- that fixed 34px is what stops extra padding
   having any effect at all, so raising the padding alone does
   nothing. min-height keeps single-line fields even with selects. */
.form-control,
select.form-control,
textarea.form-control {
    background: var(--bn-surface) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius) !important;
    color: var(--bn-text-strong) !important;
    font-size: var(--bn-text-sm);
    box-shadow: none !important;
    transition: var(--bn-transition-fast);
    height: auto !important;
    min-height: 44px;
    padding: var(--bn-space-3) var(--bn-space-4) !important;
    line-height: var(--bn-leading-normal);
}
textarea.form-control { min-height: 80px; }
.input-group-addon { padding: var(--bn-space-3) var(--bn-space-4) !important; }
/* Buttons sitting beside a field should match its new height. */
.input-group .btn { min-height: 44px; }
.form-control:focus {
    border-color: var(--bn-primary) !important;
    box-shadow: 0 0 0 3px var(--bn-primary-lighter) !important;
}
.form-control::placeholder { color: var(--bn-gray-400); }
.form-control[disabled],
.form-control[readonly] { background: var(--bn-surface-deep) !important; color: var(--bn-gray-500) !important; }

.form-group > label,
label.control-label {
    color: var(--bn-gray-600);
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-medium);
}
.input-group-addon {
    background: var(--bn-surface-deep) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-gray-500) !important;
}
.help-block, .text-muted { color: var(--bn-gray-500) !important; }

/* ------------------------------------------------------------
   8. BUTTONS
   ------------------------------------------------------------ */

.btn {
    border-radius: var(--bn-radius) !important;
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold);
    letter-spacing: var(--bn-tracking-normal);
    transition: var(--bn-transition-fast);
    border: 1px solid transparent;
}
.btn-primary {
    background: var(--bn-primary) !important;
    border-color: var(--bn-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--bn-primary-hover) !important;
    border-color: var(--bn-primary-hover) !important;
}
.btn-default {
    background: var(--bn-surface) !important;
    border-color: var(--bn-border) !important;
    color: var(--bn-gray-700) !important;
}
.btn-default:hover {
    background: var(--bn-surface-deep) !important;
    color: var(--bn-text-strong) !important;
}
.btn-success { background: var(--bn-success) !important; border-color: var(--bn-success) !important; color: #06281d !important; }
.btn-danger  { background: var(--bn-danger)  !important; border-color: var(--bn-danger)  !important; color: #fff !important; }
.btn-warning {
    /* Amber is the brand accent, so it needs real dark ink on it --
       the same reason --bn-charcoal kept its literal dark value. */
    background: var(--bn-accent) !important;
    border-color: var(--bn-accent) !important;
    color: var(--bn-charcoal) !important;
}
.btn-warning:hover { background: var(--bn-accent-hover) !important; border-color: var(--bn-accent-hover) !important; }
.btn-info { background: var(--bn-info) !important; border-color: var(--bn-info) !important; color: #fff !important; }
.btn-flat { border-radius: var(--bn-radius) !important; }

/* ------------------------------------------------------------
   9. ALERTS
   ------------------------------------------------------------ */

.alert {
    border-radius: var(--bn-radius-md);
    border: 1px solid var(--bn-border);
    font-size: var(--bn-text-sm);
}
.alert h4 { font-size: var(--bn-text-base); font-weight: var(--bn-weight-semibold); }
.alert-success { background: var(--bn-success-light) !important; border-color: var(--bn-success) !important; color: var(--bn-gray-900) !important; }
.alert-danger  { background: var(--bn-danger-light)  !important; border-color: var(--bn-danger)  !important; color: var(--bn-gray-900) !important; }
.alert-warning { background: var(--bn-warning-light) !important; border-color: var(--bn-warning) !important; color: var(--bn-gray-900) !important; }
.alert-info    { background: var(--bn-info-light)    !important; border-color: var(--bn-info)    !important; color: var(--bn-gray-900) !important; }
.alert .close  { color: var(--bn-gray-600); opacity: .7; text-shadow: none; }
.alert a       { color: var(--bn-link); }

/* ------------------------------------------------------------
   10. BADGES, LABELS, PROGRESS
   ------------------------------------------------------------ */

.badge, .label {
    border-radius: var(--bn-radius-full);
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-semibold);
    letter-spacing: var(--bn-tracking-wide);
    padding: .25em .7em;
}
.badge-success, .label-success { background: var(--bn-success) !important; color: #06281d !important; }
.badge-danger,  .label-danger  { background: var(--bn-danger)  !important; color: #fff !important; }
.badge-warning, .label-warning { background: var(--bn-accent)  !important; color: var(--bn-charcoal) !important; }
.badge-info,    .label-info    { background: var(--bn-info)    !important; color: #fff !important; }
.badge-default, .label-default { background: var(--bn-gray-200) !important; color: var(--bn-gray-800) !important; }

.progress { background: var(--bn-surface) !important; border-radius: var(--bn-radius-full); box-shadow: none; }
.progress-bar { background: var(--bn-primary); }

/* AdminLTE's utility text colors, re-pointed at the brand. */
.text-yellow { color: var(--bn-accent) !important; }
.text-green  { color: var(--bn-success) !important; }
.text-red    { color: var(--bn-danger) !important; }
.text-blue, .text-aqua { color: var(--bn-info) !important; }

/* ------------------------------------------------------------
   11. FOOTER AND LINKS
   ------------------------------------------------------------ */

.main-footer {
    background: var(--bn-surface-deep) !important;
    border-top: 1px solid var(--bn-border) !important;
    color: var(--bn-gray-500);
    font-size: var(--bn-text-sm);
}
.main-footer a { color: var(--bn-gray-600); }
a { color: var(--bn-link); }
a:hover { color: var(--bn-accent); }

/* Boxes and panels sit on their own border, so the horizontal rules
   inside them should be the same weight rather than browser default. */
hr { border-top-color: var(--bn-border); }

/* ------------------------------------------------------------
   12. SIGN-IN, RESET AND ERROR PAGES
   ------------------------------------------------------------
   These eight pages have no sidebar and no shared shell, so they
   were going to be the one light screen in a dark product -- and
   the dashboard sign-in is the first thing a paying customer sees.
   Their markup is AdminLTE's .login-page / .login-box, which the
   rules above never touch.
   ------------------------------------------------------------ */

body.login-page,
body.lockscreen {
    /* background-COLOR, not the background shorthand. The shorthand
       resets background-image to none, and with !important on it no
       later stylesheet could put anything back -- which is exactly
       what a seasonal sheet needs to do here. The color still wins
       over AdminLTE and still shows through as the base under the
       artwork, including before the SVG has loaded. */
    background-color: var(--bn-surface) !important;
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: var(--bn-font-sans) !important;
    min-height: 100vh;
}
/* Both wordmarks are <b>Builder</b>Now, and the amber belongs on
   "Now" -- that is how the top bar, the public site and the
   affiliate portal all set it. Coloring the <b> would have put it
   on "Builder" and made the sign-in page the odd one out. */
.login-logo,
.login-logo a {
    color: var(--bn-accent) !important;
    font-weight: var(--bn-weight-extrabold);
    letter-spacing: var(--bn-tracking-tight);
}
.login-logo b { color: var(--bn-text-strong); }
.login-box-body,
.register-box-body {
    background: var(--bn-surface-raised) !important;
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    box-shadow: var(--bn-shadow-lg);
    color: var(--bn-gray-700) !important;
    padding: var(--bn-space-6);
}
.login-box-msg,
.register-box-msg {
    color: var(--bn-gray-500) !important;
    font-size: var(--bn-text-sm);
}
/* The field icons are Ionicons positioned over the input; on a dark
   field they were near-invisible at AdminLTE's default. */
.has-feedback .form-control-feedback { color: var(--bn-gray-400); }
/* AdminLTE's sign-in button is btn-info; the brand's primary action
   is blue, and these two were different blues sitting next to the
   same logo. */
.login-box .btn-info,
.register-box .btn-info {
    background: var(--bn-primary) !important;
    border-color: var(--bn-primary) !important;
}
.login-box .btn-info:hover { background: var(--bn-primary-hover) !important; }

/* ------------------------------------------------------------
   13. SCROLLBARS AND SELECTION
   ------------------------------------------------------------ */

::selection { background: var(--bn-primary); color: #fff; }
* { scrollbar-color: var(--bn-gray-300) var(--bn-surface); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bn-surface); }
::-webkit-scrollbar-thumb { background: var(--bn-gray-300); border-radius: var(--bn-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--bn-gray-400); }

/* ------------------------------------------------------------
   SIDEBAR STATUS FLAGS
   ------------------------------------------------------------
   The small pill on a sidebar item -- "set" next to Seasonal
   Themes while an override is in force, the row count next to
   Test checkouts.

   WHY THESE ARE POSITIONED RATHER THAN FLOATED
   --------------------------------------------
   AdminLTE 2's own markup for this is

       <span class="badge bg-yellow pull-right">

   and .pull-right is a Bootstrap 3 class. This panel loads
   Bootstrap 4.0.0-beta, which renamed it to .float-right and
   defines .pull-right nowhere -- so the badge never floated. It
   rendered inline immediately after the label text and ran out
   past the right edge of the sidebar.

   Chasing whichever float helper happens to be alive in whichever
   vendor file is the wrong fix, especially since those files are
   not in the repo. This positions the flag outright and depends
   on nothing defined outside this stylesheet.
   ------------------------------------------------------------ */

/* AdminLTE already sets this; repeated so the absolute positioning
   below cannot be left anchored to the page if that ever changes. */
.sidebar-menu > li > a { position: relative; }

.sidebar-menu > li > a > .bn-flag {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    min-width: 20px;
    padding: 2px 8px;
    border-radius: var(--bn-radius-full);

    background: var(--bn-accent);
    color: var(--bn-surface-deep);

    font-size: 10px;
    font-weight: var(--bn-weight-bold);
    line-height: 1.7;
    letter-spacing: var(--bn-tracking-wide);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

/* Collapsed sidebar is ~50px of icon and no label, so a flag pinned
   to the right edge would sit on top of the icon. */
body.sidebar-collapse .sidebar-menu > li > a > .bn-flag { display: none; }