/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

input,
select,
textarea {
    max-width: 100%;
}

/* ============================
   Default form-control styling for legacy ASP.NET MVC inputs
   ASP.NET emits inputs with class="text-box single-line" (no Bootstrap class).
   Native <input>/<select>/<textarea> are given the same look unless they
   already opt out (.form-control, .form-select, .btn, select2, icheck, etc.)
   ============================ */
input.text-box,
input.single-line,
input[type="text"]:not(.form-control):not(.btn):not(.select2-search__field):not(.dataTables_filter input),
input[type="email"]:not(.form-control),
input[type="tel"]:not(.form-control),
input[type="url"]:not(.form-control),
input[type="number"]:not(.form-control):not(.btn),
input[type="search"]:not(.form-control),
input[type="password"]:not(.form-control),
input[type="date"]:not(.form-control),
input[type="datetime"]:not(.form-control),
input[type="datetime-local"]:not(.form-control),
input[type="month"]:not(.form-control),
input[type="time"]:not(.form-control),
input[type="week"]:not(.form-control),
textarea:not(.form-control):not(.summernote-editor) {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
}

/* SweetAlert (v1) builds a hidden <input type="text"> into every dialog and
   hides it via `.sweet-alert input { display:none }`. The legacy-input rule
   above outranks that and made the stray input visible on every alert.
   Keep it hidden unless swal itself shows it (input prompts add .show-input). */
.sweet-alert input[type="text"] {
    display: none !important;
}
.sweet-alert.show-input input[type="text"] {
    display: block !important;
}

/* Single-line selects (not multi-select, not select2-managed) get .form-select look */
select:not(.form-select):not(.form-control):not([multiple]):not(.select2-hidden-accessible) {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
}

/* Multi-select listbox: keep native rendering but with form-control border */
select[multiple]:not(.form-select):not(.form-control):not(.select2-hidden-accessible) {
    display: block;
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-sizing: border-box;
}
select[multiple]:not(.form-select):not(.form-control):not(.select2-hidden-accessible) option {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* ============================
   .form-control normalisation (transversal)
   concept-main.css overloads `.form-control` with its grey rounded "search box"
   style (background #f8f9fa, border-radius:50px, 45px left padding, fixed 40px
   height) applied to EVERY .form-control — which is wrong for ordinary form
   inputs across the app (modals, filters, etc.). Restore the standard BS5
   control look. Element-qualified so it beats the bare `.form-control` rules
   regardless of stylesheet order, while still yielding to inline styles.
   ============================ */
input.form-control,
textarea.form-control,
select.form-control {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    height: auto;
    min-height: calc(1.5em + 0.75rem + 2px);
    font-size: 0.875rem;
}
textarea.form-control {
    min-height: auto;
}
/* Restore the native dropdown arrow on <select> (concept set appearance:none) */
select.form-control {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

/* Focus ring (BS5-style) */
input.text-box:focus,
input.single-line:focus,
input[type="text"]:not(.form-control):not(.btn):focus,
input[type="email"]:not(.form-control):focus,
input[type="tel"]:not(.form-control):focus,
input[type="url"]:not(.form-control):focus,
input[type="number"]:not(.form-control):not(.btn):focus,
input[type="search"]:not(.form-control):focus,
input[type="password"]:not(.form-control):focus,
input[type="date"]:not(.form-control):focus,
input[type="datetime"]:not(.form-control):focus,
input[type="datetime-local"]:not(.form-control):focus,
input[type="month"]:not(.form-control):focus,
input[type="time"]:not(.form-control):focus,
input[type="week"]:not(.form-control):focus,
textarea:not(.form-control):not(.summernote-editor):focus,
select:not(.form-select):not(.form-control):not(.select2-hidden-accessible):focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.18);
}

/* Disabled / readonly */
input.text-box[disabled],
input.text-box[readonly],
input[type="text"][disabled]:not(.form-control),
input[type="text"][readonly]:not(.form-control),
input[type="number"][disabled]:not(.form-control),
input[type="number"][readonly]:not(.form-control),
textarea[disabled]:not(.form-control),
textarea[readonly]:not(.form-control),
select[disabled]:not(.form-control):not(.form-select) {
    background-color: #e9ecef;
    opacity: 1;
}

/* Form labels: a bit of breathing room when used inline next to inputs */
label.control-label,
.form-group > label {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

/* ============================
   DataTables sort-indicator double-up fix
   jquery.dataTables.css renders PNG background arrows on .sorting/.sorting_asc/.sorting_desc,
   AND concept-main.css renders FA glyphs via ::after on the same classes.
   Result: every sortable header column showed two sets of arrows stacked.
   Suppress the legacy PNG layer; keep the vector FA indicators.
   ============================ */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background-image: none !important;
}

/* concept-main.css sets `padding: 16px 30px` on both `.dashboard-wrapper
   table.dataTable thead th` and `.dashboard-wrapper table.dataTable tbody tr td`,
   which makes every DataTable row hugely tall. Tighten transversally. Use
   moderate padding (legacy app expected something like 6px 10px). */
.dashboard-wrapper table.dataTable thead th {
    padding: 6px 10px !important;
}
.dashboard-wrapper table.dataTable tbody tr td {
    padding: 6px 10px !important;
}

/* Non-DataTable tables under .dashboard-wrapper also get inflated by BS5's
   default `.table > * > * { padding: .5rem .5rem }` — keep them similarly
   compact for consistency. */
.dashboard-wrapper .table > :not(caption) > * > * {
    padding: 6px 10px;
}

/* ============================
   BS3 → BS5 grid shim: some views (e.g. Edit.cshtml Hardware/Encomendas tab)
   use `col-sm-*` nested directly inside another `col-sm-*` without a `.row`
   wrapper. BS3 cols had `float: left`, so they arranged horizontally even
   without a `.row` parent. BS5 cols rely on `.row`'s flex container, so the
   inner cols collapse to a vertical stack.

   Fix transversally: any `col-*` that contains direct `col-*` children
   (i.e. it's being used as a row but lacks the `.row` class) becomes a
   flex container itself. The `:has()` selector means correctly-marked-up
   columns (whose children go through `.row > .col-*`) are unaffected.

   Mobile (<576px): the inner `.col-sm-*` revert to 100% width, so flex-wrap
   stacks them naturally — no special handling needed.
   ============================ */
@media (min-width: 576px) {
    [class*="col-sm-"]:has(> [class*="col-sm-"]),
    [class*="col-md-"]:has(> [class*="col-md-"]) {
        display: flex;
        flex-wrap: wrap;
    }
}

/* ============================
   Legacy FA4-era nesting pattern: <span class="fa fa-X"><span>text</span></span>
   FA7 sets width:1.25em + text-align:center on .fa, which constrains the nested
   text to ~17px and breaks it character-by-character. When the .fa wrapper
   contains an element child (it's being used as a wrapper, not a bare icon),
   let it grow naturally so the text flows. The ::before pseudo-element still
   inherits font-family from .fa, so the icon glyph keeps rendering correctly.
   ============================ */
.fa:has(> span),
.fa:has(> small),
.fa:has(> div),
.fa:has(> b),
.fa:has(> strong),
.fa:has(> em) {
    width: auto !important;
    text-align: inherit !important;
}

/* ============================
   Legacy Inspinia vertical tabs (.tabs-container > .tabs-left / .tabs-right)
   Bootstrap 5 doesn't have a built-in vertical-tabs class set; re-implement here.
   ============================ */
.tabs-container .tabs-left,
.tabs-container .tabs-right {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.tabs-container .tabs-right {
    flex-direction: row-reverse;
}
.tabs-container .tabs-left > .nav-tabs,
.tabs-container .tabs-right > .nav-tabs {
    flex-direction: column;
    border-bottom: 0;
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 240px;
}
.tabs-container .tabs-left > .nav-tabs {
    border-right: 1px solid #e6e6f2;
    margin-right: 1rem;
}
.tabs-container .tabs-right > .nav-tabs {
    border-left: 1px solid #e6e6f2;
    margin-left: 1rem;
}
.tabs-container .tabs-left > .nav-tabs .nav-item,
.tabs-container .tabs-right > .nav-tabs .nav-item {
    margin-bottom: 2px;
}
.tabs-container .tabs-left > .nav-tabs .nav-link,
.tabs-container .tabs-right > .nav-tabs .nav-link {
    border-radius: 0;
    border-bottom-color: transparent;
    color: #495057;
    text-align: left;
    width: 100%;
}
.tabs-container .tabs-left > .nav-tabs .nav-link {
    border-right-color: transparent;
    border-radius: .375rem 0 0 .375rem;
}
.tabs-container .tabs-right > .nav-tabs .nav-link {
    border-left-color: transparent;
    border-radius: 0 .375rem .375rem 0;
    text-align: right;
}
.tabs-container .tabs-left > .nav-tabs .nav-link.active,
.tabs-container .tabs-right > .nav-tabs .nav-link.active {
    background-color: #fff;
    color: #5969ff;
    font-weight: 600;
    border-color: #e6e6f2;
}
.tabs-container .tabs-left > .nav-tabs .nav-link.active { border-right-color: #fff; }
.tabs-container .tabs-right > .nav-tabs .nav-link.active { border-left-color: #fff; }

.tabs-container .tabs-left > .tab-content,
.tabs-container .tabs-right > .tab-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Below variant (rare) */
.tabs-container .tabs-below > .nav-tabs {
    border-top: 1px solid #e6e6f2;
    border-bottom: 0;
}
.tabs-container .tabs-below > .nav-tabs .nav-link {
    border-radius: 0 0 .375rem .375rem;
}

/* Mobile: stack the vertical tab nav above content */
@media (max-width: 767.98px) {
    .tabs-container .tabs-left,
    .tabs-container .tabs-right {
        flex-direction: column;
    }
    .tabs-container .tabs-left > .nav-tabs,
    .tabs-container .tabs-right > .nav-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        border-right: 0;
        border-left: 0;
        border-bottom: 1px solid #e6e6f2;
        margin: 0 0 .5rem 0;
    }
    .tabs-container .tabs-left > .nav-tabs .nav-link,
    .tabs-container .tabs-right > .nav-tabs .nav-link {
        border-radius: .375rem .375rem 0 0;
    }
}

/* ============================
   Bootstrap 3 → 5 Compatibility Layer
   Bridges deprecated classes that may still exist in dynamic/JS-generated content
   ============================ */

/* Legacy panel support (for any JS-generated panels) */
.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .375rem;
    margin-bottom: 1rem;
}
.panel-body { padding: 1rem; }
.panel-heading { padding: .75rem 1rem; border-bottom: 1px solid rgba(0,0,0,.08); font-weight: 600; background-color: #f8f9fa; border-radius: .375rem .375rem 0 0; }

/* Inspinia legacy ibox (used as content container) */
.ibox {
    background-color: #fff;
    border-radius: .375rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(0,0,0,.08);
}
.ibox-title {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-weight: 600;
}
.ibox-content {
    background-color: #fff;
    border: 1px solid #e7eaec;
    border-radius: .375rem;
    padding: 1rem;
}

/* Inspinia chat widget (e.g. Order/View "Mensagens"). Unstyled in BS5, the
   message avatars rendered at full natural size. */
.chat-discussion {
    overflow-y: auto;
}
.chat-message {
    margin-bottom: 12px;
    overflow: hidden;
}
.message-avatar {
    height: 38px !important;
    width: 38px !important;
    border-radius: 50%;
    object-fit: cover;
}
.chat-message .message-avatar {
    float: left;
    margin-right: 10px;
}
.chat-message.right .message-avatar {
    float: right;
    margin-left: 10px;
    margin-right: 0;
}
.chat-message .message {
    background-color: #f7f7f7;
    border: 1px solid #e7eaec;
    border-radius: 4px;
    padding: 10px 16px;
    overflow: hidden;
}
.message-author {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #1ab394;
    text-decoration: none;
}
.message-content {
    display: block;
    font-size: 13px;
    color: #676a6c;
}

/* Inspinia / BS3 legacy classes still emitted by JS-generated content
   (e.g. CodevisionEntityHardware history feed + dropzone box). BS5 dropped
   .jumbotron/.well, so they rendered as unstyled text. */
.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 1rem;
    background-color: #e9ecef;
    border-radius: .3rem;
}
.well {
    min-height: 20px;
    padding: 10px 15px;
    margin: .5rem 0 0;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: .25rem;
}
.img-circle {
    border-radius: 50%;
}
/* Inspinia agile-list (item lists, e.g. Sales/Edit "Itens associados à venda").
   BS5 has no styling for it, so the <ul> showed default bullets and the rows
   lost their card look. */
ul.agile-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.agile-list li {
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.05) 0 1px 1px;
    border: 1px solid #e7eaec;
    margin-bottom: 5px;
    padding: 10px 16px;
    border-radius: 2px;
}

/* BS3 `.list-inline > li` were inline-block; BS5 only styles `.list-inline-item`.
   Legacy markup uses bare <li> inside .list-inline (e.g. Order approval icons),
   which then stacked vertically. Restore inline-block. */
.list-inline {
    padding-left: 0;
    list-style: none;
}
.list-inline > li {
    display: inline-block;
}

/* Inspinia .white-bg / .gray-bg (BS5 uses .bg-white / .bg-light) */
.white-bg {
    background-color: #fff !important;
}
.gray-bg {
    background-color: #f3f3f4 !important;
}

/* BS3 text alignment utilities (BS5 renamed them text-start/text-end) */
.text-right {
    text-align: right !important;
}
.text-left {
    text-align: left !important;
}

/* BS3 .label (removed in BS5, replaced by .badge). Still emitted by models and
   legacy markup as small coloured chips — restore the chip look. Per-instance
   inline background-color/color/width override these. */
.label {
    display: inline-block;
    padding: 3px 8px;
    font-size: 75%;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    color: #fff;
}
/* BS3 label colour variants (BS5 dropped them with the .label class) */
.label-default { background-color: #777; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; }
.label-info    { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger  { background-color: #d9534f; }

/* Inspinia Nestable (jQuery Nestable) — .dd / .dd-list / .dd-item / .dd-handle
   (e.g. Stock/Index). Unstyled in BS5 the <ol> showed list numbers, rows lost
   their card box, and `.dd-collapsed` no longer hid the nested list (so every
   item appeared expanded). */
.dd,
.dd-list,
.dd-list .dd-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dd-list .dd-list {
    padding-left: 30px;
}
.dd-collapsed .dd-list {
    display: none;
}
.dd-item {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 20px;
}
.dd-handle {
    display: block;
    margin: 5px 0;
    padding: 6px 10px;
    background: #f5f5f5;
    border: 1px solid #e7eaec;
    border-radius: 3px;
    color: inherit;
    text-decoration: none;
}
.dd-handle:hover {
    background: #eef0f2;
}

/* Inspinia activity/history feed */
.feed-element {
    padding-bottom: 1rem;
    margin-top: 1rem;
    border-bottom: 1px solid #e7eaec;
    font-size: 13px;
}
.feed-activity-list .feed-element:first-child {
    margin-top: 0;
}
.feed-element .media-body {
    overflow: hidden;
}

/* Inspinia legacy classes still referenced by JS */
.nav-label { display: inline; }
.faStyles { font-size: 22px; color: #2F4050; }

/* Legacy custom utility classes from the old theme */
.border_Bottom { border-bottom: 1px solid #e7eaec; padding-bottom: 10px; margin-bottom: 10px; }
.row_noMargins { margin-left: 0; margin-right: 0; }
.beginTab { padding-top: 10px; }
.faTabs { font-size: 21px !important;}

/* form-group spacing (BS3 had margin-bottom:15px) */
.form-group { margin-bottom: 1rem; }

/* Legacy .close button (in case any remain) */
.close {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: .5;
    border: 0;
    background: transparent;
}

/* ============================
   Modal header order (BS3 → BS5)
   Legacy markup puts the close button BEFORE the title. BS5 .modal-header is
   display:flex; justify-content:space-between, so that order renders the close
   button on the LEFT and the title pushed to the RIGHT. Use flex `order` to fix
   it transversally — title first, close button last — regardless of DOM order.
   Works for both old (close-first) and correct (title-first) markup.
   ============================ */
.modal-header .modal-title {
    order: 0;
}
.modal-header .btn-close,
.modal-header .close {
    order: 1;
    margin-left: auto;
}

/* ============================
   Double close "×" on modals (BS3 → BS5)
   BS5 .btn-close draws its own × via background-image, but legacy markup still
   nests <span aria-hidden="true">×</span> inside it — so two crosses overlap.
   Hide any literal glyph nested in .btn-close (the visually-hidden "Close"
   label is already hidden by its own class; this is harmless for it too).
   ============================ */
.btn-close > span,
.btn-close > i {
    display: none !important;
}

/* ============================
   Custom dark table headers (transversal)
   concept-main.css sets `table.dataTable thead th { background:#fff; color:#3d405c }`
   (no !important, but high specificity). Views that define their dark header
   classes (.cdvTableHeader / .tableHeader) WITHOUT !important on the color lose
   to it on DataTables → dark text (#3d405c) on the dark header (#2F4050) =
   invisible. Force the intended dark background + white text everywhere.
   ============================ */
table thead th.cdvTableHeader,
table thead td.cdvTableHeader,
table thead th.tableHeader,
table thead td.tableHeader,
.dashboard-wrapper table.dataTable thead th.cdvTableHeader,
.dashboard-wrapper table.dataTable thead td.cdvTableHeader,
.dashboard-wrapper table.dataTable thead th.tableHeader,
.dashboard-wrapper table.dataTable thead td.tableHeader {
    background-color: #2F4050 !important;
    color: #fff !important;
}

/* ============================
   Tempus Dominus datepicker (via datetimepicker-compat.js)
   The shim wraps the legacy bare <input> in an .input-group with a calendar
   toggle. Keep the input + toggle on one line, and tame the calendar widget so
   the long Portuguese weekday names don't overlap.
   ============================ */
.td-compat-group {
    flex-wrap: nowrap !important;
    width: auto;
}
.td-compat-group > input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}
.td-compat-group .td-compat-toggle {
    flex: 0 0 auto;
}
/* Calendar popup: a bit wider + smaller weekday header so pt-PT day names fit */
.tempus-dominus-widget {
    min-width: 21rem;
}
.tempus-dominus-widget .dow {
    font-size: .7rem;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Legacy ASP.NET MVC inputs (text-box / single-line) inside BS5 .input-group:
   flex them like .form-control so append/prepend addons (€, %) stay on one line.
   Without this, the site.css `display:block; width:100%` rule makes the input
   fill the full row, pushing the addon below it. */
.input-group > input.text-box,
.input-group > input.single-line,
.input-group > input[type="number"]:not(.form-control),
.input-group > input[type="text"]:not(.form-control) {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    float: none !important;
}

/* Table action icons: keep download/delete icons on one horizontal line.
   DataTables re-renders cell content; without explicit inline-block, <a> wraps. */
table.dataTable tbody td a,
table:not(.dataTable) tbody td a {
    display: inline-block;
}

/* Ensure cards match old panel visual style */
.card { margin-bottom: 1rem; }
.card-header { font-weight: 600; }

/* ============================
   Sidebar styling overrides
   Concept CSS handles most sidebar styling via .nav-left-sidebar .navbar selectors.
   We only need overrides here.
   ============================ */
.nav-left-sidebar .navbar-sidebar {
    display: block;
    padding: 0;
    width: 100%;
}
.nav-left-sidebar .navbar-sidebar .navbar-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* Active state for current section */
.nav-left-sidebar .navbar-nav .nav-item.active > .nav-link {
    background-color: rgba(255,255,255,.08);
    color: #fff;
    border-left-color: #5969ff;
}
/* Submenu items (always visible, no collapse) */
.nav-left-sidebar .submenu {
    list-style: none;
    padding-left: 0;
    display: none;
}
.nav-left-sidebar .nav-item.menu-open > .submenu {
    display: block;
}
.nav-left-sidebar .submenu .nav-item .nav-link {
    padding-left: 60px;
    font-size: .8125rem;
    color: #8287a0;
}
.nav-left-sidebar .submenu .nav-item .nav-link:hover {
    background-color: rgba(255,255,255,.08);
    color: #fff;
}
.nav-left-sidebar .submenu .nav-item .nav-link.active,
.nav-left-sidebar .submenu .nav-item.active .nav-link {
    color: #5969ff;
    background-color: transparent;
}

/* Hide concept template's chevron arrows on submenu parents */
.nav-left-sidebar .nav-arrow {
    display: none !important;
}

/* Dashboard content padding */
.dashboard-content {
    padding: 20px 20px 60px;
}

/* Prevent horizontal scroll caused by .row negative margins leaking past
   wrappers that don't fully absorb them (BS5 layout safety net). */
.dashboard-main-wrapper,
.dashboard-wrapper {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix tabs: ensure first active tab-pane's corresponding tab link is active */
.nav-tabs .nav-link {
    color: #495057;
    padding: 15px;
}
.nav-tabs .nav-link.active {
    font-weight: 600;
}

.table tbody tr td {
    padding: 10px 10px;
    color: #71748d;
    font-size: 14px;
    vertical-align: middle;
    border-color: #e6e6f2;
    background-color: #fff;
}

/* ============================
   Icon-only sidebar (mini mode)
   Default on desktop; hamburger expands to full width
   ============================ */
@media (min-width: 992px) {
    /* Narrow by default; scrollable when content overflows */
    .nav-left-sidebar {
        width: 60px !important;
        transition: width 0.3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.15) transparent;
        background-color: #2f4050
    }
    .nav-left-sidebar::-webkit-scrollbar {
        width: 6px;
    }
    .nav-left-sidebar::-webkit-scrollbar-thumb {
        background-color: rgba(255,255,255,.15);
        border-radius: 3px;
    }
    .nav-left-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }
    .nav-left-sidebar .menu-list {
        overflow: visible !important;
    }
    /* Hide text and arrows */
    .nav-left-sidebar .nav-label,
    .nav-left-sidebar .nav-arrow {
        display: none !important;
    }
    /* Center icon in nav link, larger and higher contrast */
    .nav-left-sidebar .navbar .navbar-nav .nav-item .nav-link {
        padding: 14px 0 !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }
        .nav-left-sidebar .navbar .navbar-nav .nav-item .nav-link i {
            margin-right: 0 !important;
            width: auto !important;
            font-size: 20px !important;
            color: #a3a3a3 !important;
            text-align: center !important;
        }
    .nav-left-sidebar .navbar .navbar-nav .nav-item .nav-link:hover i,
    .nav-left-sidebar .navbar .navbar-nav .nav-item.active > .nav-link i {
        color: #fff !important;
    }
    /* Submenu as flyout panel on hover — uses position: fixed so it isn't clipped by the scrollable sidebar */
    .nav-left-sidebar .navbar-nav > .nav-item {
        position: relative !important;
    }
    .nav-left-sidebar:not(.sidebar-expanded) .submenu {
        position: fixed !important;
        left: 60px !important;
        top: 0 !important; /* overridden by JS on hover */
        width: 220px !important;
        background-color: #0e0c28 !important;
        border-radius: 0 .375rem .375rem 0 !important;
        box-shadow: 4px 2px 10px rgba(0,0,0,.3) !important;
        z-index: 1041 !important;
        padding: .4rem 0 !important;
        display: none !important;
    }
    /* Only show flyout on hover when sidebar is NOT expanded */
    .nav-left-sidebar:not(.sidebar-expanded) .nav-item:hover > .submenu {
        display: block !important;
    }
    .nav-left-sidebar:not(.sidebar-expanded) .submenu .nav-item .nav-link {
        padding-left: 1.25rem !important;
        padding-right: 1rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        justify-content: flex-start !important;
    }
    /* Content area: offset by narrow sidebar */
    .dashboard-wrapper {
        margin-left: 60px !important;
        transition: margin-left 0.3s ease !important;
    }

    /* Expanded state — class toggled directly on the sidebar element by JS */
    .nav-left-sidebar.sidebar-expanded {
        width: 260px !important;
    }
    .nav-left-sidebar.sidebar-expanded .nav-label {
        display: inline !important;
    }
    .nav-left-sidebar.sidebar-expanded .navbar .navbar-nav .nav-item .nav-link {
        padding: 12px 24px !important;
        justify-content: flex-start !important;
    }
    .nav-left-sidebar.sidebar-expanded .navbar .navbar-nav .nav-item .nav-link i {
        margin-right: 12px !important;
        width: 22px !important;
        font-size: 18px !important;
        text-align: center !important;
    }
    /* In expanded mode, submenus stack inline (no flyout) and use click-toggle */
    .nav-left-sidebar.sidebar-expanded .submenu {
        position: static !important;
        width: auto !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        display: none !important;
    }
    .nav-left-sidebar.sidebar-expanded .submenu .nav-item .nav-link {
        padding-left: 56px !important;
    }
    .nav-left-sidebar.sidebar-expanded .nav-item.menu-open > .submenu {
        display: block !important;
    }
    /* dashboard-wrapper margin also handled imperatively by JS */
}

/* Mobile: reset dashboard-wrapper margin (concept template default is 260px, needs explicit override) */
@media (max-width: 991.98px) {
    .dashboard-wrapper {
        margin-left: 0 !important;
    }
}

/* Mobile: shrink table cells to fit the available width instead of clipping or scrolling.
   Excludes DataTables (.dataTable) which manage their own responsive behaviour. */
@media (max-width: 767.98px) {
    table:not(.dataTable) {
        table-layout: fixed !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    table:not(.dataTable) thead th,
    table:not(.dataTable) thead td,
    table:not(.dataTable) tbody td {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        padding: 4px 3px !important;
        font-size: 12px !important;
    }
    /* Allow .table-responsive to still scroll for tables where shrinking isn't ideal */
    .table-responsive {
        overflow-x: auto;
    }
}

/* Mobile: tighter layout spacing */
@media (max-width: 767.98px) {
    .dashboard-content {
        padding: 10px 10px 65px !important;
    }
    .card {
        margin-bottom: 0.5rem !important;
    }
    .card-header {
        padding: 0.5rem 0.75rem !important;
    }
    .card-body {
        padding: 0.5rem 0.75rem !important;
    }
    .ibox-title {
        padding: 0.5rem 0.75rem !important;
    }
    .ibox-content {
        padding: 0.5rem 0.75rem !important;
    }
    /* Compact page title row */
    .row.border-bottom.bg-white.p-3 {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    .row.border-bottom.bg-white.p-3 h2 {
        font-size: 1.25rem !important;
        margin-bottom: 0 !important;
    }
    /* Compact week label in vacation calendar */
    #weekDates {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem !important;
    }
}

/* ============================
   Top navbar actions — floating footer on mobile
   ============================ */

/* Desktop: inline in navbar, takes up remaining space */
.topnav-actions-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: .75rem;
}

/* Mobile: fixed floating bar at the bottom */
@media (max-width: 991.98px) {
    .topnav-actions-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1039;
        background: #fff;
        border-top: 1px solid #e6e6f2;
        padding: 8px 20px;
        display: flex;
        justify-content: center;
        flex: none;
        margin-left: 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,.1);
    }
    .topnav-actions-wrapper .navbar-nav {
        flex-direction: row !important;
        gap: 4px;
    }
    /* Extra bottom space so content doesn't hide behind the bar */
    .dashboard-wrapper {
        padding-bottom: 65px;
    }
}

/* Client selector dropdown in top navbar */
.navbar-client-selector .select2-container {
    min-width: 220px;
}
.navbar-client-selector select {
    min-width: 220px;
    font-size: .875rem;
}


/* ==========================================================================
   Contextual right-side menu (section landing pages)
   Two-column layout injected by _Layout.cshtml when a view defines the
   "SideMenu" section; the menu itself is rendered by _SideMenu.cshtml.
   ========================================================================== */
.content-with-sidemenu {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    align-items: flex-start;
}
.content-with-sidemenu .main-content {
    flex: 1 1 auto;
    min-width: 0; /* allow inner content (tables/grids) to shrink instead of overflow */
}
.content-with-sidemenu .content-sidemenu {
    flex: 0 0 240px;
    width: 240px;
}

.side-menu {
    position: sticky;
    top: 20px;
    background: #fff;
    border: 1px solid #e6e6f2;
    border-radius: 6px;
    padding: 8px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.side-menu-title {
    padding: 8px 20px 12px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a8a9e;
}
.side-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.side-menu-item {
    margin: 0;
}
.side-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #55556a !important;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color .12s ease, color .12s ease;
}
.side-menu-link:hover {
    background: #f5f6fb;
    color: #2f2f45 !important;
}
.side-menu-item.active > .side-menu-link {
    color: #5969ff !important;
    background: #eef0ff;
    border-left-color: #5969ff;
    font-weight: 600;
}
.side-menu-link > i {
    width: 18px;
    text-align: center;
    flex: 0 0 auto;
}
.side-menu-label {
    flex: 1 1 auto;
}
.side-menu-badge {
    flex: 0 0 auto;
    background: #5969ff;
    color: #fff;
    border-radius: 10px;
    font-size: .7rem;
    padding: 1px 8px;
    line-height: 1.4;
}

/* Mobile: menu moves above the content and goes full width */
@media (max-width: 991.98px) {
    .content-with-sidemenu {
        flex-direction: column-reverse;
    }
    .content-with-sidemenu .content-sidemenu {
        flex: 1 1 auto;
        width: 100%;
    }
    .side-menu {
        position: static;
    }
}