/* BlueThink brand colors — same palette as bt_lead_management/public/css/brand.css
   (logo blue + red). Loaded after adminlte + custom.css so these win without
   touching any page. Semantic colors (success green, warning yellow, info cyan)
   are left as-is so statuses keep their meaning. */

:root {
    --bt-blue: #085694;
    --bt-blue-dark: #06416f;
    --bt-red: #D62027;
    --bt-red-dark: #b91a20;
    --bt-blue-light: #e9f2fc;
    --bt-red-light: #fdecec;
    --bt-gradient: linear-gradient(135deg, var(--bt-blue) 0%, var(--bt-red) 100%);
}

/* Links (light pages only; :where keeps specificity at a plain `a`) */
:where(body:not(.dark-mode)) a { color: var(--bt-blue); }
:where(body:not(.dark-mode)) a:hover, :where(body:not(.dark-mode)) a:active,
:where(body:not(.dark-mode)) a:focus { color: var(--bt-blue-dark); }

/* Top bar Logout link sits on the dark navbar */
.main-header.navbar-dark .user-panel a { color: #fff; }
.main-header.navbar-dark .user-panel a:hover { color: var(--bt-blue-light); }

/* Primary = brand blue (AdminLTE/Bootstrap blue is #007bff) */
.bg-primary, .badge-primary { background-color: var(--bt-blue) !important; color: #fff; }
.text-primary { color: var(--bt-blue) !important; }
.border-primary { border-color: var(--bt-blue) !important; }
.btn-primary {
    background-color: var(--bt-blue);
    border-color: var(--bt-blue);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--bt-blue-dark);
    border-color: var(--bt-blue-dark);
    color: #fff;
}
.btn-outline-primary { color: var(--bt-blue); border-color: var(--bt-blue); }
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--bt-blue); border-color: var(--bt-blue); color: #fff;
}
.card-primary:not(.card-outline) > .card-header { background-color: var(--bt-blue); }
.card-primary.card-outline { border-top-color: var(--bt-blue); }

/* Danger = brand red */
.bg-danger, .badge-danger { background-color: var(--bt-red) !important; color: #fff; }
.text-danger { color: var(--bt-red) !important; }
.border-danger { border-color: var(--bt-red) !important; }
.btn-danger { background-color: var(--bt-red); border-color: var(--bt-red); color: #fff; }
.btn-danger:hover, .btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active { background-color: var(--bt-red-dark); border-color: var(--bt-red-dark); color: #fff; }
.btn-outline-danger { color: var(--bt-red); border-color: var(--bt-red); }
.btn-outline-danger:hover, .btn-outline-danger:focus,
.btn-outline-danger:not(:disabled):not(.disabled):active { background-color: var(--bt-red); border-color: var(--bt-red); color: #fff; }

/* Forms — custom.css used a light-blue (#66afe9) glow */
.form-control:focus {
    border-color: var(--bt-blue) !important;
    box-shadow: 0 0 0 .15rem rgba(8, 86, 148, .15) !important;
}
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--bt-blue); border-color: var(--bt-blue); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--bt-blue); }
.dropdown-item:active { background: var(--bt-blue); }

/* Pagination (DataTables) */
.page-link { color: var(--bt-blue); }
.page-item.active .page-link { background-color: var(--bt-blue); border-color: var(--bt-blue); color: #fff; }

/* Sidebar — user panel had the theme's green/purple gradient, active item was
   white with pure red text. Selected item is brand blue like the lead project. */
[class*=sidebar-dark] .user-panel { background: var(--bt-gradient); }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.dark-mode .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active,
[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active:focus,
[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active:hover {
    background: linear-gradient(135deg, var(--bt-blue) 0%, var(--bt-blue-dark) 100%);
    color: #fff;
}
[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link:focus,
[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link:hover {
    background-color: #fff;
    color: var(--bt-blue);
}

/* Page title + breadcrumb */
.content-header h1 { font-size: 1.6rem; font-weight: 600; color: var(--bt-blue); }
.content-header .breadcrumb { background: transparent; margin-bottom: 0; }
.content-header .breadcrumb-item.active { color: var(--bt-red); }

/* Table headers — keep the dark headers readable, recolored to brand blue */
.table .thead-dark th,
.table thead.table-dark th {
    background-color: var(--bt-blue);
    border-color: var(--bt-blue-dark);
    color: #fff;
}

/* DataTables export buttons (Copy / CSV / Excel / PDF / Print) */
.dt-buttons .btn, .dt-buttons .btn-secondary, .dt-button {
    background-color: var(--bt-blue); border-color: var(--bt-blue); color: #fff;
}
.dt-buttons .btn:hover, .dt-buttons .btn-secondary:hover, .dt-button:hover {
    background-color: var(--bt-blue-dark); border-color: var(--bt-blue-dark); color: #fff;
}

/* Navbar notification badge */
.navbar-badge.badge-danger { background-color: var(--bt-red) !important; }

/* Dark mode (Dashboard): brand blue is too dark on #343a40, use lighter tints */
.dark-mode .content-header h1 { color: #fff; }
.dark-mode .content-header a { color: #8cc4f2; }
.dark-mode .content-header a:hover { color: #b9dcf8; }
.dark-mode .text-primary { color: #8cc4f2 !important; }
.dark-mode .content-header .breadcrumb-item.active { color: #ff8a8f; }

/* Sidebar: make main menu vs sub menu easy to tell apart.
   Main menu = bold, full width. Sub menu = indented panel with a brand-blue
   guide line, smaller text and icons. Skipped when the sidebar is collapsed
   (icon-only mode) so the flyout keeps AdminLTE's layout. */
.nav-sidebar > .nav-item > .nav-link { font-weight: 600; }
.nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) {
    background-color: rgba(255, 255, 255, .10);
    color: #fff;
}
body:not(.sidebar-collapse) .nav-sidebar .nav-treeview {
    margin: 4px 0 6px 14px;
    padding: 4px 0;
    background-color: rgba(0, 0, 0, .22);
    border-left: 3px solid var(--bt-blue);
    border-radius: 0 6px 6px 0;
}
body:not(.sidebar-collapse) .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 12px;
    font-size: .9rem;
    font-weight: 400;
}
body:not(.sidebar-collapse) .nav-sidebar .nav-treeview > .nav-item > .nav-link .nav-icon {
    font-size: .8rem;
    width: 1.3rem;
}

/* =====================================================================
   TABLES + FILTERS — same format as the lead project (brand.css there).
   ===================================================================== */

/* Every table header: website blue, white text, one size/padding everywhere.
   Scoped to .content-wrapper so it covers all listing pages, report tables
   and DataTables without touching the sidebar or modals' layout. */
.content-wrapper .table thead th,
.content-wrapper .table thead td,
.table .thead-brand th {
    background-color: var(--bt-blue);
    border-color: var(--bt-blue-dark);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    vertical-align: middle;
    padding: .7rem .75rem;
    white-space: nowrap;
}
/* DataTables sort arrows sit on the blue header — keep them visible */
.content-wrapper table.dataTable thead .sorting:before,
.content-wrapper table.dataTable thead .sorting:after,
.content-wrapper table.dataTable thead .sorting_asc:before,
.content-wrapper table.dataTable thead .sorting_asc:after,
.content-wrapper table.dataTable thead .sorting_desc:before,
.content-wrapper table.dataTable thead .sorting_desc:after { color: #fff; }

/* Brand buttons/badge (copied from the lead project) */
.badge-brand-primary { background-color: var(--bt-blue); color: #fff; }
.btn-brand-primary {
    background-color: var(--bt-blue);
    border-color: var(--bt-blue);
    color: #fff;
}
.btn-brand-primary:hover,
.btn-brand-primary:focus {
    background-color: var(--bt-blue-dark);
    border-color: var(--bt-blue-dark);
    color: #fff;
}

/* Shared list-page filter card (resources/views/components/filter-card.blade.php)
   — identical rules to the lead project's .filter-card */
/* adminlte.min2167.css was edited to cap every .card at 600px and centre it;
   the filter card spans the full table width like in the lead project. */
.card.filter-card {
    max-width: none;
    margin: 0 0 1rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
.card-header.filter-header {
    border-left: 4px solid var(--bt-blue);
    background: var(--bt-blue-light) !important;
}
.card-header.filter-header h6 { color: var(--bt-blue); font-size: 14px; font-weight: 700; }
.filter-card .card-body { background: #f6faff; padding-bottom: 4px; }
.filter-card label { font-size: 12px; font-weight: 600; color: #495057; margin-bottom: 5px; }
.filter-card label i { color: #9aa4ae; margin-right: 5px; }
.filter-card .form-control,
.filter-card .select2-container--default .select2-selection--single {
    height: 38px; font-size: 14px; border: 1px solid #d6dce3; border-radius: 6px; background: #fff;
}
.filter-card .select2-container { width: 100% !important; }
.filter-card .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.filter-card .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.filter-card .form-control:focus { border-color: var(--bt-blue) !important; box-shadow: 0 0 0 .15rem rgba(8, 86, 148, .15) !important; }
.filter-actions { gap: 6px; }
.filter-actions .btn { height: 38px; }

/* DataTables' own "Show entries" + "Search" controls: same input look as the filter card */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    height: 38px;
    font-size: 14px;
    border: 1px solid #d6dce3;
    border-radius: 6px;
    background: #fff;
}
.dataTables_wrapper .dataTables_filter input { min-width: 220px; padding: 0 10px; }
.dataTables_wrapper .dataTables_filter input::placeholder { color: #9aa4ae; }
.dataTables_wrapper .dataTables_length select { padding: 0 24px 0 8px; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label { font-size: 14px; font-weight: 600; color: #495057; }
@media (max-width: 576px) {
    .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
}

/* Header profile menu (navbar.blade.php) */
.main-header .user-menu .user-image { width: 2.1rem; height: 2.1rem; margin-top: -4px; margin-right: .4rem; }
.main-header .user-menu > .nav-link { color: #fff; }
.main-header .user-menu .dropdown-menu { padding: 0; border: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.main-header .user-menu .user-header { background: var(--bt-gradient); color: #fff; text-align: center; padding: 18px 10px; height: auto; }
.main-header .user-menu .user-header img { width: 80px; height: 80px; border: 3px solid rgba(255, 255, 255, .6); }
.main-header .user-menu .user-header p { margin: 10px 0 0; font-size: 1.05rem; font-weight: 600; }
.main-header .user-menu .user-header small { display: block; margin-top: 4px; }
.main-header .user-menu .user-footer { background: #f6faff; padding: 10px; overflow: hidden; }
.main-header .user-menu .user-footer .btn { border-radius: 6px; }
.btn-outline-brand-primary { background-color: transparent; border: 1px solid var(--bt-blue); color: var(--bt-blue); }
.btn-outline-brand-primary:hover, .btn-outline-brand-primary:focus { background-color: var(--bt-blue); color: #fff; }
.btn-brand-accent { background-color: var(--bt-red); border-color: var(--bt-red); color: #fff; }
.btn-brand-accent:hover, .btn-brand-accent:focus { background-color: var(--bt-red-dark); border-color: var(--bt-red-dark); color: #fff; }
.main-header .user-menu .user-header .badge { font-size: .8rem; padding: .3em .7em; }

/* Simple shared form card (used by forms/addEmployee; reusable on any form page):
   <div class="card form-card"> card-header + card-body (.row of fields) + card-footer */
.card.form-card {
    max-width: 900px;            /* adminlte.min2167.css caps .card at 600px */
    margin: 0 auto 1rem;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .06);
    overflow: hidden;
}
.form-card .card-header {
    background: var(--bt-blue-light);
    border-left: 4px solid var(--bt-blue);
    border-bottom: 1px solid #dbe6f3;
}
.form-card .card-header .card-title { color: var(--bt-blue); font-size: 1rem; font-weight: 700; }
.form-card .card-body { padding: 1.5rem 1.5rem .5rem; }
.form-card label { font-size: 13px; font-weight: 600; color: #495057; margin-bottom: 6px; }
.form-card label i { color: #9aa4ae; margin-right: 6px; width: 14px; text-align: center; }
.form-card label .required { color: var(--bt-red); }
.form-card .form-control {
    height: 40px;
    font-size: 14px;
    border: 1px solid #d6dce3;
    border-radius: 6px;
    background: #fff;
    padding: 0 12px;
}
.form-card .form-control::placeholder { color: #a7b0ba; }
.form-card .form-control.is-invalid { border-color: var(--bt-red) !important; }
.form-card small.text-danger { display: block; margin-top: 4px; font-size: 12px; }
.form-card .card-footer { background: #f8fafc; border-top: 1px solid #edf1f5; padding: 1rem 1.5rem; }
.form-card .card-footer .btn { min-width: 110px; height: 40px; border-radius: 6px; }
.form-card form { display: block; width: 100%; max-width: none; margin: 0; }
.form-card .card-footer { display: block; width: 100%; margin-bottom: 0; }
.form-card .card-footer { text-align: left; }

/* Employee list: technology tags (light background; the colour is picked from
   the technology name, so the same tech always gets the same colour),
   asset/accessory count pills and the Employee ID "view" link */
.tech-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
    white-space: nowrap;
}
.tech-0 { background: #e9f2fc; color: #085694; border-color: #cfe2f7; }
.tech-1 { background: #fdecec; color: #b91a20; border-color: #f8d0d2; }
.tech-2 { background: #e8f7ee; color: #1e7b45; border-color: #c9ecd6; }
.tech-3 { background: #fff4e0; color: #9a5b00; border-color: #fbe2b5; }
.tech-4 { background: #f1ebfc; color: #5b34a8; border-color: #ddd0f6; }
.tech-5 { background: #e6f7f8; color: #0f6f78; border-color: #c4ebee; }
.tech-6 { background: #fdeef6; color: #a3326f; border-color: #f7d3e6; }
.tech-7 { background: #eef1f4; color: #3d4852; border-color: #d9dfe5; }

.count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 46px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    background: #eef1f4;
    color: #8a96a3;
}
.count-pill.is-active { background: var(--bt-blue-light); color: var(--bt-blue); }
.count-pill i { font-size: 11px; }

/* Employee enabled / disabled (Employee List + employee detail) */
.emp-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.emp-status.is-enabled { background: #e6f6ec; color: #1e7b3c; }
.emp-status.is-disabled { background: #fdecec; color: #b91a20; }
.emp-status i { font-size: 11px; }
tr.emp-disabled > td { background-color: #f6f6f7 !important; color: #8a939c; }
tr.emp-disabled .emp-link { color: #8a939c; text-decoration: line-through; }

a.emp-link { font-weight: 700; color: var(--bt-blue); border-bottom: 1px dashed rgba(8, 86, 148, .4); }
a.emp-link:hover { color: var(--bt-red); border-bottom-color: var(--bt-red); text-decoration: none; }

/* Employee detail page (table/employeeDetail) */
.profile-card .profile-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bt-gradient); color: #fff; font-size: 28px; font-weight: 700;
    flex-shrink: 0;
}
.profile-card .profile-name { font-size: 1.35rem; font-weight: 700; color: #1f2d3d; margin: 0; }
.profile-card .profile-meta { list-style: none; padding: 0; margin: 0; }
.profile-card .profile-meta li { padding: 6px 0; border-bottom: 1px dashed #e5eaf0; font-size: 14px; }
.profile-card .profile-meta li:last-child { border-bottom: 0; }
.profile-card .profile-meta li i { width: 20px; color: #9aa4ae; }
.profile-card .profile-meta li span.meta-label { display: inline-block; min-width: 110px; color: #6c757d; }
.stat-tile {
    border-radius: 8px; padding: 14px 16px; background: var(--bt-blue-light); color: var(--bt-blue);
    display: flex; align-items: center; gap: 12px; height: 100%;
}
.stat-tile .stat-icon { font-size: 22px; opacity: .85; }
.stat-tile .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-tile .stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat-tile.is-red { background: var(--bt-red-light); color: var(--bt-red-dark); }
.section-card { margin-bottom: 1rem; }
.section-card .card-header { background: #fff; border-left: 4px solid var(--bt-blue); }
.section-card .card-header .card-title { font-size: 1rem; font-weight: 700; color: var(--bt-blue); }
.section-card .empty-state { padding: 28px 10px; text-align: center; color: #8a96a3; }
.section-card .empty-state i { font-size: 28px; display: block; margin-bottom: 8px; opacity: .6; }
.card.section-card, .card.profile-card { max-width: none; margin: 0 0 1rem; }  /* undo adminlte .card 600px cap */
.section-card .card-footer, .profile-card .card-footer { display: block; }
.profile-card .card-footer { text-align: left; background: #fff; }

/* Searchable filter dropdowns (Select2 inside .filter-card) */
.filter-card .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 10px; color: #495057; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #d6dce3; border-radius: 4px; height: 34px; padding: 0 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--bt-blue); outline: 0; }
.select2-dropdown { border-color: #d6dce3; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }

/* Add / Edit employee popups (forms/partials/employee-modals) */
.employee-modal .modal-content { border: 0; border-radius: 10px; overflow: hidden; }
.employee-modal .modal-header { background: var(--bt-blue-light); border-left: 4px solid var(--bt-blue); border-bottom: 1px solid #dbe6f3; }
.employee-modal .modal-title { color: var(--bt-blue); font-weight: 700; font-size: 1.05rem; }
.employee-modal .modal-body { padding: 1.4rem 1.5rem .4rem; }
.employee-modal label { font-size: 13px; font-weight: 600; color: #495057; margin-bottom: 6px; }
.employee-modal label i { color: #9aa4ae; margin-right: 6px; width: 14px; text-align: center; }
.employee-modal label .required { color: var(--bt-red); }
.employee-modal .form-control { height: 40px; font-size: 14px; border: 1px solid #d6dce3; border-radius: 6px; padding: 0 12px; }
.employee-modal .form-control.is-invalid { border-color: var(--bt-red) !important; }
.employee-modal small.text-danger { display: block; margin-top: 4px; font-size: 12px; }
.employee-modal .modal-footer { background: #f8fafc; border-top: 1px solid #edf1f5; }
.employee-modal .modal-footer .btn { min-width: 110px; height: 40px; border-radius: 6px; }
/* Searchable dropdowns (Select2) inside the Add / Edit popups: same height as the other inputs */
.employee-modal .select2-container { width: 100% !important; }
.employee-modal .select2-container--default .select2-selection--single { height: 40px; border: 1px solid #d6dce3; border-radius: 6px; }
.employee-modal .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 12px; color: #495057; }
.employee-modal .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.employee-modal .form-control.is-invalid + .select2-container .select2-selection--single { border-color: var(--bt-red); }
.employee-modal textarea.form-control { height: auto; min-height: 70px; padding: 8px 12px; }
.content-header .btn[data-toggle="modal"] { margin-top: 4px; }
.content-header .btn[data-toggle="modal"] { margin-bottom: 8px; }
/* page-header 'action' link button (e.g. Add Role / Register User) — same spacing as the popup button */
.content-header > .container-fluid > a.btn { margin: 4px 0 8px; }

/* =====================================================================
   Shared form layout — one structure for every data-entry page
   (forms/stock, forms/editstock, forms/addEmployee):
   <div class="card form-card form-card-wide">
     <div class="card-header"><h3 class="card-title">…</h3></div>
     <div class="card-body">
       <div class="form-section">
         <div class="form-section-title"><i class="fas fa-x"></i><span>Title<small>hint</small></span></div>
         <div class="row"> …col-md-3 fields… </div>
       </div>
     </div>
     <div class="card-footer">buttons</div>
   </div>
   ===================================================================== */
.card.form-card.form-card-wide { max-width: none; margin: 0 0 1rem; }
.form-card .form-section { padding-bottom: .4rem; margin-bottom: 1.1rem; border-bottom: 1px dashed #e1e7ee; }
.form-card .form-section:last-child { border-bottom: 0; margin-bottom: 0; }
.form-card .form-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: .9rem; }
.form-card .form-section-title > i {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bt-blue-light); color: var(--bt-blue); font-size: 13px;
}
.form-card .form-section-title span { font-weight: 700; color: #1f2d3d; font-size: .95rem; line-height: 1.2; }
.form-card .form-section-title small { display: block; font-weight: 400; color: #8a96a3; font-size: .78rem; }
.form-card .form-group { margin-bottom: .9rem; }
.form-card select.form-control { padding: 0 8px; }
.form-card textarea.form-control { height: auto; min-height: 76px; padding: 8px 12px; }
.form-card .form-control[readonly] { background: #f4f6f9; color: #495057; }
.form-card #role { border: 1px solid #d6dce3; }   /* custom.css removes the border of #role (old input-group design) */
.form-card .form-text { font-size: 12px; color: #8a96a3; margin-top: 4px; }
.form-card .select2-container--default .select2-selection--single {
    height: 40px; border: 1px solid #d6dce3; border-radius: 6px;
}
.form-card .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 12px; }
.form-card .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.form-card .select2-container { width: 100% !important; }

/* Side info card next to a form (same look as form-card) */
.card.form-side-card { max-width: none; margin: 0 0 1rem; border: 0; border-radius: 8px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .06); }
.form-side-card .card-header { background: var(--bt-blue-light); border-left: 4px solid var(--bt-blue); border-bottom: 1px solid #dbe6f3; }
.form-side-card .card-header .card-title { color: var(--bt-blue); font-size: 1rem; font-weight: 700; }
.form-side-card .card-footer { display: block; background: #f8fafc; }
.form-side-person { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.form-side-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; background: var(--bt-gradient); color: #fff; font-size: 20px; font-weight: 700; }
.form-side-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.form-side-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #e5eaf0; }
.form-side-list li:last-child { border-bottom: 0; }
.form-side-list li span { color: #6c757d; }
.form-side-list li strong { text-align: right; word-break: break-word; }

/* Allotment form (forms/stock): "how it works" strip + employee section */
.allot-steps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.2rem; }
.allot-step { flex: 1 1 220px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    border-radius: 8px; background: #f6faff; border: 1px solid #dbe6f3; font-size: 13px; color: #495057; }
.allot-step b { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; background: var(--bt-blue); color: #fff; font-size: 12px; }
.form-card #hidden_div { flex-wrap: wrap; margin-top: .2rem; padding-top: 1rem; border-top: 1px dashed #e1e7ee; }

/* Field help icon (tooltip) + toast notifications — forms/stock */
.form-card label .field-help { color: #9aa4ae; margin: 0 0 0 5px; width: auto; cursor: help; font-size: 12px; }
.form-card label .field-help:hover { color: var(--bt-blue); }
.tooltip-inner { max-width: 280px; text-align: left; font-size: 12.5px; padding: 8px 10px; background: #1f2d3d; }
.allot-toast { min-width: 300px; max-width: 380px; }
.allot-toast .toast-body ul { font-size: 13px; }
.form-card .js-field-error { display: block; margin-top: 4px; font-size: 12px; }
.bt-swal-text { white-space: pre-line; text-align: left; font-size: 15px; }

/* Fixed footer (body.layout-footer-fixed) is drawn over the bottom of the page and the
   content area reserves no room for it, so the last thing on a long page (e.g. a form's
   Submit button) ended up hidden behind it. Leave footer-height space after the content. */
.layout-footer-fixed .content-wrapper::after {
    content: "";
    display: block;
    height: 4.5rem;
}

/* =====================================================================
   Asset tables — one look for Installed / Available / All Assets.
   <table id="example1" class="table table-bordered table-striped table-hover asset-table">
   Cells come from resources/views/components/asset/* (id, owner, status, stamp, spec).
   ===================================================================== */
.asset-table th, .asset-table td { padding: .6rem .75rem !important; vertical-align: middle !important; border-color: #dee2e6; text-transform: none; }
.asset-table td { font-size: .9rem; }
.asset-table .btn-group .btn { padding: .25rem .5rem; }

.asset-id-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: .3rem .6rem;
    border-radius: 999px; background: var(--bt-blue-light); border: 1px solid rgba(8, 86, 148, .25); color: var(--bt-blue);
    font-weight: 700; font-size: .85rem; line-height: 1; white-space: nowrap; }
.asset-id-pill i { font-size: .7rem; margin-right: .3rem; opacity: .7; }
.asset-id-pill.is-empty { background: #f1f3f5; border-color: #dee2e6; color: #868e96; font-weight: 600; }

/* Two-line cells: main value + small secondary value */
.cell-stack { line-height: 1.3; min-width: 120px; }
.cell-stack .cell-main { font-weight: 600; color: #212529; white-space: nowrap; }
.cell-stack .cell-sub, .asset-table .cell-sub { font-size: .8rem; color: #6c757d; white-space: nowrap; }
.cell-stack .cell-label { display: inline-block; min-width: 54px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: #868e96; }
.cell-stack.spec .cell-main, .cell-stack.spec .cell-sub { font-weight: 500; font-size: .85rem; color: #343a40; }
.cell-stack .cell-time { font-weight: 500; font-size: .8rem; color: #6c757d; margin-left: .25rem; }

.status-badge { font-size: .78rem; padding: .35em .65em; }

/* Owned By chips: Bluethink = light brand blue, Vendor = light amber */
.owner-chip { display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 6px; border: 1px solid #dee2e6;
    background: #f1f3f5; color: #495057; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.owner-chip i { font-size: .72rem; margin-right: .35rem; }
.owner-chip.owner-bluethink { background: var(--bt-blue-light); border-color: rgba(8, 86, 148, .25); color: var(--bt-blue); }
.owner-chip.owner-vendor { background: #fff4e5; border-color: rgba(214, 120, 0, .3); color: #b45f06; }
.asset-age { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.asset-age i { font-size: .62rem; margin-right: .3rem; }
.asset-age.is-new { background: #e8f7ee; color: #1e7b45; }
.asset-age.is-old { background: #eef1f4; color: #5a6672; }

/* Remark: 2 lines, full text on hover (and in exports) */
.cell-remark { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    max-width: 220px; min-width: 140px; font-size: .85rem; color: #495057; line-height: 1.35; cursor: help; }
.cell-remark.is-empty { color: #adb5bd; cursor: default; }

/* Warranty state chip */
.warranty-chip { display: inline-flex; align-items: center; gap: 4px; padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.warranty-chip.is-active { background: #e8f7ee; color: #1e7b45; }
.warranty-chip.is-expired { background: var(--bt-red-light); color: var(--bt-red-dark); }
.warranty-chip.is-none { background: #f1f3f5; color: #868e96; }

/* =====================================================================
   Warranty List — quick-filter tiles + remaining-time bar
   ===================================================================== */
.warranty-tiles a.stat-tile { text-decoration: none; border: 2px solid transparent; transition: transform .12s, box-shadow .12s; }
.warranty-tiles a.stat-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.warranty-tiles a.stat-tile.is-selected { border-color: currentColor; }
.stat-tile.is-amber { background: #fff4e0; color: #9a5b00; }
.stat-tile.is-green { background: #e8f7ee; color: #1e7b45; }
.warranty-chip.is-soon { background: #fff4e0; color: #9a5b00; }
.warranty-bar { height: 6px; width: 120px; max-width: 100%; border-radius: 999px; background: #eef1f4; overflow: hidden; margin-top: 6px; }
.warranty-bar span { display: block; height: 100%; border-radius: 999px; background: #28a745; }
.warranty-bar.is-soon span { background: #f0a020; }
.warranty-bar.is-expired span { background: var(--bt-red); }
/* Navbar warranty bell */
.navbar-warranty .dropdown-menu { min-width: 320px; }
.navbar-warranty .dropdown-item { white-space: normal; font-size: 13px; }
.navbar-warranty .dropdown-item small { color: #8a96a3; }

/* =====================================================================
   Category-wise count tiles (resources/views/components/category-counts)
   ===================================================================== */
.cat-counts { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-count { display: flex; align-items: center; gap: 10px; min-width: 140px; flex: 1 1 140px; max-width: 260px; padding: 10px 14px;
    background: #fff; border: 1px solid #e1e7ee; border-left: 4px solid var(--bt-blue); border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05); color: #1f2d3d; text-decoration: none !important; transition: transform .12s, box-shadow .12s; }
.cat-count:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); color: #1f2d3d; }
.cat-count.is-selected { background: var(--bt-blue-light); border-color: var(--bt-blue); }
.cat-count.is-all { border-left-color: var(--bt-red); }
.cat-count-icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: var(--bt-blue-light); color: var(--bt-blue); font-size: 15px; overflow: hidden; }
.cat-count.is-all .cat-count-icon { background: var(--bt-red-light); color: var(--bt-red-dark); }
.cat-count-icon img { max-width: 28px; max-height: 28px; object-fit: contain; }
.cat-count-text { display: flex; flex-direction: column; line-height: 1.15; }
.cat-count-value { font-size: 1.35rem; font-weight: 700; color: var(--bt-blue); }
.cat-count.is-all .cat-count-value { color: var(--bt-red-dark); }
.cat-count-label { font-size: 12px; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; }

/* =====================================================================
   Wide tables scroll inside their own box, not the whole page. The page-level
   scrollbar used to sit at the bottom over the sidebar. Only the table row of the
   DataTables layout scrolls (the Copy / Excel / Column-visibility row stays outside,
   so its dropdown is not cut off). Tables without DataTables: their .responsive_tab box.
   ===================================================================== */
.dataTables_wrapper > .row > .col-sm-12:only-child { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dataTables_wrapper > .row > .col-sm-12:only-child > table.dataTable { margin-top: 0 !important; }
.responsive_tab:not(:has(.dataTables_wrapper)) { width: 100%; overflow-x: auto; }