/* ============================================================
TABLE DESIGN OVERRIDE
Targets: public/css/admin/main.css + public/stylesheets/styles.css
+ public/stylesheets/style.css
INSTRUCTION: Load this file AFTER main.css (and after styles.css
if you use that file too) in your layout template.
Copy this file to: /telehealth/public/css/admin/table-override.css
Then in your layout :
What changed:
- Cell padding: 3px → 11px 14px
- Header bg: #F0E7F9 (lavender) → #f1f5f9 (clean slate)
- Header text: #436505 (green) → #374151 (neutral dark)
- Header style: uppercase, 600 weight, 12px, letter-spaced
- All-around cell borders removed → horizontal dividers only
- Outer border: cleaned up, subtle #e2e8f0
- Hover: near-invisible #f5f5f5 → blue-tint #eff6ff with transition
- Striped: #f8f8f8 → #f8fafc
- Row status colors: success/info/warning/danger all modernized
- Responsive wrapper: shadow + radius applied to container
- DataTables integration preserved
============================================================ */
/* ----------------------------------------------------------------
BASE TABLE
---------------------------------------------------------------- */
.table {
width: 100%;
max-width: 100%;
margin-bottom: 5px;
border-collapse: collapse;
font-size: 13px;
color: #374151;
background-color: #ffffff;
}
/* All cells */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 5px;
line-height: 1.55;
vertical-align: middle;
border-top: none;
border-bottom: 1px solid #e9ecef;
color: #374151;
}
/* Header cells */
.table > thead > tr > th {
padding: 10px 14px;
vertical-align: middle;
border-top: none;
border-bottom: 2px solid #e2e8f0;
background-color: #f1f5f9;
color: #374151;
font-weight: 600;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.55px;
white-space: nowrap;
}
/* First header row — no top border */
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
border-top: 0;
}
/* Multiple tbody blocks */
.table > tbody + tbody {
border-top: 2px solid #e2e8f0;
}
/* Nested table */
.table .table {
background-color: #ffffff;
}
/* Last data row — remove bottom border so it doesn't double with the container */
.table > tbody > tr:last-child > td,
.table > tbody > tr:last-child > th {
border-bottom: none;
}
/* ----------------------------------------------------------------
CONDENSED
---------------------------------------------------------------- */
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 6px 10px;
}
/* ----------------------------------------------------------------
BORDERED (primary target)
---------------------------------------------------------------- */
.table-bordered {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
/* Override all-around per-cell borders → horizontal only */
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: none;
border-bottom: 1px solid #e9ecef;
}
/* Bordered header */
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
background-color: #FAFBFC;
border-bottom: 2px solid #e2e8f0;
color: #374151;
font-weight: 600;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.55px;
}
/* Last row in bordered table — no bottom border (table has outer border) */
.table-bordered > tbody > tr:last-child > td,
.table-bordered > tbody > tr:last-child > th,
.table-bordered > tfoot > tr:last-child > td,
.table-bordered > tfoot > tr:last-child > th {
border-bottom: none;
}
/* ----------------------------------------------------------------
STRIPED
---------------------------------------------------------------- */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f8fafc;
}
/* ----------------------------------------------------------------
HOVER
---------------------------------------------------------------- */
.table-hover > tbody > tr > td,
.table-hover > tbody > tr > th {
transition: background-color 0.12s ease;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #eff6ff;
cursor: default;
}
/* ----------------------------------------------------------------
ROW / CELL STATUS COLORS
---------------------------------------------------------------- */
/* Active */
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
background-color: #f1f5f9;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
background-color: #e2e8f0;
}
/* Success */
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
background-color: #f0fdf4;
color: #166534;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
background-color: #dcfce7;
}
/* Info */
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
background-color: #eff6ff;
color: #1e40af;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
background-color: #dbeafe;
}
/* Warning */
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
background-color: #fffbeb;
color: #92400e;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
background-color: #fef3c7;
}
/* Danger */
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
background-color: #fef2f2;
color: #991b1b;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
background-color: #fee2e2;
}
/* ----------------------------------------------------------------
RESPONSIVE WRAPPER
Gives the scrollable container a shadow + subtle border
---------------------------------------------------------------- */
.table-responsive {
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
margin-bottom: 5px;
}
/* When table is inside a responsive wrapper, remove double border */
.table-responsive > .table-bordered {
border: none;
border-radius: 0;
margin-bottom: 0;
}
.table-responsive > .table {
margin-bottom: 0;
}
/* ----------------------------------------------------------------
DATATABLES INTEGRATION
Keeps DataTables plugin visually consistent
---------------------------------------------------------------- */
.dataTables_wrapper .table-bordered {
border: 1px solid #e2e8f0;
}
/* DataTables search and length controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
margin-bottom: 12px;
font-size: 13px;
color: #475569;
}
.dataTables_wrapper .dataTables_filter input {
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 5px 10px;
font-size: 13px;
color: #374151;
margin-left: 6px;
transition: border-color 0.15s ease;
}
.dataTables_wrapper .dataTables_filter input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* DataTables info and pagination */
.dataTables_wrapper .dataTables_info {
font-size: 12px;
color: #64748b;
padding-top: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 4px 10px;
margin: 0 2px;
border-radius: 5px;
font-size: 12px;
color: #374151 !important;
border: 1px solid transparent;
transition: background 0.12s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: #eff6ff !important;
border-color: #bfdbfe !important;
color: #1d4ed8 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: #2563eb !important;
border-color: #2563eb !important;
color: #ffffff !important;
font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
color: #94a3b8 !important;
cursor: default;
}
/* ----------------------------------------------------------------
PANEL + TABLE COMBINATION
When a table sits inside a Bootstrap .panel, align borders
---------------------------------------------------------------- */
.panel > .table,
.panel > .table-responsive > .table {
margin-bottom: 0;
}
.panel > .table > thead > tr > th:first-child,
.panel > .table > tbody > tr > td:first-child {
padding-left: 5px;
}
.panel > .table > thead > tr > th:last-child,
.panel > .table > tbody > tr > td:last-child {
padding-right: 5px;
}
.panel-body + .table,
.panel-body + .table-responsive {
border-top: 1px solid #e2e8f0;
}
/* ----------------------------------------------------------------
LEGACY TABLE CLASSES (from stylesheets/styles.css + style.css)
.data, .data_roles, .edit tables — same modern treatment
---------------------------------------------------------------- */
.data {
border-collapse: collapse;
width: 100%;
font-size: 13px;
border: 1px solid #e2e8f0;
border-radius: 8px;
color: #374151;
}
.data th {
text-align: left;
padding: 10px 14px;
border-top: none;
border-bottom: 2px solid #e2e8f0;
background-color: #f1f5f9;
color: #374151;
font-weight: 600;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.55px;
}
.data td {
text-align: left;
padding: 10px 14px;
border-bottom: 1px solid #e9ecef;
color: #374151;
}
.data tr:hover {
background-color: #eff6ff;
transition: background-color 0.12s ease;
}
.data a:link { color: #2563eb; text-decoration: none; }
.data a:visited { color: #2563eb; text-decoration: none; }
.data a:hover { color: #1d4ed8; text-decoration: underline; }
.data .number { text-align: right; padding-right: 14px; }
/* data_roles */
.data_roles {
border-collapse: collapse;
width: 100%;
font-size: 13px;
border: 1px solid #e2e8f0;
}
.data_roles th {
text-align: left;
padding: 10px 14px;
border-bottom: 2px solid #e2e8f0;
background-color: #f1f5f9;
color: #374151;
font-weight: 600;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.55px;
}
.data_roles td {
text-align: left;
padding: 10px 14px;
border-bottom: 1px solid #e9ecef;
}
.data_roles tr:hover {
background-color: #eff6ff;
transition: background-color 0.12s ease;
}
/* edit table */
.edit {
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
color: #1e293b;
}
.edit th {
width: 150px;
padding: 10px 14px;
border-bottom: 1px solid #e9ecef;
background-color: #f1f5f9;
color: #374151;
font-weight: 600;
font-size: 13px;
}
.edit tr:hover {
background: #eff6ff;
transition: background 0.12s ease;
}
.edit td {
border-top: 1px solid #e9ecef;
padding: 10px 14px;
text-align: left;
}
.edit td:hover {
background-color: #f8fafc;
}
.edit #edit_title {
background-color: #f1f5f9;
}