/* =====================================================================
   boss-ui.css — static replica of theBOSSapp (front-boss) light theme.
   Every rule is scoped under .boss-ui so nothing leaks into the host page.

   Font: Roboto 300/400/500/700 — the app imports exactly
     https://fonts.googleapis.com/css?family=Roboto:300,400,500,700
   (src/scss/boss.scss). Preferred link for the landing page:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Lato:wght@700&display=swap" rel="stylesheet">
   (Lato 700 is used only for big money figures: CostWidget h1, invoice Total Due -- the app loads Lato too.)

   Source key (all paths relative to front-boss/src/scss/):
     bsv  = bootstrap/_variables.scss   (Bootstrap 5.1.3 overrides)
     var  = _variables.scss             (:root CSS custom properties)
     util = boss/_utils.scss            ($borderRadius 2rem, $shadow, .card, .btn)
     hdr  = layout/_header.scss         (.slim-header, .slim-pagetitle, breadcrumb)
     nav  = layout/_navbar.scss         (.slim-header-unified .header-nav-inline)
     tbl  = bootstrap/_tables.scss + boss/_table.scss
     bdg  = boss/_badge.scss
     fab  = boss/_floating-button.scss + util/_btns.scss
     BS   = Bootstrap 5.1.3 defaults (node_modules/bootstrap/scss/_variables.scss)
   ===================================================================== */

.boss-ui {
  /* --- tokens (var) ---------------------------------------------------- */
  --b-primary: #002b49;            /* bsv $boss-primary / $blue */
  --b-gold: #ffb838;               /* bsv $boss-secondary / $yellow */
  --b-success: #00aa4f;            /* bsv $green */
  --b-info: #5b93d3;               /* bsv $cyan (Bootstrap $info = $cyan) */
  --b-danger: #dc3545;             /* bsv $danger */
  --b-warning: #ffb838;            /* bsv $yellow */
  --b-teal: #1caf9a;               /* bsv $teal */
  --b-orange: #f27510;             /* bsv $orange */
  --b-secondary: #6c757d;          /* BS $gray-600 */
  --body-bg: #f0f2f7;              /* bsv $body-bg, var --mainpanel */
  --body-color: #868ba1;           /* bsv $body-color */
  --border-color: #e5e7eb;         /* var --border-color */
  --border-color-secondary: #dee2e6; /* var */
  --text-color-primary: #002b49;   /* var */
  --text-color-secondary: #6c757d; /* var */
  --text-dark: #343a40;            /* var --text-dark */
  --heading-color: #343a40;        /* var */
  --surface-muted: #f8f9fa;        /* var */
  --hover-grey: #f3f4f6;           /* var */
  --table-head-bg: #f8f9fa;        /* var --table-head-bg */
  --table-head-color: #343a40;     /* var --table-head-color */
  --card-bg: #fff;                 /* var --card-bg */
  --radius-md: 0.5rem;             /* var */
  --radius-lg: 1rem;               /* var */
  --pill: 2rem;                    /* util $borderRadius */
  --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.0745098039); /* util $shadow, var --box-shadow */
  --gray-100: #f8f9fa; --gray-200: #e9ecef; --gray-300: #dee2e6; --gray-400: #ced4da;
  --gray-500: #adb5bd; --gray-600: #6c757d; --gray-700: #495057; --gray-800: #343a40; --gray-900: #212529; /* BS */

  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; /* bsv $font-family-base */
  font-size: 16px;                 /* boss.scss body: calc(1rem * --font-scale) */
  line-height: 1.5;                /* BS */
  font-weight: 400;
  color: var(--body-color);
  background-color: var(--body-bg);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.boss-ui *, .boss-ui *::before, .boss-ui *::after { box-sizing: border-box; }
.boss-ui p, .boss-ui h1, .boss-ui h2, .boss-ui h3, .boss-ui h4, .boss-ui h5, .boss-ui h6, .boss-ui ul, .boss-ui ol { margin: 0; padding: 0; }
.boss-ui ul, .boss-ui ol { list-style: none; }
.boss-ui a { color: var(--text-color-primary); text-decoration: none; } /* var --link-default-color */
.boss-ui h5, .boss-ui h6 { color: var(--heading-color); font-weight: 500; line-height: 1.2; }
.boss-ui h5 { font-size: 1.25rem; }
.boss-ui h6 { font-size: 0.875rem; } /* var --heading-h6 */
.boss-ui table { border-collapse: collapse; }
.boss-ui svg { display: inline-block; vertical-align: middle; }

/* ---------- App frame ---------------------------------------------------- */
.boss-ui.app-frame { width: 1100px; height: 640px; overflow: hidden; position: relative; }
/* The app is laid out at a 1280 x 745 desktop viewport and scaled to the 1100 x 640 frame
   (factor 0.859375), the same ratio as the reference screenshots (j645-screenshots/*.jpg). */
.boss-ui .app-viewport { width: 1280px; height: 745px; transform: scale(0.859375); transform-origin: 0 0; position: relative; overflow: hidden; background: var(--body-bg); }
.boss-ui .app-body { height: 670px; overflow: hidden; position: relative; }
.boss-ui .page { padding: 0 32px; } /* container-large gutter 2rem */

/* ---------- Header (hdr .slim-header, nav .header-nav-inline) ----------- */
.boss-ui .slim-header {
  width: 100%; height: 75px;                       /* hdr $slim-header-height 75px */
  display: flex; align-items: center;
  background-color: #fff;                          /* var --main-bg-navbar */
  border-bottom: 1px solid var(--border-color-secondary); /* hdr */
  padding: 0 16px;                                 /* Navigation.jsx px-3 */
  justify-content: space-between;
}
.boss-ui .slim-header-left, .boss-ui .slim-header-right { display: flex; align-items: center; gap: 0.5rem; } /* hdr */
.boss-ui .slim-logo { width: 50px; height: 50px; display: flex; align-items: center; } /* HeaderLogo.jsx 50x50 */
.boss-ui .slim-logo img { width: 50px; height: 50px; filter: drop-shadow(0 0.125rem 0.05rem #9b9b9bc2); } /* util .header-logo */
.boss-ui .header-nav-inline .nav { display: flex; align-items: center; margin-left: 0.5rem; } /* nav */
.boss-ui .header-nav-inline .nav-link {
  text-transform: uppercase; font-size: 13px; letter-spacing: 0.7px; font-weight: 500; /* nav */
  color: var(--text-color-primary);
  height: 75px; padding: 0 8px;                    /* nav: 8px <1440 (15px >=1440) */
  display: flex; align-items: center; border-bottom: 2px solid transparent; white-space: nowrap;
}
.boss-ui .header-nav-inline .nav-link .nav-ico { width: 20px; height: 20px; margin-right: 10px; color: inherit; } /* nav > i 20px + pd-r-10 */
.boss-ui .header-nav-inline .nav-link.with-sub::after { /* nav: FontAwesome \f107 angle-down, opacity .7 */
  content: ""; width: 6px; height: 6px; margin-left: 9px; margin-top: -3px; opacity: 0.7;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.boss-ui .header-nav-inline .nav-link.active { border-bottom-color: var(--text-color-primary); } /* nav .active */
.boss-ui .search-opener { /* boss/_search.scss */
  border: 1px solid var(--border-color); padding: 2px 12px; border-radius: var(--radius-md);
  font-size: 14px; display: flex; align-items: center; gap: 4px; min-height: 42px; min-width: 42px;
  color: var(--text-color-secondary);
}
.boss-ui .keyboard-key-shortcut { /* boss/_search.scss */
  font-size: 12px; background: #fff; border: 1px solid var(--border-color); border-radius: 2px;
  padding: 2px 6px; line-height: 1; display: inline-grid;
}
.boss-ui .header-icon-btn { /* hdr .header-icon-btn */
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: #fff; color: var(--text-color-secondary); position: relative;
}
.boss-ui .header-icon-btn svg { width: 1.25rem; height: 1.25rem; }
.boss-ui .header-icon-btn .indicator { width: 7px; height: 7px; background: var(--b-primary); border-radius: 100%; position: absolute; top: 6px; right: 6px; } /* hdr */
.boss-ui .horizontal-divider { width: 1px; height: 2rem; background-color: var(--border-color-secondary); margin: 0 0.5rem; } /* util */
.boss-ui .logged-user { /* hdr .logged-user (row-reverse, text right) */
  display: flex; flex-direction: row-reverse; align-items: center; gap: 1rem; text-align: right;
  color: var(--text-color-primary); padding: 0 4px 0 6px;
}
.boss-ui .logged-user .user-menu { white-space: nowrap; }
.boss-ui .logged-user .user-menu span { display: block; font-size: 14px; line-height: 1.5; } /* var --text-sm */
.boss-ui .logged-user .user-menu small { display: block; font-size: 12.8px; line-height: 1.3; } /* var --text-xs */
.boss-ui .logged-user .caret { display: inline-block; width: 6px; height: 6px; margin: 0 2px 3px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }

/* ---------- Floating action button (fab) -------------------------------- */
.boss-ui .floating-button-generic {
  position: absolute; right: 1rem; bottom: 1.25rem;  /* fab .fab-toggle-button (fixed bottom:5rem right:1rem in app) */
  width: 3.5rem; height: 3.5rem; background-color: #002b49; color: #fff; border-radius: 50%;
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,0.1), 0 0.25rem 0.375rem -0.125rem rgba(0,0,0,0.05);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.boss-ui .floating-button-generic svg { width: 1.5rem; height: 1.5rem; } /* .fab-toggle-icon */

/* ---------- Page header (HeaderPage.tsx: .slim-pageheader) -------------- */
.boss-ui .slim-pageheader { padding: 25px 0; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; } /* hdr */
.boss-ui .slim-pagetitle { /* hdr */
  color: var(--text-color-primary); padding-left: 10px; border-left: 4px solid var(--text-color-primary);
  text-transform: uppercase; font-weight: 700; font-size: 18px; line-height: 18px; letter-spacing: 0.5px;
}
.boss-ui .slim-breadcrumb { display: flex; font-size: 14px; } /* hdr */
.boss-ui .slim-breadcrumb li { color: var(--gray-600); } /* BS $breadcrumb-active-color */
.boss-ui .slim-breadcrumb li a { color: var(--text-color-primary); }
.boss-ui .slim-breadcrumb li + li::before { content: "/"; padding: 0 0.5rem; color: var(--gray-400); } /* hdr $gray-400 */

/* ---------- Card (util .card, bootstrap/_card.scss) --------------------- */
.boss-ui .card {
  background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 1rem; /* util .card */
  box-shadow: var(--shadow); color: #002b49; position: relative; /* var --card-text-color */
}
.boss-ui .card-body { padding: 20px; } /* bootstrap/_card.scss */
.boss-ui .card-header { padding: 12px 15px; background: transparent; border-bottom: 0; } /* bootstrap/_card.scss */
.boss-ui .bg-white.border { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow); } /* util */
.boss-ui .section-title { font-size: 14px; font-weight: 700; color: var(--heading-color); text-transform: uppercase; letter-spacing: 1px; } /* layout/_global.scss */
.boss-ui .slim-card-title { font-weight: 500; font-size: 14px; color: var(--text-color-primary); } /* layout/_global.scss */
.boss-ui .card-body-title { font-size: 14px; text-transform: uppercase; font-weight: 700; } /* bootstrap/_card.scss */

/* ---------- Table (tbl) -------------------------------------------------- */
.boss-ui .table-responsive.card { overflow: hidden; } /* ReactTable.tsx wrapperClasses "table-responsive card" */
.boss-ui .table { width: 100%; margin-bottom: 0; border-color: var(--border-color); vertical-align: top; }
.boss-ui .table th, .boss-ui .table td {
  padding: 0.5rem 0.5rem;                           /* BS $table-cell-padding */
  border-bottom: 1px solid var(--border-color);     /* boss/_table.scss border-color */
  color: var(--text-color-secondary);               /* boss/_table.scss th, td */
  vertical-align: middle; text-align: left;
}
.boss-ui .table thead > tr > th, .boss-ui .table tfoot > tr > th {
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; /* bootstrap/_tables.scss */
  background-color: var(--table-head-bg); color: var(--table-head-color); white-space: nowrap; /* boss/_table.scss */
  border-bottom: 1px solid var(--border-color);
}
.boss-ui .table tfoot > tr > th { background: #fff; color: var(--text-color-secondary); } /* util .table tfoot */
.boss-ui .table tbody tr:last-child td { border-bottom: 0; }
.boss-ui .table td a:not([class]) { color: var(--text-color-primary); }
.boss-ui .table .text-end, .boss-ui .text-end { text-align: right; }
.boss-ui .table-sm th, .boss-ui .table-sm td { padding: 0.25rem 0.25rem; } /* BS $table-cell-padding-sm */
.boss-ui .react-table-top-scroll { /* boss/_table.scss */
  height: 20px; background: #fff; border: 1px solid var(--border-color); border-radius: 24px; margin-bottom: 4px; position: relative;
}
.boss-ui .react-table-top-scroll-thumb { position: absolute; left: 3px; top: 0; height: 12px; margin: 3px 0; background: #d6d6d6; border-radius: 24px; }

/* ---------- Search box (hdr .search-box + SearchInput.jsx) -------------- */
.boss-ui .search-box {
  display: flex; align-items: center; border: 1px solid var(--border-color); background: var(--surface-muted);
  padding: 2px; border-radius: 50px; box-shadow: var(--shadow); /* hdr + shadow-sm */
}
.boss-ui .search-box .form-control { border: 0; background: transparent; box-shadow: none; padding-left: 20px; height: auto; } /* hdr */
.boss-ui .search-box .btn { width: 40px; height: 40px; min-width: 0; border-radius: 100%; padding: 0; background: var(--b-primary); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; } /* hdr */
.boss-ui .search-box .btn svg { width: 16px; height: 16px; }

/* ---------- Buttons (util .btn, util/_btns.scss, BS) -------------------- */
.boss-ui .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-weight: 400; font-size: 0.875rem; line-height: 1.5; /* BS $btn-font-size = $font-size-base */
  padding: 0.594rem 0.75rem;                        /* bsv $input-btn-padding-y */
  border: 1px solid transparent; border-radius: var(--pill); /* util .btn:not(.btn-link) 2rem */
  box-shadow: var(--shadow); white-space: nowrap; cursor: default;
}
.boss-ui .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.765625rem; } /* BS $btn-padding-sm, $font-size-sm */
.boss-ui .btn-primary { background: var(--b-primary); border-color: var(--b-primary); color: #fff; }
.boss-ui .btn-outline-primary { background: transparent; border-color: var(--b-primary); color: var(--b-primary); } /* util/_btns.scss */
.boss-ui .btn-outline-secondary { background: transparent; border-color: var(--b-secondary); color: var(--b-secondary); }
.boss-ui .btn-outline { background: #fff; border-color: var(--gray-400); color: var(--gray-600); }
.boss-ui .btn-success { background: var(--b-success); border-color: var(--b-success); color: #fff; } /* util .btn-success color #fff */
.boss-ui .btn-link { background: none; border: 0; box-shadow: none; color: var(--text-color-primary); padding-left: 0; padding-right: 0; } /* bootstrap/_buttons.scss */
.boss-ui .min-width-btn { min-width: 130px; } /* var --min-width-btn */

/* ---------- Badges (bdg) ------------------------------------------------- */
.boss-ui .badge {
  display: inline-block; padding: 5px 15px; font-weight: 500; border-radius: var(--radius-md); /* bdg */
  letter-spacing: 1px; margin: 4px 0;                                                    /* bdg */
  font-size: 0.75em; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; /* BS */
}
.boss-ui .bg-primary { background-color: var(--b-primary) !important; }
.boss-ui .bg-success { background-color: var(--b-success) !important; }
.boss-ui .bg-info { background-color: var(--b-info) !important; }
.boss-ui .bg-warning { background-color: var(--b-warning) !important; }
.boss-ui .bg-danger { background-color: var(--b-danger) !important; }
.boss-ui .bg-secondary { background-color: var(--b-secondary) !important; }
.boss-ui .bg-teal { background-color: var(--b-teal) !important; }
.boss-ui .bg-light { background-color: var(--gray-100) !important; }
.boss-ui .badge.bg-light { color: var(--gray-800); }
.boss-ui .badge-soft-success { color: #34c38f; background-color: rgb(223 245 234); }   /* util */
.boss-ui .badge-soft-info { color: #1c3da7; background-color: #dbe9fe; }             /* util */
.boss-ui .badge-soft-danger { color: #f46a6a; background-color: rgb(255 217 217); }  /* util */
.boss-ui .badge-soft-warning { color: #bcb600; background-color: rgb(255 252 232); } /* util */
.boss-ui .badge-soft-secondary { color: #6c757d; background-color: rgb(233 236 239); } /* util */
.boss-ui .outline-badge { /* bdg */
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1; padding: 6px 9px;
}
.boss-ui .outline-badge.ol-primary { background: #eef6ff; border-color: #d9eaff; color: #1d70c9; }
.boss-ui .outline-badge.ol-danger { background: #fff1f1; border-color: #ffdada; color: #c94040; }
.boss-ui .outline-badge.ol-warning { background: #ffb83847; color: #554400; border-color: #ffb838; }
.boss-ui .count-badge { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: #e9e9ea; border-radius: 50%; font-weight: 500; font-size: 12px; color: #030213; } /* bdg */

/* ---------- Forms (bootstrap/_forms.scss, util .form-control) ----------- */
.boss-ui .form-group { margin-bottom: 1rem; }
.boss-ui .form-control-label { display: block; margin-bottom: 0.5rem; font-size: 16px; font-weight: 600; color: var(--text-color-secondary); } /* renderField.jsx "form-control-label txt-secondary tx-semibold"; layout/_global.scss label mb .5rem */
.boss-ui .form-control-label .req { color: var(--b-danger); } /* tx-danger */
.boss-ui .form-control {
  display: block; width: 100%; font-family: inherit; font-size: 0.875rem; line-height: 1.5; /* BS */
  padding: 0.594rem 0.75rem;                                  /* bsv $input-btn-padding-y */
  background: #fff; color: #002b49;                           /* var --field-bg-color / --field-text-color */
  border: 1px solid var(--border-color);                      /* var --field-border-color */
  border-radius: var(--radius-md); box-shadow: var(--shadow); /* util .form-control */
}
.boss-ui .form-control.muted { color: var(--gray-500); }

/* ---------- Tabs (bootstrap/_nav.scss) ---------------------------------- */
.boss-ui .nav-tabs { display: flex; border-bottom: 1px solid var(--gray-300); } /* BS $nav-tabs-border-color */
.boss-ui .nav-tabs .nav-link {
  display: block; padding: 0.5rem 1rem; font-size: 14px; color: var(--text-color-primary);
  border: 1px solid transparent; margin-bottom: -1px; border-radius: 0;   /* bootstrap/_nav.scss */
}
.boss-ui .nav-tabs .nav-link.active { color: var(--gray-700); background: var(--body-bg); border-color: var(--gray-300) var(--gray-300) var(--body-bg); } /* BS $nav-tabs-link-active-* */

/* ---------- Manager-left profile nav (pages/_contacts.scss, util) ------- */
.boss-ui .manager-left { width: 240px; flex-shrink: 0; }
.boss-ui .manager-left .nav { display: block; border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.boss-ui .manager-left .nav-link { display: flex; align-items: center; padding: 0 14px; height: 40px; font-size: 14px; position: relative; background: #f8f9fa; color: #002b49; border-top: 1px solid var(--border-color); } /* util --card-bg-off */
.boss-ui .manager-left .nav-link:first-child { border-top: 0; }
.boss-ui .manager-left .nav-link.active { background: #f3f4f6; font-weight: 500; } /* util --card-bg-hover */
.boss-ui .manager-left .nav-link.active::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px; background: var(--b-gold); } /* util .manager-left .nav-link.active::before gold */

/* ---------- Progress (BS) ----------------------------------------------- */
.boss-ui .progress { display: flex; height: 0.5rem; overflow: hidden; background: var(--gray-200); border-radius: 0.25rem; }
.boss-ui .progress-bar { background: var(--b-primary); }

/* ---------- Typography helpers (util/_typography.scss, util) ------------ */
.boss-ui .tx-12 { font-size: 12px; } .boss-ui .tx-13 { font-size: 13px; } .boss-ui .tx-14 { font-size: 14px; }
.boss-ui .tx-11 { font-size: 11px; } .boss-ui .tx-18 { font-size: 18px; } .boss-ui .tx-20 { font-size: 20px; } .boss-ui .tx-24 { font-size: 24px; }
.boss-ui .tx-bold { font-weight: 700; } .boss-ui .tx-semibold { font-weight: 600; } .boss-ui .tx-medium { font-weight: 500; }
.boss-ui .tx-inverse { color: var(--gray-800); }            /* util/_typography.scss $gray-800 */
.boss-ui .tx-uppercase { text-transform: uppercase; }
.boss-ui .txt-secondary { color: var(--text-color-secondary); } /* util */
.boss-ui .txt-dark { color: var(--text-dark); }
.boss-ui .text-dark { color: #212529; }
.boss-ui .text-primary-boss { color: var(--b-primary); }
.boss-ui .text-success { color: var(--b-success) !important; } .boss-ui .text-danger { color: var(--b-danger) !important; } .boss-ui .text-info { color: var(--b-info) !important; } /* BS utilities are !important */
.boss-ui .text-description { color: #868ba1; }               /* util */
.boss-ui .text-muted { color: var(--gray-600); }
.boss-ui .no-wrap { white-space: nowrap; }

/* ---------- Layout helpers ---------------------------------------------- */
.boss-ui .d-flex { display: flex; } .boss-ui .flex-column { flex-direction: column; } .boss-ui .flex-grow-1 { flex-grow: 1; }
.boss-ui .align-items-center { align-items: center; } .boss-ui .justify-content-between { justify-content: space-between; }
.boss-ui .ms-auto { margin-left: auto; } .boss-ui .gap-2 { gap: .5rem; } .boss-ui .gap-3 { gap: 1rem; }
.boss-ui .mb-0 { margin-bottom: 0; } .boss-ui .mb-1 { margin-bottom: .25rem; } .boss-ui .mb-2 { margin-bottom: .5rem; } .boss-ui .mb-3 { margin-bottom: 1rem; }
.boss-ui .mt-1 { margin-top: .25rem; } .boss-ui .mt-2 { margin-top: .5rem; } .boss-ui .mt-3 { margin-top: 1rem; }
.boss-ui .me-1 { margin-right: .25rem; } .boss-ui .me-2 { margin-right: .5rem; } .boss-ui .ms-2 { margin-left: .5rem; }
.boss-ui .p-3 { padding: 1rem; }
.boss-ui .row { display: flex; gap: 20px; }
.boss-ui .col { flex: 1 1 0; min-width: 0; }
.boss-ui .w-100 { width: 100%; }
.boss-ui .rounded-circle { border-radius: 50%; }

/* ---------- react-select look (components/utils/reactSelectTheme.js) ---- */
.boss-ui .rs-control {
  display: flex; align-items: center; min-height: calc(1.5em + 1.188rem + 2px); /* theme controlHeight (font 14px) */
  font-size: 0.875rem; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  color: #002b49; padding: 2px 0 2px 8px;
}
.boss-ui .rs-control .rs-values { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0; min-width: 0; }
.boss-ui .rs-control .rs-single { padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boss-ui .rs-control .rs-placeholder { padding-left: 2px; color: rgba(28,27,27,0.5); } /* var --field-placeholder-color */
.boss-ui .rs-multi { display: inline-flex; border-radius: var(--radius-lg); overflow: hidden; background: #1d4ed8; color: #fff; font-size: 85%; } /* multiValue radius-lg, --field-select-bg-multi-value */
.boss-ui .rs-multi span { padding: 3px 6px 3px 10px; line-height: 1.3; }
.boss-ui .rs-multi i { padding: 3px 7px 3px 2px; font-style: normal; font-weight: 700; }
.boss-ui .rs-ind { display: flex; align-items: center; align-self: stretch; }
.boss-ui .rs-ind .sep { width: 1px; align-self: stretch; margin: 8px 0; background: var(--border-color); } /* indicatorSeparator */
.boss-ui .rs-ind .chev { width: 36px; display: flex; justify-content: center; color: #002b49; }
.boss-ui .rs-ind .chev::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
.boss-ui .rs-ind .clear { width: 30px; text-align: center; color: #002b49; font-weight: 700; font-size: 16px; }

/* ---------- react-toggle (boss/_react-toggle.scss) ---------------------- */
.boss-ui .react-toggle { display: inline-block; position: relative; width: 50px; height: 24px; }
.boss-ui .react-toggle-track { width: 50px; height: 24px; border-radius: 30px; background: #4d4d4d; position: relative; }
.boss-ui .react-toggle--checked .react-toggle-track { background: #00aa4f; }
.boss-ui .react-toggle-thumb { position: absolute; top: 1px; left: 1px; width: 22px; height: 22px; border-radius: 50%; background: #fafafa; border: 1px solid #4d4d4d; }
.boss-ui .react-toggle--checked .react-toggle-thumb { left: 27px; border-color: #00aa4f; }
.boss-ui .react-toggle-track .x { position: absolute; right: 9px; top: 3px; color: #fff; font-size: 13px; font-weight: 700; line-height: 18px; }
.boss-ui .react-toggle-track .tick { position: absolute; left: 9px; top: 3px; color: #fff; font-size: 12px; line-height: 18px; }

/* ---------- Profile header card (pages/_profile.scss, utils/DashboardHeader) */
.boss-ui .card-profile .card-body { padding: 20px; }
.boss-ui .card-profile-name { color: var(--heading-color); font-weight: 400; font-size: 24px; line-height: 1.2; } /* pages/_profile.scss + tx-24 */
.boss-ui .hdg-color { color: var(--heading-color); } /* util */
.boss-ui .card-profile p.hdg-color { line-height: 1.6; }
.boss-ui .card-profile .card-footer { padding: 0; border-top: 0; border-radius: 0 0 1rem 1rem; overflow: hidden; } /* bootstrap/_card.scss */
.boss-ui .progress-bar-xs { height: 4px; } /* progress-bar-xs */
.boss-ui .header-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; border-top: 1px solid var(--border-color); font-size: 14px; } /* utils/HeaderFooter.jsx card-footer */

/* ---------- Action button strip (pages/_profile.scss .nav-activity-profile, util) */
.boss-ui .nav-activity-profile { display: flex; margin: 20px 0; } /* mg-y-20 */
.boss-ui .nav-activity-profile .nav-item { flex: 1; }
.boss-ui .nav-activity-profile .nav-item + .nav-item { margin-left: -1px; }
.boss-ui .nav-activity-profile .nav-link {
  display: flex; align-items: center; justify-content: center; height: 50px; width: 100%;
  background: #fff; border: 1px solid var(--border-color); color: #495057;   /* var --page-header-button-bg / -tx */
  text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: 1px; border-radius: 0;
}
.boss-ui .nav-activity-profile li:only-child .nav-link { border-radius: 2rem; }            /* util $borderRadius */
.boss-ui .nav-activity-profile li:first-child:not(:only-child) .nav-link { border-radius: 2rem 0 0 2rem; }
.boss-ui .nav-activity-profile li:last-child:not(:only-child) .nav-link { border-radius: 0 2rem 2rem 0; }
.boss-ui .nav-activity-profile .nav-link.current-selected { background: #212529; color: #fff; } /* var --page-header-button-active-* */
.boss-ui .nav-activity-profile .nav-link svg { width: 22px; height: 22px; margin-right: 10px; }
.boss-ui .tx-primary-ion { color: #002b49; } .boss-ui .tx-success-ion { color: #00aa4f; } .boss-ui .tx-danger-ion { color: #dc3545; }

/* ---------- Sub-tabs (pages/_dashboard.scss .nav-statistics-wrapper) ---- */
.boss-ui .nav-statistics-wrapper { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; margin-bottom: 20px; }
.boss-ui .nav-statistics-wrapper .nav { display: flex; }
.boss-ui .nav-statistics-wrapper .nav-link {
  padding: 0 0; margin-right: 24px; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  position: relative; color: var(--text-color-primary); background: none; border: 0;
}
.boss-ui .nav-statistics-wrapper .nav-link:not(.active) { opacity: 0.6; }
.boss-ui .nav-statistics-wrapper .nav-link.active::before { content: ""; position: absolute; bottom: -13px; left: 0; right: 0; border-bottom: 2px solid var(--text-color-primary); }

/* ---------- Manager-left: real values (pages/_contacts.scss, util) ------ */
.boss-ui .manager-left { width: 100%; }
.boss-ui .manager-left .nav-link { justify-content: space-between; height: 45px; padding: 0 20px; background: #f8f9fa; color: #002b49; font-size: 16px; font-weight: 400; } /* contacts 45px/0 20px; util --card-bg-off/--card-text-color */
.boss-ui .manager-left .nav-link.active { background: #f3f4f6; } /* util --card-bg-hover */
.boss-ui .manager-left .nav-link.active::before { left: 9px; top: 50%; bottom: auto; height: 50%; transform: translateY(-50%); width: 3px; border-radius: 0.3rem; background: var(--b-gold); } /* contacts ::before + util gold */
.boss-ui .manager-left .section-label-sm { margin-bottom: 8px; }

/* ---------- Icon button (util/_btns.scss .icon-btn) --------------------- */
.boss-ui .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; border-radius: 0.375rem;
  padding: 0.25rem 0.5rem; min-height: 36px; border: 1px solid var(--border-color); background: #fff;
  color: var(--text-color-secondary); font-size: 12.25px; line-height: 1; /* calc($font-size-base * .875) */
}
.boss-ui .icon-btn svg { width: 13px; height: 13px; }
.boss-ui .filter-count { background: var(--b-primary); color: #fff; border-radius: 999px; font-size: 10px; padding: 2px 6px; margin-left: 2px; }

/* ---------- PaginatedList / PaginatedCard ------------------------------- */
.boss-ui .search-shortcut { font-size: 11px; color: var(--text-color-secondary); opacity: .5; display: flex; align-items: center; gap: .25rem; margin: .25rem .5rem 0 0; white-space: nowrap; } /* SearchShortcutTip: txt-secondary opacity-50 tx-11 mt-1 gap-1 me-2 */
.boss-ui .add-link svg { width: 24px; height: 24px; color: var(--text-color-primary); margin-left: 4px; } /* RiAddFill tx-24 ms-1 */
.boss-ui .paginated-card { padding: 1rem; } /* card p-3 */
.boss-ui .paginated-card .card-row-tx { font-size: 14.4px; } /* util calc(.9rem) */
.boss-ui .paginated-card .card-row-tx:first-child { opacity: 0.7; }
.boss-ui .avatar { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); margin-right: .5rem; flex-shrink: 0; } /* utils/Avatar.tsx bg-grad shadow rounded-md tx-white tx-14 */
.boss-ui .bg-grad-info { background: linear-gradient(180deg, rgba(91,147,211,1) 44%, rgb(123,195,255) 100%); }   /* util */
.boss-ui .bg-grad-primary { background: linear-gradient(180deg, rgba(0,43,73,1) 44%, rgb(55,102,135) 100%); }   /* util */
.boss-ui .bg-grad-success { background: linear-gradient(180deg, rgba(0,170,64,1) 44%, rgb(58,255,78) 100%); }    /* util */
.boss-ui .bg-grad-warning { background: linear-gradient(180deg, rgba(255,184,56,1) 50%, rgb(255,237,104) 100%); } /* util */

/* ---------- Pills (rounded-pill shadow, BS) ----------------------------- */
.boss-ui .rounded-pill { border-radius: 50rem !important; }
.boss-ui .shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }      /* BS $box-shadow */
.boss-ui .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; } /* BS $box-shadow-sm */
.boss-ui .pill-status { display: inline-block; color: #fff; font-size: 10px; text-align: center; padding: 0 1rem; white-space: nowrap; line-height: 1.5; } /* OpportunityTable: rounded-pill shadow d-inline-block text-white tx-10 text-center px-3 */
.boss-ui .soft-pill { padding: 0 .5rem; white-space: nowrap; font-size: 14px; } /* InvoiceTable: rounded-pill shadow-sm px-2 no-wrap */

/* ---------- Alerts (bootstrap/_alerts.scss, boss/_alert.scss) ----------- */
.boss-ui .alert { padding: 15px 20px; border: 0; border-radius: 0; position: relative; font-size: 16px; } /* bootstrap/_alerts.scss */
.boss-ui .alert-info { background: #cce5ff; color: #002b49; }  /* var --info-bg-color / --info-text-color */
.boss-ui .alert-warning { background: #fff3cd; color: #664d03; } /* BS 5.1.3 alert-warning (shift-color of $warning) */
.boss-ui .alert small { font-size: .875em; }
.boss-ui .alert ul { list-style: disc; padding-left: 1rem; }
.boss-ui .information-alert { border-left: 3px solid var(--b-danger); background: #fff; padding: 25px 20px; border-radius: 1rem; box-shadow: var(--shadow); } /* InformationAlert bd-l bd-3 bg-card pd-x-20 pd-y-25 rounded-lg */

/* ---------- Card-status / CostWidget (pages/_dashboard.scss) ----------- */
.boss-ui .card-status { padding: 20px; }
.boss-ui .card-status h1 { font-family: "Lato", "Roboto", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 2.1875rem; margin: 0; line-height: 1.2; } /* $font-family-lato; app also loads Lato */
.boss-ui .card-status hr { border: 0; border-top: 1px solid rgba(0,0,0,.1); margin: 1rem 0; }
.boss-ui .card-status .card-footer { background: #f8f9fa; margin: 8px -20px -20px; padding: 12px 15px; font-size: 14px; border-radius: 0 0 1rem 1rem; color: var(--text-color-secondary); }

/* ---------- Invoice (pages/_invoice.scss) -------------------------------- */
.boss-ui .card-invoice .card-body { padding: 60px; }
.boss-ui .section-label-sm { display: block; font-size: 11px; font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: 1px; } /* bootstrap/_custom.scss */
.boss-ui .section-label-sm.tx-gray-500 { color: var(--gray-500); }
.boss-ui .billed-to h6 { color: var(--gray-800); font-size: 15px; } /* invoice */
.boss-ui .billed-to p { line-height: 1.7; }
.boss-ui .invoice-info-row { display: flex; justify-content: space-between; padding: 5px 0; margin: 0; font-size: 16px; }
.boss-ui .invoice-info-row + .invoice-info-row { border-top: 1px dashed var(--gray-300); }
.boss-ui .invoice-info-row span:first-child { color: var(--text-color-secondary); }
.boss-ui .table-invoice tbody > tr > td:first-child { color: var(--text-color-secondary); font-weight: 500; }
.boss-ui .tx-right { text-align: right !important; } .boss-ui .tx-center { text-align: center !important; }
.boss-ui .tx-lato { font-family: "Lato", "Roboto", sans-serif; }
.boss-ui .xero-icon { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #0078c8; } /* invoices/ProfileHeader SiXero #0078c8 */

/* ---------- Striped table (bootstrap/_tables.scss) ---------------------- */
.boss-ui .table-striped tbody tr:nth-of-type(odd) { background-color: #f3f4f6; } /* var --card-bg-hover */
.boss-ui .table-striped tbody td { color: #343a40; } /* var --table-body-color */

/* ---------- P&L table (boss/_utils.scss .budget-overview-table) --------- */
.boss-ui .budget-overview-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.boss-ui .budget-overview-table tr:not(:last-child) { border-bottom: 1px solid #dee2e6; }
.boss-ui .budget-overview-table th, .boss-ui .budget-overview-table td { padding: .75rem 0; vertical-align: middle; font-weight: 500; color: var(--text-color-secondary); }
.boss-ui .budget-overview-table th { text-align: left; padding: 4px 8px; color: rgb(90 90 90); } /* ProfitAndLossTable thead style */
.boss-ui .budget-overview-table td { padding: .75rem 8px; }
.boss-ui .budget-overview-table th:not(:first-child), .boss-ui .budget-overview-table td:not(:first-child) { text-align: right; }
.boss-ui .money { display: flex; justify-content: space-between; } .boss-ui .money b { font-weight: inherit; width: 10px; text-align: left; }
.boss-ui .tx-10 { font-size: 10px; } .boss-ui .tx-16 { font-size: 16px; } .boss-ui .fw-500 { font-weight: 500; } .boss-ui .fw-bolder { font-weight: bolder; }
.boss-ui .opacity-75 { opacity: .75; } .boss-ui .opacity-80 { opacity: .8; }
.boss-ui .btn-outline-secondary.btn-sm, .boss-ui .btn-outline-primary.btn-sm { padding: .25rem .5rem; }
.boss-ui .ckbox { display: inline-block; width: 13px; height: 13px; border: 1px solid #767676; border-radius: 2px; background: #fff; position: relative; }
.boss-ui .ckbox.on { background: #0075ff; border-color: #0075ff; } /* native checkbox (browser default) */
.boss-ui .ckbox.on::after { content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- Signature pad (DocketForm, util .bg-signature-pad) ---------- */
.boss-ui .signature-pad { width: 100%; height: 300px; background: #fff; border: 2px dashed var(--border-color); border-radius: 1rem; box-shadow: var(--shadow); } /* rounded-lg shadow-sm bg-signature-pad border border-dashed border-2 */
.boss-ui .btn-add-all { font-size: 12px; background: rgba(59,130,246,0.082); padding: 4px; border-radius: 1rem; color: #002b49; line-height: 1.2; border: 0; } /* boss/_forms.scss + var */

/* =====================================================================
   Dark theme: the app's own [data-bs-theme="dark"] mode
   (AccessiblityControls.tsx toggles it; Ctrl/Cmd + D).
   Token values come from front-boss/src/scss/_variables.scss [data-bs-theme="dark"].
   Component tweaks come from the [data-bs-theme="dark"] blocks in layout/_header.scss,
   util/_btns.scss, boss/_utils.scss, boss/_alert.scss and bootstrap/_tables.scss.
   Apply it by adding .theme-dark to a .boss-ui frame.
   ===================================================================== */
.boss-ui.theme-dark {
  --body-bg: #0a0e27;               /* --mainpanel */
  --body-color: #bcbec7;            /* --text-description-color */
  --border-color: #2c3542;
  --border-color-secondary: #2c3542;/* app uses #808080 here; toned to --border-color so the header seam isn't a grey rule */
  --text-color-primary: #ffffff;
  --text-color-secondary: #ffffffc4;
  --text-dark: #eeeeee;
  --heading-color: #eeeeee;
  --surface-muted: #1a1f3a;
  --hover-grey: #f3f4f61c;          /* --card-bg-hover */
  --table-head-bg: #304372;
  --table-head-color: #ffffff;
  --card-bg: #1a1f3a;
  --b-primary: #304372;             /* --button-bg-default */
  --gray-600: #a6adba; --gray-500: #8a90a0; --gray-400: #5b627a; --gray-300: #2c3542; --gray-200: #2b3251; --gray-800: #eeeeee;
  color-scheme: dark;
}
.boss-ui.theme-dark .slim-header { background-color: #0e132a; }                /* --main-bg-navbar */
.boss-ui.theme-dark .slim-logo img { filter: none; }                           /* _header.scss: logo turns gold, no shadow */
.boss-ui.theme-dark .keyboard-key-shortcut { background: var(--card-bg); }
.boss-ui.theme-dark .header-icon-btn { background: #1a1f3a; color: #fff; }     /* _header.scss dark .header-icon-btn */
.boss-ui.theme-dark .header-icon-btn .indicator { background: #ffb838; }
.boss-ui.theme-dark .card { color: #ffffff; }                                  /* --card-text-color */
.boss-ui.theme-dark .bg-white.border,
.boss-ui.theme-dark .information-alert,
.boss-ui.theme-dark .table tfoot > tr > th,
.boss-ui.theme-dark .react-table-top-scroll { background: var(--card-bg); }
.boss-ui.theme-dark .react-table-top-scroll-thumb { background: #394062; }    /* --field-bg-hover */
.boss-ui.theme-dark .btn-outline-primary { border-color: #fff; color: #fff; }  /* --button-outline-primary-tx */
.boss-ui.theme-dark .btn-outline { background: transparent; border-color: var(--border-color); color: var(--text-color-secondary); }
.boss-ui.theme-dark .form-control,
.boss-ui.theme-dark .rs-control { background: #1a1f3a; color: #fff; border-color: #2c3542; } /* --field-* */
.boss-ui.theme-dark .rs-control .rs-placeholder { color: rgba(255,255,255,.5); }
.boss-ui.theme-dark .rs-ind .chev, .boss-ui.theme-dark .rs-ind .clear { color: #fff; }
.boss-ui.theme-dark .nav-tabs .nav-link.active { color: #fff; }
.boss-ui.theme-dark .manager-left .nav-link { background: #1a1f3a; color: #fff; }       /* _utils.scss dark .list-group-item */
.boss-ui.theme-dark .manager-left .nav-link.active { background: #232a4a; }            /* --card-bg-hover over --card-bg */
.boss-ui.theme-dark .text-dark, .boss-ui.theme-dark .tx-inverse, .boss-ui.theme-dark .billed-to h6 { color: #eeeeee; }
.boss-ui.theme-dark .text-description { color: #bcbec7; }
.boss-ui.theme-dark .tx-primary-ion { color: #ffffff; }
.boss-ui.theme-dark .nav-activity-profile .nav-link { background: #304372; border-color: #304372; color: #fff; }  /* --page-header-button-* */
.boss-ui.theme-dark .nav-activity-profile .nav-link.current-selected { background: #fff; color: #304372; }
.boss-ui.theme-dark .icon-btn { background: #1a1f3a; }                         /* --icon-btn-bg */
.boss-ui.theme-dark .alert-info { background: #1d4ed8; color: #fff; }          /* --info-bg-color / --info-text-color */
.boss-ui.theme-dark .card-status .card-footer { background: #dbdcdd0f; }       /* --card-bg-off */
.boss-ui.theme-dark .card-status hr { border-top-color: rgba(255,255,255,.1); }
.boss-ui.theme-dark .table-striped tbody tr:nth-of-type(odd) { background-color: #f3f4f61c; }
.boss-ui.theme-dark .table-striped tbody td { color: #fff; }                   /* --table-body-color */
.boss-ui.theme-dark .budget-overview-table tr:not(:last-child) { border-bottom-color: #2c3542; }
.boss-ui.theme-dark .budget-overview-table th { color: #ffffffc4; }
.boss-ui.theme-dark .ckbox { background: #1a1f3a; border-color: #808080; }
.boss-ui.theme-dark .signature-pad { background: #dde4ee; }                    /* _utils.scss dark .bg-signature-pad */
.boss-ui.theme-dark .btn-add-all { color: #ffffffc4; }                         /* --add-all-btn-color */
.boss-ui.theme-dark .count-badge { background: #2b3251; color: #fff; }
.boss-ui.theme-dark .badge.bg-primary, .boss-ui.theme-dark .bg-primary { background-color: #304372 !important; }
.boss-ui.theme-dark .xero-icon { box-shadow: 0 0 0 1px #2c3542; }