/* Sidebar */
.sidebar {
    transition: all 0.3s;
}

.sidebar-menu li a {
    font-size: 0.9375rem;
}

.sidebar-menu li+li {
    margin-top: 8px;
}

/* Toastr */
#toast-container>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: auto;
    max-width: 400px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    opacity: 1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

#toast-container>div:hover {
    opacity: 1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

#toast-container>.toast-success {
    background-color: var(--success-600);
}

#toast-container>.toast-error {
    background-color: var(--danger-600);
}

#toast-container>.toast-warning {
    background-color: var(--warning-600);
}

#toast-container>.toast-info {
    background-color: var(--info-600);
}

#toast-container>.toast-success,
#toast-container>.toast-error,
#toast-container>.toast-warning,
#toast-container>.toast-info {
    background-image: none !important;
}

#toast-container>div::before {
    font-family: 'remixicon';
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    order: 0;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
}

#toast-container>.toast-success::before {
    content: "\eb81";
}

#toast-container>.toast-error::before {
    content: "\eca1";
}

#toast-container>.toast-warning::before {
    content: "\ea21";
}

#toast-container>.toast-info::before {
    content: "\ee59";
}

#toast-container .toast-message {
    order: 1;
    flex: 1;
}

#toast-container .toast-close-button {
    order: 2;
    position: static;
    float: none;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    text-shadow: none;
    opacity: 0.9;
}

#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus {
    color: #fff;
    opacity: 1;
}

/* Sweet alert */
.swal-compact {
    width: 450px !important;
    padding: 32px !important;
    border-radius: 12px !important;
}

.swal-compact .swal2-icon {
    width: 76px !important;
    height: 76px !important;
    margin: 0 auto !important;
    border-width: 4px !important;
}

.swal-compact .swal2-icon .swal2-icon-content {
    font-size: 46px !important;
}

.swal-compact .swal2-title {
    font-size: 22px !important;
    padding: 0 !important;
    margin-top: 20px !important;
}

.swal-compact .swal2-html-container {
    font-size: 15px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    color: var(--text-secondary-light) !important;
}

.swal-target {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary-light);
}

.swal-note {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-secondary-light);
}

.swal-warn {
    display: block;
    padding: 12px 16px;
    border-inline-start: 4px solid var(--danger-600);
    border-radius: 0 8px 8px 0;
    background-color: var(--danger-50);
    color: var(--danger-600);
    font-size: 13px;
    font-weight: 600;
    text-align: start;
}

.swal-compact .swal2-actions {
    margin-top: 26px !important;
    gap: 10px;
}

/* Form validation — no valid styling on optional fields */
.was-validated .form-control:valid:not([required]),
.was-validated .form-select:valid:not([required]) {
    border-color: var(--neutral-300);
    background-image: none;
    padding-inline-end: 0.9375rem;
}

.was-validated .form-control:valid:not([required]):focus,
.was-validated .form-select:valid:not([required]):focus {
    border-color: var(--primary-600);
    box-shadow: none;
}

/* Small buttons */
.btn.btn-sm {
    padding: 8px 15px;
    font-size: 13.5px;
    line-height: 1.4;
}

/* Tables */
.bordered-table {
    font-size: 12.5px;
}

.bordered-table thead tr th {
    padding: 6px 10px !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-primary-light);
    white-space: nowrap;
}

.bordered-table tbody tr td {
    padding: 4px 10px !important;
    line-height: 1.35;
    vertical-align: middle;
    overflow-wrap: break-word;
}

.record-table {
    width: 100%;
    table-layout: fixed;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--neutral-600);
    transition: 0.15s;
}

.action-btn:hover {
    color: var(--neutral-900);
    background-color: var(--neutral-200);
}

/* Stacked cells — primary value with secondary detail beneath */
.cell-main {
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-primary-light);
}

.cell-sub {
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--text-secondary-light);
}

.date-cell {
    font-size: 11.5px;
    line-height: 1.45;
    white-space: nowrap;
}

.date-key {
    display: inline-block;
    width: 26px;
    font-weight: 600;
    color: var(--neutral-500);
}

/* Expanded detail row */
.detail-row>td {
    padding: 16px 20px !important;
    background-color: var(--neutral-50);
    border-inline-start: 3px solid var(--primary-600);
    white-space: normal;
}

.detail-row .row {
    margin: 0;
}

.detail-row .view-field-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary-light);
}

.detail-row .view-field-value {
    color: var(--text-secondary-light);
}

.detail-notes {
    margin-top: 6px;
    padding: 10px 14px;
    border: 1px solid var(--neutral-200);
    border-radius: 8px;
    background-color: var(--light-50);
    line-height: 1.7;
    white-space: pre-line;
}

/* Read-only field display */
.view-field {
    margin-bottom: 16px;
}

.view-field-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--neutral-500);
}

.view-field-value {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-primary-light);
}

.section-head {
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--neutral-200);
    font-size: 13px;
    font-weight: 600;
}

/* Datatable controls */
.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-info,
.dt-container .dt-paging {
    font-size: 13px;
}

div.dt-container .dt-input {
    text-align: left;
}

.dt-container .dt-layout-cell>div {
    display: inline-block;
    vertical-align: middle;
}

.dt-container .dt-layout-cell>div+div {
    margin-inline-start: 8px;
}

/* Datatable pagination — solid style, compact */
div.dt-container .dt-paging .dt-paging-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    margin-inline-start: 6px;
    border: 0;
    border-radius: 8px;
    background: var(--primary-50);
    color: var(--text-secondary-light) !important;
    font-size: 12.5px;
    font-weight: 500;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    border: 0;
    background: var(--primary-100);
    color: var(--text-secondary-light) !important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    border: 0;
    background: var(--primary-600);
    color: #fff !important;
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover {
    border: 0;
    background: var(--primary-50);
    color: var(--text-secondary-light) !important;
    opacity: 0.5;
    cursor: default;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--neutral-300);
    border-radius: 40px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--neutral-400);
}

/* Sidebar minimize/maximize — the theme's .dashboard-main animates its
   margin over 0.3s, but .sidebar itself has no transition at all, so its
   width snaps instantly while the content area is still sliding. That
   mismatch (one instant, one animated) is what reads as janky/slow, not the
   actual duration. Giving .sidebar a matching transition makes both move
   together. Also narrowing .dashboard-main from `transition: all` to just
   the property that actually needs to animate, so unrelated property
   changes on that large element don't get swept into the same transition
   and add extra work to every animation frame. */
.sidebar {
    transition: width 0.3s ease;
}

.dashboard-main {
    transition: margin-inline-start 0.3s ease;
}