/* static/style.css */

/* Keep your @import for Google Fonts if you are using them */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Oswald:wght@700&display=swap');

/* Keep your :root variables */
:root {
    --brand-black: #222222;
    --brand-blue: #00A3E0;
    --brand-white: #FFFFFF;
    --font-header: 'Oswald', sans-serif;
    /* Still used for your custom H1/H2 if not overridden by Tabler */
    --font-body: 'Lato', sans-serif;
    /* Still used for your custom body font if not overridden by Tabler */
    --light-gray-bg: #f8f9fa;
    /* Tabler might have its own variable for this */
    --table-border-color: #dee2e6;
    /* Tabler likely uses --bs-border-color */
    --container-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --status-overdue-color: #d93025;
    --status-pending-color: #ff8c00;
}

/* Let Tabler handle most body styles. Only add specific overrides. */
body {
    font-family: var(--font-body);
    /* This will apply if Tabler doesn't set a more specific one */
    /* Tabler sets background-color, color, line-height, etc. */
    /* font-size: 14px; /* You can set a base if you want to adjust Tabler's default */
}

/* Custom styling for Hye Tech logo in navbar if Tabler's default isn't enough */
.navbar-brand-image {
    /* height: 32px; /* Tabler's default size for this in its example */
    /* Example: padding: 5px; if you need adjustments */
}


/* ----- General Table Cell Centering ----- */
/* Apply to all tables that have Tabler's base .table class */
.table th,
.table td {
    text-align: center;
    vertical-align: middle;
    /* Good for consistency */
}

/* ----- Status Badges/Text (Tabler has text color utilities) ----- */
/* Standardized Tabler.io badge styling with proper contrast */

/* Ensure proper contrast for Tabler badges */
.badge {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
}

/* Override any light badge variants to use proper contrast */
.badge.bg-warning {
    background-color: #f59e0b !important;
    color: #000000 !important;
}

.badge.bg-success {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

.badge.bg-danger {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

.badge.bg-primary {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

.badge.bg-secondary {
    background-color: #6b7280 !important;
    color: #ffffff !important;
}

.badge.bg-info {
    background-color: #06b6d4 !important;
    color: #ffffff !important;
}
.status-pending {
    /* If you apply this class directly to the TD text for color */
    color: var(--status-pending-color);
    font-weight: bold;
    /* Tabler might have its own font-weight for badges/status */
}

.status-overdue,
.status-overdue strong {
    /* If you apply this class directly to the TD text for color */
    color: var(--status-overdue-color);
    font-weight: bold;
}

/* For the Due Date cell in Overdue table, if you want just its text red */
#tableOverdueInv td:nth-child(6).status-overdue {
    /* Assuming DueDate is 6th and has class */
    /* Handled by using class="text-red" in the HTML directly on the <td> or its content for Tabler */
}


/* ----- Header for "Status" in Overdue Table ----- */
/* Tabler styles th elements. To make a specific header red: */
th.th-status-overdue {
    /* You added this class to the <th> in HTML */
    background-color: var(--status-overdue-color) !important;
    /* Tabler's default TH bg is strong */
    color: var(--brand-white) !important;
}


/* ----- Font size for tables if Tabler's default is too large ----- */
.table {
    font-size: 0.875rem;
    /* Tabler's default is 1rem, this makes it slightly smaller */
    /* word-break: break-word; /* Good for long content, Tabler might handle this */
    /* overflow-wrap: break-word; */
}

/* You might need to adjust padding on th, td if font-size changes significantly */
.table th,
.table td {
    padding: 0.5rem 0.75rem;
    /* Adjust Tabler's default padding if needed */
}


/* Styles from previous setup - review and keep/remove as needed */
.na-value {
    color: #6c7a89;
    font-style: italic;
}

/* Use Tabler's muted color */
.sub-id {
    display: block;
    font-size: 0.75em;
    color: #6c7a89;
    margin-top: 2px;
}

/* Search input: Tabler's .form-control should style this well.
   Only add overrides if necessary. */
input[type="text"].form-control {
    /* margin-bottom: 1rem; /* Tabler usually adds spacing via utility classes like mb-3 */
    /* text-align: center; /* If you want the input text itself centered */
}

/* input[type="text"].form-control::placeholder { text-align: center; } */


/* Mark Paid Button: Tabler's .btn .btn-sm .btn-success should style this.
   The .btn-mark-paid class can be removed from HTML if you use only Tabler classes.
   Or, use .btn-mark-paid for very specific overrides. */
.btn-mark-paid {
    /* This is if you keep your custom class on the button */
    /* Example: If you want it slightly different from default Tabler success button */
    /* font-size: 0.8rem; */
}
#tableQuotesNotInv td:last-child {
    width: 150px; /* Adjust this value as needed */
    display: flex; /* Use flexbox for alignment */
    justify-content: flex-end; /* Align content to the right */
    align-items: center;     /* Vertically align content */
    padding-right: 10px;     /* Add some padding on the right */
    box-sizing: border-box;  /* Include padding in the element's total width */
}

.table-responsive {
    overflow-x: auto; /* Or 'scroll' */
    max-width: 100%; /* Or a specific width like 1200px */
}
#tableQuotesNotInv > tbody > tr > td:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 10px;
  box-sizing: border-box;
}