/*
 * File name: fx-theme.css
 * Fixail admin — global "modern skin" layer.
 *
 * This is a presentation-only layer that restyles the SHARED building blocks
 * (cards, buttons, forms, tables, badges, sidebar, navbar, modals). It does not
 * restructure any page. It is loaded AFTER adminlte.min.css / styles.min.css /
 * <theme_color>.min.css and BEFORE each page's @yield('css_custom'), so:
 *   - it wins over AdminLTE defaults
 *   - pages with their own look (dashboard, work insight) still win over it
 *
 * Design tokens mirror the ones already used by the operations dashboard so the
 * whole admin reads as one system. Not part of a build pipeline — edit directly.
 */

/* =========================================================
   1. Design tokens
========================================================= */
:root {
    --fx-bg:          #f0f2f8;
    --fx-card:        #ffffff;
    --fx-primary:     #2563eb;
    --fx-primary-lt:  #eff6ff;
    --fx-success:     #16a34a;
    --fx-success-lt:  #f0fdf4;
    --fx-warning:     #d97706;
    --fx-warning-lt:  #fffbeb;
    --fx-danger:      #dc2626;
    --fx-danger-lt:   #fef2f2;
    --fx-info:        #0891b2;
    --fx-info-lt:     #ecfeff;
    --fx-purple:      #7c3aed;
    --fx-purple-lt:   #f5f3ff;
    --fx-text:        #1e293b;
    --fx-muted:       #64748b;
    --fx-border:      #e2e8f0;
    --fx-border-soft: #eef1f6;
    --fx-hover:       rgba(37, 99, 235, .045);
    --fx-shadow:      0 1px 3px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .04);
    --fx-shadow-md:   0 4px 6px rgba(16, 24, 40, .05), 0 10px 30px rgba(16, 24, 40, .08);
    --fx-ring:        0 0 0 3px rgba(37, 99, 235, .12);
    --fx-radius:      14px;
    --fx-radius-sm:   8px;
    --fx-radius-xs:   6px;
}

body.dark-mode {
    --fx-bg:          #1a2027;
    --fx-card:        #343a40;
    --fx-text:        #e9ecef;
    --fx-muted:       #adb5bd;
    --fx-border:      #4b545c;
    --fx-border-soft: #454d55;
    --fx-hover:       rgba(255, 255, 255, .04);
    --fx-shadow:      0 1px 3px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .2);
    --fx-shadow-md:   0 4px 6px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .3);
    --fx-primary-lt:  rgba(37, 99, 235, .18);
    --fx-success-lt:  rgba(22, 163, 74, .18);
    --fx-warning-lt:  rgba(217, 119, 6, .18);
    --fx-danger-lt:   rgba(220, 38, 38, .18);
    --fx-info-lt:     rgba(8, 145, 178, .18);
    --fx-purple-lt:   rgba(124, 58, 237, .18);
}

/* =========================================================
   2. Page canvas & typography
========================================================= */
body {
    background-color: var(--fx-bg);
    color: var(--fx-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content-wrapper {
    background-color: var(--fx-bg);
}

/* ── Gutter for pages that skip the .content wrapper ─────────────────────────
   Most templates wrap their body in `<div class="content">`, which styles.min.css
   gives `padding: 1rem 1.5rem`. A number of pages — most of the parts module
   (part_catalog, part_stock, purchase_orders, warehouses, …) plus a few others —
   drop the .card straight into .content-wrapper instead. That direct-child
   selector then doesn't match, so those cards run flush to the viewport edges.
   Give the direct children the same inset rather than editing ~20 templates.
   Cards already inside a .content wrapper are untouched (they aren't direct
   children), so this can't double up the padding.
   -------------------------------------------------------------------------- */
.content-wrapper > .card,
.content-wrapper > .alert,
.content-wrapper > .table-responsive {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 767.98px) {
    .content-wrapper > .card,
    .content-wrapper > .alert,
    .content-wrapper > .table-responsive {
        margin-left: .75rem;
        margin-right: .75rem;
    }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--fx-text);
    letter-spacing: -.2px;
}

.text-muted,
small.text-muted {
    color: var(--fx-muted) !important;
}

a {
    transition: color .15s ease;
}

/* ── Content header: page title + breadcrumb ── */
.content-header {
    padding: 22px 1.5rem 6px;
}

.content-header h1 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.3px;
}

.content-header h1 small {
    font-size: .8rem;
    font-weight: 400;
    color: var(--fx-muted);
}

.content-header .breadcrumb {
    background-color: var(--fx-card) !important;
    border: 1px solid var(--fx-border);
    box-shadow: var(--fx-shadow);
    font-size: .78rem;
    font-weight: 500;
    margin-bottom: 0;
}

.content-header .breadcrumb-item.active {
    color: var(--fx-muted);
}

/* =========================================================
   3. Cards — the single most-repeated container
========================================================= */
.card {
    background-color: var(--fx-card);
    border: none;
    border-radius: var(--fx-radius);
    box-shadow: var(--fx-shadow);
    margin-bottom: 1.25rem;
}

/* AdminLTE ships .shadow-sm on most cards; keep the softer token shadow. */
.card.shadow-sm,
.card.shadow {
    box-shadow: var(--fx-shadow) !important;
}

.card > .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--fx-border-soft);
    border-radius: var(--fx-radius) var(--fx-radius) 0 0;
    padding: .85rem 1.25rem;
}

.card > .card-header .card-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--fx-text);
}

.card > .card-body {
    padding: 1.25rem;
}

.card > .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--fx-border-soft);
    border-radius: 0 0 var(--fx-radius) var(--fx-radius);
    padding: .85rem 1.25rem;
}

.card-outline {
    border-top: 3px solid var(--fx-primary);
}

/* ── Tabs living inside a card header ────────────────────────────────────────
   Every index page uses the same shape: a .card-header-tabs list ("Table" /
   "Create") plus the export/columns/refresh toolbar. Bootstrap gives
   .card-header-tabs negative margins so square tabs sit ON the header's bottom
   border. We render them as pills instead, so that negative margin makes the
   active pill collide with the divider below it. Reset the margins and give the
   items breathing room from each other.
   -------------------------------------------------------------------------- */
.card > .card-header .nav-tabs {
    border-bottom: none;
}

.card > .card-header .nav-tabs.card-header-tabs {
    margin: 0;
    align-items: center;
}

.card > .card-header .nav-item + .nav-item {
    margin-left: .3rem;
}

/* Keeps the pill clear of the header's top and bottom edges. */
.card > .card-header .nav-item > .nav-link {
    margin: .15rem 0;
}

.card .card-header .nav-link {
    border: none !important;
    border-radius: var(--fx-radius-sm);
    font-size: .82rem;
    font-weight: 600;
    color: var(--fx-muted);
    padding: .4rem .75rem;
    transition: background-color .15s ease, color .15s ease;
}

.card .card-header .nav-link:hover {
    background-color: var(--fx-hover);
}

.card .card-header .nav-tabs .nav-link.active {
    background-color: var(--fx-primary-lt);
    color: var(--fx-primary) !important;
}

/* =========================================================
   4. Buttons
========================================================= */
.btn {
    border-radius: var(--fx-radius-sm);
    font-weight: 600;
    font-size: .82rem;
    padding: .42rem .95rem;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.btn:focus,
.btn.focus {
    box-shadow: var(--fx-ring);
}

.btn:not(.disabled):not(:disabled):hover {
    transform: translateY(-1px);
}

.btn:not(.disabled):not(:disabled):active {
    transform: translateY(0);
}

.btn-sm {
    font-size: .75rem;
    padding: .28rem .65rem;
    border-radius: var(--fx-radius-xs);
}

.btn-lg {
    font-size: .95rem;
    padding: .6rem 1.4rem;
    border-radius: var(--fx-radius-sm);
}

.btn-default {
    background-color: var(--fx-card);
    border-color: var(--fx-border);
    color: var(--fx-text);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background-color: var(--fx-bg);
    border-color: var(--fx-border);
    color: var(--fx-text);
}

.btn-link {
    font-weight: 600;
    text-decoration: none;
}

/* Row-action button groups in datatables — keep them tight, no hover jump. */
.table .btn-group .btn,
.btn-group-vertical .btn {
    transform: none !important;
}

.btn-group > .btn:first-child:not(:last-child) {
    border-top-left-radius: var(--fx-radius-xs);
    border-bottom-left-radius: var(--fx-radius-xs);
}

.btn-group > .btn:last-child:not(:first-child) {
    border-top-right-radius: var(--fx-radius-xs);
    border-bottom-right-radius: var(--fx-radius-xs);
}

/* =========================================================
   5. Forms
========================================================= */
label,
.control-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--fx-muted);
    letter-spacing: .01em;
    margin-bottom: .35rem;
}

.form-control,
.custom-select,
.custom-file-label {
    border-radius: var(--fx-radius-sm);
    border: 1px solid var(--fx-border);
    background-color: var(--fx-card);
    color: var(--fx-text);
    font-size: .85rem;
    height: calc(2.25rem + 2px);
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control {
    height: auto;
}

/* Re-assert Bootstrap's size modifiers — the base rule above would win on
   document order otherwise and inflate every small/large input. */
.form-control-sm,
.custom-select-sm {
    height: calc(1.8125rem + 2px);
    font-size: .78rem;
    padding: .25rem .5rem;
    border-radius: var(--fx-radius-xs);
}

.form-control-lg,
.custom-select-lg {
    height: calc(2.875rem + 2px);
    font-size: 1rem;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--fx-primary);
    box-shadow: var(--fx-ring);
}

.form-control::placeholder {
    color: var(--fx-muted);
    opacity: .65;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--fx-bg);
    opacity: 1;
}

.input-group-text {
    border-radius: var(--fx-radius-sm);
    border-color: var(--fx-border);
    background-color: var(--fx-bg);
    color: var(--fx-muted);
    font-size: .85rem;
}

.input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-text {
    color: var(--fx-muted);
}

.is-invalid,
.form-control.is-invalid {
    border-color: var(--fx-danger);
}

.invalid-feedback {
    font-size: .74rem;
}

/* The generator's "actions" row at the bottom of every create/edit form */
.card-body form div.form-group.col-12.text-right {
    border-top: 1px solid var(--fx-border-soft);
}

/* ── Select2 — match the native control exactly ──────────────────────────────
   Pages load one of two select2 themes: the built-in `--default` or the
   `--bootstrap4` add-on. The bootstrap4 theme never sets a font-size, so its
   controls inherit the body's 1rem and render noticeably larger than the
   adjacent .form-control; it also pins its heights with !important. Every rule
   below therefore names BOTH themes, and the height rules carry !important to
   win against `.select2-container--bootstrap4 .select2-selection--single`.
   -------------------------------------------------------------------------- */
.select2-container .select2-selection {
    font-family: inherit;
    font-size: .85rem;
}

.select2-container--default .select2-selection--single,
.select2-container--bootstrap4 .select2-selection--single {
    height: calc(2.25rem + 2px) !important;
    border-radius: var(--fx-radius-sm);
    border-color: var(--fx-border);
    background-color: var(--fx-card);
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: calc(2.25rem + 2px);
    padding-left: .75rem;
    padding-right: 2rem;
    color: var(--fx-text);
    font-size: .85rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    line-height: calc(2.25rem + 2px);
    color: var(--fx-muted);
    font-size: .85rem;
}

/* Swap both themes' CSS-triangle arrow for the same chevron the dashboard uses. */
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 8px;
    height: calc(2.25rem + 2px);
    width: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg);
}

/* ── Multi-select ── */
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: calc(2.25rem + 2px) !important;
    border-radius: var(--fx-radius-sm);
    border-color: var(--fx-border);
    background-color: var(--fx-card);
    padding-bottom: 2px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    border: none;
    border-radius: 20px;
    background-color: var(--fx-primary-lt);
    color: var(--fx-primary);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 1px 9px 1px 4px;
    margin-top: 5px;
    margin-right: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--fx-primary);
    opacity: .55;
    font-weight: 600;
    margin: 0 3px 0 2px;
    padding: 0 2px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--fx-primary);
    opacity: 1;
}

/* The inline "type to search" input inside a multi-select inherits 1rem too. */
.select2-container .select2-search--inline .select2-search__field {
    font-family: inherit;
    font-size: .85rem;
    margin-top: 7px;
    line-height: 1.2;
}

/* ── Focus ── */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--fx-primary);
    box-shadow: var(--fx-ring);
}

/* ── Dropdown ── */
.select2-dropdown,
.select2-container--bootstrap4 .select2-dropdown {
    border-radius: var(--fx-radius-sm);
    border-color: var(--fx-border);
    box-shadow: var(--fx-shadow-md);
    overflow: hidden;
}

/* Both themes square off the corner where the dropdown meets the control;
   with a rounded control that reads as a glitch, so keep the radius. */
.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below {
    border-top: 1px solid var(--fx-border);
    border-radius: var(--fx-radius-sm);
}

.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
    border-radius: var(--fx-radius-sm);
}

.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection,
.select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection,
.select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection {
    border-bottom: 1px solid var(--fx-primary);
    border-radius: var(--fx-radius-sm);
}

.select2-container--default .select2-results__option,
.select2-container--bootstrap4 .select2-results__option {
    font-size: .84rem;
    padding: .4rem .75rem;
}

.select2-container--default .select2-results__group,
.select2-container--bootstrap4 .select2-results__group {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fx-muted);
}

.select2-search--dropdown .select2-search__field {
    border-radius: var(--fx-radius-xs);
    border-color: var(--fx-border);
    font-family: inherit;
    font-size: .84rem;
}

.select2-results__message {
    font-size: .82rem;
    color: var(--fx-muted);
}

/* Compact select2 inside card headers keeps its own smaller sizing (styles.min.css) */
.card .card-header .select2-container--default .select2-selection--single,
.card .card-header .select2-container--bootstrap4 .select2-selection--single {
    height: 30px !important;
}

.card .card-header .select2-container--default .select2-selection--single .select2-selection__rendered,
.card .card-header .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
}

.card .card-header .select2-container--default .select2-selection--single .select2-selection__arrow,
.card .card-header .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: 30px;
}

/* =========================================================
   6. Tables & DataTables
========================================================= */
.table {
    color: var(--fx-text);
}

.table thead th,
table.dataTable thead > tr > th {
    border-top: none;
    border-bottom: 1px solid var(--fx-border);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fx-muted);
    padding: .7rem .75rem;
}

.table td,
table.dataTable tbody td {
    border-top: 1px solid var(--fx-border-soft);
    font-size: .84rem;
    padding: .65rem .75rem;
}

/* Same reason as .form-control-sm: restore the compact table modifier. */
.table-sm th,
.table-sm td,
.table-sm thead th {
    padding: .3rem;
}

.table tbody tr {
    transition: background-color .12s ease;
}

.table-hover tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: var(--fx-hover);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(16, 24, 40, .015);
}

table.dataTable tr.group.group-start {
    background-color: var(--fx-bg);
}

table.dataTable tr.group.group-start td {
    color: var(--fx-text);
    letter-spacing: .02em;
}

/* Sort arrows: mute them so headers stay clean */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    opacity: .3;
}

/* ── DataTables chrome: search box, length select, info, pagination ── */
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border-radius: var(--fx-radius-sm);
    border: 1px solid var(--fx-border);
    background-color: var(--fx-card);
    color: var(--fx-text);
    font-size: .82rem;
    padding: .3rem .7rem;
    height: auto;
    transition: border-color .15s ease, box-shadow .15s ease;
}

div.dataTables_wrapper div.dataTables_filter input:focus,
div.dataTables_wrapper div.dataTables_length select:focus {
    outline: none;
    border-color: var(--fx-primary);
    box-shadow: var(--fx-ring);
}

div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_length label {
    font-size: .78rem;
    color: var(--fx-muted);
    font-weight: 500;
}

div.dataTables_wrapper div.dataTables_info {
    font-size: .76rem;
    color: var(--fx-muted);
}

div.dataTables_wrapper .dataTables_processing {
    border-radius: var(--fx-radius-sm);
    box-shadow: var(--fx-shadow-md);
    border: none;
    background: var(--fx-card);
    color: var(--fx-text);
    font-weight: 600;
    font-size: .82rem;
}

.page-link {
    border: none;
    background-color: transparent;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.page-link:hover {
    background-color: var(--fx-hover);
}

.page-item.active .page-link {
    border-radius: 70px;
    box-shadow: none;
}

/* =========================================================
   7. Badges, alerts, callouts
========================================================= */
.badge {
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .32em .7em;
}

/* Soft-tone status pills instead of loud solid fills. */
.badge-primary   { background-color: var(--fx-primary-lt); color: var(--fx-primary); }
.badge-success   { background-color: var(--fx-success-lt); color: var(--fx-success); }
.badge-warning   { background-color: var(--fx-warning-lt); color: var(--fx-warning); }
.badge-danger    { background-color: var(--fx-danger-lt);  color: var(--fx-danger); }
.badge-info      { background-color: var(--fx-info-lt);    color: var(--fx-info); }
.badge-secondary { background-color: var(--fx-bg);         color: var(--fx-muted); }
.badge-light     { background-color: var(--fx-bg);         color: var(--fx-muted); }
.badge-dark      { background-color: rgba(30, 41, 59, .1); color: var(--fx-text); }

.alert {
    border: none;
    border-radius: var(--fx-radius-sm);
    box-shadow: var(--fx-shadow);
    font-size: .85rem;
    padding: .8rem 1.1rem;
}

.alert-success { background-color: var(--fx-success-lt); color: var(--fx-success); }
.alert-danger  { background-color: var(--fx-danger-lt);  color: var(--fx-danger); }
.alert-warning { background-color: var(--fx-warning-lt); color: var(--fx-warning); }
.alert-info    { background-color: var(--fx-info-lt);    color: var(--fx-info); }

.alert .close {
    text-shadow: none;
    opacity: .5;
}

.callout {
    border-radius: var(--fx-radius-sm);
    box-shadow: var(--fx-shadow);
    border-left-width: 4px;
}

/* =========================================================
   8. Dropdowns, modals, tooltips
========================================================= */
.dropdown-menu {
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius-sm);
    box-shadow: var(--fx-shadow-md);
    padding: .35rem;
    font-size: .84rem;
}

.dropdown-item {
    border-radius: var(--fx-radius-xs);
    padding: .45rem .7rem;
    font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--fx-hover);
}

.dropdown-divider {
    border-top-color: var(--fx-border-soft);
    margin: .35rem 0;
}

.modal-content {
    border: none;
    border-radius: var(--fx-radius);
    box-shadow: var(--fx-shadow-md);
}

.modal-header {
    border-bottom: 1px solid var(--fx-border-soft);
    padding: 1rem 1.25rem;
}

.modal-header .modal-title {
    font-size: 1rem;
    font-weight: 700;
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--fx-border-soft);
    padding: .85rem 1.25rem;
}

.tooltip-inner {
    border-radius: var(--fx-radius-xs);
    font-size: .75rem;
    padding: .35rem .6rem;
}

.popover {
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius-sm);
    box-shadow: var(--fx-shadow-md);
}

/* =========================================================
   9. Navbar, sidebar, footer
========================================================= */
.main-header {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.main-header .nav-link {
    font-size: .85rem;
    font-weight: 500;
    border-radius: var(--fx-radius-sm);
}

.main-sidebar {
    box-shadow: 1px 0 3px rgba(16, 24, 40, .06);
}

.main-sidebar .brand-link {
    padding: .9rem 1rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.nav-sidebar .nav-link {
    border-radius: var(--fx-radius-sm);
    margin: 1px .5rem;
    padding: .5rem .8rem;
    font-size: .86rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link.active {
    font-weight: 600;
    box-shadow: none;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 1.4rem;
}

.nav-sidebar .nav-icon {
    width: 1.4rem;
    text-align: center;
    opacity: .85;
}

.nav-sidebar .nav-header {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    opacity: .55;
    padding: 1rem 1.3rem .35rem;
}

.main-footer {
    background-color: transparent;
    border-top: 1px solid var(--fx-border-soft);
    box-shadow: none !important;
    color: var(--fx-muted);
    font-size: .78rem;
    padding: .9rem 1.5rem;
}

/* =========================================================
   10. Stat widgets used by the older pages
========================================================= */
.small-box,
.info-box {
    border-radius: var(--fx-radius);
    box-shadow: var(--fx-shadow) !important;
    transition: transform .15s ease, box-shadow .15s ease;
}

.small-box:hover,
.info-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--fx-shadow-md) !important;
}

.small-box > .inner h3 {
    font-weight: 800;
    letter-spacing: -.5px;
}

.small-box > .small-box-footer {
    border-bottom-left-radius: var(--fx-radius);
    border-bottom-right-radius: var(--fx-radius);
}

.info-box {
    background-color: var(--fx-card);
}

.info-box .info-box-icon {
    border-radius: var(--fx-radius-sm);
}

.info-box .info-box-text {
    font-size: .76rem;
    color: var(--fx-muted);
}

.info-box .info-box-number {
    font-weight: 800;
    font-size: 1.3rem;
}

.progress {
    border-radius: 20px;
    background-color: var(--fx-bg);
}

.progress-bar {
    border-radius: 20px;
}

/* =========================================================
   11. Misc plugin surfaces
========================================================= */
.note-editor.note-frame {
    border-radius: var(--fx-radius-sm);
    border-color: var(--fx-border);
}

.dropzone {
    border-radius: var(--fx-radius-sm);
    border-color: var(--fx-border);
}

.custom-control-label::before {
    border-radius: var(--fx-radius-xs);
    border-color: var(--fx-border);
}

.custom-switch .custom-control-label::before {
    border-radius: 20px;
}

.nav-pills .nav-link {
    border-radius: var(--fx-radius-sm);
    font-size: .84rem;
    font-weight: 600;
}

.list-group-item {
    border-color: var(--fx-border-soft);
    background-color: var(--fx-card);
    font-size: .85rem;
}

.list-group-item:first-child {
    border-top-left-radius: var(--fx-radius-sm);
    border-top-right-radius: var(--fx-radius-sm);
}

.list-group-item:last-child {
    border-bottom-left-radius: var(--fx-radius-sm);
    border-bottom-right-radius: var(--fx-radius-sm);
}

/* =========================================================
   12. Login / register
========================================================= */
.login-page,
.register-page {
    background-color: var(--fx-bg);
}

.login-box .card,
.register-box .card {
    border-radius: var(--fx-radius);
    box-shadow: var(--fx-shadow-md);
}

/* =========================================================
   13. Accessibility
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .small-box,
    .info-box,
    .table tbody tr,
    .nav-sidebar .nav-link,
    .card .card-header .nav-link {
        transition: none !important;
    }

    .btn:not(.disabled):not(:disabled):hover,
    .small-box:hover,
    .info-box:hover {
        transform: none !important;
    }
}