:root {
    --au-navy: #1c3557;
    --au-blue: #1a4f8a;
    --au-blue-light: #2563a8;
    --au-border: #e2e8f0;
    --au-pale: #f4f7fb;
    --au-text: #1e293b;
    --au-muted: #64748b;
}

a {
    color: var(--au-blue-light);
}
a:hover {
    color: var(--au-navy);
}

/* Sidebar active link — matches primary buttons instead of AdminLTE's default
   Bootstrap blue (#007bff). */
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--au-navy) !important;
    color: #fff !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    border-radius: 6px;
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: .1px;
    padding: .4375rem .9rem;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
    box-shadow: none;
}
.btn:active {
    transform: translateY(1px);
}
.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 .18rem rgba(37, 99, 168, .25);
}
.btn-sm {
    border-radius: 5px;
    padding: .3rem .6rem;
    font-size: .75rem;
}

.btn-primary {
    background-color: var(--au-navy);
    border-color: var(--au-navy);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--au-blue) !important;
    border-color: var(--au-blue) !important;
    box-shadow: 0 2px 8px rgba(28, 53, 87, .28);
}

.btn-outline-primary {
    color: var(--au-navy);
    border-color: var(--au-border);
    background-color: #fff;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--au-navy);
    border-color: var(--au-navy);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--au-muted);
    border-color: var(--au-border);
    background-color: #fff;
}
.btn-outline-secondary:hover {
    background-color: var(--au-muted);
    border-color: var(--au-muted);
    color: #fff;
}

.btn-outline-danger {
    color: #c0392b;
    border-color: var(--au-border);
    background-color: #fff;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 53, 69, .25);
}

.btn-default {
    background-color: #fff;
    border-color: var(--au-border);
    color: var(--au-text);
}
.btn-default:hover {
    background-color: var(--au-pale);
    border-color: var(--au-border);
    color: var(--au-text);
}

/* Row-action icon buttons (view/download/edit/delete in tables) sit inline,
   evenly spaced, and read better as compact square icon buttons than full
   bordered pills. */
.document-actions,
td .d-flex {
    gap: .3rem;
}
td .btn-sm + .btn-sm,
td .btn-sm + form {
    margin-left: .3rem;
}
td .btn-sm {
    width: 30px;
    height: 30px;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
td .btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(16, 24, 40, .14);
}
td .btn-sm:active {
    transform: translateY(0);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    border: 1px solid var(--au-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--au-border);
    border-radius: 10px 10px 0 0 !important;
    padding: .9rem 1.25rem;
}
.card-header .card-title {
    color: var(--au-text);
    font-weight: 700;
    font-size: 1rem;
}
.card-footer {
    background-color: #fff;
    border-top: 1px solid var(--au-border);
    border-radius: 0 0 10px 10px !important;
}
.card-body {
    padding: 1.25rem;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table {
    margin-bottom: 0;
    font-size: .875rem;
}
/* Force explicit <th style="width:..."> hints to be authoritative instead of
   the browser's auto layout re-expanding columns to fit content (which is
   what caused Name/Company to wrap instead of respecting their column). */
table.dataTable {
    table-layout: fixed;
}
.table thead th {
    background-color: var(--au-navy);
    color: rgba(255, 255, 255, .92);
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    border-top: none;
    border-bottom: none !important;
    padding: .85rem 1rem;
    white-space: nowrap;
}
.table thead th:first-child {
    border-top-left-radius: 8px;
}
.table thead th:last-child {
    border-top-right-radius: 8px;
}
.table td {
    padding: .75rem 1rem;
    vertical-align: middle;
    border-top: 1px solid var(--au-border);
    color: var(--au-text);
    overflow-wrap: break-word;
    overflow: hidden;
}
.table tbody tr {
    transition: background-color .12s ease, box-shadow .12s ease;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(244, 247, 251, .55);
}
.table-hover tbody tr:hover,
.table tbody tr:hover {
    background-color: rgba(37, 99, 168, .06);
}
.table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--au-navy);
}
.card-body.p-0 .table {
    border: none;
}

/* DataTables' "No data available in table" row */
.table tbody tr td.dataTables_empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--au-muted);
    font-style: italic;
}

/* Single-line truncation with a native tooltip (title attr) for cells whose
   content length is unpredictable (company/department names) — keeps rows
   a consistent height instead of wrapping to 2-3 lines. */
.au-cell-ellipsis {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Per-file rows inside the Documents list's "Files" column -- a document can
   now hold several files, each with its own view/download link. */
.au-document-files-list {
    max-height: 110px;
    overflow-y: auto;
}
.au-document-files-list li {
    gap: .5rem;
    padding: .15rem 0;
}
.au-document-files-list li .au-cell-ellipsis {
    max-width: 65%;
    font-size: .8125rem;
}
.au-document-file-actions {
    flex-shrink: 0;
    white-space: nowrap;
}
.au-document-file-actions a {
    color: var(--au-muted);
    margin-left: .5rem;
}
.au-document-file-actions a:hover {
    color: var(--au-navy);
}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .02em;
    padding: .35em .65em;
    border-radius: 20px;
}
.badge-info {
    background-color: var(--au-blue-light);
}
.badge-success {
    background-color: #15803d;
}
.badge-secondary {
    background-color: var(--au-muted);
}
.badge-danger {
    background-color: #c0392b;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-control {
    border-radius: 6px;
    border-color: var(--au-border);
    font-size: .875rem;
}
.form-control:focus {
    border-color: var(--au-blue-light);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 168, .15);
}
label {
    font-weight: 600;
    font-size: .8125rem;
    color: var(--au-text);
}

.icheck-primary > input:first-child:checked + label::before {
    background-color: var(--au-navy);
    border-color: var(--au-navy);
}

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert {
    border: none;
    border-radius: 8px;
    border-left: 4px solid transparent;
}
.alert-success {
    background-color: #ecfdf3;
    color: #166534;
    border-left-color: #15803d;
}
.alert-danger {
    background-color: #fef2f2;
    color: #991b1b;
    border-left-color: #c0392b;
}

/* ==========================================================================
   List group / pagination
   ========================================================================== */
.list-group-item {
    border-color: var(--au-border);
}
.list-group-item.active {
    background-color: var(--au-navy);
    border-color: var(--au-navy);
}

.pagination {
    margin-top: .25rem;
}
.page-link {
    color: var(--au-navy);
    border-color: var(--au-border);
    border-radius: 6px;
    margin: 0 2px;
    font-size: .8125rem;
}
.page-link:hover {
    color: var(--au-blue);
    background-color: var(--au-pale);
}
.page-item.active .page-link {
    background-color: var(--au-navy);
    border-color: var(--au-navy);
}
.page-item.disabled .page-link {
    border-color: var(--au-border);
}

/* ==========================================================================
   Small stat boxes on dashboard
   ========================================================================== */
.small-box {
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

/* ==========================================================================
   Form section headers (grouped form layouts, e.g. Users create/edit)
   ========================================================================== */
.au-form-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--au-navy);
    padding-bottom: .5rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--au-pale);
}
.au-form-section-title:not(:first-child) {
    margin-top: 1.75rem;
}
.au-form-section-title i {
    color: var(--au-blue-light);
    font-size: .8rem;
}

/* ==========================================================================
   Custom switch (status toggle)
   ========================================================================== */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--au-navy);
    border-color: var(--au-navy);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(37, 99, 168, .15);
}
.custom-switch .custom-control-label {
    font-weight: 600;
    font-size: .875rem;
    padding-top: .1rem;
    cursor: pointer;
}

/* ==========================================================================
   Bootstrap-multiselect (searchable checkbox dropdown, e.g. department pickers)
   ========================================================================== */
.multiselect.dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid var(--au-border);
    border-radius: 6px;
    padding: .375rem .75rem;
    font-size: .875rem;
    color: var(--au-text);
    text-align: left;
}
.multiselect.dropdown-toggle:hover,
.multiselect.dropdown-toggle:focus {
    border-color: var(--au-blue-light);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 168, .15);
}
.multiselect-container.dropdown-menu {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--au-border);
    box-shadow: 0 4px 16px rgba(16, 24, 40, .1);
    padding: .35rem;
}
.multiselect-container .multiselect-filter {
    padding: .25rem .5rem .5rem;
    gap: .4rem;
}
.multiselect-container .multiselect-search {
    border-radius: 6px;
    border-color: var(--au-border);
    font-size: .8125rem;
}
.multiselect-option.dropdown-item,
.multiselect-all.dropdown-item {
    padding: .35rem .75rem;
    border-radius: 6px;
    font-size: .8125rem;
}
.multiselect-option.dropdown-item:hover,
.multiselect-option.dropdown-item:focus,
.multiselect-all.dropdown-item:hover {
    background-color: var(--au-pale);
}
.multiselect-group.dropdown-item {
    padding: .35rem .75rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--au-muted);
    background-color: var(--au-pale);
    border-radius: 6px;
    margin-top: .2rem;
}
.multiselect-option .form-check-input:checked,
.multiselect-all .form-check-input:checked {
    background-color: var(--au-navy);
    border-color: var(--au-navy);
}

/* ==========================================================================
   Navbar company switcher
   ========================================================================== */
.company-switcher {
    display: flex;
    align-items: center;
}
.company-switch-toggle {
    display: flex !important;
    align-items: center;
    gap: .55rem;
    padding: .3rem .8rem !important;
    margin-right: .25rem;
    border: 1px solid var(--au-border);
    border-radius: 30px;
    background-color: var(--au-pale);
    color: var(--au-text) !important;
    transition: background-color .15s ease, border-color .15s ease;
}
.company-switch-toggle:hover,
.company-switch-toggle:focus {
    background-color: #eaf0f8;
    border-color: var(--au-blue-light);
}
.company-switch-label {
    font-weight: 600;
    font-size: .8125rem;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.company-switch-caret {
    font-size: .6rem;
    color: var(--au-muted);
}
.company-switch-avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--au-navy) 0%, var(--au-blue-light) 100%);
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.company-switch-avatar-sm {
    width: 30px;
    height: 30px;
    font-size: .8rem;
}
.company-switch-menu {
    min-width: 280px;
    padding: .5rem;
    border-radius: 10px;
    border: 1px solid var(--au-border);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
    margin-top: .5rem;
}
.company-switch-menu .dropdown-header {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--au-muted);
    padding: .4rem .6rem .6rem;
}
.company-switch-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    margin-bottom: .15rem;
}
.company-switch-item:last-child {
    margin-bottom: 0;
}
.company-switch-item:hover,
.company-switch-item:focus {
    background-color: var(--au-pale);
}
.company-switch-item.active {
    background-color: #eaf0f8;
}
.company-switch-item-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}
.company-switch-item-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--au-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.company-switch-item-code {
    font-size: .7rem;
    color: var(--au-muted);
}
.company-switch-check {
    color: var(--au-blue-light);
    font-size: .8rem;
}

/* ==========================================================================
   Sidebar user panel
   ========================================================================== */
.user-panel .info a {
    font-weight: 700;
    font-size: .9rem;
}

/* ==========================================================================
   Role badge — pastel tint + saturated text, deliberately distinct from the
   solid navy/blue palette used elsewhere (company switcher, buttons) so it
   reads as its own thing. Shared by the navbar role indicator and the Users
   list table's Role column.
   ========================================================================== */
.au-role-badge {
    display: inline-block;
    padding: .3rem .75rem;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.au-role-badge.hdr-role-super-admin {
    background: #ede9fe;
    color: #6d28d9;
}
.au-role-badge.hdr-role-ho-admin {
    background: #fef3c7;
    color: #92400e;
}
.au-role-badge.hdr-role-company-admin {
    background: #d1fae5;
    color: #047857;
}
.au-role-badge.hdr-role-user {
    background: #f1f5f9;
    color: #475569;
}

/* ==========================================================================
   DataTables (search, length menu, info, responsive toggle)
   ========================================================================== */
.dataTables_wrapper {
    padding-top: .25rem;
}
.dataTables_wrapper .row:first-child {
    margin-bottom: .75rem;
}
.dataTables_wrapper .dataTables_length select {
    border-radius: 6px;
    border-color: var(--au-border);
    font-size: .8125rem;
    padding: .25rem 1.75rem .25rem .5rem;
}
.dataTables_wrapper .dataTables_filter label {
    color: var(--au-muted);
    font-size: .8125rem;
    font-weight: 500;
}
.dataTables_wrapper .dataTables_filter input {
    border-radius: 20px;
    border-color: var(--au-border);
    font-size: .8125rem;
    padding: .35rem .75rem .35rem 2rem;
    margin-left: .5rem;
    min-width: 220px;
    background-color: var(--au-pale);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: .7rem center;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--au-blue-light);
    background-color: #fff;
    box-shadow: 0 0 0 .2rem rgba(37, 99, 168, .15);
    outline: none;
}
.dataTables_wrapper .dataTables_info {
    font-size: .8125rem;
    color: var(--au-muted);
    padding-top: .6rem;
}
.dataTables_wrapper .dataTables_paginate {
    padding-top: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 20px !important;
    margin-left: 3px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--au-navy) !important;
    border-color: var(--au-navy) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: var(--au-pale) !important;
    border-color: var(--au-border) !important;
    color: var(--au-navy) !important;
}
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 {
    color: rgba(255, 255, 255, .55);
}
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before {
    color: #fff;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
    padding-left: 1.75rem;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    background-color: var(--au-navy);
    border: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .2);
    top: 50%;
    transform: translateY(-50%);
}