/* InvoiceAutomation/wwwroot/app.css */
@font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('/Helvetica-Neue-LT-Std-43-Light-Extended_22519.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    /* font-family: 'Helvetica Neue LT Std';
    src: url('/Helvetica-Neue-LT-Std-45-Light_22520.ttf') format('truetype');
    font-weight: 300;
    font-style: normal; */
}

:root {
    --color-ssi-gray-light: #EAEAEA;
    --color-ssi-green: #1BBC9B;
    --color-ssi-green-rgb: 27, 188, 155;
    --color-ssi-gray-dark: #535B6A;
    --color-white: #FFFFFF;
    --color-ssi-orange: #FF8A2B;
    /* Unused variables --color-ssi-green-disabled and --color-ssi-yellow were removed */
}

html, body {
    /* background: var(--color-ssi-green); */
    /* font-family: 'Helvetica Neue LT Std', sans-serif; */
    background-color: #EAEAEA;
}

.page {
    margin-top: 50px; /* Space below fixed navbar */
    padding: 20px;
    background-color: var(--color-ssi-gray-light);
}

/* Cards */
.card-body {
    border-color: var(--color-ssi-gray-light);
    height: auto !important;
}

.card-header {
    background: var(--color-ssi-gray-dark);
    color: white;
    border-radius: 5px !important;
}

.po-card-list {
    background: var(--color-ssi-gray-dark);
    color: white;
    border-radius: 5px !important;
    border-bottom: none !important;
    padding: .5rem;
    padding-left: 1rem;
}

.card-box-header {
    background: var(--color-ssi-gray-dark);
    color: white;
    border-radius: 5px !important;
}

.po-card {
    background-color: white !important;
    color: black;
}

.card-inner {
    border: none; /* Removed border as requested */
    border-radius: 5px;
    padding: 5px 10px;
}

.po-card-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 2px 0 4px rgba(0, 0, 0, 0.1) !important; /* Bottom shadow + right shadow */
    border-left: 4px solid var(--color-ssi-green) !important; /* Green left border */
    margin-right: 6px !important; /* Space for right shadow */
    margin-bottom: 6px !important; /* Space for bottom shadow */
    border-radius: 0.375rem 0.375rem 0.375rem 0 !important;
}

.po-card-shadow .card-header {
    border-bottom: none !important; /* Remove the thin line between header and body */
}

.po-card-shadow .card-body {
    border-top: none !important; /* Remove any top border on the body */
}

/* Borders */
.border-primary {
    border-color: var(--color-ssi-orange) !important;
    border-width: 4px;
}

.border-secondary {
    border-color: var(--color-ssi-gray-dark) !important;
    border-width: 2px;
}

/* Buttons */
.btn-primary,
.blazor-button-primary {
    background-color: var(--color-ssi-green);
    border-color: var(--color-ssi-green);
    color: black; /* Assuming black text on this green, adjust if white provides better contrast */
}

.btn-primary:hover,
.blazor-button-primary:hover {
    background-color: var(--color-ssi-gray-dark);
    border-color: var(--color-ssi-gray-dark);
    color: var(--color-white);
}

button.btn-primary:disabled,
button.blazor-button-primary:disabled {
    background-color: var(--color-ssi-green) !important;
    border-color: var(--color-ssi-green) !important;
    opacity: .5;
    /* Text color inherits 'black', then faded by opacity */
}

.btn-primary:focus,
.btn-primary:focus-visible,
.blazor-button-primary:focus,
.blazor-button-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-ssi-green-rgb), 0.5);
    background-color: var(--color-ssi-green);
    color: black !important;
}

.btn-primary:active,
.blazor-button-primary:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--color-ssi-green) !important;
    border-color: var(--color-ssi-green) !important;
    /* Text color inherits 'black' */
}

.btn-outline-primary {
    color: var(--color-ssi-green);
    border-color: var(--color-ssi-green);
}

.btn-outline-primary:hover {
    background-color: var(--color-ssi-green);
    border-color: var(--color-ssi-green);
    color: var(--color-white);
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-ssi-green-rgb), 0.5);
    background-color: var(--color-ssi-green);
    color: var(--color-white);
}

.btn-outline-primary:disabled {
    color: var(--color-ssi-green) !important;
    background-color: transparent !important;
    border-color: var(--color-ssi-green) !important;
    opacity: 0.5;
}

.btn-outline-primary:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--color-ssi-green) !important;
    border-color: var(--color-ssi-green) !important;
    color: var(--color-white) !important;
}

.btn-success {
    background-color: var(--color-ssi-green); /* SSI green color */
    color: black !important; /* Black text for upload button */
    border: none !important; /* Remove border */
}

.btn-success:disabled {
    opacity: .5;
}

.btn-trash-bin {
    color: red;
    transform: scale(1.5);
}

.btn-outline-secondary { /* Highly specific style, review if widely applicable */
    color: var(--color-ssi-gray-darke) !important;
    border-color: var(--color-ssi-gray-dark) !important;
    background-color: var(--color-white) !important;
}

/* Navbar */
.navbar {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1030;
    background: var(--color-ssi-green) !important;
}

.navbar-logo {
    width: 80px;
    height: 20px;
    object-fit: contain;
}

.nav-link {
    color: var(--color-black);
    font-weight: 500;
    margin-right: 1rem;
}

.navbar .btn {
    border: none;
    font-size: 1.6rem;
    color: var(--color-black);
    padding: 0.25rem 0.5rem;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.navbar .btn:hover {
    color: white !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.navbar .btn:focus {
    color: var(--color-black) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.navbar .btn:active {
    color: var(--color-black) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.navbar .btn-outline-danger {
    font-size: 1.2rem !important;
}

/* Status Badges */
.status-badge {
    border: 2px solid;
    border-radius: 4px;
    padding: 2px 6px;
    display: inline-block; /* Improves layout behavior */
}

.status-badge-ready {
    border-color: green;
    color: green;
}

.status-badge-processing {
    border-color: orange;
    color: orange;
}

/* Other Styles */
.text-muted {
    color: var(--color-ssi-gray-light) !important; /* Ensure override if intended */
}

.bg-custom-info {
    background-color: rgba(var(--color-ssi-green-rgb), 0.08);
}

.table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(var(--color-ssi-green-rgb), .08);
}

.table.table-striped > tbody > tr:hover {
    background-color: #f2f2f2 !important; /* !important if overriding specific table library styles */
}

.table.table-striped > tbody > tr {
    transition: background-color 0.2s ease-in-out;
}

.form-control:focus {
    border-color: var(--color-ssi-green); /* Consistent focus indication */
    box-shadow: 0 0 0 0.2rem rgba(var(--color-ssi-green-rgb), 0.5);
}

.form-control,
.form-select,
.btn {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Custom style for the unmatch button */
.btn-unmatch-circle {
    width: 30px; /* Make it circular */
    height: 30px;
    border-radius: 50%; /* Make it circular */
    background-color: rgba(255, 0, 0, 0.2); /* Slightly transparent red background */
    color: darkred; /* Darker red 'x' */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Remove padding */
    border: none; /* Remove border */
}

.btn-unmatch-circle i {
    font-size: 1rem; /* Adjust icon size */
}

/* Custom utility to remove bottom margin */
.no-mb {
    margin-bottom: 0 !important;
}

.form-label {
    margin: 1px;
}

/* Styling for PO lines */
.po-list-container .card-inner {
    border-bottom: 1px solid #dee2e6; /* Add a subtle bottom border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Adjust shadow for less intensity */
    background-color: #ffffff; /* Ensure consistent background */
}

/* Remove specific even/odd background colors */
.po-list-container .po-line-even,
.po-list-container .po-line-odd {
    background-color: #ffffff !important; /* Ensure consistent background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Adjust shadow for less intensity */
    border-left: 3px solid #e27c33;
}

/* Styling for Invoice lines */
.invoice-line-even,
.invoice-line-odd {
    background-color: #ffffff !important; /* Ensure consistent background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Adjust shadow for less intensity */
    border-left: 3px solid #e27c33;
}

/* Override green border for No PO lines to use orange */
.po-card-shadow.po-line-even,
.po-card-shadow.po-line-odd {
    border-left: 3px solid #e27c33 !important; /* Orange border for No PO lines */
}

/* GL Account Styles */
.gl-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.gl-checkbox:checked {
    accent-color: var(--color-ssi-green);
}

.similarity-badge {
    font-weight: 700;
    color: var(--color-ssi-green);
    background-color: #d9e6fb;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    display: inline-block;
}

.error-message {
    color: #cc0000;
    margin-top: 1rem;
    font-weight: 600;
    text-align: center;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

thead {
    background-color: var(--color-ssi-green);
    color: black;
}

th, td {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #ddd;
    text-align: left;
    font-size: 0.95rem;
}

tbody tr:hover {
    background-color: #f5f9ff;
}

/* File Drop Zone */
.file-drop-zone {
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-drop-zone:hover {
    border-color: var(--color-ssi-green);
    background-color: rgba(var(--color-ssi-green-rgb), 0.05);
}

.file-drop-zone.drag-over {
    border-color: var(--color-ssi-green);
    background-color: rgba(var(--color-ssi-green-rgb), 0.1);
    transform: scale(1.02);
}


/* Invoice Viewer 2 Page */
.btn-chevron:focus,
.btn-chevron:active,
.btn-chevron:hover {
    color: black !important;
    background-color: rgba(65, 188, 156, 0.1) !important;
    border-color: #41bc9c !important;
    box-shadow: 0 0 0 0.2rem rgba(65, 188, 156, 0.25) !important;
}

.po-card-shadow {
    border-left: 4px solid #41bc9c !important;
    border-bottom-left-radius: 8px !important;
    background-color: white !important;
}

.po-card-shadow .card-header {
    background-color: white !important;
    color: black !important;
}

.po-card-shadow .card-body {
    background-color: white !important;
}

.mb-3.po-card-shadow {
    background-color: white !important;
}

div.card.mb-3.po-card-shadow {
    background-color: white !important;
}

.btn-chevron {
    min-width: 70px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.nav-tabs {
    border-bottom: none !important;
    background: none !important;
}

.nav-tabs .nav-link {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.nav-tabs .nav-link:not(.active) {
    background: transparent !important;
}

.nav-tabs .nav-link.active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.nav-tabs .nav-link:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.col-lg-5 .card-header,
.col-lg-7 .card-header {
    background-color: var(--color-ssi-gray-light) !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    padding: 1.6px 1rem !important;
}

.nav-tabs .nav-link {
    cursor: pointer !important;
    border-radius: 0.375rem 0.375rem 0 0 !important;
    font-weight: 600 !important;
    padding: 0.5rem 2.2rem !important;
}

.nav-tabs .nav-link:not(.active) {
    background-color: var(--color-ssi-green) !important;
    color: black !important;
    border: none !important;
    opacity: 0.7 !important;
}

.nav-tabs .nav-link.active {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    background-color: white !important;
    color: black !important;
}

.nav-tabs .nav-item {
    margin-right: 0 !important;
}

/* Improve scroll performance and prevent layout shifting */
.po-card-shadow {
    will-change: transform !important;
    contain: layout style paint !important;
}

.po-card-shadow .po-card-list {
    contain: layout style paint !important;
}

/* Tab Styling */
.tab {
    color: black;
    background-color: var(--color-ssi-green);
    border: 2px solid var(--color-ssi-green);
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 00.25rem 0.75rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 6px;
    opacity: 0.7;
}

.tab-selected {
    opacity: 1;
    background-color: var(--color-ssi-green);
    color: black;
    border-color: var(--color-ssi-green);
}

/* SSI Loading Icon - Site Wide */
.ssi-loading-icon {
    width: 40px;
    height: 40px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(18%) saturate(2618%) hue-rotate(118deg) brightness(96%) contrast(86%);
}

.ssi-loading-icon-sm {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(18%) saturate(2618%) hue-rotate(118deg) brightness(96%) contrast(86%);
}

.ssi-loading-icon-xs {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(18%) saturate(2618%) hue-rotate(118deg) brightness(96%) contrast(86%);
}

.ssi-loading-icon-lg {
    width: 80px;
    height: 80px;
    filter: brightness(0) saturate(100%) invert(74%) sepia(18%) saturate(2618%) hue-rotate(118deg) brightness(96%) contrast(86%);
}

/* Replace all Bootstrap spinners with SSI loading icon */
.spinner-border,
.spinner-border-sm,
.spinner-grow,
.spinner-grow-sm {
    display: none !important;
}

/* Add loading icon class for easy replacement */
.loading-spinner::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('SSI_Cloud_svg_Black_Loading.svg');
    background-size: contain;
    background-repeat: no-repeat;
    filter: hue-rotate(130deg) saturate(1.2) brightness(0.8);
}