/*
 * Billy theme (front-end review Phase 2, 2026-09-29; owner: "keep ArchitectUI and restyle it").
 *
 * The Billy/Nexia palette as tokens, laid over ArchitectUI's main.css (loaded after it). Components use the tokens,
 * never a colour of their own. Contrast on white, checked for WCAG 2.1 AA (4.5:1 for text):
 *   --bb-primary  #00323C  13.8:1  text, filled buttons, the header
 *   --bb-accent   #00B9B9   2.4:1  accents only: borders, focus rings, active markers, icons - never text, never a
 *                                  fill under white text
 *   --bb-accent-strong #007A7A 5.2:1  the accent where it has to be read (links)
 *   --bb-muted    #5E7079   5.2:1  secondary text (#687C85 is 4.4:1, just under AA for small text)
 */
:root {
    --bb-primary: #00323C;
    --bb-primary-hover: #004A58;
    --bb-accent: #00B9B9;
    --bb-accent-strong: #007A7A;
    --bb-tint: #E6F7F7;
    --bb-surface: #F5F7F8;
    --bb-muted: #5E7079;
    --bb-border: #D5DEE1;
    --bb-white: #FFFFFF;

    --bb-success: #1E7E4F;
    --bb-success-tint: #E3F4EA;
    --bb-warning: #9A5B00;
    --bb-warning-tint: #FDF1DC;
    --bb-danger: #C62838;
    --bb-danger-tint: #FBE6E8;
    --bb-info: #0E6A8C;
    --bb-info-tint: #E1F1F7;

    --bb-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --bb-radius: 6px;
    --bb-focus-ring: 0 0 0 3px rgba(0, 185, 185, 0.45);
    --bb-header-height: 60px;
}

/* ---- type and page ---------------------------------------------------------------------------------------- */
body, .app-container, button, input, select, textarea, .btn, .form-control, .dropdown-menu, .modal-content,
.select2-container, .toast, #toast-container > div, .swal2-popup, table.dataTable {
    font-family: var(--bb-font);
}
body, .app-main .app-main__outer {
    background: var(--bb-surface);
    color: var(--bb-primary);
}
.text-muted, .page-title-subheading, .widget-subheading, small.text-muted {
    color: var(--bb-muted) !important;
}
a {
    color: var(--bb-accent-strong);
}
a:hover {
    color: var(--bb-primary);
}

/* ---- the header: primary, white text (it was teal #00b2a9 under white, 2.6:1) --------------------------------- */
.app-header,
.app-header .app-header__content,
.app-header .app-header__content.header-mobile-open,
.app-theme-white .app-header,
.app-theme-white .app-footer .app-footer__inner {
    background: var(--bb-primary) !important;
}
.app-header .app-header__content,
.app-header .app-header__content .nav-link,
.app-header .app-header__content a,
.app-header .app-header__content .widget-heading,
.app-header .app-header__content .widget-subheading {
    color: var(--bb-white) !important;
}
/* every link and heading in the header, the company name included, is white on the primary (the link colour was 2.7:1) */
.app-header a,
.app-header .widget-heading,
.app-header .widget-subheading,
.app-header .header-user-info {
    color: var(--bb-white) !important;
}
.app-header .app-header__content .nav-link:hover,
.app-header .app-header__content .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--bb-radius);
}
/* the footer is primary too: its link in the link colour was 2.7:1 */
.app-footer a {
    color: var(--bb-white);
    text-decoration: underline;
}

/* the sign-in pages' side panel (bg-plum-plate was the teal) */
.bg-plum-plate:not(.icon-gradient) {
    background: var(--bb-primary) !important;
}
/* ArchitectUI's gradient icons (card headers, the collapse chevrons) paint the class's background through the glyph;
   a background on them is a solid square. They take the readable accent instead (5.2:1: the chevron is a control) */
.icon-gradient.bg-plum-plate {
    background: none !important;
    color: var(--bb-accent-strong);
    -webkit-text-fill-color: var(--bb-accent-strong);
}

/* ---- the sidebar: dark (primary), light text, the active item marked with the accent --------------------------
   main.css paints it #0D5257; text on it must be light (white 13.8:1, headings #A9C1C8 7.3:1 on the primary). */
.app-sidebar,
.app-sidebar .app-sidebar__inner,
.app-sidebar .scrollbar-sidebar {
    background: var(--bb-primary) !important;
}
.app-sidebar .vertical-nav-menu li a,
.app-sidebar .vertical-nav-menu li a i {
    color: rgba(255, 255, 255, 0.9) !important;
}
.app-sidebar .vertical-nav-menu li a:hover,
.app-sidebar .vertical-nav-menu li a:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--bb-white) !important;
}
.app-sidebar .vertical-nav-menu li a.mm-active,
.app-sidebar .vertical-nav-menu li.mm-active > a {
    background: rgba(0, 185, 185, 0.18) !important;
    color: var(--bb-white) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--bb-accent);
}
.app-sidebar .app-sidebar__heading {
    color: #A9C1C8 !important;
}
/* ArchitectUI's rule beside each heading crossed the (wider) Poppins text */
.app-sidebar .app-sidebar__heading::before {
    display: none;
}

/* ---- ArchitectUI's primary blue (#3f6ad8) becomes the Billy primary -------------------------------------------- */
.btn-primary,
.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
    color: var(--bb-white);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--bb-primary-hover);
    border-color: var(--bb-primary-hover);
    color: var(--bb-white);
}
.btn-outline-primary {
    color: var(--bb-primary);
    border-color: var(--bb-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
    color: var(--bb-white);
}
.btn-link {
    color: var(--bb-accent-strong);
}
/* ArchitectUI's other stock colours that fail under white text (#16aaff 2.6:1, #3ac47d 2.4:1), onto the AA tokens */
.btn-info, .btn-info:disabled, .btn-info.disabled {
    background-color: var(--bb-info); border-color: var(--bb-info); color: var(--bb-white);
}
.btn-info:hover, .btn-info:focus, .btn-info:not(:disabled):not(.disabled):active {
    background-color: #0B5670; border-color: #0B5670; color: var(--bb-white);
}
.btn-success, .btn-success:disabled, .btn-success.disabled {
    background-color: var(--bb-success); border-color: var(--bb-success); color: var(--bb-white);
}
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active {
    background-color: #17663F; border-color: #17663F; color: var(--bb-white);
}
/* btn-alternate (ArchitectUI's purple, off the palette) is the lists' delete button: the danger colour, as in the
   delete confirmation */
.btn-danger, .btn-danger:disabled, .btn-danger.disabled,
.btn-alternate, .btn-alternate:disabled, .btn-alternate.disabled {
    background-color: var(--bb-danger); border-color: var(--bb-danger); color: var(--bb-white);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:not(:disabled):not(.disabled):active,
.btn-alternate:hover, .btn-alternate:focus, .btn-alternate:not(:disabled):not(.disabled):active {
    background-color: #A61F2E; border-color: #A61F2E; color: var(--bb-white);
}
.btn-outline-info { color: var(--bb-info); border-color: var(--bb-info); }
.btn-outline-success { color: var(--bb-success); border-color: var(--bb-success); }
.btn-outline-danger { color: var(--bb-danger); border-color: var(--bb-danger); }
/* the "Back" pill (32 pages) is ArchitectUI's light green-blue gradient under white text and a white icon (inline) */
.btn.bg-happy-itmeo {
    background: var(--bb-primary) !important;
    border-color: var(--bb-primary);
    color: var(--bb-white);
}
.btn.bg-happy-itmeo:hover, .btn.bg-happy-itmeo:focus {
    background: var(--bb-primary-hover) !important;
    color: var(--bb-white);
}
/* btn-outline-alternate (the purple outline) is the forms' "Add" buttons (item, payment, voucher): the primary, as the
   "Add currency" button beside them */
.btn-outline-alternate { color: var(--bb-primary); border-color: var(--bb-primary); }
.btn-outline-alternate:hover, .btn-outline-alternate:focus,
.btn-outline-alternate:not(:disabled):not(.disabled).active,
.btn-outline-alternate:not(:disabled):not(.disabled):active {
    background-color: var(--bb-primary); border-color: var(--bb-primary); color: var(--bb-white);
}
.text-info { color: var(--bb-info) !important; }
.text-success { color: var(--bb-success) !important; }
.text-danger { color: var(--bb-danger) !important; }
.text-warning { color: var(--bb-warning) !important; }
.bg-info, .badge-info:not(.badge-pill) { background-color: var(--bb-info) !important; color: var(--bb-white); }
.bg-success, .badge-success:not(.badge-pill) { background-color: var(--bb-success) !important; color: var(--bb-white); }
.bg-danger, .badge-danger:not(.badge-pill) { background-color: var(--bb-danger) !important; color: var(--bb-white); }
.bg-primary, .badge-primary, .progress-bar {
    background-color: var(--bb-primary) !important;
}
.text-primary {
    color: var(--bb-primary) !important;
}
.border-primary {
    border-color: var(--bb-primary) !important;
}
.dropdown-item.active, .dropdown-item:active,
.nav-pills .nav-link.active, .nav-pills .show > .nav-link,
.list-group-item.active,
.page-item.active .page-link, .pagination .active.page-number .page-link {
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
    color: var(--bb-white);
}
.page-link {
    color: var(--bb-primary);
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.form-check-input:checked {
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
}
.nav-tabs .nav-link.active, .card-header-tab .nav-link.active {
    color: var(--bb-primary);
    box-shadow: inset 0 -3px 0 var(--bb-accent);
}

/* ---- cards and forms ------------------------------------------------------------------------------------------ */
.card, .main-card {
    border-color: var(--bb-border);
    border-radius: var(--bb-radius);
}
.form-control:focus, .select2-container--focus .select2-selection, .select2-container--open .select2-selection {
    border-color: var(--bb-accent) !important;
    box-shadow: var(--bb-focus-ring) !important;
}

/* ---- focus you can see, for every control reached by keyboard (V9) --------------------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--bb-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---- lists (V5): the header row stays in view while the rows scroll ------------------------------------------- */
table.dataTable thead th,
table.table thead th,
table.table.dataTable > thead > tr > th { /* this last form outweighs DataTables 2's own transparent cell background */
    background: var(--bb-surface);
    color: var(--bb-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--bb-border);
}
/* !important: DataTables makes its sortable cells relative (for the sort arrows), and relative with this offset moved
   them 60px down, over the first row */
.dt-container table.dataTable thead th {
    position: sticky !important;
    top: var(--bb-header-height);
    z-index: 3;
}
/* in a scrolling box the header would stick to the box, 60px down it, not to the page */
.table-responsive table.dataTable thead th,
.table-responsive-sm table.dataTable thead th,
.dt-scroll table.dataTable thead th {
    position: relative !important;
    top: auto;
}
/* A list without "dom" is laid out by DataTables 2 in Bootstrap rows; inside a card they pulled the table past the
   card's padding on both sides. */
.dt-container > .row { margin-left: 0; margin-right: 0; }
.dt-container > .row > * { padding-left: 0; padding-right: 0; }
table.dataTable tbody td {
    vertical-align: middle;
}

/* ---- status badges (V4): one look for every fiscal and e-invoice state --------------------------------------- */
.bb-status {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}
.bb-status--success { color: var(--bb-success); background: var(--bb-success-tint); border-color: var(--bb-success); }
.bb-status--warning { color: var(--bb-warning); background: var(--bb-warning-tint); border-color: var(--bb-warning); }
.bb-status--danger  { color: var(--bb-danger);  background: var(--bb-danger-tint);  border-color: var(--bb-danger); }
.bb-status--info    { color: var(--bb-info);    background: var(--bb-info-tint);    border-color: var(--bb-info); }
.bb-status--muted   { color: var(--bb-muted);   background: var(--bb-surface);      border-color: var(--bb-border); }
/* the details pages' status pills, rendered by the server, get the same look */
.badge.badge-pill { padding: 0.25rem 0.6rem; font-weight: 600; border: 1px solid transparent; }
.badge.badge-pill.badge-success { color: var(--bb-success); background: var(--bb-success-tint); border-color: var(--bb-success); }
.badge.badge-pill.badge-warning { color: var(--bb-warning); background: var(--bb-warning-tint); border-color: var(--bb-warning); }
.badge.badge-pill.badge-danger  { color: var(--bb-danger);  background: var(--bb-danger-tint);  border-color: var(--bb-danger); }
.badge.badge-pill.badge-info    { color: var(--bb-info);    background: var(--bb-info-tint);    border-color: var(--bb-info); }

/* ---- toasts (V7): the palette, readable text, errors stay until closed (fragments/scripts.html) --------------- */
#toast-container > div {
    opacity: 1;
    border-radius: var(--bb-radius);
    box-shadow: 0 6px 18px rgba(0, 50, 60, 0.18);
}
#toast-container > .toast-success { background-color: var(--bb-success); }
#toast-container > .toast-error   { background-color: var(--bb-danger); }
#toast-container > .toast-info    { background-color: var(--bb-primary); }
#toast-container > .toast-warning { background-color: var(--bb-warning); }
#toast-container > div, #toast-container .toast-title, #toast-container .toast-message {
    color: var(--bb-white);
}

/* ---- confirmation dialogs (V6) ------------------------------------------------------------------------------ */
.swal2-popup {
    border-radius: var(--bb-radius);
    color: var(--bb-primary);
}
.swal2-styled.swal2-confirm {
    background-color: var(--bb-primary) !important;
}
.swal2-styled.swal2-confirm.bb-danger {
    background-color: var(--bb-danger) !important;
}
.swal2-styled.swal2-cancel {
    background-color: var(--bb-white) !important;
    color: var(--bb-primary) !important;
    border: 1px solid var(--bb-border) !important;
}
.swal2-styled:focus {
    box-shadow: var(--bb-focus-ring) !important;
}

/* the dashboard charts' legend (ApexCharts sets #999, 2.8:1) */
.apexcharts-legend-text {
    color: var(--bb-muted) !important;
}

/* ---- Phase 5 (Lighthouse): ArchitectUI dims text with opacity, which the colour's contrast does not count ------ */
.app-page-title .page-title-subheading,
.app-page-title .widget-subheading {
    opacity: 1 !important;
    color: var(--bb-muted) !important;
}
/* the export buttons put their text inside the dimmed icon wrapper */
.btn .btn-icon-wrapper.opacity-7 {
    opacity: 1 !important;
}
/* the "?" help beside a label: at least a 24px target on every screen (WCAG 2.2 AA); 44px on phones (billy-mobile) */
a[data-bs-toggle="tooltip"],
a[data-toggle="tooltip"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    vertical-align: middle;
}

/* a field the tax authority's refusal names (issue-guard.js): the customer picker's select2 box too */
.select2-container .select2-selection.issue-guard-mark { border-color: var(--bb-danger); box-shadow: 0 0 0 1px var(--bb-danger); }
.issue-guard-not-saved ul { margin-bottom: .25rem; }
.issue-guard-not-saved:focus { outline: 2px solid var(--bb-danger); outline-offset: 2px; }

/* the file boxes (js/file-box.js): a file input as a drop area */
.bb-filebox-area { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; min-height: 200px; margin: 0; padding: 1rem; border: 2px dashed var(--bb-border);
    border-radius: .5rem; background: #fff; color: var(--bb-muted); text-align: center; cursor: pointer; }
.bb-filebox-area:hover, .bb-filebox-area.is-over { border-color: var(--bb-primary); background: rgba(0, 178, 169, .05); }
.bb-filebox-area:focus-within { outline: 2px solid var(--bb-primary); outline-offset: 2px; }
.bb-filebox-area input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bb-filebox-icon { font-size: 2.5rem; line-height: 1; }
.bb-filebox-area.has-file .bb-filebox-hint { display: none; }
.bb-filebox-name { color: #212529; font-weight: 500; word-break: break-all; }

/* Select2 4.1 (stack upgrade stage 6): the "x" that empties a box, and the one on each chosen entry of a multiple box,
   are buttons now (spans in 4.0) - without this they show the browser's own button frame */
.select2-container .select2-selection__clear,
.select2-container .select2-selection__choice__remove { background: transparent; border: 0; padding: 0; font: inherit; line-height: inherit; }
.select2-container .select2-selection__clear { font-weight: bold; }
/* ... and in a box that takes several entries the "x" and the typing field are no longer inside the list of entries
   but beside it: the list must not push itself under the "x", the typing field follows the last entry */
.select2-container .select2-selection--multiple { position: relative; display: flow-root; }
.select2-container .select2-selection--multiple .select2-selection__clear { position: absolute; top: 0; right: .625rem; float: none; margin-right: 0; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered { width: auto; overflow: visible; padding-right: 1.75rem; }
.select2-container .select2-search--inline .select2-search__field { resize: none; overflow: hidden; height: 1.5rem; vertical-align: top; }

/* the user manual (2026-10-05): one topic at a time, screenshots as wide as the column and never wider, the phone
   screenshots at a phone's width */
.bb-manual-title { margin: 0; font-size: 1.35rem; font-weight: 600; color: inherit; }
/* the topics beside the menu, never wider than what is left of the screen */
.bb-manual .app-inner-layout__content { flex: 1 1 auto; min-width: 0; }
.bb-manual-body { padding: 1rem 2.5rem 3rem; max-width: 1100px; }
.bb-manual-body h3 { margin: .25rem 0 1rem; font-size: 1.4rem; font-weight: 600; color: var(--bb-primary); }
.bb-manual-body h5 { margin: 1.75rem 0 .6rem; font-size: 1.05rem; font-weight: 600; color: var(--bb-primary); }
.bb-manual-body p, .bb-manual-body li { line-height: 1.6; }
.bb-manual-body figure { margin: .75rem 0 1.5rem; }
.bb-manual-body figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius); box-shadow: 0 1px 4px rgba(0, 50, 60, .08); }
.bb-manual-body figure.bb-phone img { max-width: 320px; }
.bb-manual-body .table { max-width: 760px; }
.bb-manual-code { margin: .5rem 0 1rem; padding: .75rem 1rem; background: var(--bb-surface); border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius); font-size: .85rem; white-space: pre; overflow-x: auto;
    /* scrolls inside its own box: no width of its own, so a long line cannot widen the page */
    width: 0; min-width: 100%; }
.bb-manual-body code { overflow-wrap: anywhere; }
.bb-manual .mobile-app-menu-btn { display: none; align-items: center; gap: .5rem; }
.bb-manual-topics { font-weight: 600; color: var(--bb-primary); }
@media (max-width: 991.98px) {
    .bb-manual .mobile-app-menu-btn { display: flex; }
    .bb-manual-body { padding: 1rem 1rem 2rem; }
    .bb-manual-body figure.bb-phone img { max-width: 100%; }
}
/* the manual's icon in the header, beside the language flags (2026-10-05) */
.app-header .bb-manual-btn { display: inline-flex; align-items: center; padding: 0 .35rem; color: var(--bb-white); font-size: 1.35rem;
    line-height: 1; opacity: .85; }
.app-header .bb-manual-btn:hover, .app-header .bb-manual-btn.is-active { opacity: 1; color: var(--bb-accent); }
.app-header .bb-manual-btn:focus-visible { outline: none; box-shadow: var(--bb-focus-ring); border-radius: 50%; }