/*
Shared logged-in app shell and action semantics.
Moved out of the retired preview stylesheet to keep production styling stable.
*/

:root {
    --n-bg: #d9e4ee;
    --n-surface: #ffffff;
    --n-surface-soft: #eef3f7;
    --n-border: #aebdca;
    --n-border-strong: #8094a5;
    --n-text: #172634;
    --n-text-soft: #445b70;

    --n-blue: #3f607c;
    --n-blue-dark: #2f4d66;
    --n-blue-soft: #dce7f0;

    --n-green-add: #2f6b45;
    --n-green-add-soft: #e9f3ed;
    --n-green-confirm: #4c9a68;
    --n-green-confirm-soft: #ecf7f0;

    --n-red-cancel: #b25555;
    --n-red-cancel-soft: #f9eded;

    --n-radius: 8px;
}

body {
    background: #ffffff;
    color: var(--n-text);
}

#sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--n-border-strong) !important;
    box-shadow: 2px 0 8px rgba(26, 45, 62, 0.08) !important;
}

#sidebar .nav-link,
#sidebar .dropdown-toggle {
    color: #1f3648 !important;
    background: #ffffff !important;
    border: 1px solid #c7d4e0 !important;
    border-radius: var(--n-radius) !important;
    font-weight: 700 !important;
}

#sidebar .nav-link.active,
#sidebar .nav-link:hover,
#sidebar .dropdown-toggle:hover,
#sidebar .nav-pills .nav-link.active,
#sidebar .dropdown.show > .dropdown-toggle {
    color: #ffffff !important;
    background: #4c6f8d !important;
    border-color: #6f8ea8 !important;
}

#sidebar .dropdown-menu {
    background: #f4f8fc !important;
    border: 1px solid #b7c7d5 !important;
}

#sidebar .dropdown-item {
    color: #1f3648 !important;
    background: #ffffff !important;
}

#sidebar .dropdown-item:hover,
#sidebar .dropdown-item:focus {
    background: #d9e8f5 !important;
    color: #21455f !important;
}

#sidebar .dropdown-item.active,
#sidebar .dropdown-item:active {
    color: #ffffff !important;
    background: #4c6f8d !important;
}

#breadcrumb {
    background-color: var(--n-blue-dark) !important;
}

#main-content {
    background-color: #ffffff !important;
    color: var(--n-text) !important;
}

#main-content .card,
#main-content .shadow-box,
#main-content .modal-content {
    background-color: var(--n-surface) !important;
    border: 1px solid var(--n-border-strong) !important;
    border-radius: var(--n-radius) !important;
    box-shadow: 0 6px 18px rgba(34, 52, 68, 0.12) !important;
}

#main-content .btn {
    border-radius: var(--n-radius);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-width: 2px;
    background-color: #fff;
    transition: all 0.18s ease;
}

#main-content .btn:focus,
#main-content .btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(47, 77, 102, 0.26);
}

#main-content .btn-primary,
#main-content .btn-outline-primary,
#main-content .btn-info,
#main-content .btn-outline-info {
    color: var(--n-blue-dark);
    background-color: #fff;
    border-color: var(--n-blue);
}

#main-content .btn-primary:hover,
#main-content .btn-outline-primary:hover,
#main-content .btn-info:hover,
#main-content .btn-outline-info:hover {
    color: var(--n-blue-dark);
    background-color: var(--n-blue-soft);
    border-color: var(--n-blue-dark);
}

#main-content #preview-customer-reconciliation-btn {
    color: #fff !important;
    background: linear-gradient(135deg, #338fcb 0%, #2477c2 100%) !important;
    border-color: #2477c2 !important;
    box-shadow: 0 12px 24px rgba(36, 119, 194, 0.22);
}

#main-content #preview-customer-reconciliation-btn:hover,
#main-content #preview-customer-reconciliation-btn:focus,
#main-content #preview-customer-reconciliation-btn:focus-visible {
    color: #fff !important;
    background: linear-gradient(135deg, #2f84bc 0%, #1f66a7 100%) !important;
    border-color: #1f66a7 !important;
}

#main-content #preview-customer-reconciliation-btn:disabled,
#main-content #preview-customer-reconciliation-btn.disabled {
    color: #f3f8fc !important;
    background: linear-gradient(135deg, #9ec4df 0%, #8fb6d4 100%) !important;
    border-color: #8fb6d4 !important;
    box-shadow: none;
    opacity: 1;
}

#main-content .customer-reconciliation-tabs {
    margin-top: 0.2rem;
}

#main-content .customer-reconciliation-tabs .nav-tabs {
    border-bottom: none;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

#main-content .customer-reconciliation-tabs .nav-link.customer-reconciliation-tab-pill {
    border: 2px solid #3c8dbc;
    border-radius: 999px;
    background: #ffffff;
    color: #2a4a64;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.5rem 0.95rem;
    line-height: 1.1;
    transition: all 0.18s ease;
}

#main-content .customer-reconciliation-tabs .nav-link.customer-reconciliation-tab-pill:hover,
#main-content .customer-reconciliation-tabs .nav-link.customer-reconciliation-tab-pill:focus,
#main-content .customer-reconciliation-tabs .nav-link.customer-reconciliation-tab-pill:focus-visible {
    background: #eef6fb;
    border-color: #2477c2;
    color: #18476d;
}

#main-content .customer-reconciliation-tabs .nav-link.customer-reconciliation-tab-pill-active {
    border: 2px solid #2477c2;
    border-radius: 999px;
    background: linear-gradient(135deg, #338fcb 0%, #2477c2 100%);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(36, 119, 194, 0.2);
}

#main-content .customer-reconciliation-tabs .nav-link.customer-reconciliation-tab-pill-active:hover,
#main-content .customer-reconciliation-tabs .nav-link.customer-reconciliation-tab-pill-active:focus,
#main-content .customer-reconciliation-tabs .nav-link.customer-reconciliation-tab-pill-active:focus-visible {
    color: #ffffff;
    border-color: #1f66a7;
    background: linear-gradient(135deg, #2f84bc 0%, #1f66a7 100%);
}

#main-content .btn[id*="add"],
#main-content .btn[id*="new"],
#main-content .btn[id*="create"] {
    color: var(--n-green-add) !important;
    background-color: #fff !important;
    border-color: var(--n-green-add) !important;
}

#main-content .btn[id*="add"]:hover,
#main-content .btn[id*="new"]:hover,
#main-content .btn[id*="create"]:hover {
    color: var(--n-green-add) !important;
    background-color: #deefe4 !important;
    border-color: var(--n-green-add) !important;
}

#main-content .btn[id*="confirm"],
#main-content .btn[id*="save"] {
    color: var(--n-green-confirm) !important;
    background-color: #fff !important;
    border-color: var(--n-green-confirm) !important;
}

#main-content .btn[id*="confirm"]:hover,
#main-content .btn[id*="save"]:hover {
    color: var(--n-green-confirm) !important;
    background-color: #dff1e5 !important;
    border-color: var(--n-green-confirm) !important;
}

#main-content .btn[id*="cancel"],
#main-content .btn[id*="close"],
#logout-button {
    color: var(--n-red-cancel) !important;
    background-color: #fff !important;
    border-color: var(--n-red-cancel) !important;
}

#main-content .btn[id*="cancel"]:hover,
#main-content .btn[id*="close"]:hover,
#logout-button:hover {
    color: var(--n-red-cancel) !important;
    background-color: #f6e3e3 !important;
    border-color: var(--n-red-cancel) !important;
}

#main-content .btn[id*="filter"],
#main-content .btn[id*="volatility"],
#main-content .btn#btn-all-customers,
#main-content .btn#btn-unreminded-customers,
#main-content .btn#btn-reminded-customers,
#main-content .btn#toggle-date-filter-btn,
#main-content .btn#toggle-view-btn {
    color: var(--n-blue-dark) !important;
    background-color: #fff !important;
    border-color: var(--n-blue) !important;
}

#main-content .btn[id*="filter"]:hover,
#main-content .btn[id*="volatility"]:hover,
#main-content .btn#btn-all-customers:hover,
#main-content .btn#btn-unreminded-customers:hover,
#main-content .btn#btn-reminded-customers:hover,
#main-content .btn#toggle-date-filter-btn:hover,
#main-content .btn#toggle-view-btn:hover {
    color: var(--n-blue-dark) !important;
    background-color: #d4e2ee !important;
    border-color: var(--n-blue-dark) !important;
}

#main-content .btn[id*="filter"].btn-primary:not(.btn-outline-primary),
#main-content .btn[id*="volatility"].btn-primary:not(.btn-outline-primary),
#main-content .btn#btn-all-customers.btn-primary:not(.btn-outline-primary),
#main-content .btn#btn-unreminded-customers.btn-primary:not(.btn-outline-primary),
#main-content .btn#btn-reminded-customers.btn-primary:not(.btn-outline-primary) {
    color: #fff !important;
    background-color: var(--n-blue) !important;
    border-color: var(--n-blue) !important;
}

#main-content .btn[id*="delete"],
#main-content .btn[id*="remove"],
#main-content .btn-danger,
#main-content .btn-outline-danger {
    color: var(--n-red-cancel) !important;
    background-color: #fff !important;
    border-color: var(--n-red-cancel) !important;
}

#main-content .btn[id*="delete"]:hover,
#main-content .btn[id*="remove"]:hover,
#main-content .btn-danger:hover,
#main-content .btn-outline-danger:hover {
    color: var(--n-red-cancel) !important;
    background-color: var(--n-red-cancel-soft) !important;
    border-color: var(--n-red-cancel) !important;
}

#main-content table thead th {
    background-color: #cddce8 !important;
    color: var(--n-text) !important;
    border-color: var(--n-border-strong) !important;
}

#main-content table tbody td {
    border-color: #d7e0e8 !important;
}