/* ===== Global Color Variables ===== */

:root {
    --po-table-header-bg: #A8E6A1;
    /* Light green */
    --so-table-header-bg: #ADD8E6;
    /* Light blue */
    --inv-table-header-bg: #003366;
    /* Dark blue */
    --rate-table-header-bg: #F4CF03;
    /* Bright yellow */
    --booking-table-header-bg: #547494;
    /* Muted blue */
    --inv-outline-border: #003366;
    /* INV outline border */
    --greenback-bg: #2a623d;

    --unpaid-invoice-bg: #FF0000;
    /* American greenback */
    --greenback-text: #ffffff;
    --default-text-color: #000;
}

.mbl_no {
    color: blue;
}

body.dark-mode .mbl_no {
    color: #B0C4DE !important;
}

.table {
    font-size: 12px;
}


/* Dark Mode */
body.dark-mode #toggleSearchBtn {
    background-color: #2b2b2b;
    color: #eee;
    border-color: #555;
}

body.dark-mode #toggleSearchBtn:hover {
    background-color: #3a3a3a;
    color: #fff;
    border-color: #666;
}


/* Dark Mode Variables */
.dark_mode {
    --po-table-header-bg: #A8E6A1;
    /* Same as light for visibility */
    --so-table-header-bg: #ADD8E6;
    --inv-table-header-bg: #002244;
    /* Darker blue */
    --rate-table-header-bg: #c3a803;
    /* Dark yellow */
    --booking-table-header-bg: #3c5765;
    /* Darker muted blue */
    --table-body-bg: #2a2a3d;
    --table-body-hover-bg: #3a3a4f;
    --table-text-color: #e0e0e0;
}

.card.card-outline.card-hr {
    border: none;
    border-top: 4px solid #cc64de;
    border-radius: 10px;
    box-shadow: none;
}

/* ===== Light Mode Table Headers ===== */
#po_table thead th {
    background-color: var(--po-table-header-bg);
    color: var(--default-text-color);
    text-align: center;
}

#so_table thead th {
    background-color: var(--so-table-header-bg);
    color: var(--default-text-color);
    text-align: center;
}

#inv_table thead th {
    background-color: var(--inv-table-header-bg);
    color: white;
    text-align: center;
}

#rateTable thead th {
    background-color: var(--rate-table-header-bg);
    color: var(--default-text-color);
    text-align: center;
}

#sailingScheduleTable thead th {
    background-color: var(--rate-table-header-bg);
    color: var(--default-text-color);
    text-align: center;
}

#booking_table thead th {
    background-color: var(--booking-table-header-bg);
    color: white;
    text-align: center;
}

/* ===== Dark Mode Styling ===== */
.dark_mode table {
    background-color: #1e1e2f;
    color: var(--table-text-color);
}

.dark_mode #po_table thead th,
.dark_mode #so_table thead th,
.dark_mode #inv_table thead th,
.dark_mode #sailingScheduleTable thead th,
.dark_mode #rateTable thead th,
.dark_mode #booking_table thead th {
    background-color: var(--po-table-header-bg);
    /* overridden below per-table */
    color: var(--default-text-color);
}

.dark_mode #inv_table thead th {
    background-color: var(--inv-table-header-bg);
    color: white;
}

.dark_mode #rateTable thead th {
    background-color: var(--rate-table-header-bg);
    color: var(--default-text-color);
}

.dark_mode #booking_table thead th {
    background-color: var(--booking-table-header-bg);
    color: white;
}

body.dark-mode .date-picker-wrapper input[type="text"] {
    border: 1px solid #555;
    background-color: #2b2b2b;
    color: #eee;
}

body.dark-mode .date-picker-wrapper input[type="date"] {
    background-color: #3a3a3a !important;
    color: #eee !important;
    -webkit-text-fill-color: #eee !important;
    border: 1px solid #555 !important;
    cursor: not-allowed;
}

/* Dark mode table body */
.dark_mode #po_table tbody td,
.dark_mode #booking_table tbody td,
.dark_mode #inv_table tbody td,
.dark_mode #so_table tbody td,
.dark_mode #rateTable tbody td {
    background-color: var(--table-body-bg);
    color: var(--table-text-color);
}

/* Row hover effect */
.dark_mode #po_table tbody tr:hover td,
.dark_mode #booking_table tbody tr:hover td,
.dark_mode #inv_table tbody tr:hover td,
.dark_mode #so_table tbody tr:hover td,
.dark_mode #rateTable tbody tr:hover td {
    background-color: var(--table-body-hover-bg);
}

/* INV Outline */
.card-outline.inv-outline {
    border-top: 3px solid var(--inv-outline-border) !important;
}

/* Greenback Theme */
.greenback {
    background-color: var(--greenback-bg) !important;
    color: var(--greenback-text);
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    margin-left: 0.5rem;
    width: 300px;
}

.dataTables_wrapper .dt-buttons button {
    border-radius: 2rem;
    margin-right: 0.5rem;
    padding: 0.5rem 1rem;
    background: #4b6cb7;
    color: #fff;
    border: none;
    font-weight: 500;
    transition: 0.2s;
}

.dataTables_wrapper .dt-buttons button:hover {
    background: #182848;
    color: #fff;
    transform: translateY(-2px);
}

/* --- Default (light mode): keep normal autofill colors --- */
input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #212529 !important;
    /* Bootstrap default text */
    transition: background-color 5000s ease-in-out 0s !important;
}

/* --- Dark Mode Autofill Fix --- */
body.dark-mode input:-webkit-autofill,
body.dark-mode select:-webkit-autofill,
body.dark-mode textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px var(--bs-body-bg, #1e1e1e) inset !important;
    -webkit-text-fill-color: #f1f1f1 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

body.dark-mode input:-webkit-autofill:focus,
body.dark-mode select:-webkit-autofill:focus,
body.dark-mode textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--bs-body-bg, #1e1e1e) inset !important;
    -webkit-text-fill-color: #fff !important;
}

/* Dark mode general input styling */
body.dark-mode .form-control {
    background-color: var(--bs-body-bg, #1e1e1e);
    color: #f1f1f1;
    border: 1px solid #444;
}

body.dark-mode .form-control::placeholder {
    color: #aaa;
}

table tbody tr:hover {
    background-color: #f1f7ff !important;
    /* light blue background */
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.05);
    /* subtle overlay */
    transform: scale(1.01);
    /* slight zoom */
    cursor: pointer;
}

body.dark-mode table tbody tr:hover {
    background-color: #1e293b !important;
    /* dark slate blue/gray */
    box-shadow: inset 0 0 0 9999px rgba(59, 130, 246, 0.15);
    /* stronger subtle overlay */
}


/* Default light mode */
.table tbody tr.selected {
    background-color: #cce5ff;
    /* light blue highlight */
    color: #000;
}

/* Dark mode support */
body.dark-mode .table tbody tr.selected {
    background-color: #375a7f;
    /* dark blue */
    color: #fff;
}

/* Optional: checkbox center alignment */
.table tbody tr input.select-row {
    cursor: pointer;
}


/* Default icon */
.lte_icon {
    width: 45px;
    height: auto;
    transition: filter 0.3s ease;
}

.dark-mode .lte_icon {
    filter: invert(1) brightness(1);
}

.toggle-icon {
    transition: transform 0.3s ease;
}

.rotate-180 {
    transform: rotate(180deg);
}