/*
* MODERN BOOTSTRAP 3 TABLE OVERRIDE
* All styles in one file.
*/
/* 1. Import a modern, professional font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
/*
* 2. Override the main .table container
* We remove the old borders, add a modern box-shadow and rounded corners.
* `overflow: hidden` is key to making the border-radius clip the corners.
*/
.table {
font-family: 'Inter', sans-serif;
border: none;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
overflow: hidden;
background-color: #ffffff;
margin-bottom: 24px;
}
/* * 3. Style the Table Header (| )
* We give it a subtle background, more padding, and a clean bottom border.
*/
.table > thead > tr > th {
background-color: #f8f9fa;
color: #343a40;
font-weight: 600; /* Bolder, but not full 'bold' */
font-size: 10px;
padding: 16px 20px;
border-top: none;
border-bottom: 2px solid #dee2e6;
vertical-align: middle !important; /* Force override */
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* * 4. Style the Table Body Cells ( | )
* We increase padding, set a clean row-separator border, and vertically
* align content for a much cleaner look.
*/
.table > tbody > tr > td {
padding: 16px 20px;
color: #5a626b;
font-size: 15px;
vertical-align: middle !important; /* Force override */
border-top: none; /* Remove default BS3 top border */
border-bottom: 1px solid #f0f0f0; /* Add our new, light separator */
}
/* Remove the border from the very last row in the table body */
.table > tbody > tr:last-child > td {
border-bottom: none;
}
/* * 5. Override .table-striped
* We make the striping color very subtle.
*/
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #fcfdfe;
}
/* * 6. The "Stunning" .table-hover Animation
* This is the magic.
*/
/* First, set the transition on the table row itself */
.table > tbody > tr {
transition: transform 0.25s ease-out,
box-shadow 0.25s ease-out,
background-color 0.15s ease-out;
}
/* * On hover, we "lift" the row, add a shadow, and change the background.
* This works beautifully with or without .table-striped.
*/
.table-hover > tbody > tr:hover {
background-color: #ffffff; /* Force a white background to "pop" */
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
/* This creates a subtle "glow" on the left side */
border-left: 3px solid #007bff; /* Use your app's primary color! */
}
/* ADDED: Reset text color on hover for all cells */
.table-hover > tbody > tr:hover > td {
color: #343a40; /* A sharp, default dark color for hover */
}
/* We need to adjust the padding on hover so the border doesn't push content */
.table-hover > tbody > tr:hover > td:first-child {
padding-left: 17px; /* 20px original padding - 3px border */
}
/* * 7. Nullify .table-bordered
* If you use .table-bordered, we remove the ugly old borders
* so our clean, row-based style still works.
*/
.table-bordered {
border: none;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
border: none; /* Remove all cell borders */
}
/* We just re-declare our clean borders to ensure they win */
.table-bordered > thead > tr > th {
border-bottom: 2px solid #dee2e6;
}
.table-bordered > tbody > tr > td {
border-bottom: 1px solid #f0f0f0;
}
/* * 8. Handle BS3 Labels (Bonus)
* The default labels are a bit harsh. Let's soften them.
*/
.label {
padding: .3em .6em .3em;
font-size: 75%;
font-weight: 500;
border-radius: 0.25rem; /* Softer radius */
}
.label-success { background-color: #d4edda; color: #155724; }
.label-warning { background-color: #fff3cd; color: #856404; }
.label-danger { background-color: #f8d7da; color: #721c24; }
.label-info { background-color: #d1ecf1; color: #0c5460; }
.label-default { background-color: #e2e3e5; color: #383d41; }
/*
* 9. ADDED: Subline Hierarchy
* Adds indented rows for hierarchy.
*/
/* Force subline content to align to the top */
.table > tbody > tr.subline-1 > td,
.table > tbody > tr.subline-2 > td,
.table > tbody > tr.subline-3 > td {
vertical-align: top !important; /* Override the 'middle' alignment */
/*background-color: #fdfdff; /* Subtle background for sublines */
font-size: 14px;
}
.table > tbody > tr.subline-1:not(.selected-row) > td,
.table > tbody > tr.subline-2:not(.selected-row) > td,
.table > tbody > tr.subline-3:not(.selected-row) > td {
background-color: #fdfdff; /* Subtle background for sublines */
}
.table > tbody > tr.subline-1.selected-row > td,
.table > tbody > tr.subline-2.selected-row > td,
.table > tbody > tr.subline-3.selected-row > td {
background-color: rgba(55, 213, 49, 0.2);
}
.table > tbody > tr.subline-1 > td:first-child {
padding-left: 55px; /* MODIFIED: 20px base + 25px indent + 10px gap */
position: relative; /* This is the anchor for the connector */
}
.table > tbody > tr.subline-2 > td:first-child {
padding-left: 80px; /* MODIFIED: 20px base + 50px indent + 10px gap */
position: relative; /* This is the anchor for the connector */
}
.table > tbody > tr.subline-3 > td:first-child {
padding-left: 105px; /* MODIFIED: 20px base + 75px indent + 10px gap */
position: relative; /* This is the anchor for the connector */
}
/* The '::before' pseudo-element creates the '└─' connector */
.table > tbody > tr.subline-1 > td:first-child::before,
.table > tbody > tr.subline-2 > td:first-child::before,
.table > tbody > tr.subline-3 > td:first-child::before {
content: '└─';
position: absolute;
top: 20px;
transform: none;
line-height: 1;
color: #adb5bd;
font-size: 18px;
font-weight: bold;
}
/* Adjust connector position for each indent level */
.table > tbody > tr.subline-1 > td:first-child::before {
left: 25px;
}
.table > tbody > tr.subline-2 > td:first-child::before {
left: 50px;
}
.table > tbody > tr.subline-3 > td:first-child::before {
left: 75px;
}
/*
* 10. Update Hover States for Sublines
* We need to adjust the hover padding to account for the new indents.
*/
/* Hover padding for subline-1 */
.table-hover > tbody > tr.subline-1:hover > td:first-child {
padding-left: 52px; /* MODIFIED: 55px original padding - 3px border */
}
/* Hover padding for subline-2 */
.table-hover > tbody > tr.subline-2:hover > td:first-child {
padding-left: 77px; /* MODIFIED: 80px original padding - 3px border */
}
/* Hover padding for subline-3 */
.table-hover > tbody > tr.subline-3:hover > td:first-child {
padding-left: 102px; /* MODIFIED: 105px original padding - 3px border */
}
/*
* 11. ADDED: Contextual Row States
* These classes can be added to any | to give it a state.
* They work with regular rows, sublines, and the hover effect.
*
* MODIFIED: These now override default Bootstrap 3 classes
* .success, .danger, .warning, .info
*/
/* --- Success (Overrides .success) --- */
.table > tbody > tr.success {
background-color: #f0fff4; /* Light green */
border-left: 3px solid #28a745; /* Dark green */
}
.table > tbody > tr.success > td { color: #1c5c2b; }
.table > tbody > tr.success > td:first-child { padding-left: 17px; }
.table > tbody > tr.subline-1.success > td:first-child { padding-left: 52px; } /* MODIFIED */
.table > tbody > tr.subline-2.success > td:first-child { padding-left: 77px; } /* MODIFIED */
.table > tbody > tr.subline-3.success > td:first-child { padding-left: 102px; } /* MODIFIED */
/* --- Danger (Overrides .danger) --- */
.table > tbody > tr.danger {
background-color: #fff2f2; /* Light red */
border-left: 3px solid #dc3545; /* Dark red */
}
.table > tbody > tr.danger > td { color: #8a1c26; }
.table > tbody > tr.danger > td:first-child { padding-left: 17px; }
.table > tbody > tr.subline-1.danger > td:first-child { padding-left: 60px; } /* MODIFIED */
.table > tbody > tr.subline-2.danger > td:first-child { padding-left: 77px; } /* MODIFIED */
.table > tbody > tr.subline-3.danger > td:first-child { padding-left: 102px; } /* MODIFIED */
/* --- Warning (Overrides .warning) --- */
.table > tbody > tr.warning {
background-color: #fffcf0; /* Light yellow */
border-left: 3px solid #ffc107; /* Dark yellow */
}
.table > tbody > tr.warning > td { color: #8a6d00; }
.table > tbody > tr.warning > td:first-child { padding-left: 17px; }
.table > tbody > tr.subline-1.warning > td:first-child { padding-left: 52px; } /* MODIFIED */
.table > tbody > tr.subline-2.warning > td:first-child { padding-left: 77px; } /* MODIFIED */
.table > tbody > tr.subline-3.warning > td:first-child { padding-left: 102px; } /* MODIFIED */
/* --- Info (Overrides .info) --- */
.table > tbody > tr.info {
background-color: #f1f9ff; /* Light info blue */
border-left: 3px solid #17a2b8; /* Dark info blue */
}
.table > tbody > tr.info > td { color: #0c5460; }
.table > tbody > tr.info > td:first-child { padding-left: 17px; }
.table > tbody > tr.subline-1.info > td:first-child { padding-left: 52px; } /* MODIFIED */
.table > tbody > tr.subline-2.info > td:first-child { padding-left: 77px; } /* MODIFIED */
.table > tbody > tr.subline-3.info > td:first-child { padding-left: 102px; } /* MODIFIED */
/* --- Highlight (Custom - No BS3 equivalent) --- */
.table > tbody > tr.row-highlight {
background-color: #f0f7ff; /* Light primary blue */
border-left: 3px solid #007bff; /* Primary blue */
}
.table > tbody > tr.row-highlight > td { color: #004a99; }
.table > tbody > tr.row-highlight > td:first-child { padding-left: 17px; }
.table > tbody > tr.subline-1.row-highlight > td:first-child { padding-left: 52px; } /* MODIFIED */
.table > tbody > tr.subline-2.row-highlight > td:first-child { padding-left: 77px; } /* MODIFIED */
.table > tbody > tr.subline-3.row-highlight > td:first-child { padding-left: 102px; } /* MODIFIED */
/* --- Active (Custom - No BS3 equivalent) --- */
.table > tbody > tr.row-active {
background-color: #f8f5ff; /* Light purple */
border-left: 3px solid #6f42c1; /* Dark purple */
}
.table > tbody > tr.row-active > td { color: #4a2c82; }
.table > tbody > tr.row-active > td:first-child { padding-left: 17px; }
.table > tbody > tr.subline-1.row-active > td:first-child { padding-left: 52px; } /* MODIFIED */
.table > tbody > tr.subline-2.row-active > td:first-child { padding-left: 77px; } /* MODIFIED */
.table > tbody > tr.subline-3.row-active > td:first-child { padding-left: 102px; } /* MODIFIED */
/* --- Archived (Custom - No BS3 equivalent) --- */
.table > tbody > tr.row-archived {
background-color: #f8f9fa; /* Light gray */
border-left: 3px solid #adb5bd; /* Dark gray */
}
.table > tbody > tr.row-archived > td {
color: #5a626b;
font-style: italic;
}
.table > tbody > tr.row-archived > td:first-child { padding-left: 17px; }
.table > tbody > tr.subline-1.row-archived > td:first-child { padding-left: 52px; } /* MODIFIED */
.table > tbody > tr.subline-2.row-archived > td:first-child { padding-left: 77px; } /* MODIFIED */
.table > tbody > tr.subline-3.row-archived > td:first-child { padding-left: 102px; } /* MODIFIED */