/* --- Global --- */
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    background-color: #F9FAFB;
    color: #374151;
}

/* --- Navigation Bar --- */
nav {
    background: #1F2937;
    color: white;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1000;
    min-height: 60px;
}

.nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
}

nav h3 {
    margin: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-logo {
    height: 30px;
    width: auto;
    vertical-align: middle;
}

/* Navbar Links Wrapper */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 18px 15px;
    display: block;
    transition: background-color 0.2s;
}
nav a:hover {
    background: #1D4ED8;
}

/* --- Mobile Menu Toggle --- */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin-left: auto;
}
.mobile-menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

/* --- Dropdown Menu --- */
.dropdown {
    position: relative;
    display: inline-block;
    height: 100%;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #374151;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 50;
    top: 100%;
    right: 0;
    border-radius: 0 0 4px 4px;
}
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-radius: 0;
}
.dropdown-content a:hover {
    background-color: #1D4ED8;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropbtn {
    color: white;
    text-decoration: none;
    padding: 18px 15px;
    display: block;
    border: none;
    background: none;
    font-size: 1em;
    font-family: inherit;
    cursor: pointer;
    height: 100%;
}

/* --- Main Content --- */
.container {
    margin: 20px 40px;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2, 5px rgba(0,0,0,0.05);
}

/* --- Links & Buttons --- */
a { color: #2563EB; }

button, .btn {
    background-color: #3B82F6;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 400;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    font-family: inherit;
}
button:hover, .btn:hover {
    background-color: #1E40AF;
    transform: translateY(-1px);
}

/* Button Colors */
.btn-success { background-color: #059669; }
.btn-success:hover { background-color: #047857; }
.btn-danger { background-color: #dc2626; }
.btn-danger:hover { background-color: #b91c1c; }
.btn-secondary { background-color: #4B5563; }
.btn-secondary:hover { background-color: #374151; }
.btn-warning { background-color: #f59e0b; color: #374151; }
.btn-warning:hover { background-color: #d97706; color: #374151; }

/* Action Buttons */
.action-btn-small {
    padding: 5px 8px;
    font-size: 0.9em;
    font-weight: normal;
    width: 30px;
    height: 30px;
    text-align: center;
}
.btn-delete-link {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    padding: 0;
    font-size: 1em;
    font-weight: normal;
    box-shadow: none;
}
.btn-delete-link:hover {
    text-decoration: underline;
    color: #b91c1c;
}

/* Icons */
.btn-icon-base {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    font-size: 0;
    color: transparent;
    text-indent: -9999px;
}
/* SVG Data URIs */
.btn-file-list-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M5 4h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1zm0 2h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1zm0 2h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1zm0 2h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1z'/%3E%3C/svg%3E"); }
.btn-delete-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/%3E%3C/svg%3E"); }
.btn-edit-icon-solid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z'/%3E%3C/svg%3E"); }
.btn-manage-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311A1.464 1.464 0 0 1 3.4 6.096l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 .872-2.105l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413-1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169A1.464 1.464 0 0 1 9.505 1.39l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.858 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E"); }
.btn-undo-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E"); }
.btn-save-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 4v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4H1zM14 1 13.5.5h-11L2 1v2h12V1zM2 2V1h10v1H2z'/%3E%3C/svg%3E"); }
.btn-download-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z'/%3E%3C/svg%3E"); }
.btn-check-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E"); }
.btn-reject-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); }
/* --- FINAL FIX: ADD SEARCH ICON FOR REVIEW BUTTON (B-2 Aesthetic) --- */
.btn-search-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E"); }

/* --- Forms --- */
input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea {
    width: 300px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}
.form-grid-item input, .form-grid-item select, .form-grid-item textarea,
.responsive-grid input, .responsive-grid select, .responsive-grid textarea {
    width: 100%;
}

label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-section {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* Form Grid Layouts */
.form-grid { display: grid; gap: 20px; }
.form-grid-2-col { grid-template-columns: 1fr 1fr; max-width: 600px; }
.form-grid-3-col { grid-template-columns: 1fr 1fr 1fr; max-width: 900px; }
.form-grid-4-col { grid-template-columns: 2fr 1fr 1fr 1fr; max-width: 1000px; }
.form-grid-5-col { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.form-grid-payment { grid-template-columns: auto auto auto 1fr; }

/* Responsive Grid Classes */
.responsive-2-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.responsive-3-col-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

.stat-row { display: flex; justify-content: space-around; font-size: 1.1em; }
.balance-box { font-size: 1.2em; }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; }

.form-action-bar { margin-top: 30px; display: flex; gap: 15px; align-items: center; justify-content: flex-start; }
.filter-action-box { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.filter-action-box .btn { padding: 10px 15px; font-size: 1em; }

/* --- Alert Messages --- */
.alert { padding: 15px; margin-bottom: 20px; border-radius: 4px; border: 1px solid transparent; }
.alert-success { background: #E6FFFA; color: #065F46; border-color: #B2F5EA; }
.alert-danger { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.alert-info { background: #fefcbf; color: #713f12; border-color: #fde047; }

/* --- Tables --- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9em; margin-top: 15px; }
/* 🔑 FIX: RESTORED padding for all standard table cells for desktop view (Unprocessed Entries, etc.) */
.data-table th, .data-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.data-table td.item-actions { border: 1px solid #ddd !important; }

.data-table th {
    background-color: #E5E7EB; /* A slightly darker gray */
    font-weight: bold;
    text-align: center;
    /* You may need !important if a general theme rule is overriding */
    /* background-color: #E5E7EB !important; */
}
.data-table tfoot tr { border-top: 3px solid #000; font-weight: bold; background-color: #F9FAFB; }
.data-table tr:nth-child(even) { background-color: #F9FAFB; }

.currency, .data-table th.currency, .data-table td.currency,
.data-table th.text-right, .data-table td.text-right { text-align: right !important; }
input.currency-input, input.hours-input, input[type="number"] { text-align: right; }

/* Status Badges */
.status-badge { color: #374151; padding: 3px 8px; border-radius: 10px; font-weight: bold; }
.status-draft { color: #f59e0b; }
.status-sent { color: #2563EB; }
.status-paid { color: #059669; }
.status-active { color: #059669; }
.status-inactive { color: #4B5563; }

/* Sortable Headers */
.sort-header { text-decoration: none; color: #374151; font-weight: bold; cursor: pointer; display: block; padding: 8px; }
.sort-header:hover { text-decoration: underline; }
.arrow { font-size: 0.8em; margin-left: 5px; }

/* --- Item List (Setup Pages) --- */
.item-list { list-style: none; padding: 0; }
.item-row {
    display: grid;
    grid-template-columns: 50px 1.5fr 1fr 100px; /* Default 4 col */
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
}
.item-row:nth-child(even) { background-color: #F9FAFB; }
.item-row.header { font-weight: bold; font-size: 1em; display: grid !important; background-color: #E5E7EB; }
.item-actions { display: flex; gap: 10px; align-items: center; }
.item-actions a { text-decoration: none; font-size: 1.2em; }
.item-actions form .btn-delete-link { font-size: 1.2em; line-height: 1; }

/* --- Grid overrides --- */
/* PII Update: 9 Columns */
.consultants-grid { grid-template-columns: 40px 1.2fr 1fr 1.2fr 0.8fr 0.8fr 0.8fr 0.6fr 100px; }
/* FIX: Clients Grid (3 buttons need 150px) */
.clients-grid { grid-template-columns: 50px 1.5fr 1fr 150px; }
.contracts-grid { grid-template-columns: 50px 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 150px 200px; }
.manage-contract-grid { grid-template-columns: 1fr 1fr 1fr 1.5fr; }
.vendors-grid { grid-template-columns: 50px 2fr 1.2fr 1.5fr 1fr 120px; }

/* Partner Page List */
.partner-list { list-style: none; padding: 0; }
.partner-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 8px; border-bottom: 1px solid #eee; }

/* --- Document Manager Tree View --- */
.root-row { background-color: #ffffff; border-top: 2px solid #eee; }
.child-row { background-color: #fcfcfc; }
.doc-name-cell { display: flex; align-items: center; }
.tree-indent { padding-left: 25px; color: #555; }
.tree-connector { margin-right: 8px; color: #999; font-weight: bold; font-size: 1.2em; line-height: 1; }
.type-badge { font-size: 0.85em; padding: 2px 6px; background: #f3f4f6; border-radius: 4px; border: 1px solid #e5e7eb; }

.invoice-detail-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #ddd; padding-bottom: 10px; margin-bottom: 20px; }
.invoice-total-box { text-align: right; }
.invoice-total-box h2 { margin: 0; }
.btn-large { font-size: 1.1em; padding: 10px 20px; }

/* =========================================
   MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 768px) {
    /* 1. Navigation */
    nav { flex-wrap: wrap; padding: 10px 20px; }
    .nav-header { width: 100%; display: flex; justify-content: space-between; align-items: center; }
    .mobile-menu-toggle { display: block; }

    nav ul { display: none; flexDirection: column; width: 100%; margin-top: 10px; border-top: 1px solid #374151; }
    nav ul.show { display: flex; flex-direction: column; }
    nav li { width: 100%; text-align: left; }
    nav a, .dropbtn { width: 100%; box-sizing: border-box; padding: 15px; border-bottom: 1px solid #374151; }

    .dropdown-content { position: static; box-shadow: none; background-color: #111827; width: 100%; }
    .dropdown-content a { padding-left: 30px; }

    /* 2. Layout */
    .container { margin: 10px; padding: 15px; }

    /* 3. Grids: Stack everything vertically */
    .responsive-grid, .form-grid, .form-grid-2-col, .form-grid-3-col,
    .form-grid-4-col, .form-grid-5-col, .form-grid-payment,
    .mobile-entry-grid, .responsive-2-col-grid, .responsive-3-col-grid {
        grid-template-columns: 1fr !important;
    }
    .responsive-grid input, .responsive-grid select, .responsive-grid textarea,
    .form-grid input, .form-grid select, .form-grid textarea {
        width: 100% !important;
    }
    #ar-ap-grid { grid-template-columns: 1fr; }

    .stat-row { flex-direction: column; gap: 10px; text-align: center; }
    .stat-row > div { border-bottom: 1px dashed #eee; padding-bottom: 5px; margin-bottom: 5px; }
    .stat-row > div:last-child { border-bottom: none; margin-bottom: 0; }
    .balance-box { font-size: 1.1em; background-color: #f0f8ff; padding: 10px; border-radius: 4px; margin-top: 5px; border-bottom: none !important; }

    /* 4. Tables: Stack rows */
    .data-table thead { display: none; }
    .data-table tr { display: block; border: 1px solid #ddd; margin-bottom: 15px; background: #fff; }

    /* Exclude #bulk-table from flex stacking */
    .data-table:not(#bulk-table) td {
        display: flex; justify-content: space-between; align-items: flex-start;
        text-align: right; border-bottom: 1px dashed #eee; padding: 12px 10px; height: auto;
    }
    .data-table:not(#bulk-table) td:before {
        content: attr(data-label); position: static; width: 50%; text-align: left; font-weight: bold; color: #555; padding-right: 10px; flex-shrink: 0;
    }
    .data-table.mobile-stack td:first-child {
        background-color: #374151; color: white; text-align: left; padding-left: 10px; display: block;
    }
    .data-table.mobile-stack td:first-child:before { content: ""; }

    /* 5. Item Lists - STACKING (Card View) */
    /* Stack all lists EXCEPT contracts/manage/vendors if desired, OR stack all.
       Based on recent request, we want Consultants AND Clients to stack. */
    .item-row:not(.contracts-grid):not(.manage-contract-grid):not(.vendors-grid) {
        display: block; border: 1px solid #ddd; margin-bottom: 10px; padding: 10px;
    }
    .item-row.header:not(.contracts-grid):not(.manage-contract-grid):not(.vendors-grid) {
        display: none;
    }
    .item-row span, .item-row .item-actions {
        display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed #eee;
    }
    .item-row span:before {
        content: attr(data-label); width: 45%; text-align: left; font-weight: bold;
    }
    .item-row .item-actions {
        padding-left: 0; text-align: right; border-bottom: none; justify-content: flex-end;
    }

    /* 6. Misc */
    .partner-item { flex-direction: column; align-items: flex-start; }
    .partner-actions { margin-top: 10px; }
    .invoice-detail-header { flex-direction: column; align-items: flex-start; }
    .invoice-total-box { text-align: left; margin-top: 20px; }
    .modal-content { width: 95% !important; margin: 5% auto !important; }
}

@media (min-width: 769px) {
    .item-row.contracts-grid .item-actions { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
    .item-row.header.contracts-grid span:last-child { text-align: right; padding-right: 10px; }
}


/* --- BULK ENTRY GRID STYLES (Refactored from HTML) --- */

/* Base class for the compact row height */
.data-row-compact {
    height: 35px;
}

/* Base class for the input field */
.hours-input-field {
    box-sizing: border-box;
    border-radius: 0;
    width: 75px; /* Input Width */
    text-align: right;
    padding: 5px 5px; /* Padding inside the text box */
    border: 1px solid #ccc;
    margin: 2px 5px; /* Margin outside the text box (5px space from cell border) */
}

/* Specific sticky column header styling */
.sticky-header-col {
    background-color: #cccccc !important; /* Darker header color */
    z-index: 10;
    padding: 10px;
    text-align: center !important; /* Center align header text */
}

/* Sticky header filter element */
.sticky-header-col-filter {
    background-color: #cccccc !important;
    z-index: 10;
    padding: 0;
    text-align: center !important;
}

/* Sticky body cell styling */
.sticky-body-cell {
    background-color: #f8f8f8;
    font-weight: bold;
    z-index: 5;
    padding: 10px 5px !important; /* Explicit padding for text spacing */
    word-break: break-word;
    text-align: left !important;
}
.sticky-col-serial {
    text-align: right !important; /* Overrides the left alignment of the general sticky cell class */
}

/* Conditional Colors */
.hours-future { background-color: #e6f7ff; }
.hours-future .hours-input-field { background-color: #e6f7ff; }

.hours-current { background-color: #fff8e1; font-weight: bold; }
.hours-current .hours-input-field { background-color: #fff8e1; font-weight: bold; }

.hours-locked { background-color: #f5f5f5; }
.hours-locked .hours-input-field { background-color: #f5f5f5; color: #888; }

/* Blank/Zero Hours (CRITICAL FIX COLOR) */
.monthly-cell[style*="background-color: #bcbaba"],
.monthly-cell[style*="background-color: rgb(188, 186, 186)"] {
    background-color: #bcbaba !important;
}
.monthly-cell[style*="background-color: #bcbaba"] .hours-input-field,
.monthly-cell[style*="background-color: rgb(188, 186, 186)"] .hours-input-field {
    background-color: #bcbaba !important;
}

/* Total Row Styling */
#table-footer tr { height: 40px; }
.total-cell-padded {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.total-cell-aligned {
    padding: 10px 15px 10px 0 !important;
    text-align: right !important;
}


/* 🔑 OVERRIDE: Resets padding to zero for the compact bulk grid, overriding the global 8px padding */

#bulk-table.data-table th,
#bulk-table.data-table td {
    padding: 0;
    height: 100%;
}
#bulk-table.data-table th {
    padding: 10px; /* Explicit padding for THs within the bulk grid headers */
}
.hours-input {
    box-sizing: border-box;
    border-radius: 0;
}

/* New style to ensure the displayed text in locked cells is vertically centered and fits the table row height */
.locked-cell .display-hours {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    background-color: transparent !important; /* Let the TD color handle the background */
    padding: 5px 15px 5px 5px !important;
}

/* Target fallback read-only inputs for comprehensive reset */
.locked-cell input[readonly],
.locked-cell input.hours-input-field { /* Check for input field class just in case */
    border: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    background-color: transparent !important;
}

/* FINAL FIX: Use a class with !important to reliably override table colors for blank/zero state */
/* This class is now added in the JS sync function if the value is blank/zero */
.monthly-cell-blank,
.monthly-cell-blank .hours-input {
    background-color: #bcbaba !important;
}

/* --- ADD THIS NEW RULE TO styles.css --- */
.monthly-cell-blank.hours-paid,
.monthly-cell-blank.hours-paid .hours-input {
    /* If a cell is both blank and paid, it must be the paid color */
    background-color: #d4edda !important;
}

.monthly-cell.hours-paid .display-hours {
    background-color: #d4edda !important;
}

.filter-select {
    width: 100%;
    padding: 8px 5px;
    box-sizing: border-box;
    border: none;
    font-size: 0.9em;
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-weight: bold;
}

/* Overriding filter select background style set inline for headers */
#client-header .filter-select,
#vendor-header .filter-select {
    background: #cccccc !important; /* Keep filter selects the same color as the header they live in */
}

#table-footer td:not(:first-child) {
    border-left: 1px solid #000 !important;
}

/* This ensures the soft green background overrides the generic gray locked inline style (#f5f5f5). */
td.hours-paid,
.sticky-body-cell.hours-paid {
    background-color: #d4edda !important;
    color: #155724;
}
.hours-paid .hours-input-field,
.hours-paid .display-hours {
    background-color: #d4edda !important;
}

/* --- FIX: ATS Job Openings Grid --- */
/* Defines the grid structure for job_list.html item-row */
.job-openings-grid {
    grid-template-columns: 40px 2fr 1.5fr 1fr 1fr 120px 100px;
}

/* Enforce Right/Center Alignment on specific columns */
.job-openings-grid span:nth-child(1), /* ID Column */
.job-openings-grid div:nth-child(7) { /* Actions Column */
    text-align: center;
}

.job-openings-grid span:nth-child(6) { /* Created Date Column */
    text-align: right;
    font-size: 0.95em; /* Standardize font size for date */
    color: #4B5563; /* Set a consistent, readable color */
    padding-right: 10px; /* Add padding for visual space */
}

/* --- FIX: ATS Pipeline Grid Structure and Alignment --- */

/* Defines the 8-column structure for the main application grid */
.ats-pipeline-grid {
    grid-template-columns: 40px 1.5fr 1.5fr 1fr 1fr 1fr 100px 100px;
    gap: 10px;
    padding: 12px 10px !important; /* Standardized row padding */
}

/* Enforce Center Alignment on Checkbox and Actions columns */
.ats-pipeline-grid div:nth-child(1), /* Checkbox Column */
.ats-pipeline-grid div:nth-child(8) { /* Actions Column */
    text-align: center !important;
    justify-content: center !important;
}

/* Enforce Right Alignment for numerical data */
.ats-pipeline-grid div:nth-child(5), /* Rates (Bill / Pay) */
.ats-pipeline-grid div:nth-child(6) { /* Est. Margin */
    text-align: right; /* Align the block content to the right */
}
.ats-pipeline-grid div:nth-child(5) div,
.ats-pipeline-grid div:nth-child(6) strong {
    /* Ensure the values themselves align right within their own divs for clean currency display */
    text-align: right;
}

/* =========================================
   Financial Matrix Table (Final Polish)
   ========================================= */

/* 1. Force Table Layout */
#financial-matrix-table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

#financial-matrix-table tr {
    display: table-row;
    background-color: #fff;
}

/* 2. Standard Cell Styling */
#financial-matrix-table th,
#financial-matrix-table td {
    display: table-cell;
    vertical-align: middle;
    padding: 0 15px;
    height: 55px;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
    text-align: right !important;
}

/* 3. Sticky First Column */
#financial-matrix-table .sticky-col {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: #f9fafb;
    font-weight: bold;
    text-align: left !important; /* This will now win because of the ID above */
    width: 180px;
    min-width: 180px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* 4. Flex Container (Right Aligned) */
#financial-matrix-table .input-group-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end; /* Anchors everything to the right */
    gap: 8px;
    width: 100%;
    height: 100%;
}

/* 5. The Input (WIDER 140px) */
#financial-matrix-table .clean-input {
    width: 140px !important; /* FIXED: Wider to fill space */
    padding: 6px 5px !important;
    text-align: right !important;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.95em;
    -moz-appearance: textfield;
}
#financial-matrix-table .clean-input:focus {
    border-color: #2563EB;
    outline: 2px solid #bfdbfe;
}

/* 6. The Spacer / Red Text */
#financial-matrix-table .impact-text {
    font-size: 0.85em;
    color: #dc2626;
    font-weight: bold;
    text-align: left;
    min-width: 75px !important; /* Fixed width prevents jitter */
    display: inline-block !important;
}

/* 7. Available Margin Wrapper (Bold & Green) */
#financial-matrix-table .align-right-wrapper {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    /* Calculation: 75px (Spacer) + 8px (Gap) + 5px (Input Internal Padding) = 88px */
    padding-right: 88px;

    /* FIX: Standout Styling */
    color: #047857; /* Emerald Green */
    font-weight: 800; /* Extra Bold */
    font-size: 1.2em; /* Larger */
}

/* Calculated Row Styling */
.calc-row {
    background-color: #eff6ff !important;
}