/* ============================================================================
   sk-vendor.css — Skyline vendor/plugin skin  (DRAFT — NOT YET LINKED)
   ----------------------------------------------------------------------------
   PURPOSE
   This file re-provides the plugin + modal styling that today comes from
   bootstrap.min.css (bundled inside public/css/vendor.css). It is the artifact
   the FINAL SHELL-SWAP needs: when bootstrap.min.css is dropped from the vendor
   bundle, the BS3 modal engine (bootstrap.min.js, which STAYS) and the jQuery
   plugins (Select2, daterangepicker, bootstrap-datetimepicker, toastr) keep a
   correct, Skyline-themed appearance from here instead.

   It is written against the sk-* design tokens declared in public/css/skyline-erp.css
   :root, so it is self-sufficient — it does NOT assume any bootstrap CSS is present.

   ----------------------------------------------------------------------------
   STATUS: UNLINKED / INERT.
   It is intentionally NOT referenced by layouts/partials/css.blade.php yet, so it
   has ZERO effect on the running app while bootstrap.min.css is still loaded
   (loading both would double-style modals). Nothing renders differently until
   the user activates it as part of the shell-swap.

   ----------------------------------------------------------------------------
   ✓ DRY-RUN VALIDATED (2026-07-07): a throwaway branch performed the exact 4 edits
     below, rebuilt, and ran the removal harness over 24 real full-layout pages with
     bootstrap.min.css DROPPED. Result: 0 hide/collapse leaks, forms + tables styled,
     0 invisible controls, 0 PHP errors; dropdowns open/close correctly (the .open >
     .dropdown-menu mechanic), .collapse/.collapse.in toggle, .hide hides. Screens of
     home (KPIs + bootstrap-tour popover), products (Select2 filters + tabs + DataTables
     + action dropdowns) and business-settings (vertical tabs + input-group addons +
     fileinput) all render correctly. sk-vendor.css Section 11 (from the gap audit) was
     what closed the two CRITICAL gaps (dropdown display + .collapse). Branch discarded;
     app remains bootstrap-loaded / this file inert. STILL DO your own broad QA + an RTL
     pass before flipping for real.

   ----------------------------------------------------------------------------
   ACTIVATION (the exact, dry-run-proven edits — part of the user-triggered swap):
     1. webpack.mix.js: comment out the vendor.css line
          'resources/plugins/bootstrap/css/bootstrap.min.css',   (the LTR bundle, ~L62)
        and, for RTL, 'resources/plugins/bootstrap/css/bootstrap.rtl.min.css' (~L89).
        KEEP every other peer (AdminLTE, select2, DataTables, fileinput, datetimepicker,
        colorpicker) and KEEP bootstrap.min.JS in vendor.js (the modal/dropdown/tab/
        collapse engine). Then `npm run prod`.
     2. Uncomment the sk-vendor.css <link> in layouts/partials/css.blade.php (~L28),
        placed AFTER skyline-erp.css, BEFORE tailwindcss.css.
     3. Delete the DEPRECATED-LEGACY-BRIDGE @apply block in
        resources/css/tailwindcss.css (L518-546) and retire tw-preflight-fix.css; rebuild.
     4. `php artisan view:clear`; bump asset_version; run the full visual harness over
        pages.json + a modal / Select2 / datepicker / toastr smoke on both light and RTL.

   ----------------------------------------------------------------------------
   NOTE: the sk-* custom properties resolve only where skyline-erp.css is loaded
   (every layouts.app / layouts.install page). Fallback literals are supplied on
   every var() so the skin degrades gracefully if a standalone layout omits the
   token sheet.
   ============================================================================ */


/* ==========================================================================
   1. MODAL  — BS3 skeleton (.modal / .modal-dialog / .modal-content / backdrop)
      The engine (bootstrap.min.js) toggles .in / .fade / appends .modal-backdrop.
      These rules reproduce BS3's positioning + a Skyline surface theme.
   ========================================================================== */
.modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal.in { overflow-x: hidden; overflow-y: auto; }
.modal.fade .modal-dialog {
    transform: translate(0, -25%);
    transition: transform .25s ease-out;
}
/* end-state must be none, not translate(0,0): any transform makes the dialog a
   containing block for position:fixed, which would double-offset sk-widgets'
   re-anchored dropdown menus inside open modals */
.modal.in .modal-dialog { transform: none; }

.modal-open { overflow: hidden; }

.modal-dialog {
    position: relative;
    width: auto;
    margin: 30px auto;
    max-width: 600px;
}
.modal-lg { max-width: 900px; }
.modal-sm { max-width: 360px; }

.modal-content {
    position: relative;
    background: var(--sk-surface, #ffffff);
    border: 1px solid var(--sk-border, #e3e8ef);
    border-radius: var(--sk-radius, 10px);
    box-shadow: var(--sk-shadow-lg, 0 8px 28px rgba(16,32,52,.12));
    background-clip: padding-box;
    outline: 0;
}

.modal-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1040;
    background: #0d1b2a;
}
.modal-backdrop.fade { opacity: 0; transition: opacity .2s ease; }
.modal-backdrop.in { opacity: .48; }

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--sk-border, #e3e8ef);
    background: var(--sk-surface-2, #fafbfc);
    border-radius: var(--sk-radius, 10px) var(--sk-radius, 10px) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-header .close {
    margin: 0;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--sk-text-3, #66727f);
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: 1;
    transition: color .15s ease;
}
.modal-header .close:hover { color: var(--sk-danger, #d23f3f); }
.modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--sk-text, #1c2733);
}

.modal-body {
    position: relative;
    padding: 20px;
    color: var(--sk-text, #1c2733);
}

.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--sk-border, #e3e8ef);
    background: var(--sk-surface-2, #fafbfc);
    border-radius: 0 0 var(--sk-radius, 10px) var(--sk-radius, 10px);
    text-align: right;
}
.modal-footer .btn + .btn { margin-left: 8px; }

@media (min-width: 768px) {
    .modal-dialog { margin: 40px auto; }
}


/* ==========================================================================
   2. SELECT2 (v4, --default theme)  — multi + dropdown + search
      (single-select alignment already lives in skyline-erp.css:214)
   ========================================================================== */
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--sk-border-strong, #d2dae5);
    border-radius: var(--sk-radius-sm, 7px);
    min-height: 34px;
    background: var(--sk-surface, #ffffff);
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--sk-primary, #1B6DC1);
    box-shadow: 0 0 0 3px rgba(27,109,193,.15);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--sk-primary-050, #eaf2fb);
    border: 1px solid var(--sk-primary-100, #d6e6f7);
    color: var(--sk-primary-700, #114a86);
    border-radius: var(--sk-radius-sm, 7px);
    padding: 1px 8px;
    margin-top: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--sk-primary-600, #155aa3);
    margin-right: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--sk-danger, #d23f3f);
}

.select2-dropdown {
    border: 1px solid var(--sk-border-strong, #d2dae5);
    border-radius: var(--sk-radius-sm, 7px);
    box-shadow: var(--sk-shadow, 0 2px 6px rgba(16,32,52,.06));
    background: var(--sk-surface, #ffffff);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--sk-border, #e3e8ef);
    border-radius: var(--sk-radius-sm, 7px);
    padding: 6px 8px;
    outline: none;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--sk-primary, #1B6DC1);
    color: var(--sk-text-invert, #ffffff);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--sk-primary-050, #eaf2fb);
    color: var(--sk-primary-700, #114a86);
}
.select2-results__option { padding: 7px 10px; }


/* ==========================================================================
   3. DATE PICKERS  — daterangepicker + bootstrap-datetimepicker
   ========================================================================== */
.daterangepicker,
.bootstrap-datetimepicker-widget.dropdown-menu {
    border: 1px solid var(--sk-border-strong, #d2dae5);
    border-radius: var(--sk-radius, 10px);
    box-shadow: var(--sk-shadow-lg, 0 8px 28px rgba(16,32,52,.12));
    background: var(--sk-surface, #ffffff);
    color: var(--sk-text, #1c2733);
}
.daterangepicker td.active,
.daterangepicker td.active:hover,
.bootstrap-datetimepicker-widget td.day.active,
.bootstrap-datetimepicker-widget td span.active {
    background: var(--sk-primary, #1B6DC1) !important;
    color: var(--sk-text-invert, #ffffff) !important;
    text-shadow: none;
}
.daterangepicker td.in-range {
    background: var(--sk-primary-050, #eaf2fb);
    color: var(--sk-primary-700, #114a86);
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover,
.bootstrap-datetimepicker-widget td.day:hover,
.bootstrap-datetimepicker-widget td.hour:hover,
.bootstrap-datetimepicker-widget td.minute:hover {
    background: var(--sk-primary-050, #eaf2fb);
    color: var(--sk-primary-700, #114a86);
}
.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
    background: var(--sk-primary, #1B6DC1);
    color: var(--sk-text-invert, #ffffff);
}
.daterangepicker .drp-buttons .btn.applyBtn {
    background: var(--sk-primary, #1B6DC1);
    border-color: var(--sk-primary, #1B6DC1);
    color: var(--sk-text-invert, #ffffff);
}


/* ==========================================================================
   4. TOASTR  — tint the four notification types with sk status colors
   ========================================================================== */
#toast-container > div {
    border-radius: var(--sk-radius-sm, 7px);
    box-shadow: var(--sk-shadow, 0 2px 6px rgba(16,32,52,.06));
    opacity: 1;
}
#toast-container > .toast-success { background-color: var(--sk-success, #1f9d57); }
#toast-container > .toast-error   { background-color: var(--sk-danger,  #d23f3f); }
#toast-container > .toast-warning { background-color: var(--sk-warning, #c9870a); }
#toast-container > .toast-info    { background-color: var(--sk-info,    #1B6DC1); }


/* ==========================================================================
   5. DROPDOWN MENU  — BS3 .dropdown-menu (engine stays in bootstrap.min.js)
   ========================================================================== */
.dropdown-menu {
    background: var(--sk-surface, #ffffff);
    border: 1px solid var(--sk-border, #e3e8ef);
    border-radius: var(--sk-radius-sm, 7px);
    box-shadow: var(--sk-shadow, 0 2px 6px rgba(16,32,52,.06));
    padding: 6px 0;
}
.dropdown-menu > li > a {
    /* display/clear/nowrap are BS3 structural props — without them long labels
       ("Print Invoice with new tab") wrap as inline text with a hanging indent. */
    display: block;
    clear: both;
    white-space: nowrap;
    line-height: 1.42857143;
    text-decoration: none;
    color: var(--sk-text, #1c2733);
    padding: 7px 16px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--sk-primary-050, #eaf2fb);
    color: var(--sk-primary-700, #114a86);
}
.dropdown-menu .divider {
    height: 1px;
    margin: 6px 0;
    background: var(--sk-border, #e3e8ef);
}


/* ==========================================================================
   6. BUTTONS  — .btn base geometry + size + colour variants
      CRITICAL: .btn base geometry (display/padding/border) comes from
      bootstrap.min.css today. Thousands of server-generated action buttons
      (DataTables 'action' columns, controllers/helpers: btn btn-primary/sm/xs/
      info/success/danger/...) rely on it. This reproduces the BS3 .btn system
      themed with sk tokens so those survive the swap. skyline-erp.css also sets
      .btn radius/weight + .btn-primary colour; this loads AFTER it and agrees.
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: var(--sk-radius-sm, 7px);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus, .btn:active:focus { outline: 3px solid rgba(27,109,193,.25); outline-offset: 1px; }
.btn:hover, .btn:focus { text-decoration: none; }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
}

/* sizes */
.btn-lg { padding: 10px 16px; font-size: 18px; border-radius: var(--sk-radius, 10px); }
.btn-sm { padding: 5px 10px;  font-size: 12px; border-radius: var(--sk-radius-sm, 7px); }
/* 24px min: WCAG 2.2 SC 2.5.8 (Target Size, Minimum, Level AA) requires pointer targets
   to be at least 24x24 CSS px. Bootstrap's 1px padding rendered these at 21px. With
   line-height 1.42857 on 12px text the content box is 18px, so 2px padding + 1px borders
   lands exactly on 24 without changing the button's visual weight. */
.btn-xs { padding: 2px 6px;   font-size: 12px; border-radius: 4px; min-height: 24px; min-width: 24px; }
.btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; }
.btn-block + .btn-block { margin-top: 6px; }

/* colours (sk-themed) */
.btn-default {
    color: var(--sk-text, #1c2733);
    background: var(--sk-surface, #ffffff);
    border-color: var(--sk-border-strong, #d2dae5);
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
    background: var(--sk-bg, #f4f6f9);
    border-color: var(--sk-border-strong, #d2dae5);
    color: var(--sk-text, #1c2733);
}
.btn-primary {
    color: var(--sk-text-invert, #ffffff);
    background: var(--sk-primary, #1B6DC1);
    border-color: var(--sk-primary, #1B6DC1);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--sk-primary-600, #155aa3);
    border-color: var(--sk-primary-600, #155aa3);
    color: var(--sk-text-invert, #ffffff);
}
.btn-secondary {
    color: var(--sk-text-invert, #ffffff);
    background: var(--sk-text-2, #5b6b7c);
    border-color: var(--sk-text-2, #5b6b7c);
}
.btn-secondary:hover, .btn-secondary:focus { background: #4a5867; border-color: #4a5867; }
.btn-success {
    color: var(--sk-text-invert, #ffffff);
    background: var(--sk-success, #15803d);
    border-color: var(--sk-success, #15803d);
}
/* hover darker than the new #15803d base (WCAG: #166534 = 7.1:1 with white) */
.btn-success:hover, .btn-success:focus { background: #166534; border-color: #166534; }
.btn-info {
    color: var(--sk-text-invert, #ffffff);
    background: var(--sk-info, #1B6DC1);
    border-color: var(--sk-info, #1B6DC1);
}
.btn-info:hover, .btn-info:focus { background: var(--sk-primary-600, #155aa3); border-color: var(--sk-primary-600, #155aa3); }
.btn-warning {
    color: var(--sk-text-invert, #ffffff);
    background: var(--sk-warning, #b45309);
    border-color: var(--sk-warning, #b45309);
}
/* hover darker than the new #b45309 base (WCAG: #92400e = 7.1:1 with white) */
.btn-warning:hover, .btn-warning:focus { background: #92400e; border-color: #92400e; }
.btn-danger {
    color: var(--sk-text-invert, #ffffff);
    background: var(--sk-danger, #d23f3f);
    border-color: var(--sk-danger, #d23f3f);
}
.btn-danger:hover, .btn-danger:focus { background: #b53434; border-color: #b53434; }
.btn-link {
    color: var(--sk-primary, #1B6DC1);
    background: transparent;
    border-color: transparent;
    font-weight: 600;
}
.btn-link:hover, .btn-link:focus { color: var(--sk-primary-700, #114a86); text-decoration: underline; background: transparent; }
.btn-outline {
    color: var(--sk-text, #1c2733);
    background: transparent;
    border-color: var(--sk-border-strong, #d2dae5);
}
.btn-outline:hover, .btn-outline:focus { background: var(--sk-bg, #f4f6f9); }


/* ==========================================================================
   7. LABELS + BADGES  — server-generated (label label-*, badge)
      Kept SOLID (BS3 look, sk-toned) so PHP-emitted badges render the same
      before/after the swap. NOTE the migrated *markup* badges use light tints
      (bg-*-100 text-*-800) — that is a deliberate separate style for hand-authored
      markup; these solid variants only back the server-generated .label label-* .
   ========================================================================== */
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: var(--sk-text-invert, #ffffff);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-default { background: var(--sk-text-3, #66727f); }
.label-primary { background: var(--sk-primary, #1B6DC1); }
.label-success { background: var(--sk-success, #1f9d57); }
.label-info    { background: var(--sk-info,    #1B6DC1); }
.label-warning { background: var(--sk-warning, #c9870a); }
.label-danger  { background: var(--sk-danger,  #d23f3f); }

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--sk-text-invert, #ffffff);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--sk-text-2, #5b6b7c);
    border-radius: 10px;
}


/* ==========================================================================
   8. GLYPHICONS  — RESOLVED at source (wave-64): the ~47 server-generated
      glyphicon glyphicon-edit/trash/eye-open were swept to fa fa-edit/trash/eye
      in 26 controllers (Font Awesome is loaded app-wide). No glyphicon glyphicon-
      remains in app/ + Modules/, so the halflings webfont is no longer a swap
      dependency and nothing needs reproducing here.
   ========================================================================== */


/* ==========================================================================
   9. GRID + FORM HELPERS  — BS3 grid essentials (.row / .col-*-N / offsets),
      .form-group, .input-group[-addon|-btn], .pull-*, .clearfix.
      Server-side HTML builders (modal/form generators, DataTables detail rows)
      still emit ~200 of these (form-group 66, col-* ~130, input-group-addon 14,
      pull-right 12). They come from bootstrap.min.css today, so reproduce the
      essentials here for the swap. IMPORTANT: uses BOOTSTRAP-3 breakpoints
      (sm 768 / md 992 / lg 1200), NOT the Tailwind screens, because these are
      bootstrap classes and server HTML expects BS3 column behaviour.
   ========================================================================== */
.row { margin-left: -15px; margin-right: -15px; }
/* NOTE: .input-group is deliberately NOT in this clearfix list. Real Bootstrap 3.3.7
   clearfixes .row, .form-group, .btn-group, .btn-toolbar, .nav, .navbar, .container and
   .modal-* — but never .input-group, because an input-group is `display:table`, not a float
   container. A `::before/::after { content:""; display:table }` clearfix inside a display:table
   parent generates ANONYMOUS TABLE BOXES that add height to the row: the row inflated to 42px
   and stretched the addon to 38px while the 34px control stayed put — the addon rendering
   taller than the field it is welded to. Do not add .input-group here. */
.row::before, .row::after,
.clearfix::before, .clearfix::after,
.form-group::before, .form-group::after { content: " "; display: table; }
.row::after, .clearfix::after, .form-group::after { clear: both; }

.pull-left  { float: left !important; }
.pull-right { float: right !important; }

.form-group { margin-bottom: 15px; }

[class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"] {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}
/* col-xs-* apply at all widths (no media query) */
.col-xs-1  { float: left; width: 8.333333%; }
.col-xs-2  { float: left; width: 16.666667%; }
.col-xs-3  { float: left; width: 25%; }
.col-xs-4  { float: left; width: 33.333333%; }
.col-xs-5  { float: left; width: 41.666667%; }
.col-xs-6  { float: left; width: 50%; }
.col-xs-7  { float: left; width: 58.333333%; }
.col-xs-8  { float: left; width: 66.666667%; }
.col-xs-9  { float: left; width: 75%; }
.col-xs-10 { float: left; width: 83.333333%; }
.col-xs-11 { float: left; width: 91.666667%; }
.col-xs-12 { float: left; width: 100%; }

@media (min-width: 768px) {
    .col-sm-1  { float: left; width: 8.333333%; }
    .col-sm-2  { float: left; width: 16.666667%; }
    .col-sm-3  { float: left; width: 25%; }
    .col-sm-4  { float: left; width: 33.333333%; }
    .col-sm-5  { float: left; width: 41.666667%; }
    .col-sm-6  { float: left; width: 50%; }
    .col-sm-7  { float: left; width: 58.333333%; }
    .col-sm-8  { float: left; width: 66.666667%; }
    .col-sm-9  { float: left; width: 75%; }
    .col-sm-10 { float: left; width: 83.333333%; }
    .col-sm-11 { float: left; width: 91.666667%; }
    .col-sm-12 { float: left; width: 100%; }
    .col-sm-offset-1 { margin-left: 8.333333%; }
    .col-sm-offset-2 { margin-left: 16.666667%; }
    .col-sm-offset-3 { margin-left: 25%; }
}
@media (min-width: 992px) {
    .col-md-1  { float: left; width: 8.333333%; }
    .col-md-2  { float: left; width: 16.666667%; }
    .col-md-3  { float: left; width: 25%; }
    .col-md-4  { float: left; width: 33.333333%; }
    .col-md-5  { float: left; width: 41.666667%; }
    .col-md-6  { float: left; width: 50%; }
    .col-md-7  { float: left; width: 58.333333%; }
    .col-md-8  { float: left; width: 66.666667%; }
    .col-md-9  { float: left; width: 75%; }
    .col-md-10 { float: left; width: 83.333333%; }
    .col-md-11 { float: left; width: 91.666667%; }
    .col-md-12 { float: left; width: 100%; }
    .col-md-offset-1 { margin-left: 8.333333%; }
    .col-md-offset-2 { margin-left: 16.666667%; }
    .col-md-offset-3 { margin-left: 25%; }
    .col-md-offset-4 { margin-left: 33.333333%; }
}
@media (min-width: 1200px) {
    .col-lg-1  { float: left; width: 8.333333%; }
    .col-lg-2  { float: left; width: 16.666667%; }
    .col-lg-3  { float: left; width: 25%; }
    .col-lg-4  { float: left; width: 33.333333%; }
    .col-lg-5  { float: left; width: 41.666667%; }
    .col-lg-6  { float: left; width: 50%; }
    .col-lg-7  { float: left; width: 58.333333%; }
    .col-lg-8  { float: left; width: 66.666667%; }
    .col-lg-9  { float: left; width: 75%; }
    .col-lg-10 { float: left; width: 83.333333%; }
    .col-lg-11 { float: left; width: 91.666667%; }
    .col-lg-12 { float: left; width: 100%; }
    .col-lg-offset-1 { margin-left: 8.333333%; }
    .col-lg-offset-2 { margin-left: 16.666667%; }
}

/* input groups */
.input-group { position: relative; display: table; border-collapse: separate; width: 100%; }
/* BS3's control contract, MINUS `float:left`. Bootstrap declares float:left here, but per the
   CSS display spec `float` BLOCKIFIES: `display:table-cell` + `float:left` computes to `block`.
   A block control drops out of the group's table row, the browser wraps it in an anonymous
   cell, and the addon (a real cell) then stretches to the row height while the control keeps
   its own — measured as a 38px addon against a 34px input. Bootstrap gets away with it only
   because its float rule sits in a stylesheet whose cascade lets table-cell win; reproducing
   the float here re-broke it. Keep display:table-cell; do NOT re-add float. */
.input-group .form-control { position: relative; z-index: 2; display: table-cell; vertical-align: middle; width: 100%; margin-bottom: 0; }
.input-group-addon, .input-group-btn { display: table-cell; width: 1%; white-space: nowrap; vertical-align: middle; }
.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    color: var(--sk-text-2, #5b6b7c);
    text-align: center;
    background: var(--sk-bg, #f4f6f9);
    border: 1px solid var(--sk-border-strong, #d2dae5);
    border-radius: var(--sk-radius-sm, 7px);
}
/* SEAM RULES — copied VERBATIM from bootstrap.min.css (the file this shim
   replaces), not re-derived. The previous hand-written version covered only
   .form-control/.input-group-addon first/last child and omitted:
     - the :not(:first-child):not(:last-child) middle reset  -> a 3-part group
       (icon | control | button) kept the control's full 8px radius on BOTH
       sides, so it rendered as a rounded pill butted against a square icon box
       = the "addon and field look separate" bug;
     - every .input-group-btn > .btn variant                  -> trailing info/
       add buttons kept all four corners rounded;
     - .input-group-addon:first-child{border-right:0} / :last-child{border-left:0}
                                                              -> a doubled 2px
       border down the seam.
   Select2 replaces the <select> with its own bordered box, so it follows the
   same seam rules. */
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-addon:first-child { border-right: 0; }

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group-addon:last-child { border-left: 0; }

/* BUTTON SEAM — copied VERBATIM from bootstrap.min.css. This is the other half of the
   input-group and it was omitted when the radius seam rules above were ported: those
   only square the button's CORNERS. Without the rules below the button still carries its
   own 1px border flush against the control's 1px border (a doubled 2px seam), and because
   `.input-group .form-control` above takes z-index:2 while the button stays static/auto,
   the control paints OVER the button's border — so the button reads as a DETACHED box.
   The -1px margin pulls the two borders onto each other; z-index:2 lets the button win.
   font-size:0 collapses the whitespace between inline-block buttons; safe because .btn
   re-declares font-size:14px itself. Same technique as .btn-group's weld further down.
   NOTE: physical (margin-left / -right), matching BS3 and the physical radius rules
   above — the RTL sheet is what flips this section, not logical properties. */
.input-group-btn { position: relative; font-size: 0; white-space: nowrap; }
.input-group-btn > .btn { position: relative; }
.input-group-btn > .btn + .btn { margin-left: -1px; }
.input-group-btn > .btn:hover,
.input-group-btn > .btn:focus,
.input-group-btn > .btn:active { z-index: 2; }
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group { margin-right: -1px; }
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group { z-index: 2; margin-left: -1px; }

/* Audited against the real bootstrap.css v3.3.7: it defines 83 distinct .input-group*
   selectors, this shim had 32. Most of the other 51 are inert for our markup (we emit no
   .navbar-form/.form-inline input-groups, no col-* on the group, no addon checkboxes), but
   these are NOT — they are ported verbatim:

   focus z-index — UNIVERSAL. The control sits at z-index:2 and the trailing button now
   takes z-index:2 as well; on focus BS3 lifts the control to 3 so its focus ring paints
   OVER both neighbours instead of being clipped at the seam. Without it the ring is
   sliced off wherever an addon/button touches the field. */
.input-group .form-control:focus { z-index: 3; }

/* sized groups must resize the BUTTON too, or the button keeps the default 34px height
   against a 30px/46px field — a height mismatch is exactly what reads as "detached". */
.input-group-lg > .input-group-btn > .btn { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; }
.input-group-sm > .input-group-btn > .btn { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; }
select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn { height: var(--sk-control-h-lg, 46px); line-height: var(--sk-control-h-lg, 46px); }
select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn { height: var(--sk-control-h-sm, 30px); line-height: var(--sk-control-h-sm, 30px); }
textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn,
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn { height: auto; }

/* BS3's addon size modifiers (were missing from this shim). */
.input-group-addon.input-sm { padding: 5px 10px; font-size: 12px; }
.input-group-addon.input-lg { padding: 10px 16px; font-size: 18px; }

/* 26 blades shrink the CONTROL with `.input-sm` instead of putting `.input-group-sm` on the
   wrapper (BS3's sanctioned way, used by exactly 1 blade). Bootstrap only sizes addons via the
   WRAPPER class, so the control drops to 30px while its addons stay 34px — a 4px step at every
   seam, on /sells/create, /sells/direct/create, /quotations/direct/create and /random-sale.
   Rather than rewrite 26 blades, size the addons from the control they are welded to.
   :has() specificity here is (0,4,0), so it outranks the plain .input-group-addon rule. */
.input-group:has(> .form-control.input-sm) > .input-group-addon,
.input-group:has(> .form-control.input-sm) > .input-group-btn > .btn {
    height: var(--sk-control-h-sm, 30px); padding: 5px 10px; font-size: 12px; line-height: 1.5;
}
.input-group:has(> .form-control.input-lg) > .input-group-addon,
.input-group:has(> .form-control.input-lg) > .input-group-btn > .btn {
    height: var(--sk-control-h-lg, 46px); padding: 10px 16px; font-size: 18px; line-height: 1.3333333;
}

/* guards: currently unused by our blades, but they are what BS3 relies on to keep an
   input-group from going full-width inside an inline form, or keeping grid padding. */
.input-group[class*="col-"] { float: none; padding-right: 0; padding-left: 0; }
.form-inline .input-group,
.navbar-form .input-group { display: inline-table; vertical-align: middle; }
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control,
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control { width: auto; }
.form-inline .input-group > .form-control,
.navbar-form .input-group > .form-control { width: 100%; }

/* Select2 stands in for the <select>: mirror the seam rules onto its box.
   NOTE: do NOT also force `display:table-cell; width:100%` onto .select2-container here.
   It looks like the "correct" BS3 contract (the span is not .form-control, so it never
   becomes a table-cell), but it was tried and MEASURED AS A REGRESSION: width:100% blew a
   57px gap between the addon and the control on /sells/create, and it did not even fix the
   44px-addon / 34px-select2 height mismatch on /expenses/create, because that page's own
   treasury <style> outranks it. Select2 sizes itself; leave the layout alone and only
   mirror the seam. */
.input-group > .select2-container:not(:first-child):not(:last-child) .select2-selection {
    border-radius: 0;
}
.input-group > .select2-container:first-child .select2-selection {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.input-group > .select2-container:last-child .select2-selection {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}

/* Tailwind-migrated input group:
     <div class="flex"><span class="... rounded-l border-r-0">icon</span>
       {!! Form::select(..., ['class' => 'select2 rounded-l-none']) !!}</div>
   Select2 swaps the <select> for its own <span>, so the `rounded-l-none` on the select
   never reaches the visible box — it keeps its 8px left radius against the square icon
   addon and reads as a detached control (native inputs are fine, they carry the class
   themselves). Square the selection edge that meets the addon. Scoped with :has() to a
   flex that actually holds an addon, so standalone select2 boxes are untouched.
   !important + this (0,3,2) specificity is needed to beat two rules that otherwise
   keep the box rounded: skyline-erp.css's GLOBAL `.select2-selection--single{
   border-radius:var(--sk-radius-sm)!important}` (which detaches these app-wide) and
   per-page inline `.X-wrap .select2-container .select2-selection{border-radius:8px
   !important}` rules like the one on business/settings. */
div.flex:has(> span.border-r-0) .select2-selection {
    border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
}
div.flex:has(> span.border-l-0) .select2-selection {
    border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
}

/* Same problem, other shape: the migrated group is `control + welded BUTTON` (the "+ add
   new" button on customer / brand / device / device-model pickers) and carries NO addon
   span, so neither :has() rule above fires. BS3 squared the select2 box here through
   `.input-group > .select2-container:not(:last-child)`, but (a) that selector is dead once
   the wrapper is a div.flex and (b) it never had !important, so skyline-erp's global
   `.select2-selection--single{border-radius:...!important}` (0,2,0) outranked it anyway.
   The welded button is identifiable: the converter always stamps it `rounded-l-none`
   (resp. `rounded-r-none` when the button leads). Square the select2 edge that meets it.
   `.btn` qualifier is REQUIRED: the hidden original <select> also carries
   `rounded-r-none` and sits immediately before its own .select2-container, so an
   unqualified `.rounded-r-none + .select2-container` would square every migrated select2. */
div.flex > .select2-container:has(+ .btn.rounded-l-none) .select2-selection {
    border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
}
div.flex > .btn.rounded-r-none + .select2-container .select2-selection {
    border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
}


/* ==========================================================================
   10. BOOTSTRAP BASE  — the base classes AdminLTE.min.css (a BS theme, kept in
       the vendor bundle) EXTENDS but does NOT re-declare: .form-control, .table,
       .nav-tabs/.tab-content, .alert, .pagination, form helpers, .caret, .close,
       .sr-only. Without these, dropping bootstrap.min.css leaves AdminLTE's forms/
       tables/tabs unstyled. Reproduced (sk-themed) so the swap keeps them working.
   ========================================================================== */
/* 2026-08-24 CONTROL SPEC — every generic control resolves through
   --sk-control-* (resources/css/sk-tokens-control.css) instead of a literal.
   The audit measured 50 distinct control heights app-wide from 162 competing
   rules across 19 stylesheets; this is the single value they converge on.
   The token values were deliberately set to what these rules already produced
   (34px / 6px 12px / --sk-radius-sm / 15% ring), so this routing is a NO-OP on
   screen — changing the look is a separate, reviewable edit to the token file.
   Guarded by tests/Feature/Ui/ControlGeometryTest.php. */
.form-control {
    display: block;
    width: 100%;
    height: var(--sk-control-h, 34px);
    padding: var(--sk-control-pad-y, 6px) var(--sk-control-pad-x, 12px);
    font-size: var(--sk-control-font, 14px);
    line-height: 1.42857143;
    color: var(--sk-text, #1c2733);
    background: var(--sk-surface, #ffffff);
    background-image: none;
    border: var(--sk-control-border, 1px) solid var(--sk-border-strong, #d2dae5);
    border-radius: var(--sk-control-radius, 7px);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--sk-primary, #1B6DC1);
    outline: 0;
    box-shadow: var(--sk-focus-ring, 0 0 0 3px rgba(27,109,193,.15));
}

/* Select2 replaces the <select> with its own DOM, so without this it renders at
   its own height and visibly mismatches a native control beside it in the same
   row — the defect screenshotted on /treasury/expense-claims/create, where
   Select2 pickers and native <select>s sit side by side at different heights,
   radii and border weights. */
.select2-container .select2-selection--single {
    height: var(--sk-control-h, 34px);
    border: var(--sk-control-border, 1px) solid var(--sk-border-strong, #d2dae5);
    border-radius: var(--sk-control-radius, 7px);
}
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--sk-control-h, 34px) - (2 * var(--sk-control-border, 1px)));
    padding-inline-start: var(--sk-control-pad-x, 12px);
    color: var(--sk-text, #1c2733);
}
.select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--sk-control-h, 34px) - (2 * var(--sk-control-border, 1px)));
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--sk-primary, #1B6DC1);
    box-shadow: var(--sk-focus-ring, 0 0 0 3px rgba(27,109,193,.15));
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background: var(--sk-bg, #f4f6f9);
    opacity: 1;
    cursor: not-allowed;
}
textarea.form-control { height: auto; }
.control-label { font-weight: 700; color: var(--sk-text, #1c2733); }
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: var(--sk-text-2, #5b6b7c); }
/* Scoped to div/li wrappers on purpose: BS3's .checkbox/.radio is a WRAPPER
   pattern (<div class="checkbox"><label><input …>), but this app also puts a
   literal class="checkbox" on <input> elements (e.g. the POS take-away toggles,
   which app.css hides via .pos-toggle-checkbox{display:none}). A bare .checkbox
   {display:block} here loads AFTER app.css and would win the 0-1-0 order-tie,
   un-hiding those inputs — bootstrap.min.css never had this problem only because
   it loaded BEFORE app.css. */
div.checkbox, div.radio, li.checkbox, li.radio { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; }
.checkbox label, .radio label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer; }
.has-error .form-control { border-color: var(--sk-danger, #d23f3f); }
.has-error .control-label, .has-error .help-block { color: var(--sk-danger, #d23f3f); }

/* tables */
.table { width: 100%; max-width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid var(--sk-border, #e3e8ef);
}
.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--sk-border-strong, #d2dae5);
    color: var(--sk-text-2, #5b6b7c);
    font-weight: 600;
    text-align: left;
}
.table > caption + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th { border-top: 0; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td, .table-bordered > thead > tr > td { border: 1px solid var(--sk-border, #e3e8ef); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--sk-surface-2, #fafbfc); }
.table-hover > tbody > tr:hover { background: var(--sk-primary-050, #eaf2fb); }

/* nav + tabs (data-toggle="tab" — engine stays in bootstrap.min.js) */
.nav { padding-left: 0; margin-bottom: 0; list-style: none; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; color: var(--sk-primary, #1B6DC1); }
.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background: var(--sk-bg, #f4f6f9); }
.nav-tabs { border-bottom: 1px solid var(--sk-border, #e3e8ef); }
.nav-tabs > li { float: left; margin-bottom: -1px; }
.nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: var(--sk-radius-sm, 7px) var(--sk-radius-sm, 7px) 0 0; }
.nav-tabs > li > a:hover { border-color: var(--sk-border, #e3e8ef) var(--sk-border, #e3e8ef) var(--sk-border, #e3e8ef); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: var(--sk-text, #1c2733);
    background: var(--sk-surface, #ffffff);
    border: 1px solid var(--sk-border, #e3e8ef);
    border-bottom-color: transparent;
    cursor: default;
}
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* alerts */
.alert { padding: 12px 16px; margin-bottom: 20px; border: 1px solid transparent; border-radius: var(--sk-radius-sm, 7px); }
.alert-success { color: #14663a; background: var(--sk-success-bg, #e8f6ee); border-color: #bce3cd; }
.alert-info    { color: #114a86; background: var(--sk-info-bg, #eaf2fb); border-color: #c2ddf5; }
.alert-warning { color: #7a5406; background: var(--sk-warning-bg, #fdf3e2); border-color: #f2dcae; }
.alert-danger  { color: #8a2a2a; background: var(--sk-danger-bg, #fbeaea); border-color: #f1c2c2; }

/* pagination */
.pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: var(--sk-radius-sm, 7px); }
.pagination > li { display: inline; }
.pagination > li > a, .pagination > li > span {
    position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143;
    color: var(--sk-primary, #1B6DC1); background: var(--sk-surface, #ffffff); border: 1px solid var(--sk-border, #e3e8ef);
}
.pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-radius: var(--sk-radius-sm, 7px) 0 0 var(--sk-radius-sm, 7px); }
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0 var(--sk-radius-sm, 7px) var(--sk-radius-sm, 7px) 0; }
.pagination > .active > a, .pagination > .active > span {
    z-index: 2; color: var(--sk-text-invert, #ffffff); background: var(--sk-primary, #1B6DC1); border-color: var(--sk-primary, #1B6DC1); cursor: default;
}
.pagination > li > a:hover { background: var(--sk-primary-050, #eaf2fb); }
/* dt-bootstrap puts .paginate_button on the <li>, whose <a> floats out of it.
   Legacy DT skins (custom_backend/erp-datatables/datatable-buttons/home-dashboard)
   chip-style .paginate_button assuming plain-DT <a> markup, so the empty inline
   <li> paints a ~2px bordered sliver per button ("stripes" after Next).
   In bootstrap pagination markup ALL box chrome belongs on the <a> — strip the li.
   Specificity (0,5,2) + !important intentionally outguns those skins' (0,3,0)-(0,4,0). */
.dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.paginate_button {
    border: 0 !important; background: transparent !important; padding: 0 !important;
    min-width: 0 !important; box-shadow: none !important;
}

/* misc bootstrap primitives still emitted (server + AdminLTE) */
.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent; }
.close { float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .3; background: transparent; border: 0; cursor: pointer; }
.close:hover, .close:focus { opacity: .6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }


/* ==========================================================================
   11. ENGINE + REMAINING BASE  — from the BS-removal gap audit (adversarially
       verified). These are the bootstrap.min.css pieces the KEPT engine
       (bootstrap.min.js) + AdminLTE + server markup still need. NOTE: .hide is
       NOT here — AdminLTE.min.css:5198 provides it and AdminLTE stays; .hidden/
       .invisible/.block are Tailwind's; .bg-primary/.text-primary are Tailwind/
       shadcn (would be overridden anyway). Generic .fade is deliberately omitted
       (it would start content at opacity:0 and could hide non-animated panes).
   ========================================================================== */

/* 11.1 DROPDOWN display mechanics (CRITICAL — bootstrap.min.js only toggles .open;
   the show/hide + positioning is CSS). sk-vendor section 5 styles .dropdown-menu;
   this adds the base position/display + the .open show rule. */
.dropdown-menu {
    position: absolute; top: 100%; left: 0; z-index: 1000;
    display: none; float: left; min-width: 160px; margin: 2px 0 0; text-align: left; list-style: none;
}
.open > .dropdown-menu { display: block; }
.dropdown-menu.pull-right, .dropdown-menu-right { right: 0; left: auto; }
.dropup > .dropdown-menu, .navbar-fixed-bottom .dropdown > .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 2px; }
.dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: var(--sk-text-3, #66727f); white-space: nowrap; }
.dropdown-menu > .divider { height: 1px; margin: 6px 0; overflow: hidden; background: var(--sk-border, #e3e8ef); }
[dir="rtl"] .dropdown-menu { right: 0; left: auto; text-align: right; }

/* 11.2 COLLAPSE (CRITICAL — accordions/panels/navbar/datetimepicker; only tw-preflight
   -fix.css had these and the swap retires it). */
.collapse { display: none; }
.collapse.in { display: block; }
tr.collapse.in { display: table-row; }
tbody.collapse.in { display: table-row-group; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height .35s ease; }

/* 11.3 .show (JS toggle target: pos.js weighing-scale panel, control_table, price_checker) */
.show { display: block !important; }

/* 11.4 BTN-GROUP (action-button clusters) */
.btn-group, .btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; }
.btn-group > .btn { position: relative; float: left; }
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active { z-index: 2; }
.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn { margin-left: -1px; }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-toolbar { display: flex; flex-wrap: wrap; }
.btn-toolbar .btn-group { float: left; }
.btn-group-vertical > .btn { display: block; float: none; width: 100%; max-width: 100%; }
.btn-group-vertical > .btn + .btn { margin-top: -1px; margin-left: 0; }

/* 11.4b ROOT FONT-SIZE — Bootstrap's reboot set html{font-size:10px} (the
   62.5% root) and the ENTIRE app is calibrated to it: every rem-based Tailwind
   utility (px-6 = 1.5rem = 15px gutter), app.css sizes, sk paddings. Removing
   bootstrap.min.css silently flipped the root to 16px and grew all rem spacing
   1.6x. Re-provide it here, the bootstrap-base replacement layer. */
html { font-size: 10px; }

/* 11.4c BASE ANCHOR — bootstrap.min.css owned the rest-state a{text-decoration:none}
   (AdminLTE only suppresses underline on hover/active/focus). Without it every plain
   link app-wide reverts to the browser-default underline. Element selector (0-0-1)
   so any class-based color/decoration rule still wins. */
a { text-decoration: none; }

/* 11.4d BODY REBASE — bootstrap.min.css owned body{margin:0} (reboot) and
   body{font-size:14px;line-height:1.42857143}. With the 10px root restored in
   11.4b, body must rebase text to 14px or everything unclassed (form labels,
   <small> helpers, bare paragraphs) inherits 10px on classic layouts.app pages
   — visually confirmed on /products/create (labels 10px, small 8px). Pages on
   the newer shell carry a later body{font-size:19px} style-tag which still
   wins the order-tie, so they are unaffected. Element selector (0-0-1). */
body { margin: 0; font-size: 14px; line-height: 1.42857143; }

/* 11.5 PROGRESS */
.progress { height: 20px; margin-bottom: 20px; overflow: hidden; background: var(--sk-bg, #f4f6f9); border-radius: var(--sk-radius-sm, 7px); box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background: var(--sk-primary, #1B6DC1); transition: width .6s ease; }
.progress-bar-success { background: var(--sk-success, #1f9d57); }
.progress-bar-info    { background: var(--sk-info,    #1B6DC1); }
.progress-bar-warning { background: var(--sk-warning, #c9870a); }
.progress-bar-danger  { background: var(--sk-danger,  #d23f3f); }

/* 11.6 FORM-CONTROL SIZE VARIANTS */
.input-sm, .form-group-sm .form-control { height: var(--sk-control-h-sm, 30px); padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: var(--sk-radius-sm, 7px); }
.input-lg, .form-group-lg .form-control { height: var(--sk-control-h-lg, 46px); padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: var(--sk-radius, 10px); }
select.input-sm { height: 30px; line-height: 30px; }
select.input-lg { height: 46px; line-height: 46px; }
textarea.input-sm, textarea.input-lg { height: auto; }
.input-group-sm > .form-control, .input-group-sm > .input-group-addon { height: var(--sk-control-h-sm, 30px); padding: 5px 10px; font-size: 12px; }
.input-group-lg > .form-control, .input-group-lg > .input-group-addon { height: var(--sk-control-h-lg, 46px); padding: 10px 16px; font-size: 18px; }
.checkbox-inline, .radio-inline { position: relative; display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: 400; vertical-align: middle; cursor: pointer; }
.checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline { margin-top: 0; margin-left: 10px; }
.form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }

/* 11.7 TABLES — responsive + condensed */
.table-responsive { min-height: .01%; overflow-x: auto; }
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td { padding: 5px; }

/* 11.7b BS3→TW4: `.table-responsive` wrappers are being migrated to the Tailwind
   `.overflow-x-auto` utility. vendor.css (the DataTables/Bootstrap integration)
   carries compatibility rules keyed on the OLD class name that a converted wrapper
   no longer matches:

     div.table-responsive > div.dataTables_wrapper > div.row { margin: 0 }
     div.table-responsive > div.dataTables_wrapper > div.row > div[class^=col-]:first-child { padding-left: 0 }
     div.table-responsive > div.dataTables_wrapper > div.row > div[class^=col-]:last-child  { padding-right: 0 }
     .table-responsive > .table tr td, .table-responsive > .table tr th { white-space: normal !important }

   Without them the `.row`s DataTables emits inside `.dataTables_wrapper` (length,
   filter, info, pagination) fall back to `.row { margin-left:-15px; margin-right:-15px }`
   (§ .row above). Inside an `overflow-x: auto` box those negative margins make the
   row ~30px wider than its container, so every converted report table gets a spurious
   horizontal scrollbar and its DataTables controls bleed 15px off the left edge.
   Mirror the vendor rules onto the utility so a migrated wrapper behaves identically. */
div.overflow-x-auto > div.dataTables_wrapper > div.row { margin: 0; }
div.overflow-x-auto > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child { padding-left: 0; }
div.overflow-x-auto > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child { padding-right: 0; }
.overflow-x-auto > .table tr td, .overflow-x-auto > .table tr th { white-space: normal !important; }

/* 11.8 TOOLTIP (data-toggle="tooltip"; bootstrap.min.js injects the markup) */
.tooltip { position: absolute; z-index: 1070; display: block; font-size: 12px; line-height: 1.4; opacity: 0; }
.tooltip.in { opacity: .95; }
.tooltip.top { padding: 5px 0; margin-top: -3px; }
.tooltip.right { padding: 0 5px; margin-left: 3px; }
.tooltip.bottom { padding: 5px 0; margin-top: 3px; }
.tooltip.left { padding: 0 5px; margin-left: -3px; }
.tooltip-inner { max-width: 220px; padding: 4px 9px; color: #fff; text-align: center; background: var(--sk-text, #1c2733); border-radius: var(--sk-radius-sm, 7px); }
.tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; }
.tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: var(--sk-text, #1c2733); }
.tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: var(--sk-text, #1c2733); }
.tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: var(--sk-text, #1c2733); }
.tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: var(--sk-text, #1c2733); }

/* 11.9 POPOVER (data-toggle="popover") */
.popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; text-align: left; background: var(--sk-surface, #fff); background-clip: padding-box; border: 1px solid var(--sk-border-strong, #d2dae5); border-radius: var(--sk-radius, 10px); box-shadow: var(--sk-shadow-lg, 0 8px 28px rgba(16,32,52,.12)); }
.popover.top { margin-top: -10px; } .popover.right { margin-left: 10px; } .popover.bottom { margin-top: 10px; } .popover.left { margin-left: -10px; }
.popover-title { padding: 8px 14px; margin: 0; font-size: 14px; font-weight: 600; background: var(--sk-surface-2, #fafbfc); border-bottom: 1px solid var(--sk-border, #e3e8ef); border-radius: 9px 9px 0 0; }
.popover-content { padding: 9px 14px; }
.popover > .arrow, .popover > .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; }

/* 11.10 PANEL */
.panel { margin-bottom: 20px; background: var(--sk-surface, #fff); border: 1px solid var(--sk-border, #e3e8ef); border-radius: var(--sk-radius, 10px); box-shadow: var(--sk-shadow-sm, 0 1px 2px rgba(16,32,52,.06)); }
.panel-body { padding: 15px; }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid var(--sk-border, #e3e8ef); border-radius: 9px 9px 0 0; }
.panel-title { margin: 0; font-size: 16px; font-weight: 600; color: inherit; }
.panel-footer { padding: 10px 15px; background: var(--sk-surface-2, #fafbfc); border-top: 1px solid var(--sk-border, #e3e8ef); border-radius: 0 0 9px 9px; }
.panel-default > .panel-heading { background: var(--sk-surface-2, #fafbfc); color: var(--sk-text, #1c2733); }
.panel-primary { border-color: var(--sk-primary, #1B6DC1); }
.panel-primary > .panel-heading { background: var(--sk-primary, #1B6DC1); color: #fff; border-color: var(--sk-primary, #1B6DC1); }
.panel-success > .panel-heading { background: var(--sk-success-bg, #e8f6ee); color: #14663a; }
.panel-info > .panel-heading { background: var(--sk-info-bg, #eaf2fb); color: #114a86; }
.panel-warning > .panel-heading { background: var(--sk-warning-bg, #fdf3e2); color: #7a5406; }
.panel-danger > .panel-heading { background: var(--sk-danger-bg, #fbeaea); color: #8a2a2a; }
.panel-group .panel { margin-bottom: 0; border-radius: var(--sk-radius, 10px); }
.panel-group .panel + .panel { margin-top: 5px; }

/* 11.11 WELL */
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background: var(--sk-bg, #f4f6f9); border: 1px solid var(--sk-border, #e3e8ef); border-radius: var(--sk-radius, 10px); box-shadow: inset 0 1px 1px rgba(0,0,0,.04); }
.well-sm { padding: 9px; border-radius: var(--sk-radius-sm, 7px); }
.well-lg { padding: 24px; border-radius: var(--sk-radius-lg, 14px); }

/* 11.12 LIST-GROUP */
.list-group { padding-left: 0; margin-bottom: 20px; }
.list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background: var(--sk-surface, #fff); border: 1px solid var(--sk-border, #e3e8ef); }
.list-group-item:first-child { border-top-left-radius: var(--sk-radius-sm, 7px); border-top-right-radius: var(--sk-radius-sm, 7px); }
.list-group-item:last-child { margin-bottom: 0; border-bottom-left-radius: var(--sk-radius-sm, 7px); border-bottom-right-radius: var(--sk-radius-sm, 7px); }
a.list-group-item, button.list-group-item { color: var(--sk-text-2, #5b6b7c); }
a.list-group-item:hover, button.list-group-item:hover { background: var(--sk-bg, #f4f6f9); text-decoration: none; }
.list-group-item.active, .list-group-item.active:hover { z-index: 2; color: #fff; background: var(--sk-primary, #1B6DC1); border-color: var(--sk-primary, #1B6DC1); }

/* 11.13 BREADCRUMB */
.breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background: var(--sk-bg, #f4f6f9); border-radius: var(--sk-radius-sm, 7px); }
.breadcrumb > li { display: inline-block; }
.breadcrumb > li + li:before { padding: 0 5px; color: var(--sk-text-3, #66727f); content: "/\00a0"; }
.breadcrumb > .active { color: var(--sk-text-2, #5b6b7c); }

/* 11.14 MEDIA OBJECT */
.media { margin-top: 15px; }
.media:first-child { margin-top: 0; }
.media-left, .media-right, .media-body { display: table-cell; vertical-align: top; }
.media-body { width: 10000px; }
.media-left, .media > .pull-left { padding-right: 10px; }
.media-right, .media > .pull-right { padding-left: 10px; }
.media-heading { margin: 0 0 5px; }
.media-object { display: block; }

/* 11.15 CONTEXTUAL TEXT / BG (bootstrap semantics; sk-toned). Skips .text-primary/
   .bg-primary — Tailwind/shadcn own those class names. */
.text-muted { color: var(--sk-text-2, #5b6b7c); }
.text-danger { color: var(--sk-danger, #d23f3f) !important; }  /* vendor.css
   forces #f5365c !important (3.77:1 on white); sk-vendor loads later, so an
   equally-important declaration wins and restores the design-system red. */
.text-success { color: var(--sk-success, #1f9d57); }
.text-warning { color: var(--sk-warning, #c9870a); }
.text-info { color: var(--sk-info, #1B6DC1); }
.bg-success { background-color: var(--sk-success-bg, #e8f6ee); }
.bg-info { background-color: var(--sk-info-bg, #eaf2fb); }
.bg-warning { background-color: var(--sk-warning-bg, #fdf3e2); }
.bg-danger { background-color: var(--sk-danger-bg, #fbeaea); }

/* 11.16 IMG + THUMBNAIL */
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-rounded { border-radius: var(--sk-radius, 10px); }
.img-circle { border-radius: 50%; }
.img-thumbnail, .thumbnail { display: inline-block; padding: 4px; background: var(--sk-surface, #fff); border: 1px solid var(--sk-border, #e3e8ef); border-radius: var(--sk-radius-sm, 7px); max-width: 100%; height: auto; }
.thumbnail { display: block; margin-bottom: 20px; }

/* 11.17 NAV-PILLS + nav helpers */
.nav-pills > li { float: left; }
.nav-pills > li > a { border-radius: var(--sk-radius-sm, 7px); }
.nav-pills > li + li { margin-left: 2px; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #fff; background: var(--sk-primary, #1B6DC1); }
.nav-stacked > li { float: none; }
.nav-stacked > li + li { margin-top: 2px; margin-left: 0; }

/* 11.18 CONTAINER + misc layout utilities */
.container, .container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.list-unstyled { padding-left: 0; list-style: none; }
.list-inline { padding-left: 0; margin-left: -5px; list-style: none; }
.list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; }
.page-header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid var(--sk-border, #e3e8ef); }
.dl-horizontal dd { margin-left: 0; }
@media (min-width: 768px) {
    .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
    .dl-horizontal dd { margin-left: 180px; }
}
@media print { .hidden-print { display: none !important; } }

/* 11.19 GLYPHICONS — the halflings font is still copied to public/fonts/ by webpack.
   bootstrap.min.css shipped the @font-face + .glyphicon base; reproduce them so the
   KEPT plugins (bootstrap-datetimepicker/-datepicker nav arrows) keep their icons.
   App markup glyphicons were swept to Font Awesome (wave-64); this is plugin-only. */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
         url('../fonts/glyphicons-halflings-regular.woff') format('woff');
}
.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.glyphicon-chevron-left:before { content: "\e079"; }
.glyphicon-chevron-right:before { content: "\e080"; }
.glyphicon-chevron-up:before { content: "\e113"; }
.glyphicon-chevron-down:before { content: "\e114"; }
.glyphicon-arrow-left:before { content: "\e091"; }
.glyphicon-arrow-right:before { content: "\e092"; }
.glyphicon-arrow-up:before { content: "\e093"; }
.glyphicon-arrow-down:before { content: "\e094"; }
.glyphicon-time:before { content: "\e023"; }
.glyphicon-calendar:before { content: "\e109"; }
.glyphicon-remove:before { content: "\e014"; }
.glyphicon-ok:before { content: "\e013"; }
.glyphicon-trash:before { content: "\e020"; }
.glyphicon-screenshot:before { content: "\e087"; }
.glyphicon-triangle-right:before { content: "\e250"; }
.glyphicon-triangle-left:before { content: "\e251"; }


/* ==========================================================================
   12. BS3 STRUCTURAL GAP AUDIT (2026-07-09) — properties bootstrap.min.css
       owned that no still-loaded sheet re-provides. Found by a 41-agent
       audit (9 component-family finders + adversarial verifier per finding;
       24 confirmed, 8 refuted). Each block below is the verifier's minimal
       structural patch — cosmetics stay with the skin sections above.
       NOTE: the audit's #1 finding (body{font-size:14px} rebase) first
       looked refuted (newer-shell pages carry a body{font-size:19px}
       style-tag) but classic layouts.app pages have NO body rule at all
       and inherited the 10px root — the rebase now lives in 11.4d above.
   ========================================================================== */

/* 12.1 [visible-degradation] pre */
/* 11.20 PRE — bootstrap normalize/reboot owned pre{overflow:auto} +
   word-break:break-all + word-wrap:break-word. Structural containment
   only (BS3's padding/background/border deliberately NOT restored —
   blades carry their own cosmetics). Protects bare <pre> from long
   unbroken lines (JSON blobs, URLs, hashes) forcing horizontal
   page/modal overflow: product merge_tool JS preview, CustomsClearance
   api-logs #log_error, GovtIntegration workflow notes. Element-level
   specificity, so inline styles and utilities on self-protected pres
   still win. */
pre {
  overflow: auto;
  word-break: break-all;
  word-wrap: break-word;
}

/* 12.2 [minor] address */
/* 11.4d ADDRESS — bootstrap's reboot owned address{margin-bottom:20px;font-style:
   normal;line-height:1.42857143}. Without it UA defaults apply (italic, margin 0):
   the stacked business/supplier <address> blocks on purchase/stock show pages and
   payment modals (single_payment_view, payment_business_details, supplier_details,
   guest_payment_form) render italic and lose their 20px separation. line-height is
   NOT re-declared — it inherits the AdminLTE body value. Element selector (0-0-1)
   so any utility/class rule still wins. */
address { margin-bottom: 20px; font-style: normal; }

/* 12.3 [breaks-layout] .dropdown, .dropup */
/* 11.1b DROPDOWN positioning context (BS3: .dropdown,.dropup{position:relative}) —
   required so the absolute .dropdown-menu (11.1) anchors to its toggle, not the
   nearest positioned ancestor. Covers plain <div class="dropdown"> wrappers
   (Treasury/Office dashboards, Project action menus, AssetManagement DataTables cells). */
.dropdown, .dropup { position: relative; }

/* 12.4 [visible-degradation] [data-toggle="buttons"] > .btn input[type="checkbox"], [data-toggle="b */
/* §BS3 data-toggle="buttons": hide the native checkbox/radio inside toggle-button
   labels (bootstrap.min.js button.js still drives the .active state). Structural
   props only — restaurant modifier modal (POS) + AssetManagement export modal. */
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* 12.5 [minor] .dropdown-backdrop */
/* 11.1b DROPDOWN touch backdrop — BS3 dropdown.js injects <div class="dropdown-backdrop">
   before every non-navbar dropdown when 'ontouchstart' is detected (POS tablets).
   Structural-only (transparent by design): full-viewport hit area so tapping outside
   an open dropdown closes it; z-index 990 sits under .dropdown-menu (1000, §11.1). */
.dropdown-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
}

/* 12.6 [breaks-layout] .nav:before, .nav:after (clearfix on .nav / .nav-tabs / .nav-pills) */
/* BS3 clearfix for .nav — .nav-tabs/.nav-pills float their <li>s (see §651/§866);
   without this the ul collapses and .tab-content flows up beside the tabs. */
.nav::before, .nav::after { content: " "; display: table; }
.nav::after { clear: both; }

/* 12.7 [breaks-layout] .navbar-collapse.collapse (desktop override) + .navbar-collapse base */
/* 11.x NAVBAR-COLLAPSE (STRUCTURAL — BS3 base; consumers: Modules/Hms + Modules/Repair
   layouts/nav.blade.php module menus, 78 screen views via layouts.app).
   Generic .collapse{display:none} (§11.2) otherwise hides the menu on ALL widths;
   BS3's desktop override below restores the always-expanded state at >=768px. */
.navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; }
.navbar-collapse.in { overflow-y: auto; }
@media (min-width: 768px) {
  .navbar-collapse { width: auto; border-top: 0; }
  .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; }
  .navbar-collapse.in { overflow-y: visible; }
  .navbar-toggle { display: none; } /* BS3 pairs the desktop expand with hiding the mobile toggle */
}

/* 12.8 [breaks-layout] .navbar-nav, .navbar-nav > li, .navbar-nav > li > a (outside AdminLTE' */
/* 11.x NAVBAR-NAV (structural) — plain module navbars (Hms/Repair layouts/nav:
   ul.nav.navbar-nav inside .navbar-collapse, OUTSIDE .navbar-custom-menu).
   AdminLTE in vendor.css only covers the .navbar-custom-menu-scoped case. */
.navbar-nav { margin: 7.5px -15px; }
.navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; }
/* BS3 navbar clearfix — contain the floated menus */
.navbar-collapse::before, .navbar-collapse::after { content: " "; display: table; }
.navbar-collapse::after { clear: both; }
@media (min-width: 768px) {
    /* Desktop: menu is expanded, not collapsed (§11.2's .collapse{display:none}
       would otherwise hide these navbars entirely — BS3 parity override) */
    .navbar-collapse.collapse { display: block !important; height: auto !important; overflow: visible !important; }
    .navbar-nav { float: left; margin: 0; }
    .navbar-nav > li { float: left; }
    .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; }
}

/* 12.9 [visible-degradation] .navbar, .navbar-brand, .navbar-header */
/* BS3 navbar structural base — content-body navbars (Hms/Repair module navs, 78 includers;
   ProductCatalogue guest catalogue). .main-header .navbar (AdminLTE) outranks these via
   descendant specificity, so the app header is unaffected. Structural props only;
   BS3's border is transparent so no color token is needed. */
.navbar { position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent; }
.navbar:before, .navbar:after,
.navbar-header:before, .navbar-header:after { display: table; content: " "; }
.navbar:after, .navbar-header:after { clear: both; }
.navbar-brand { float: left; height: 50px; padding: 15px 15px; line-height: 20px; }
.navbar-brand > img { display: block; }
@media (min-width: 768px) { .navbar-header { float: left; } }

/* 12.10 [visible-degradation] .navbar-toggle, .navbar-toggle .icon-bar */
/* BS3 .navbar-toggle structure — hamburger for module navbars (Hms/Repair nav.blade, ProductCatalogue catalogue).
   Bootstrap owned the toggle's float/desktop-hide and the icon-bar 22x2 boxes; vendor.css only skins it
   (color/padding kept from the AdminLTE rule — cosmetics unchanged). */
.navbar-toggle{position:relative;float:right}
.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px;background-color:var(--sk-text-2)}
.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}
@media (min-width:768px){.navbar-toggle{display:none}}

/* 12.11 [visible-degradation] .nav-justified / .nav-tabs.nav-justified */
/* .nav-justified — BS3 structural restore (contact/show, crm lead/show, install nav).
   Must appear AFTER .nav-tabs > li { float:left } (equal specificity, order-dependent). */
.nav-justified { width: 100%; }
.nav-justified > li { float: none; }
.nav-justified > li > a { margin-bottom: 5px; text-align: center; }
.nav-tabs.nav-justified { border-bottom: 0; }
.nav-tabs.nav-justified > li > a { margin-right: 0; }
@media (min-width: 768px) {
    .nav-justified > li { display: table-cell; width: 1%; }
    .nav-justified > li > a { margin-bottom: 0; }
    .nav-tabs.nav-justified > li > a {
        border-bottom: 1px solid var(--sk-border, #e3e8ef);
        border-radius: var(--sk-radius-sm, 7px) var(--sk-radius-sm, 7px) 0 0;
    }
    .nav-tabs.nav-justified > li.active > a,
    .nav-tabs.nav-justified > li.active > a:hover,
    .nav-tabs.nav-justified > li.active > a:focus {
        border-bottom-color: var(--sk-surface, #ffffff);
    }
}

/* 12.12 [visible-degradation] label */
/* BS3 base: bare <label> structural props (from bootstrap.min.css
   `label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}`).
   Structural props ONLY — color/weight stay with skyline-erp.css's `label` rule
   (font-weight:600, var(--sk-text-2)). .checkbox/.radio label above still wins
   (higher specificity) and Tailwind mb-* utilities still out-rank this. */
label { display: inline-block; max-width: 100%; margin-bottom: 5px; }

/* 12.13 [visible-degradation] .checkbox input[type='checkbox'], .checkbox-inline input[type='checkbo */
/* BS3 checkbox/radio input positioning inside .checkbox/.radio wrappers.
   Pairs with the wrapper/label rules above (label has padding-left:20px;
   the input must sit absolutely in that gutter). Base BS3 input margin
   (4px top, line-height normal) is folded in here SCOPED to avoid a new
   global input[type=checkbox] footprint. Descendant selector cannot hit
   the bare .checkbox-on-the-input POS toggle case (no .checkbox ancestor). */
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
  position: absolute;
  margin: 4px 0 0 -20px;
  line-height: normal;
}
/* BS3 stacked-sibling compensation for the wrapper's margin-top:10px */
.checkbox + .checkbox,
.radio + .radio {
  margin-top: -5px;
}

/* 12.14 [breaks-layout] select[multiple], select[size] */
/* BS3 structural restore: multi-row selects must not be clamped to .form-control's 34px
   (mirrors textarea.form-control { height: auto; } above; specificity 0-1-1 beats .form-control 0-1-0) */
select[multiple], select[size] { height: auto; }

/* 12.15 [visible-degradation] input[type='file'] */
/* BS3 base restore: bare file inputs claim their own line again.
   bootstrap.min.css had `input[type="file"]{display:block}`; no remaining sheet
   re-provides it, so `<label>…</label><input type=file>` collapsed onto one line
   on the import/product/register upload forms. :where() keeps specificity at
   0-0-0 on purpose — Tailwind's UNLAYERED `.hidden` (0-1-0) and page-local
   styles must still win, otherwise the class="hidden" drop-zone inputs in
   Modules (HRM employee photo, Treasury/Accounting attachments) get un-hidden. */
:where(input[type="file"]) { display: block; }

/* 12.16 [visible-degradation] th */
/* BS3 scaffolding restore: Bootstrap set text-align:left on ALL th (UA default is
   center). sk-vendor only covered .table > thead th; this covers tbody label rows,
   tfoot totals rows, and bare non-.table tables. Element specificity (0,0,1) —
   identical to BS3 — so scoped centering rules (datepickers, .fc, .text-center,
   DataTables) still override it exactly as before. */
th { text-align: left; }

/* 12.17 [minor] caption */
/* caption — BS3 reboot owned this (caption{padding:8px 0;color:#777;text-align:left});
   UA default is centered + unpadded. Used by Project activity partials (.pjt-table > caption). */
caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--sk-text-2, #5b6b7c);
    text-align: left;
}

/* 12.18 [visible-degradation] .modal-scrollbar-measure */
/* --- BS3 structural: scrollbar-width probe used by Modal.prototype.measureScrollbar
       (vendor.js). Off-screen 50x50 overflow:scroll box; offsetWidth-clientWidth = native
       scrollbar width, used to pad body when .modal-open hides the page scrollbar. --- */
.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

/* 12.19 [minor] button.close */
/* BS3 structural gap: button.close{-webkit-appearance:none;padding:0} — the generic
   .close above re-provides background/border/cursor, but UA default button padding
   (1px 6px in Chrome) survives outside .modal-header (which is the only place
   padding:0 is currently re-provided). Restores alert/panel dismiss-× geometry. */
button.close {
    padding: 0;
    -webkit-appearance: none;
}

/* 12.20 [visible-degradation] .hidden-xs */
/* §BS3 responsive utility re-provide: .hidden-xs (sole live consumer =
   public/js/datatable-enhanced-buttons.js toolbar label spans on 17
   layouts.app report blades — collapses DataTables export buttons to
   icon-only on phones, as bootstrap.min.css did). */
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

/* 12.21 [breaks-layout] .carousel / .carousel-inner / .carousel-inner > .item / .carousel-inne */
/* Bootstrap-3 carousel STRUCTURE (customer-facing POS display: sale_pos/display.blade.php,
   /customer-display). bootstrap.min.js in vendor.js still drives the class cycling
   (.active/.next/.prev/.left/.right); these rules restore only the show/hide + slide
   mechanics it needs. Cosmetics (indicator dots, image sizing, rounding) stay in the
   blade's tw-* utilities; .carousel-control cosmetics stay in vendor.css (AdminLTE). */
.carousel{position:relative}
.carousel-inner{position:relative;width:100%;overflow:hidden}
.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}
.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}
.carousel-inner>.active{left:0}
.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}
.carousel-inner>.next{left:100%}
.carousel-inner>.prev{left:-100%}
.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}
.carousel-inner>.active.left{left:-100%}
.carousel-inner>.active.right{left:100%}
.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}

/* 12.22 [visible-degradation] .popover > .arrow (directional positioning: .popover.top|.right|.botto */
/* 11.9b POPOVER ARROW — directional positioning (BS3 structural gap).
   Outer arrow = border-colored triangle, :after = surface-colored fill.
   app.css:1934 (!important bottom recolor) and guided-intro.css .tour colors
   still apply on top, matching pre-swap behavior. */
.popover > .arrow { border-width: 11px; }
.popover > .arrow:after { content: ""; border-width: 10px; }
.popover.top > .arrow { bottom: -11px; left: 50%; margin-left: -11px; border-top-color: var(--sk-border-strong, #d2dae5); border-bottom-width: 0; }
.popover.top > .arrow:after { bottom: 1px; margin-left: -10px; content: " "; border-top-color: var(--sk-surface, #fff); border-bottom-width: 0; }
.popover.right > .arrow { top: 50%; left: -11px; margin-top: -11px; border-right-color: var(--sk-border-strong, #d2dae5); border-left-width: 0; }
.popover.right > .arrow:after { bottom: -10px; left: 1px; content: " "; border-right-color: var(--sk-surface, #fff); border-left-width: 0; }
.popover.bottom > .arrow { top: -11px; left: 50%; margin-left: -11px; border-bottom-color: var(--sk-border-strong, #d2dae5); border-top-width: 0; }
.popover.bottom > .arrow:after { top: 1px; margin-left: -10px; content: " "; border-bottom-color: var(--sk-surface, #fff); border-top-width: 0; }
.popover.left > .arrow { top: 50%; right: -11px; margin-top: -11px; border-left-color: var(--sk-border-strong, #d2dae5); border-right-width: 0; }
.popover.left > .arrow:after { right: 1px; bottom: -10px; content: " "; border-left-color: var(--sk-surface, #fff); border-right-width: 0; }

/* 12.23 [minor] .media, .media-body */
/* 11.14b MEDIA structural clip (BS3: .media,.media-body{overflow:hidden}) —
   clips unbreakable tokens (e.g. pasted URLs in todo comments) so the anonymous
   table can't spill past its panel. zoom:1 (IE7 hasLayout) intentionally dropped. */
.media, .media-body { overflow: hidden; }

/* 12.24 RTL companion for 12.16/12.17 — bootstrap.rtl.min.css (also removed)
   owned the mirrored alignment. rtl.css now carries only AdminLTE.rtl. */
[dir="rtl"] th { text-align: right; }
[dir="rtl"] caption { text-align: right; }

/* ==========================================================================
   13. HERO HEADING COLOUR (2026-07-09)
   vendor.css (AdminLTE) sets `h1,h2,...,h6 { color: #32325d }`. That element
   rule (0,0,1) beats *inheritance*, so a heading inside a dark gradient hero
   whose wrapper carries `text-white` still rendered dark-navy-on-dark-navy —
   the CMMS guide banners were effectively unreadable.
   Scope: only headings inside a container that explicitly asked for white
   text, so nothing else in the app shifts. :where() keeps the specificity at
   the .text-white class alone (0,1,0), which out-ranks vendor's element rule
   while still yielding to any explicit colour utility on the heading itself.
   ========================================================================== */
.text-white :where(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* ==========================================================================
   13b. TABLE ROWS THAT ASKED FOR WHITE TEXT (2026-08-27)
   Companion to 13. skyline-erp.css sets
     .content-wrapper .table > tbody > tr > td { color: var(--sk-text) }
   at (0,2,3). A direct declaration always beats INHERITANCE, so a
   `<tr class="bg-indigo-600 text-white">` could not colour its own cells --
   the highlight rows on Treasury reports rendered near-black on blue at
   2.13:1. The class is repeated to reach (0,3,1), which outranks (0,2,3);
   the same device sk-vendor already uses for the seam utilities below.
   ========================================================================== */
tr.text-white.text-white.text-white > td,
tr.text-white.text-white.text-white > th { color: inherit; }



/* ==========================================================================
   SEAM UTILITIES MUST WIN (2026-07-09)
   Tailwind-migrated groups pair `span.inline-flex` with a control carrying
   `rounded-l-none`. Two things defeat that utility:
     - a later `border-radius` SHORTHAND (page <style>, module skins) overrides
       the longhands the utility sets;
     - `.treasury-module .form-control { border-radius: 10px !important }`
       in an inline <style> that loads after every external sheet.
   The class is repeated to raise specificity to (0,3,0) — legal CSS, and it
   out-ranks the (0,2,0) !important rule above without inventing a new class.
   Scope is narrow: it only fires where a blade explicitly asked for a square
   seam, so nothing else in the app shifts.
   ========================================================================== */
.form-control.rounded-l-none.rounded-l-none,
.rounded-l-none.rounded-l-none {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.form-control.rounded-r-none.rounded-r-none,
.rounded-r-none.rounded-r-none {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* `rounded-none` (2026-07-11) — the MIDDLE element of a 3-part group
   (button | input | button), e.g. the quantity steppers. It was missing from the
   two pairs above, so a module skin's !important radius shorthand still beat it:
   `.pjt-page .form-control { border-radius: var(--pjt-radius-sm) !important }` is
   (0,2,0)-important and out-ranks the plain (0,1,0) utility, leaving a notch at
   BOTH seams. Doubled to (0,3,0) for the same reason as its siblings. */
.form-control.rounded-none.rounded-none,
.rounded-none.rounded-none {
    border-radius: 0 !important;
}

/* =====================================================================
   §15  WCAG 1.4.3 — status labels
   AdminLTE's palette and our own semantic label tokens carry WHITE text on
   colours that measure 1.97–4.38:1. Small text needs 4.5:1. Each colour below
   moves to the nearest same-hue shade that passes; .bg-gray keeps its light
   fill and takes dark text instead. Scoped to `.label` so the `.bg-*` box
   utilities and the button palette are untouched — those are a separate,
   deliberate design decision.
   Ratios (white on the new colour): green 5.02, aqua 5.36, yellow 5.02,
   red 6.47, light-blue 5.90, teal 5.47, orange 5.18, olive 5.96.
   ===================================================================== */
.label.bg-green      { background-color: #15803d !important; }
.label.bg-aqua       { background-color: #0e7490 !important; }
.label.bg-yellow     { background-color: #b45309 !important; }
.label.bg-red        { background-color: #b91c1c !important; }
.label.bg-light-blue { background-color: #2c6a8e !important; }
.label.bg-teal       { background-color: #0f766e !important; }
.label.bg-orange     { background-color: #c2410c !important; }
.label.bg-olive      { background-color: #2f6f55 !important; }
.label.bg-maroon     { background-color: #be123c !important; }

/* a light grey chip cannot carry white text at any weight (1.46:1) */
.label.bg-gray       { color: #1f2937 !important; }

/* our own semantic labels: success 3.49, warning 3.03, danger 4.38 -> all below 4.5 */
.label.label-success { background: #15803d; }
.label.label-warning { background: #b45309; }
.label.label-danger  { background: #b91c1c; }

/* =====================================================================
   §16  WCAG 1.4.11 (Non-text Contrast) — control boundaries
   A form control's border must be >= 3:1 against its background so the field
   is identifiable. The app's resting borders (#d2dae5 / #e2e8f0 / #ced4da …)
   measure 1.2–1.4:1. #8a8a8a is 3.45:1 on white and stays >= 3.1:1 on the
   off-white surfaces controls actually sit on (#f8fafc, #f4f6f9, #f0f4ff).

   Two deliberate design choices in this selector:
   1. RESTING STATE ONLY — `:not(:focus)` / not(--focus)/not(--open) so every
      control's own :focus rule keeps painting its brand-colour border (that
      focus affordance satisfies SC 2.4.7 and must not be overridden).
   2. HIGH SPECIFICITY via the type-guard :not() chain — `input:not([...])×5
      :not(:focus)` is (0,6,1), which outranks even the module masters' inline
      `.X-module input[type="text"]{border:…!important}` (0,2,1), so this one
      block fixes every module without editing 23 stylesheets.
   Border-COLOR only: widths (1px vs the modules' 2px) and radii are preserved,
   so nothing shifts. Decorative borders (cards, dividers, table rules) are NOT
   touched — SC 1.4.11 does not require them, and darkening them reads as heavy. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not(:focus),
select:not([multiple]):not(:focus),
textarea:not(:focus),
.form-control:not(:focus) {
    border-color: #8a8a8a !important;
}

.select2-container--default:not(.select2-container--focus):not(.select2-container--open) .select2-selection {
    border-color: #8a8a8a !important;
}

/* Select2 placeholder ("Please select …") was #94a3b8 = 2.56:1 on the white control,
   below WCAG 1.4.3's 4.5:1 for this instructional text. #64748b = 4.76:1 keeps it clearly
   a muted placeholder, lighter than an entered value (#1c2733). */
.select2-container--default .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #64748b;
}