/* Page background behind the cards (was Bootstrap's default --bs-tertiary-bg #f8f9fa) */
:root {
    --bs-tertiary-bg: #f1f5f9;
}

/* Inset the main content area from the sidebar on the left and the viewport
   edge on the right. Scoped to .app-main (not a column-gap on .app-wrapper)
   so the header bar - which sits in the same grid column - stays flush
   against the sidebar instead of getting the same gap cut into it. */
.app-main {
    margin-left: 1rem;
    margin-right: 1rem;
}

/* Rounded, slightly more pronounced card corners */
.card {
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Sidebar: pin Sign Out to the bottom as an overlay, without touching .sidebar-wrapper's
   height/overflow at all (OverlayScrollbars manages that element's sizing itself, and
   fighting it with flex/height:auto caused the nav menu to collapse/disappear). */
.app-sidebar {
    position: relative;
}

.app-sidebar .sidebar-wrapper {
    padding-bottom: 3.25rem;
}

.sidebar-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: inherit;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.5rem;
}

/* Mirror AdminLTE's .sidebar-wrapper nav-link/nav-icon treatment, since the footer lives outside .sidebar-wrapper */
.sidebar-footer .nav-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--lte-sidebar-color);
}

.sidebar-footer .nav-link:hover,
.sidebar-footer .nav-link:focus {
    color: var(--lte-sidebar-hover-color);
    background-color: var(--lte-sidebar-hover-bg);
}

.sidebar-footer .nav-link p {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-footer .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    max-width: 1.5rem;
}

/* Mini-sidebar collapse behavior for the footer (mirrors .sidebar-menu's own rules) */
.sidebar-mini.sidebar-collapse .sidebar-footer .nav-link {
    width: 3.6rem;
}

.sidebar-mini.sidebar-collapse .sidebar-footer .nav-link p {
    display: inline-block;
    width: 0;
    white-space: nowrap;
    visibility: hidden;
}

/* The sidebar only has two states - collapsed/expanded - switched by clicking the
   list-toggle icon. AdminLTE's own mini-sidebar CSS also previews the expanded state
   on :hover; these overrides cancel that preview everywhere so hovering does nothing
   and only a click changes state. */
.sidebar-mini.sidebar-collapse .app-sidebar:hover {
    min-width: 4.6rem;
    max-width: 4.6rem;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .sidebar-menu .nav-header {
    display: none;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .sidebar-menu .nav-link {
    width: 3.6rem;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .sidebar-menu .nav-link p,
.sidebar-mini.sidebar-collapse .app-sidebar:hover .brand-text,
.sidebar-mini.sidebar-collapse .app-sidebar:hover .logo-xl {
    width: 0;
    margin-left: 0;
    visibility: hidden;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .brand-text {
    display: inline-block;
    max-width: 0;
    margin-left: 0;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .nav-badge,
.sidebar-mini.sidebar-collapse .app-sidebar:hover .nav-arrow {
    display: none;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .sidebar-footer .nav-link {
    width: 3.6rem;
}

.sidebar-mini.sidebar-collapse .app-sidebar:hover .sidebar-footer .nav-link p {
    width: 0;
    visibility: hidden;
    padding-left: 0;
}

/* Brand row: logo with a list-toggle icon after it when expanded; when collapsed the
   logo is removed and the toggle icon alone fills the space. Both states are driven
   purely by .sidebar-collapse (clicking the icon), never by hover. */
.sidebar-logo-full {
    max-height: 44px;
    width: auto;
}

.sidebar-brand {
    justify-content: center;
}

/* Header account link: initial-letter avatar + stacked name/role */
.header-account-link {
    text-decoration: none;
}

.header-account-avatar {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.header-account-info {
    line-height: 1.2;
}

.header-account-name {
    font-weight: 700;
    color: var(--bs-body-color);
}

.header-account-role {
    font-size: 0.8rem;
    color: #6c7a96;
}

.header-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bs-body-color);
    font-size: 1.5rem;
    text-decoration: none;
}

/* Sidebar's own toggle icon only appears once the sidebar is collapsed
   (the header's toggle icon handles it while the sidebar is open). */
.sidebar-toggle-icon {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--lte-sidebar-color);
    font-size: 1.5rem;
    text-decoration: none;
}

.sidebar-mini.sidebar-collapse .brand-link {
    display: none;
}

.sidebar-mini.sidebar-collapse .sidebar-brand {
    justify-content: center;
}

.sidebar-mini.sidebar-collapse .sidebar-toggle-icon {
    display: flex;
}

.sidebar-mini.sidebar-collapse .header-toggle-icon {
    display: none;
}

/* DataTable overrides */
:root {
    /* Theme the DataTables "Processing" loader dots (rgb(var(--dt-row-selected))) to match --bs-primary (#5E6B58) */
    --dt-row-selected: 94, 107, 88;
}

table.dataTable {
    width: 100% !important;
}

.dataTables_wrapper {
    width: 100%;
}

/* Gap between the "Show X entries" / Search controls row and the table below it */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

/* Bootstrap's compiled pagination CSS bakes --bs-pagination-active-bg to its default
   blue rather than inheriting the overridden --bs-primary, so the active page number
   needs an explicit override to match the theme. */
.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Shared DataTable pagination layout (was duplicated per-page; centralized here) */
.dataTables_wrapper .pagination {
    justify-content: flex-end;
}

.dataTables_wrapper .page-link {
    border-radius: .375rem;
}

.dataTables_wrapper .page-item {
    margin: 0 4px;
}

.dataTables_wrapper .page-link:focus,
.dataTables_wrapper .page-link:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Shared purchase-type pill badges */
.badge-soft {
    border-radius: 50rem;
    font-weight: 600;
    font-size: .75rem;
    padding: .4em .85em;
}

.badge-soft-primary {
    background-color: rgba(94, 107, 88, .12);
    color: #5E6B58;
}

.badge-soft-info {
    background-color: rgba(13, 202, 240, .15);
    color: #087990;
}

.badge-soft-secondary {
    background-color: rgba(108, 117, 125, .15);
    color: #495057;
}

.badge-soft-success {
    background-color: rgba(25, 135, 84, .15);
    color: #146c43;
}

.badge-soft-danger {
    background-color: rgba(220, 53, 69, .15);
    color: #b02a37;
}

.badge-soft-warning {
    background-color: rgba(255, 193, 7, .18);
    color: #997404;
}

/* Card-style transaction tables (Vouchers, Purchase History): borderless rows,
   muted uppercase header, generous row padding, instead of the default grid table. */
table.transaction-table {
    border-collapse: collapse;
}

table.transaction-table thead th {
    background-color: #f4f6f8;
    border-top: none;
    border-bottom: 1px solid var(--bs-border-color);
    color: #495057;
    font-weight: 600;
    font-size: .85rem;
    text-transform: none;
    letter-spacing: normal;
    padding: .85rem 1rem;
}

table.transaction-table tbody td {
    border-top: none;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem;
    vertical-align: middle;
}

table.transaction-table tbody tr:last-child td {
    border-bottom: none;
}

table.transaction-table tbody tr:hover td {
    background-color: rgba(94, 107, 88, .04);
}

.invoice-actions {
    display: inline-flex;
    gap: .75rem;
}

.invoice-actions .btn {
    border-radius: .5rem;
}

.invoice-actions .btn-outline-secondary {
    color: #495057;
    border-color: #ced4da;
}

.invoice-actions .btn-outline-navy {
    color: #1e3a5f;
    border-color: #1e3a5f;
}

.invoice-actions .btn-outline-secondary:hover,
.invoice-actions .btn-outline-navy:hover {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.copy-voucher-code,
.copy-voucher-code:hover,
.copy-voucher-code:focus,
.copy-voucher-code:active,
.copy-voucher-code:focus-visible {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    line-height: 1;
    color: #6c7a96 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.copy-voucher-code:hover,
.copy-voucher-code:focus,
.copy-voucher-code:active {
    color: var(--bs-primary) !important;
}

.card-body {
    overflow-x: auto;
}

/* Login page */
body.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAF8F3;
    padding: 2rem 1rem;
}

.login-box {
    width: 100%;
    max-width: 552px;
}

.login-box .card {
    background: #ffffff;
    border: none;
    border-radius: 24px;
    box-shadow: 0 4px 45px rgba(94, 107, 88, 0.2);
    overflow: hidden;
}

.login-card-body {
    padding: 3rem 2.5rem;
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo-img {
    max-height: 64px;
}

.login-title {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: #495345;
    margin-bottom: 1.75rem;
}

.auth-field {
    margin-bottom: 15px;
}

.auth-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #495345;
    margin-bottom: 0.5rem;
}

.auth-field .field-wrap {
    position: relative;
}

.auth-field .form-control {
    background-color: #F2F1EC;
    border: 1px solid #E9EDE4;
    border-radius: 10px;
    color: #2b2b2b;
    padding: 0.9rem 2.75rem 0.9rem 1.1rem;
    font-size: 1rem;
}

.auth-field .form-control::placeholder {
    color: #8b9382;
}

.auth-field .form-control:focus {
    background-color: #F2F1EC;
    border-color: #5E6B58;
    color: #2b2b2b;
    box-shadow: 0 0 0 0.2rem rgba(94, 107, 88, 0.15);
}

.auth-field .field-icon {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: #8b9382;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 1.2rem;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    background-image: none;
    border-radius: 10px;
}

.form-control.is-invalid,
.form-control:invalid {
    border-radius: 10px !important;
}

.btn-auth {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    background: #5E6B58;
    box-shadow: 0 8px 20px rgba(94, 107, 88, 0.3);
    transition: background-color 0.2s ease, transform 0.2s ease;
    margin-top: 0.5rem;
}

.btn-auth:hover {
    background: #495345;
    transform: translateY(-1px);
    color: #ffffff;
}