/* ================================
ASSETS DASHBOARD
================================ */
/* ===== KPI WIDGETS — 3 columns for assets ===== */
/* Grid layout provided by nd-widgets-grid in NewDashboardsTable.css */
/* Override to 3-column grid for assets (only 3 meaningful KPI states) */
.assets-dashboard-widgets {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 767.98px) {
.assets-dashboard-widgets {
grid-template-columns: 1fr;
}
}
/* Widget card, icon, title, value, subtext all inherit from
.nd-widgets-grid shared baseline in NewDashboardsTable.css */
/* ===== WIDGET COLOUR THEMES ===== */
.widget-assets-active .widget-icon {
background: var(--color-info-light);
color: var(--color-info);
}
.widget-assets-active .widget-value {
color: var(--color-info);
}
.widget-assets-inactive .widget-icon {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.widget-assets-inactive .widget-value {
color: var(--text-secondary);
}
.widget-assets-total .widget-icon {
background: var(--color-success-light);
color: var(--color-success);
}
.widget-assets-total .widget-value {
color: var(--color-success);
}
/* ===== TABLE CARD ===== */
.assets-table-card {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.assets-card-header {
padding: 16px 18px 14px;
border-bottom: 1px solid var(--border-default);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.assets-card-title {
font-size: 18px;
font-weight: 650;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.assets-card-subtitle {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
/* ===== TABLE TOOLBAR ===== */
.assets-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-default);
flex-wrap: wrap;
}
.assets-table-toolbar-left {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.assets-table-toolbar-right {
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: auto;
}
.assets-status-filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.assets-status-pill {
background: var(--bg-subtle);
color: var(--text-secondary);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
line-height: 1;
transition: all .15s ease;
}
.assets-status-pill:hover {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.assets-status-pill.is-active {
background: var(--color-primary-light);
color: var(--color-primary);
border-color: var(--border-default);
font-weight: 600;
box-shadow: 0 1px 3px rgba(67, 56, 202, 0.10);
}
.assets-search {
min-width: 280px;
}
.assets-search .input-group {
flex-wrap: nowrap;
}
.assets-search .form-control {
border-color: var(--border-default);
border-right: 0;
height: 36px;
font-size: 13px;
}
.assets-search .form-control:focus {
border-color: var(--border-default);
box-shadow: none;
}
.assets-search .btn {
height: 36px;
margin-top: 0 !important;
}
/* ===== TABLE WRAP ===== */
.assets-table-wrap {
padding: 0 18px 18px;
}
.assets-table-wrap .dataTables_wrapper {
margin-top: 6px;
}
#AssetsTable thead th {
background: var(--bg-page);
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border-default) !important;
}
#AssetsTable tbody td {
padding-top: 12px !important;
padding-bottom: 12px !important;
vertical-align: middle;
}
#AssetsTable tbody tr:hover {
background: var(--bg-subtle);
}
/* ===== PROJECT GROUP BUTTON ===== */
#CreateNewProjectGroupButton {
display: none;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1199.98px) {
.assets-dashboard-widgets {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.assets-search {
min-width: 100%;
width: 100%;
}
.assets-table-toolbar-right {
width: 100%;
justify-content: stretch;
}
}
#forecast-grid .locked {
background: var(--bg-subtle);
pointer-events: none;
}
#forecast-grid .saving {
opacity: 0.6;
}
#forecast-grid .status-indicator {
font-size: 0.75rem;
color: var(--text-muted);
display: none;
margin-top: 2px;
}
#forecast-grid .forecast-amount {
text-align: right;
}
table.userTimesheetsTable.dataTable tbody tr.unsavedRow {
background-color: rgba(var(--wg-warning-rgb, 245, 158, 11), 0.46) !important;
}
/* small table styling for previews/full */
.mini-preview, .full-table {
border-collapse: collapse;
width: 100%;
margin: .25rem 0;
font-size: 12px
}
.mini-preview th, .mini-preview td, .full-table th, .full-table td {
border: 1px solid var(--wg-border-medium, #e0e0e0);
padding: 4px 6px;
vertical-align: top
}
.mini-preview thead th, .full-table thead th {
background: var(--bg-page)
}
.group-title {
margin: .25rem 0;
font-size: 12px;
color: var(--text-primary)
}
.muted {
color: var(--text-muted);
font-size: 12px
}
.plain-note {
white-space: pre-wrap
}
td.details-control {
cursor: pointer;
text-align: center;
}
td.details-control::before {
content: "▶";
display: inline-block;
transform: rotate(0deg);
transition: transform .1s ease;
}
tr.shown td.details-control::before {
transform: rotate(90deg);
}
/* Palette + rhythm */
:root {
--bg: var(--bg-surface);
--muted: var(--text-secondary);
--line: var(--border-default);
--head: var(--bg-page);
--title: var(--text-primary);
--gap: 12px;
--radius: 10px;
}
/* Detail wrapper */
.audit-detail {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 14px;
margin-top: 8px;
}
/* Section title (Tasks / Products) */
.audit-section-title {
margin: 14px 0 6px;
font-weight: 600;
color: var(--title);
}
/* Key–Value header grid (QuoteDate, Name, Description…) */
.kv-grid {
display: grid;
grid-template-columns: 220px 1fr 220px 1fr;
gap: 6px 12px;
margin-bottom: 10px;
}
.kv-grid .kv {
display: contents; /* allow label/value to occupy adjacent cells */
}
.kv-grid .kv-label {
background: var(--head);
border: 1px solid var(--line);
border-right: none;
padding: 6px 8px;
border-radius: 8px 0 0 8px;
font-size: 12px;
color: var(--muted);
}
.kv-grid .kv-value {
border: 1px solid var(--line);
padding: 6px 10px;
border-radius: 0 8px 8px 0;
overflow-wrap: anywhere;
}
/* Line-item tables */
.audit-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin: 6px 0 10px;
font-size: 13px;
}
.audit-table thead th {
background: var(--head);
border: 1px solid var(--line);
padding: 6px 8px;
font-weight: 600;
}
.audit-table td {
border: 1px solid var(--line);
padding: 6px 8px;
vertical-align: top;
}
.audit-table td.num, .audit-table th.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.audit-table td.center, .audit-table th.center {
text-align: center;
}
/* Subtle zebra for long lists */
.audit-table tbody tr:nth-child(odd) td {
background: var(--bg-subtle);
}
/* “Show more / Show less” link for long tables */
.toggle-rows {
color: var(--muted);
font-size: 12px;
display: inline-block;
margin-top: 4px;
}
.audit-groups.is-hidden {
display: none;
}
.row-toggle {
font-size: 12px;
padding: 4px 8px;
margin: 6px 0 8px;
}
/* ================================
CLIENT CREDIT NOTES DASHBOARD
================================ */
/* ===== KPI WIDGETS ===== */
/* Grid layout provided by nd-widgets-grid in NewDashboardsTable.css */
/* Widget card, icon, title, value, subtext all inherit from
.nd-widgets-grid shared baseline in NewDashboardsTable.css */
/* ===== WIDGET COLOUR THEMES ===== */
.widget-ccn-draft .widget-icon {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.widget-ccn-draft .widget-value {
color: var(--text-secondary);
}
.widget-ccn-approved .widget-icon {
background: var(--color-success-light);
color: var(--color-success);
}
.widget-ccn-approved .widget-value {
color: var(--color-success);
}
.widget-ccn-total .widget-icon {
background: var(--color-info-light);
color: var(--color-info);
}
.widget-ccn-total .widget-value {
color: var(--color-info);
}
.widget-ccn-accounting .widget-icon {
background: var(--color-warning-light);
color: var(--color-warning);
}
.widget-ccn-accounting .widget-value {
color: var(--color-warning);
}
/* ===== TABLE CARD ===== */
.ccn-table-card {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.ccn-card-header {
padding: 16px 18px 14px;
border-bottom: 1px solid var(--border-default);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.ccn-card-title {
font-size: 18px;
font-weight: 650;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.ccn-card-subtitle {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
/* ===== TABLE TOOLBAR ===== */
.ccn-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-default);
flex-wrap: wrap;
}
.ccn-table-toolbar-left {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.ccn-table-toolbar-right {
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: auto;
}
.ccn-status-filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ccn-status-pill {
background: var(--bg-subtle);
color: var(--text-secondary);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
line-height: 1;
transition: all .15s ease;
}
.ccn-status-pill:hover {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.ccn-status-pill.is-active {
background: var(--color-primary-light);
color: var(--color-primary);
border-color: var(--color-primary);
font-weight: 600;
box-shadow: 0 1px 3px rgba(67, 56, 202, 0.10);
}
.ccn-search {
min-width: 280px;
}
.ccn-search .input-group {
flex-wrap: nowrap;
}
.ccn-search .form-control {
border-color: var(--border-default);
border-right: 0;
height: 36px;
font-size: 13px;
}
.ccn-search .form-control:focus {
border-color: var(--border-default);
box-shadow: none;
}
.ccn-search .btn {
height: 36px;
margin-top: 0 !important;
}
/* ===== TABLE WRAP ===== */
.ccn-table-wrap {
padding: 0 18px 18px;
}
.ccn-table-wrap .dataTables_wrapper {
margin-top: 6px;
}
#ClientCreditNotesTable thead th {
background: var(--bg-page);
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border-default) !important;
}
#ClientCreditNotesTable tbody td {
padding-top: 12px !important;
padding-bottom: 12px !important;
vertical-align: top;
}
#ClientCreditNotesTable tbody tr:hover {
background: var(--bg-subtle);
}
/* ===== STATUS BADGE ===== */
.ccn-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.ccn-status-badge-draft {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.ccn-status-badge-approved {
background: var(--color-success-light);
color: var(--color-success);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 767.98px) {
.ccn-search {
min-width: 100%;
width: 100%;
}
.ccn-table-toolbar-right {
width: 100%;
justify-content: stretch;
}
}
/* ── Clients Dashboard ─────────────────────────────────────────────────────── */
/* Widget structural card styles (mirrors InvoicesDashboard pattern) */
/* Widget card, title, subtext inherit from nd-widgets-grid shared baseline.
Overrides: slightly larger padding, icon, and value */
.clients-dashboard-widgets .dashboard-widget {
padding: 20px 18px;
box-shadow: none;
}
.clients-dashboard-widgets .dashboard-widget:hover {
box-shadow: 0 8px 22px rgba(20, 30, 60, 0.08);
}
.clients-dashboard-widgets .widget-icon {
width: 40px;
height: 40px;
margin: 0 auto 14px;
font-size: 16px;
}
.clients-dashboard-widgets .widget-title {
font-size: 14px;
}
.clients-dashboard-widgets .widget-value {
font-size: 32px;
}
/* Widget colour themes */
.widget-clients-total .widget-icon {
background: var(--color-info-light);
color: var(--color-info);
}
.widget-clients-total .widget-value {
color: var(--color-info);
}
.widget-clients-missingabn .widget-icon {
background: var(--color-danger-light);
color: var(--color-danger);
}
.widget-clients-missingabn .widget-value {
color: var(--color-danger);
}
.widget-clients-noaddress .widget-icon {
background: var(--color-warning-light);
color: var(--color-warning);
}
.widget-clients-noaddress .widget-value {
color: var(--color-warning);
}
.widget-clients-nocontacts .widget-icon {
background: var(--wg-accent-light, #f3e5f5);
color: var(--wg-accent, #8e24aa);
}
.widget-clients-nocontacts .widget-value {
color: var(--wg-accent, #8e24aa);
}
/* Table card */
.clients-table-card {
background: var(--bg-surface);
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
margin-top: 20px;
overflow: hidden;
}
.clients-table-card .card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 10px;
border-bottom: 1px solid var(--border-default);
flex-wrap: wrap;
gap: 10px;
}
.clients-table-card .card-header h3 {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
/* Toolbar */
.clients-table-toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.clients-status-pill {
padding: 5px 14px;
border-radius: 20px;
border: 1px solid var(--border-heavy);
background: var(--bg-surface);
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.clients-status-pill:hover {
border-color: var(--color-info);
color: var(--color-info);
}
.clients-status-pill.active {
background: var(--color-info);
border-color: var(--color-info);
color: var(--bg-surface);
}
.clients-status-pill.pill-danger.active {
background: var(--color-danger);
border-color: var(--color-danger);
}
.clients-status-pill.pill-warning.active {
background: var(--color-warning);
border-color: var(--color-warning);
}
.clients-status-pill.pill-purple.active {
background: var(--wg-accent, #8e24aa);
border-color: var(--wg-accent, #8e24aa);
}
/* Search */
.clients-search {
position: relative;
}
.clients-search input {
padding: 5px 12px 5px 32px;
border: 1px solid var(--border-heavy);
border-radius: 20px;
font-size: 12px;
color: var(--text-primary);
width: 200px;
outline: none;
transition: border-color 0.15s;
}
.clients-search input:focus {
border-color: var(--color-info);
}
.clients-search .search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 12px;
}
/* Table wrap */
.clients-table-wrap {
padding: 0 4px;
overflow-x: auto;
}
/* Table header */
#ClientsTable thead th {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
background: var(--bg-page);
border-bottom: 2px solid var(--border-default);
padding: 10px 12px;
white-space: nowrap;
}
#ClientsTable tbody td {
padding: 10px 12px;
font-size: 13px;
vertical-align: middle;
}
/* Health indicator badges */
.health-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 500;
padding: 2px 8px;
border-radius: 10px;
}
.health-badge.ok {
background: var(--bg-subtle);
color: var(--wg-text-body, #2e7d32);
}
.health-badge.missing {
background: var(--color-danger-light);
color: var(--wg-text-body, #c62828);
}
/* Last activity */
.activity-date {
font-size: 12px;
color: var(--text-secondary);
}
.activity-date.stale-3m {
color: var(--color-warning);
font-weight: 500;
}
.activity-date.stale-6m {
color: var(--color-danger);
font-weight: 500;
}
.activity-date.never {
color: var(--text-muted);
font-style: italic;
}
/* Contact count badge */
.contact-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
border-radius: 11px;
font-size: 11px;
font-weight: 600;
padding: 0 6px;
}
.contact-count.has-contacts {
background: var(--color-info-light);
color: var(--wg-text-body, #1565c0);
}
.contact-count.no-contacts {
background: var(--color-danger-light);
color: var(--wg-text-body, #c62828);
}
/* =========================================
INVOICES DASHBOARD / TABLE
Consistent with Purchases + Quotes
========================================= */
/* layout helpers */
.invoices-dashboard-shell {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Single toolbar row: pills left, date+search right */
.invoices-toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.invoices-toolbar-right {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
justify-content: flex-end;
flex-wrap: nowrap;
min-width: 0;
}
.invoices-status-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.invoices-status-filters .btn {
margin-top: 0 !important;
background: var(--bg-subtle) !important;
color: var(--text-secondary) !important;
border-radius: 999px !important;
padding: 6px 14px !important;
font-size: 13px !important;
font-weight: 500 !important;
border: 1px solid transparent !important;
line-height: 1 !important;
transition: all .15s ease !important;
box-shadow: none !important;
}
.invoices-status-filters .btn:hover {
background: var(--bg-subtle) !important;
color: var(--text-primary) !important;
}
.invoices-status-filters .btn.is-active {
background: var(--color-primary-light) !important;
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
font-weight: 600 !important;
box-shadow: 0 1px 3px rgba(67, 56, 202, 0.10) !important;
}
/* date filter group — joined pill-style */
.invoices-date-filters {
display: flex;
align-items: stretch;
gap: 0;
}
.invoices-date-filters .form-control {
border-radius: 0;
width: 120px;
min-width: 0;
font-size: 13px;
height: 36px;
}
.invoices-date-filters .form-control:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.invoices-date-filters .btn {
margin-top: 0 !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
height: 36px;
}
/* text search */
.invoices-text-search {
display: flex;
align-items: stretch;
gap: 0;
min-width: 200px;
flex: 1;
max-width: 320px;
}
.invoices-text-search .form-control {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-top-left-radius: 6px !important;
border-bottom-left-radius: 6px !important;
font-size: 13px;
height: 36px;
margin: 0 !important;
}
.invoices-text-search .btn {
margin-top: 0 !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
height: 36px;
}
/* checkbox / utility row */
.invoices-options-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
margin-bottom: 8px;
color: var(--text-secondary);
font-size: 14px;
}
.invoices-options-row input[type="checkbox"] {
position: relative;
top: 1px;
}
/* table spacing */
#InvoicesTable tbody td {
padding-top: 14px !important;
padding-bottom: 14px !important;
vertical-align: top;
}
#InvoicesTable tbody tr:hover {
background: var(--bg-subtle);
}
/* column widths */
.invoice-summary-col {
min-width: 280px;
}
.invoice-client-col {
min-width: 220px;
}
.invoice-dates-col {
min-width: 210px;
}
.invoice-status-col {
min-width: 130px;
vertical-align: middle !important;
}
.invoice-value-col {
min-width: 120px;
}
.invoice-value-col,
.invoice-value-col * {
text-align: right;
}
.invoice-people-col {
min-width: 220px;
}
/* summary cell */
.purchase-row-summary {
display: flex;
flex-direction: column;
gap: 3px;
}
.purchase-row-primary-wrap {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.purchase-row-primary,
.purchase-row-primary a {
font-weight: 700;
font-size: 15px;
line-height: 1.2;
color: var(--color-primary);
text-decoration: none;
}
.purchase-row-primary a:hover {
color: var(--color-primary-hover);
}
.purchase-row-secondary,
.purchase-row-secondary a {
font-size: 13px;
line-height: 1.35;
color: var(--text-secondary);
text-decoration: none;
}
.purchase-row-secondary a:hover {
color: var(--color-primary-hover);
}
.purchase-row-meta,
.purchase-row-meta a {
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
text-decoration: none;
}
.purchase-row-meta a:hover {
color: var(--color-primary-hover);
}
/* dates */
.purchase-row-dates {
display: flex;
flex-direction: column;
gap: 6px;
}
.purchase-row-date-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
line-height: 1.35;
color: var(--text-secondary);
}
.purchase-row-label {
display: inline-block;
min-width: 50px;
font-weight: 600;
color: var(--text-secondary);
}
.purchase-row-date-value {
color: var(--text-secondary);
}
.purchase-row-date-value-muted {
color: var(--text-muted);
}
/* people */
.purchase-row-people {
display: flex;
flex-direction: column;
gap: 4px;
}
.purchase-row-people-line {
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
}
.purchase-row-people-line strong {
font-weight: 600;
color: var(--text-secondary);
}
.purchase-row-people-line-value {
color: var(--text-secondary);
}
/* status badges */
.purchase-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1;
min-width: 84px;
white-space: nowrap;
}
.purchase-status-badge-approved {
background: var(--color-success-light);
color: var(--color-success);
}
.purchase-status-badge-received {
background: var(--color-info-light);
color: var(--color-info);
}
.purchase-status-badge-draft {
background: var(--bg-subtle);
color: var(--text-secondary);
}
/* value */
.purchase-table-value-total {
font-weight: 600;
font-size: 14px;
color: var(--text-primary);
}
/* invoice custom field cells */
.invoice-custom-field-value {
min-height: 20px;
}
.invoice-custom-field-value__text {
font-size: 12px;
color: var(--text-secondary);
}
/* datatables toolbar buttons */
.dt-toolbar .dt-buttons,
.bottom .dt-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.dt-toolbar .dt-toolbar-btn,
.bottom .dt-toolbar-btn {
border: 1px solid var(--border-default);
background: var(--bg-surface);
color: var(--text-secondary);
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
font-weight: 600;
}
.dt-toolbar .dt-colvis-btn,
.bottom .dt-colvis-btn {
background: var(--bg-subtle);
}
/* bottom bar - keep DataTables default class hooks */
.bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
flex-wrap: wrap;
}
.bottom .dataTables_info {
color: var(--text-secondary);
font-size: 13px;
}
.bottom .dataTables_length label {
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
}
.bottom .dataTables_length select {
height: 34px;
border: 1px solid var(--border-default);
border-radius: 6px;
background: var(--bg-surface);
color: var(--text-primary);
padding: 0 8px;
}
/* responsive */
@media (max-width: 991.98px) {
.invoices-toolbar-right {
flex-wrap: wrap;
}
.invoices-text-search {
flex: 1;
max-width: 100%;
}
}
@media (max-width: 767.98px) {
.invoices-toolbar {
flex-direction: column;
align-items: stretch;
}
.invoices-toolbar-right {
flex-direction: column;
align-items: stretch;
}
.invoices-date-filters {
width: 100%;
}
.invoices-date-filters .form-control {
width: auto;
flex: 1;
}
.invoices-text-search {
max-width: 100%;
}
.bottom {
align-items: flex-start;
justify-content: flex-start;
}
}
/* Grid layout + widget sizing provided by nd-widgets-grid in NewDashboardsTable.css.
Only colour themes are overridden below. */
.invoice-dashboard-widgets .widget-approvedinvoices .widget-icon {
background: var(--color-info-light);
color: var(--color-info);
}
.invoice-dashboard-widgets .widget-approvedinvoices .widget-value {
color: var(--color-info);
}
.invoice-dashboard-widgets .widget-draftinvoices .widget-icon {
background: var(--color-primary-light);
color: var(--color-primary);
}
.invoice-dashboard-widgets .widget-draftinvoices .widget-value {
color: var(--color-primary);
}
.invoice-dashboard-widgets .widget-unpaidinvoices .widget-icon {
background: var(--color-warning-light);
color: var(--color-warning);
}
.invoice-dashboard-widgets .widget-unpaidinvoices .widget-value {
color: var(--color-warning);
}
.invoice-dashboard-widgets .widget-overdueinvoices .widget-icon {
background: var(--color-danger-light);
color: var(--color-danger);
}
.invoice-dashboard-widgets .widget-overdueinvoices .widget-value {
color: var(--color-danger);
}
@media (max-width: 991.98px) {
.invoice-dashboard-widgets {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.invoice-dashboard-widgets {
grid-template-columns: 1fr;
}
}
.NewDashboardsTable {
width: 100% !important;
border-collapse: collapse !important;
}
.NewDashboardsTable thead th {
background: var(--bg-subtle) !important;
color: var(--text-primary) !important;
font-weight: 600 !important;
font-size: 14px !important;
padding: 16px 20px !important;
border-bottom: 1px solid var(--border-default) !important;
vertical-align: middle !important;
text-align: left;
}
.NewDashboardsTable th.dataCell,
.NewDashboardsTable td.dataCell {
text-align: right;
}
.NewDashboardsTable tbody td {
background: var(--bg-surface) !important;
padding: 5px 10px !important;
border-bottom: 1px solid var(--border-default) !important;
vertical-align: middle !important;
font-size: 12pt !important;
color: var(--text-primary) !important;
}
.NewDashboardsTable tbody tr:hover td {
background: var(--bg-subtle) !important;
}
/* ===== FIRST COLUMN / HEALTH ===== */
.NewDashboardsTable td.col-health,
.NewDashboardsTable th.col-health {
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
padding-left: 10px !important;
padding-right: 10px !important;
text-align: center !important;
}
/* ===== STATUS PILLS ===== */
/* Base .status-pill and colour variants now in wg-components.css */
.NewDashboardsTable .select2-container .select2-selection--single {
height: 40px !important;
border-radius: 10px !important;
border: 1px solid var(--border-default) !important;
background: var(--bg-surface) !important;
}
.NewDashboardsTable .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 38px !important;
padding-left: 14px !important;
padding-right: 34px !important;
font-size: 15px !important;
color: var(--text-primary) !important;
margin-top: -7px;
}
.NewDashboardsTable .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px !important;
right: 10px !important;
}
.NewDashboardsTable.select2-container--default {
min-width: 130px !important;
}
.NewDashboardsTable th.responsive-control-col,
.NewDashboardsTable td.responsive-control-col {
width: 17px;
padding: 0px !important;
text-align: center !important;
vertical-align: middle !important;
}
/* dtr-inline: restore left padding so the expand control doesn't overlap cell text.
Only applies to content cells (not dedicated dtr-control columns). */
table.NewDashboardsTable.dtr-inline.collapsed > tbody > tr > td:first-child:not(.dtr-control),
table.NewDashboardsTable.dtr-inline.collapsed > tbody > tr > th:first-child:not(.dtr-control) {
padding-left: 30px !important;
position: relative;
cursor: pointer;
}
table.NewDashboardsTable.dtr-inline.collapsed > tbody > tr > td:first-child:not(.dtr-control)::before,
table.NewDashboardsTable.dtr-inline.collapsed > tbody > tr > th:first-child:not(.dtr-control)::before,
table.DashboardsTable.dtr-inline.collapsed > tbody > tr > td:first-child:not(.dtr-control)::before,
table.DashboardsTable.dtr-inline.collapsed > tbody > tr > th:first-child:not(.dtr-control)::before {
top: 50% !important;
left: 7px !important;
transform: translateY(-50%);
}
table.NewDashboardsTable tr {
background-color: none !important;
}
/* Zero out the responsive control col ONLY when it's not an active dtr-control cell */
.NewDashboardsTable td.responsive-control-col:empty:not(.dtr-control),
.NewDashboardsTable td.responsive-control-col:not(.dtr-control) {
padding: 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
border: 0 !important;
}
/* dtr-column: give the control cell a fixed width so the button doesn't bleed into the next column */
.NewDashboardsTable.dtr-column > tbody > tr > td.dtr-control,
.NewDashboardsTable.dtr-column > tbody > tr > th.dtr-control {
width: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
padding: 0 !important;
text-align: center !important;
position: relative !important;
cursor: pointer !important;
}
.NewDashboardsTable.dtr-column > tbody > tr > td.dtr-control:before,
.NewDashboardsTable.dtr-column > tbody > tr > th.dtr-control:before {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
display: inline-block !important;
width: 18px !important;
height: 18px !important;
line-height: 16px !important;
border-radius: 50% !important;
font-size: 14px !important;
font-weight: 600 !important;
text-align: center !important;
vertical-align: middle !important;
}
/* ===== TIGHTER ROW HEIGHT ===== */
.NewDashboardsTable tbody tr {
height: auto !important;
}
/* ===== KILL INHERITED ROW STRIPING ===== */
/* ===== KILL DATATABLES ODD-ROW STRIPING ===== */
.dataTables_wrapper .NewDashboardsTable tbody tr.odd,
.dataTables_wrapper .NewDashboardsTable tbody tr.odd > .sorting_1,
.dataTables_wrapper .NewDashboardsTable tbody tr.odd > .sorting_2,
.dataTables_wrapper .NewDashboardsTable tbody tr.odd > .sorting_3 {
background-color: var(--bg-surface) !important;
}
.dt-colvis-btn {
border: 1px solid var(--border-default) !important;
background: var(--bg-surface) !important;
color: var(--text-primary) !important;
border-radius: 10px !important;
padding: 8px 14px !important;
font-size: 14px !important;
font-weight: 500 !important;
box-shadow: none !important;
}
.dt-colvis-btn:hover,
.dt-colvis-btn:focus,
.dt-colvis-btn:active {
background: var(--bg-subtle) !important;
border-color: var(--border-heavy) !important;
color: var(--text-heading) !important;
box-shadow: none !important;
}
div.dt-button-collection {
min-width: 240px !important;
padding: 8px !important;
border: 1px solid var(--border-default) !important;
border-radius: 12px !important;
background: var(--bg-surface) !important;
box-shadow: var(--shadow-dropdown, 0 10px 30px rgba(23, 33, 61, 0.12)) !important;
overflow: hidden !important;
}
div.dt-button-collection .dropdown-menu {
border: none !important;
box-shadow: none !important;
position: static !important;
float: none !important;
display: block !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
div.dt-button-collection .dt-button {
display: flex !important;
align-items: center !important;
width: 100% !important;
border: none !important;
background: transparent !important;
color: var(--text-primary) !important;
padding: 10px 12px !important;
margin: 0 !important;
border-radius: 8px !important;
text-align: left !important;
font-size: 14px !important;
font-weight: 500 !important;
box-shadow: none !important;
}
div.dt-button-collection .dt-button:hover,
div.dt-button-collection .dt-button:focus {
background: var(--bg-subtle) !important;
color: var(--text-heading) !important;
}
div.dt-button-collection .dt-button.active {
background: var(--color-primary-light) !important;
color: var(--color-primary) !important;
font-weight: 600 !important;
}
div.dt-button-collection .dt-button::before {
content: "";
width: 16px;
height: 16px;
border: 1.5px solid var(--border-heavy);
border-radius: 4px;
margin-right: 10px;
flex-shrink: 0;
background: var(--bg-surface);
}
div.dt-button-collection .dt-button.active::before {
background: var(--color-primary);
border-color: var(--color-primary);
box-shadow: inset 0 0 0 3px var(--bg-surface);
}
div.dt-button-collection::before {
content: "Show columns";
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
padding: 4px 12px 10px 12px;
}
/* ===== TOOLBAR BUTTONS ===== */
.dt-toolbar .dt-buttons {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 5px;
}
.dt-toolbar .dt-button.dt-toolbar-btn,
.dt-toolbar .dt-button.dt-colvis-btn {
appearance: none !important;
-webkit-appearance: none !important;
border: 1px solid var(--border-default) !important;
background: var(--bg-surface) !important;
color: var(--text-primary) !important;
border-radius: 10px !important;
padding: 8px 14px !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
box-shadow: none !important;
text-shadow: none !important;
margin: 0 !important;
min-height: 38px !important;
}
.dt-toolbar .dt-button.dt-toolbar-btn:hover,
.dt-toolbar .dt-button.dt-toolbar-btn:focus,
.dt-toolbar .dt-button.dt-toolbar-btn:active,
.dt-toolbar .dt-button.dt-colvis-btn:hover,
.dt-toolbar .dt-button.dt-colvis-btn:focus,
.dt-toolbar .dt-button.dt-colvis-btn:active {
background: var(--bg-subtle) !important;
border-color: var(--border-heavy) !important;
color: var(--text-heading) !important;
box-shadow: none !important;
outline: none !important;
}
.dt-toolbar .dt-button.dt-toolbar-btn span,
.dt-toolbar .dt-button.dt-colvis-btn span {
color: inherit !important;
}
.dt-toolbar .dt-button.dt-colvis-btn i {
margin-right: 6px;
}
#clearPreferencesBtn {
width: 100%;
}
.dt-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
flex-wrap: wrap;
}
.dt-bottom .dt-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.dt-bottom .dt-toolbar-btn,
.dt-bottom .buttons-colvis,
.dt-bottom .buttons-csv,
.dt-bottom .buttons-excel,
.dt-bottom .buttons-pdf {
border: 1px solid var(--border-default);
background: var(--bg-surface);
color: var(--text-muted);
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
font-weight: 600;
}
.dt-bottom .dt-colvis-btn {
background: var(--color-primary-light);
border-color: var(--border-brand, #ddd8ff);
color: var(--color-primary);
}
/* ===================================================
WIDGET GRID & CARD
Now in wg-components.css (section 10a).
This file retains only DataTables-specific overrides.
=================================================== */
/* =========================================================
SORT INDICATORS
Replaces DataTables' default double-arrow with a single
clean indicator. Active direction uses brand indigo.
========================================================= */
/* Suppress DataTables' built-in ::before (up) indicator entirely —
we use ::after only so we have one glyph to control */
.NewDashboardsTable thead th.sorting::before,
.NewDashboardsTable thead th.sorting_asc::before,
.NewDashboardsTable thead th.sorting_desc::before {
display: none !important;
}
/* All sortable headers need relative positioning for the ::after anchor */
.NewDashboardsTable thead th.sorting,
.NewDashboardsTable thead th.sorting_asc,
.NewDashboardsTable thead th.sorting_desc {
position: relative !important;
cursor: pointer !important;
}
/* Unsorted-but-sortable: faint ↕ */
.NewDashboardsTable thead th.sorting::after {
content: '↕' !important;
display: block !important;
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 11px !important;
color: var(--text-disabled) !important;
font-weight: 400 !important;
}
/* Sorted ascending: ↑ in brand indigo */
.NewDashboardsTable thead th.sorting_asc::after {
content: '↑' !important;
display: block !important;
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 11px !important;
color: var(--color-primary) !important;
font-weight: 700 !important;
}
/* Sorted descending: ↓ in brand indigo */
.NewDashboardsTable thead th.sorting_desc::after {
content: '↓' !important;
display: block !important;
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 11px !important;
color: var(--color-primary) !important;
font-weight: 700 !important;
}
/* ================================
PRODUCTION JOBS DASHBOARD
================================ */
/* ===== KPI WIDGETS ===== */
/* Grid layout provided by nd-widgets-grid in NewDashboardsTable.css */
/* Widget card, icon, title, value, subtext all inherit from
.nd-widgets-grid shared baseline in NewDashboardsTable.css */
/* ===== WIDGET COLOUR THEMES ===== */
.widget-pj-inprogress .widget-icon {
background: var(--color-success-light);
color: var(--color-success);
}
.widget-pj-inprogress .widget-value {
color: var(--color-success);
}
.widget-pj-overdue .widget-icon {
background: var(--color-danger-light);
color: var(--color-danger);
}
.widget-pj-overdue .widget-value {
color: var(--color-danger);
}
.widget-pj-duethisweek .widget-icon {
background: var(--color-warning-light);
color: var(--color-warning);
}
.widget-pj-duethisweek .widget-value {
color: var(--color-warning);
}
.widget-pj-new .widget-icon {
background: var(--color-primary-light);
color: var(--color-primary);
}
.widget-pj-new .widget-value {
color: var(--color-primary);
}
/* ===== TABLE CARD ===== */
.prodjobs-table-card {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.prodjobs-card-header {
padding: 16px 18px 14px;
border-bottom: 1px solid var(--border-default);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.prodjobs-card-title {
font-size: 18px;
font-weight: 650;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.prodjobs-card-subtitle {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
/* ===== TABLE TOOLBAR ===== */
.prodjobs-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-default);
flex-wrap: wrap;
}
.prodjobs-table-toolbar-left {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.prodjobs-table-toolbar-right {
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: auto;
}
.prodjobs-status-filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.prodjobs-status-pill {
background: var(--bg-subtle);
color: var(--text-secondary);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
line-height: 1;
transition: all .15s ease;
}
.prodjobs-status-pill:hover {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.prodjobs-status-pill.is-active {
background: var(--color-primary-light);
color: var(--color-primary);
border-color: var(--border-brand, #c7d2fe);
font-weight: 600;
box-shadow: 0 1px 3px rgba(67, 56, 202, 0.10);
}
.prodjobs-search {
min-width: 280px;
}
.prodjobs-search .input-group {
flex-wrap: nowrap;
}
.prodjobs-search .form-control {
border-color: var(--border-default);
border-right: 0;
height: 36px;
font-size: 13px;
}
.prodjobs-search .form-control:focus {
border-color: var(--border-heavy);
box-shadow: none;
}
.prodjobs-search .btn {
height: 36px;
margin-top: 0 !important;
}
/* ===== TABLE WRAP ===== */
.prodjobs-table-wrap {
padding: 0 18px 18px;
}
.prodjobs-table-wrap .dataTables_wrapper {
margin-top: 6px;
}
#ProductionJobsTable thead th {
background: var(--bg-page);
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border-default) !important;
}
#ProductionJobsTable tbody td {
padding-top: 14px !important;
padding-bottom: 14px !important;
vertical-align: top;
}
#ProductionJobsTable tbody tr:hover {
background: var(--bg-subtle);
}
/* ===== INLINE DATE PICKER ===== */
#ProductionJobsTable .datepicker.form-control {
min-width: 110px;
max-width: 138px;
display: inline-block !important;
padding: 5px 10px;
height: auto;
font-size: 13px;
color: var(--text-secondary);
background: var(--bg-page);
border: 1px solid var(--border-default);
border-radius: 6px;
box-shadow: none;
line-height: 1.4;
transition: border-color .15s ease, box-shadow .15s ease;
}
#ProductionJobsTable .datepicker.form-control:focus {
background: var(--bg-surface);
border-color: var(--border-brand, #c7d2fe);
box-shadow: 0 0 0 3px var(--ring-brand, rgba(199, 210, 254, 0.35));
outline: none;
}
#ProductionJobsTable .datepicker.form-control:hover {
border-color: var(--border-heavy);
}
/* ===== INLINE STATUS SELECT2 ===== */
/* Constrain container width */
#ProductionJobsTable .select2-container {
min-width: 130px;
max-width: 170px;
}
/* The visible selection box */
#ProductionJobsTable .select2-container--default .select2-selection--single {
height: 30px;
background: var(--bg-page);
border: 1px solid var(--border-default);
border-radius: 6px;
display: flex;
align-items: center;
transition: border-color .15s ease, box-shadow .15s ease;
}
#ProductionJobsTable .select2-container--default.select2-container--focus .select2-selection--single,
#ProductionJobsTable .select2-container--default.select2-container--open .select2-selection--single {
border-color: var(--border-brand, #c7d2fe);
box-shadow: 0 0 0 3px var(--ring-brand, rgba(199, 210, 254, 0.35));
background: var(--bg-surface);
outline: none;
}
/* Selected text */
#ProductionJobsTable .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
line-height: 28px;
padding-left: 10px;
padding-right: 26px;
}
/* Dropdown arrow */
#ProductionJobsTable .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 28px;
width: 22px;
right: 4px;
}
#ProductionJobsTable .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--text-muted) transparent transparent transparent;
}
/* ===== COLUMN WIDTHS ===== */
#ProductionJobsTable .pj-jobno-col {
width: 10%;
min-width: 90px;
}
#ProductionJobsTable .pj-name-col {
width: 34%;
min-width: 160px;
}
#ProductionJobsTable .pj-date-col {
width: 12%;
min-width: 100px;
}
#ProductionJobsTable .pj-manager-col {
width: 18%;
min-width: 120px;
}
#ProductionJobsTable .pj-status-col {
width: 14%;
min-width: 130px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 767.98px) {
.prodjobs-search {
min-width: 100%;
width: 100%;
}
.prodjobs-table-toolbar-right {
width: 100%;
justify-content: stretch;
}
}
/* ── Project Groups Dashboard ─────────────────────────────────── */
/* Page shell */
.pg-page-shell {
display: flex;
flex-direction: column;
gap: 20px;
}
.pg-page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.pg-page-title {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 2px;
letter-spacing: -0.01em;
}
.pg-page-subtitle {
font-size: 13px;
color: var(--text-muted);
margin: 0;
}
/* Buttons */
.pg-btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: opacity .15s;
}
.pg-btn-primary:hover {
opacity: .88;
color: #fff;
text-decoration: none;
}
/* Table card */
.pg-table-card {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
/* Toolbar */
.pg-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-default);
flex-wrap: wrap;
}
.pg-status-filters {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.pg-status-pill {
background: var(--bg-subtle);
color: var(--text-secondary);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
transition: all .15s ease;
}
.pg-status-pill:hover {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.pg-status-pill.is-active {
background: var(--color-primary-light);
color: var(--color-primary);
border-color: var(--border-default);
font-weight: 600;
}
.pg-search {
display: flex;
align-items: center;
gap: 6px;
}
.pg-search .form-control {
width: 240px;
height: 34px;
font-size: 13px;
}
.pg-search .btn {
height: 34px;
}
/* Table wrap */
.pg-table-wrap {
padding: 0 18px 18px;
}
/* Column widths */
#ProjectGroupsTable .pg-name-col {
width: 28%;
min-width: 160px;
}
#ProjectGroupsTable .pg-desc-col {
width: 62%;
min-width: 200px;
}
#ProjectGroupsTable .pg-actions-col {
width: 10%;
min-width: 80px;
text-align: right;
}
/* ================================
PROJECTS DASHBOARD
================================ */
/* ===== KPI WIDGETS ===== */
/* Grid layout + widget sizing provided by nd-widgets-grid in NewDashboardsTable.css.
Colour themes use unified design tokens from wg-components.css. */
/* ===== WIDGET COLOUR THEMES ===== */
.widget-inprogress .widget-icon {
background: var(--color-success-light);
color: var(--color-success);
}
.widget-inprogress .widget-value {
color: var(--color-success);
}
.widget-overdue .widget-icon {
background: var(--color-danger-light);
color: var(--color-danger);
}
.widget-overdue .widget-value {
color: var(--color-danger);
}
.widget-duethisweek .widget-icon {
background: var(--color-info-light);
color: var(--color-info);
}
.widget-duethisweek .widget-value {
color: var(--color-info);
}
.widget-new .widget-icon {
background: var(--color-primary-light);
color: var(--color-primary);
}
.widget-new .widget-value {
color: var(--color-primary);
}
.widget-risk .widget-icon {
background: var(--color-warning-light);
color: var(--color-warning);
}
.widget-risk .widget-value {
color: var(--color-warning);
}
/* ===== TABLE CELLS ===== */
.project-table-value {
/* font-weight: 500; */
}
.project-health-dot {
display: inline-block;
width: 11px;
height: 11px;
border-radius: 50%;
vertical-align: middle;
}
.project-health-dot.is-healthy {
background: var(--color-success);
}
.project-health-dot.is-warning {
background: var(--color-warning);
}
.project-health-dot.is-overdue,
.project-health-dot.is-risk {
background: var(--color-danger);
}
/* ===== PROJECT CELL ===== */
.project-cell {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
min-width: 0 !important;
line-height: 1.25 !important;
}
.project-cell__top {
display: block !important;
margin-bottom: 2px !important;
}
.project-cell__no {
display: inline-block !important;
color: var(--color-primary) !important;
font-weight: 600 !important;
text-decoration: none !important;
font-size: 15px !important;
line-height: 1.2 !important;
}
.project-cell__no:hover {
text-decoration: underline !important;
}
.project-cell__name {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
line-height: 1.3 !important;
margin-bottom: 2px !important;
}
.project-cell__client {
font-size: 13px !important;
color: var(--text-muted) !important;
line-height: 1.3 !important;
}
/* ===== OWNER CELL ===== */
.owner-cell {
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important;
}
.owner-cell__avatar {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--color-success) !important;
color: var(--text-inverse, #fff) !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.owner-cell__name {
font-size: 15px !important;
font-weight: 500 !important;
color: var(--text-primary) !important;
line-height: 1.3 !important;
white-space: nowrap !important;
}
/* ===== DUE DATE ===== */
.project-due-date-text {
font-size: 15px !important;
color: var(--text-primary) !important;
}
.project-due-date-text.is-warning {
color: var(--color-warning) !important;
font-weight: 600 !important;
}
.project-due-date-text.is-overdue {
color: var(--color-danger) !important;
font-weight: 700 !important;
}
input.project-due-date {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
height: auto !important;
font-size: 15px !important;
color: var(--text-primary) !important;
text-align: right !important;
}
/* ===== PROGRESS ===== */
.project-progress {
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-width: 180px !important;
}
.project-progress__bar {
width: 90% !important;
height: 10px !important;
border-radius: 999px !important;
background: var(--border-default) !important;
overflow: hidden !important;
position: relative !important;
}
.project-progress__fill {
position: absolute !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
border-radius: 999px !important;
}
.project-progress.is-normal .project-progress__fill {
background: var(--color-success) !important;
}
.project-progress.is-warning .project-progress__fill {
background: var(--color-warning) !important;
}
.project-progress.is-high .project-progress__fill {
background: var(--color-danger) !important;
}
.project-progress__value {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
min-width: 42px !important;
}
/* Responsive grid breakpoints handled by nd-widgets-grid in NewDashboardsTable.css */
/* Grid layout provided by nd-widgets-grid in NewDashboardsTable.css */
/* Widget card inherits from nd-widgets-grid shared baseline.
Overrides: larger padding/icon/value for "large" layout */
.purchase-dashboard-widgets .dashboard-widget {
padding: 24px 20px;
box-shadow: none;
}
.purchase-dashboard-widgets .dashboard-widget:hover {
box-shadow: 0 8px 22px rgba(20, 30, 60, 0.08);
}
.purchase-dashboard-widgets .widget-icon {
width: 44px;
height: 44px;
margin: 0 auto 18px;
font-size: 18px;
}
.purchase-dashboard-widgets .widget-title {
font-size: 15px;
color: var(--text-primary);
margin-bottom: 8px;
}
.purchase-dashboard-widgets .widget-value {
font-size: 42px;
line-height: 1;
margin-bottom: 12px;
}
.purchase-dashboard-widgets .widget-subtext {
font-size: 14px;
color: var(--text-muted);
line-height: 1.4;
min-height: 20px;
}
.purchase-dashboard-widgets .widget-openpo .widget-icon {
background: var(--color-success-light);
color: var(--color-success);
}
.purchase-dashboard-widgets .widget-openpo .widget-value {
color: var(--color-success);
}
.purchase-dashboard-widgets .widget-receivednotbilled .widget-icon {
background: var(--color-danger-light);
color: var(--color-danger);
}
.purchase-dashboard-widgets .widget-receivednotbilled .widget-value {
color: var(--color-danger);
}
.purchase-dashboard-widgets .widget-billednotreceived .widget-icon {
background: var(--color-info-light);
color: var(--color-info);
}
.purchase-dashboard-widgets .widget-billednotreceived .widget-value {
color: var(--color-info);
}
.purchase-dashboard-widgets .widget-draftpo .widget-icon {
background: var(--color-primary-light);
color: var(--color-primary);
}
.purchase-dashboard-widgets .widget-draftpo .widget-value {
color: var(--color-primary);
}
.purchase-dashboard-filters-row {
align-items: center;
margin-bottom: 8px;
}
.purchase-status-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.purchase-status-filters .btn {
margin-top: 0 !important;
background: var(--bg-subtle) !important;
color: var(--text-secondary) !important;
border-radius: 999px !important;
padding: 6px 14px !important;
font-size: 13px !important;
font-weight: 500 !important;
border: 1px solid transparent !important;
line-height: 1 !important;
transition: all .15s ease !important;
box-shadow: none !important;
}
.purchase-status-filters .btn:hover {
background: var(--bg-subtle) !important;
color: var(--text-secondary) !important;
}
.purchase-status-filters .btn.is-active {
background: var(--color-primary-light) !important;
color: var(--color-primary) !important;
border-color: var(--border-primary) !important;
font-weight: 600 !important;
box-shadow: 0 1px 3px rgba(67, 56, 202, 0.10) !important;
}
.purchase-dashboard-search {
justify-content: flex-end;
}
.purchase-dashboard-search .form-control {
max-width: 100%;
}
.purchase-row-summary {
display: flex;
flex-direction: column;
gap: 3px;
}
.purchase-row-primary-wrap {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.purchase-row-primary,
.purchase-row-primary a {
font-weight: 700;
font-size: 16px;
line-height: 1.2;
color: var(--color-primary) !important;
text-decoration: none;
}
.purchase-row-primary a:hover {
color: var(--color-primary);
}
.purchase-row-secondary,
.purchase-row-secondary a {
font-size: 14px;
line-height: 1.35;
color: var(--text-secondary);
text-decoration: none;
}
.purchase-row-secondary a:hover {
color: var(--color-primary);
}
.purchase-row-meta,
.purchase-row-meta a {
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
text-decoration: none;
}
.purchase-row-meta a:hover {
color: var(--color-primary);
}
.purchase-row-label {
display: inline-block;
min-width: 58px;
font-weight: 600;
color: var(--text-secondary);
}
.purchase-row-dates {
display: flex;
flex-direction: column;
gap: 6px;
}
.purchase-row-date-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
line-height: 1.35;
color: var(--text-secondary);
}
.purchase-row-date-value {
color: var(--text-secondary);
}
.purchase-row-date-value-muted {
color: var(--text-muted);
}
.purchase-order-summary-col {
min-width: 320px;
}
.purchase-order-dates-col {
min-width: 250px;
}
.purchase-order-status-col {
vertical-align: middle !important;
}
.purchase-row-people {
display: flex;
flex-direction: column;
gap: 4px;
}
.purchase-row-people-line {
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
}
.purchase-row-people-line strong {
font-weight: 600;
color: var(--text-secondary);
}
.purchase-row-people-line-value {
color: var(--text-secondary);
}
.purchase-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1;
min-width: 92px;
}
.purchase-status-badge-approved {
background: var(--color-success-light);
color: var(--color-success);
}
.purchase-status-badge-received {
background: var(--color-info-light);
color: var(--color-info);
}
.purchase-status-badge-draft {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.purchase-table-value-total {
font-weight: 700;
font-size: 15px;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.purchase-expected-date-input {
min-width: 110px;
max-width: 138px;
display: inline-block !important;
padding: 6px 10px;
border: 1px solid var(--border-default);
border-radius: 4px;
background: var(--bg-surface);
color: var(--text-secondary);
box-shadow: none;
}
.purchase-expected-date-input:focus {
border-color: var(--border-primary);
box-shadow: 0 0 0 2px rgba(109, 94, 252, 0.08);
}
.purchase-date-pill {
display: inline-block;
padding: 5px 10px;
border-radius: 999px;
background: var(--bg-page);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
}
.purchase-muted-pill {
display: inline-block;
padding: 5px 10px;
border-radius: 999px;
background: var(--bg-subtle);
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
}
#PurchaseOrdersTable tbody td {
padding-top: 16px !important;
padding-bottom: 16px !important;
vertical-align: top;
}
@media (max-width: 991.98px) {
.purchase-dashboard-widgets {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.purchase-dashboard-search {
margin-top: 12px;
}
}
@media (max-width: 575.98px) {
.purchase-dashboard-widgets {
grid-template-columns: 1fr;
}
}
button.dashboard-widget i {
margin-right: 0px !important;
}
/* ================================
QUOTES DASHBOARD - SECOND PASS
Lighter shell, sharper controls,
less template, more sales UI.
================================ */
.quotes-dashboard-shell {
display: flex;
flex-direction: column;
gap: 18px;
}
/* ================================
DASHBOARD TOGGLE
================================ */
.quotes-dashboard-toggle-row {
display: flex;
justify-content: flex-end;
margin-bottom: 4px;
}
.quotes-dashboard-toggle {
padding: 4px 10px !important;
margin-bottom: 0 !important;
border-radius: 999px;
border-color: var(--border-default);
background: var(--bg-surface);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
}
/* ================================
KPI WIDGETS
================================ */
/* Grid layout + widget sizing provided by nd-widgets-grid in NewDashboardsTable.css.
Only colour themes are overridden below. */
.widget-currentquotes .widget-icon {
background: var(--color-info-light);
color: var(--color-info);
}
.widget-currentquotes .widget-value {
color: var(--color-info);
}
.widget-expiredquotes .widget-icon {
background: var(--color-danger-light);
color: var(--color-danger);
}
.widget-expiredquotes .widget-value {
color: var(--color-danger);
}
.widget-acceptedquotes .widget-icon {
background: var(--color-success-light);
color: var(--color-success);
}
.widget-acceptedquotes .widget-value {
color: var(--color-success);
}
.widget-averagequote .widget-icon {
background: var(--color-primary-light);
color: var(--color-primary);
}
.widget-averagequote .widget-value {
color: var(--color-primary);
}
/* ================================
OUTER CARDS
================================ */
.quotes-insights-card,
.quotes-table-card {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.quotes-card-header {
padding: 16px 18px 14px;
border-bottom: 1px solid var(--border-default);
}
.quotes-card-title {
font-size: 18px;
font-weight: 650;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.quotes-card-subtitle {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
/* ================================
INSIGHTS
================================ */
.quotes-insights-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
padding: 6px 10px 10px;
}
.quotes-insight-panel {
padding: 14px 14px 10px;
min-height: 300px;
display: flex;
flex-direction: column;
background: transparent;
border: 0;
position: relative;
}
.quotes-insight-panel:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 12px;
bottom: 12px;
width: 1px;
background: var(--border-default);
}
.quotes-insight-label {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 10px;
text-align: center;
}
.quotes-insight-panel canvas {
width: 100% !important;
height: 220px !important;
max-height: 220px;
margin: auto;
}
/* ================================
TABLE TOOLBAR
================================ */
.quotes-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-default);
flex-wrap: wrap;
}
.quotes-table-toolbar-left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
min-width: 0;
}
.quotes-table-toolbar-right {
display: flex;
align-items: center;
justify-content: flex-end;
width: 44%;
}
.quotes-status-filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.quotes-status-pill {
border: 1px solid var(--border-default);
background: var(--bg-surface);
border-radius: 999px;
padding: 7px 12px;
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
line-height: 1;
transition: all .15s ease;
box-shadow: none;
}
.quotes-status-pill:hover {
border-color: var(--border-default);
background: var(--bg-subtle);
}
.quotes-status-pill.is-active {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--bg-surface);
}
.quotes-status-pill-count {
color: inherit;
margin-left: 4px;
font-weight: 600;
}
.quotes-bulk-action {
height: 34px;
padding: 0 14px;
border-radius: 8px;
white-space: nowrap;
font-size: 12px;
font-weight: 700;
}
.quotes-search {
min-width: 280px;
width: 100%;
}
.quotes-search .input-group {
flex-wrap: nowrap;
}
.quotes-search .form-control {
border-color: var(--border-default);
border-right: 0;
height: 36px;
font-size: 13px;
}
.quotes-search .form-control:focus {
border-color: var(--border-heavy);
box-shadow: none;
}
.quotes-search .btn {
height: 36px;
margin-top: 0 !important;
}
/* ================================
TABLE WRAP / DATATABLES CHROME
================================ */
.quotes-table-wrap {
padding: 0 18px 18px;
}
.quotes-table-wrap .dataTables_wrapper {
margin-top: 6px;
}
#QuotesTable thead th {
background: var(--bg-subtle);
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border-default) !important;
}
#QuotesTable tbody td {
padding-top: 14px !important;
padding-bottom: 14px !important;
vertical-align: top;
}
#QuotesTable tbody tr:hover {
background: var(--bg-subtle);
}
/* ================================
SHARED ROW LANGUAGE
================================ */
.purchase-row-summary {
display: flex;
flex-direction: column;
gap: 3px;
}
.purchase-row-primary-wrap {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 1px;
}
.purchase-row-primary,
.purchase-row-primary a {
font-size: 15px; /* slightly down */
font-weight: 600; /* not 700 */
line-height: 1.2;
color: var(--color-primary);
text-decoration: none;
}
.purchase-row-primary a:hover {
color: var(--color-primary-hover);
}
.purchase-row-primary-wrap i {
font-size: 13px;
margin-left: 6px;
color: var(--text-disabled);
position: relative;
top: 1px;
}
.purchase-row-secondary,
.purchase-row-secondary a {
font-size: 13px;
line-height: 1.35;
color: var(--text-secondary);
text-decoration: none;
}
.purchase-row-secondary a:hover {
color: var(--color-primary-hover);
}
.purchase-row-meta,
.purchase-row-meta a {
line-height: 1.4;
text-decoration: none;
font-size: 12px;
color: var(--text-muted);
max-width: 90%;
}
.purchase-row-meta a:hover {
color: var(--color-primary-hover);
}
.purchase-row-label {
display: inline-block;
min-width: 52px;
font-weight: 600;
color: var(--text-secondary);
}
.purchase-row-dates {
display: flex;
flex-direction: column;
gap: 6px;
}
.purchase-row-date-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 1.35;
color: var(--text-secondary);
}
.purchase-row-date-value {
color: var(--text-secondary);
}
.purchase-row-date-value-muted {
color: var(--text-muted);
}
.purchase-row-people {
display: flex;
flex-direction: column;
gap: 4px;
}
.purchase-row-people-line {
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
}
.purchase-row-people-line strong {
font-weight: 600;
color: var(--text-secondary);
}
.purchase-row-people-line-value {
color: var(--text-secondary);
}
.purchase-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1;
min-width: 82px;
}
.purchase-status-badge-approved {
background: var(--color-success-light);
color: var(--color-success);
}
.purchase-status-badge-received {
background: var(--color-info-light);
color: var(--color-info);
}
.purchase-status-badge-draft {
background: var(--bg-subtle);
color: var(--text-secondary);
}
#QuotesTable.NewDashboardsTable tbody td {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.purchase-table-value-total {
font-weight: 400;
font-size: 14px;
color: var(--text-primary);
letter-spacing: -0.01em;
}
/* ================================
RESPONSIVE
================================ */
@media (max-width: 1199.98px) {
.quotes-insights-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.quotes-insight-panel:nth-child(2)::after {
display: none;
}
}
@media (max-width: 767.98px) {
.quotes-insights-grid {
grid-template-columns: 1fr;
}
.quotes-insight-panel::after {
display: none;
}
.quotes-search {
min-width: 100%;
width: 100%;
}
.quotes-table-toolbar-right {
width: 100%;
justify-content: stretch;
}
}
.quote-summary-col {
min-width: 320px;
}
.quote-client-col {
min-width: 220px;
}
.quote-owner-col {
min-width: 160px;
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
}
.quote-client-col .purchase-row-secondary {
font-weight: 500;
color: var(--text-primary);
}
.purchase-row-date-line {
gap: 6px;
}
.purchase-row-label {
min-width: 50px;
font-weight: 500;
color: var(--text-muted);
}
.quote-dates-col {
min-width: 220px;
}
.quote-value-col,
.quote-value-col * {
text-align: right;
}
.quotes-status-pill {
background: var(--bg-subtle);
color: var(--text-secondary);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
transition: all 0.15s ease;
}
.quotes-status-pill:hover {
background: var(--bg-subtle);
color: var(--text-primary);
}
/* ACTIVE STATE (fixed) */
.quotes-status-pill.is-active {
background: var(--color-primary-light);
color: var(--color-primary);
border-color: var(--color-primary);
font-weight: 600;
box-shadow: 0 1px 3px rgba(67, 56, 202, 0.10);
}
/* ================================
SUPPLIER CREDIT NOTES DASHBOARD
================================ */
/* ===== KPI WIDGETS ===== */
/* Grid layout provided by nd-widgets-grid in NewDashboardsTable.css */
/* Widget card, icon, title, value, subtext all inherit from
.nd-widgets-grid shared baseline in NewDashboardsTable.css */
/* ===== WIDGET COLOUR THEMES ===== */
.widget-scn-draft .widget-icon {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.widget-scn-draft .widget-value {
color: var(--text-secondary);
}
.widget-scn-approved .widget-icon {
background: var(--color-success-light);
color: var(--color-success);
}
.widget-scn-approved .widget-value {
color: var(--color-success);
}
.widget-scn-total .widget-icon {
background: var(--color-info-light);
color: var(--color-info);
}
.widget-scn-total .widget-value {
color: var(--color-info);
}
.widget-scn-accounting .widget-icon {
background: var(--color-warning-light);
color: var(--color-warning);
}
.widget-scn-accounting .widget-value {
color: var(--color-warning);
}
/* ===== TABLE CARD ===== */
.scn-table-card {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.scn-card-header {
padding: 16px 18px 14px;
border-bottom: 1px solid var(--border-default);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.scn-card-title {
font-size: 18px;
font-weight: 650;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.scn-card-subtitle {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
/* ===== TABLE TOOLBAR ===== */
.scn-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-default);
flex-wrap: wrap;
}
.scn-table-toolbar-left {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.scn-table-toolbar-right {
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: auto;
}
.scn-status-filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.scn-status-pill {
background: var(--bg-subtle);
color: var(--text-secondary);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
line-height: 1;
transition: all .15s ease;
}
.scn-status-pill:hover {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.scn-status-pill.is-active {
background: var(--color-primary-light);
color: var(--color-primary);
border-color: var(--color-primary);
font-weight: 600;
box-shadow: 0 1px 3px rgba(67, 56, 202, 0.10);
}
.scn-search {
min-width: 280px;
}
.scn-search .input-group {
flex-wrap: nowrap;
}
.scn-search .form-control {
border-color: var(--border-default);
border-right: 0;
height: 36px;
font-size: 13px;
}
.scn-search .form-control:focus {
border-color: var(--border-default);
box-shadow: none;
}
.scn-search .btn {
height: 36px;
margin-top: 0 !important;
}
/* ===== TABLE WRAP ===== */
.scn-table-wrap {
padding: 0 18px 18px;
}
.scn-table-wrap .dataTables_wrapper {
margin-top: 6px;
}
#SupplierCreditNotesTable thead th {
background: var(--bg-page);
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border-default) !important;
}
#SupplierCreditNotesTable tbody td {
padding-top: 12px !important;
padding-bottom: 12px !important;
vertical-align: top;
}
#SupplierCreditNotesTable tbody tr:hover {
background: var(--bg-subtle);
}
/* ===== STATUS BADGE ===== */
.scn-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.scn-status-badge-draft {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.scn-status-badge-approved {
background: var(--color-success-light);
color: var(--color-success);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 767.98px) {
.scn-search {
min-width: 100%;
width: 100%;
}
.scn-table-toolbar-right {
width: 100%;
justify-content: stretch;
}
}
/* ── Suppliers Dashboard ───────────────────────────────────────────────────── */
/* Widget structural card styles (mirrors InvoicesDashboard pattern) */
/* Widget card, title, subtext inherit from nd-widgets-grid shared baseline.
Overrides: slightly larger padding, icon, and value */
.suppliers-dashboard-widgets .dashboard-widget {
padding: 20px 18px;
box-shadow: none;
}
.suppliers-dashboard-widgets .dashboard-widget:hover {
box-shadow: 0 8px 22px rgba(20, 30, 60, 0.08);
}
.suppliers-dashboard-widgets .widget-icon {
width: 40px;
height: 40px;
margin: 0 auto 14px;
font-size: 16px;
}
.suppliers-dashboard-widgets .widget-title {
font-size: 14px;
}
.suppliers-dashboard-widgets .widget-value {
font-size: 32px;
}
/* Widget colour themes */
.widget-suppliers-total .widget-icon {
background: var(--wg-accent-light, #e0f7f4);
color: var(--wg-text-body, #00897b);
}
.widget-suppliers-total .widget-value {
color: var(--wg-text-body, #00897b);
}
.widget-suppliers-missingabn .widget-icon {
background: var(--color-danger-light);
color: var(--color-danger);
}
.widget-suppliers-missingabn .widget-value {
color: var(--color-danger);
}
.widget-suppliers-noaddress .widget-icon {
background: var(--color-warning-light);
color: var(--color-warning);
}
.widget-suppliers-noaddress .widget-value {
color: var(--color-warning);
}
.widget-suppliers-nocontacts .widget-icon {
background: var(--wg-accent-light, #f3e5f5);
color: var(--wg-accent, #8e24aa);
}
.widget-suppliers-nocontacts .widget-value {
color: var(--wg-accent, #8e24aa);
}
/* Table card */
.suppliers-table-card {
background: var(--bg-surface);
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
margin-top: 20px;
overflow: hidden;
}
.suppliers-table-card .card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 10px;
border-bottom: 1px solid var(--border-default);
flex-wrap: wrap;
gap: 10px;
}
.suppliers-table-card .card-header h3 {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
/* Toolbar */
.suppliers-table-toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.suppliers-status-pill {
padding: 5px 14px;
border-radius: 20px;
border: 1px solid var(--border-heavy);
background: var(--bg-surface);
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.suppliers-status-pill:hover {
border-color: var(--wg-text-body, #00897b);
color: var(--wg-text-body, #00897b);
}
.suppliers-status-pill.active {
background: var(--wg-text-body, #00897b);
border-color: var(--wg-text-body, #00897b);
color: var(--bg-surface);
}
.suppliers-status-pill.pill-danger.active {
background: var(--color-danger);
border-color: var(--color-danger);
}
.suppliers-status-pill.pill-warning.active {
background: var(--color-warning);
border-color: var(--color-warning);
}
.suppliers-status-pill.pill-purple.active {
background: var(--wg-accent, #8e24aa);
border-color: var(--wg-accent, #8e24aa);
}
/* Search */
.suppliers-search {
position: relative;
}
.suppliers-search input {
padding: 5px 12px 5px 32px;
border: 1px solid var(--border-heavy);
border-radius: 20px;
font-size: 12px;
color: var(--text-primary);
width: 200px;
outline: none;
transition: border-color 0.15s;
}
.suppliers-search input:focus {
border-color: var(--wg-text-body, #00897b);
}
.suppliers-search .search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 12px;
}
/* Table wrap */
.suppliers-table-wrap {
padding: 0 4px;
overflow-x: auto;
}
/* Table header */
#SuppliersTable thead th {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
background: var(--bg-page);
border-bottom: 2px solid var(--border-default);
padding: 10px 12px;
white-space: nowrap;
}
#SuppliersTable tbody td {
padding: 10px 12px;
font-size: 13px;
vertical-align: middle;
}
/* Health indicator badges (shared style, supplier-scoped) */
.supplier-health-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 500;
padding: 2px 8px;
border-radius: 10px;
}
.supplier-health-badge.ok {
background: var(--wg-accent-light, #e0f7f4);
color: var(--wg-text-body, #00695c);
}
.supplier-health-badge.missing {
background: var(--color-danger-light);
color: var(--wg-text-body, #c62828);
}
/* Last activity */
.supplier-activity-date {
font-size: 12px;
color: var(--text-secondary);
}
.supplier-activity-date.stale-3m {
color: var(--color-warning);
font-weight: 500;
}
.supplier-activity-date.stale-6m {
color: var(--color-danger);
font-weight: 500;
}
.supplier-activity-date.never {
color: var(--text-muted);
font-style: italic;
}
/* Contact count badge */
.supplier-contact-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
border-radius: 11px;
font-size: 11px;
font-weight: 600;
padding: 0 6px;
}
.supplier-contact-count.has-contacts {
background: var(--wg-accent-light, #e0f7f4);
color: var(--wg-text-body, #00695c);
}
.supplier-contact-count.no-contacts {
background: var(--color-danger-light);
color: var(--wg-text-body, #c62828);
}
/* ── Timesheets Old Dashboard ─────────────────────────────────── */
/* Checkbox / approval column */
#TimeSheetsTable .TimeSheetApprovalCol {
text-align: center;
width: 36px;
min-width: 36px;
max-width: 36px;
padding-left: 6px;
padding-right: 6px;
}
/* Column widths */
#TimeSheetsTable .ts-user-col {
width: 10%;
min-width: 100px;
}
#TimeSheetsTable .ts-project-col {
width: 18%;
min-width: 140px;
}
#TimeSheetsTable .ts-client-col {
width: 12%;
min-width: 100px;
}
#TimeSheetsTable .ts-task-col {
width: 12%;
min-width: 100px;
}
#TimeSheetsTable .ts-time-col {
width: 9%;
min-width: 90px;
}
#TimeSheetsTable .ts-hours-col {
width: 8%;
min-width: 75px;
}
#TimeSheetsTable .ts-status-col {
width: 8%;
min-width: 80px;
}
#TimeSheetsTable .ts-note-col {
width: 14%;
min-width: 100px;
}
#TimeSheetsTable .ts-actions-col {
width: 8%;
min-width: 80px;
}
/* Status badge colouring */
#TimeSheetsTable .ts-status-approved {
color: #12b76a;
font-weight: 600;
}
#TimeSheetsTable .ts-status-draft {
color: #98a2b3;
}
#TimeSheetsTable .ts-status-unapproved {
color: #f04438;
font-weight: 600;
}
#TimeSheetsTable .ts-status-submitted {
color: #f79009;
font-weight: 600;
}
/* Bulk-action buttons bar */
.ts-bulk-actions {
display: flex;
gap: 8px;
padding: 10px 0 4px;
}
.ts-bulk-actions .btn {
font-size: 13px;
}
/* General */
.clickable-item {
cursor: pointer;
}
.text-bold {
font-weight: bold;
}
/* Portlet */
.portlet.light > .portlet-title .inputs.inputs-full-width {
display: block;
float: none;
}
/* Tree */
.tree-item-icon-color {
color: var(--color-warning, #dfba49);
}
.page-sidebar .page-sidebar-menu > li > a > i.fa,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i.fa {
margin-left: 1px;
margin-right: 4px;
top: 3px;
}
/* Forms */
.form-group.form-md-line-input.no-hint {
margin-bottom: 15px;
}
.form-group.form-md-line-input.has-error .form-control {
border-bottom-color: red;
}
.form-group.form-md-line-input.has-error .help-block-info {
display: none;
}
/* DateRangePicker */
.daterangepicker_input .input-mini {
width: 120px !important;
}
/* Portlets */
.portlet.light > .portlet-title.portlet-title-filter {
border: none;
margin-bottom: 0;
}
/* Buttons */
button i {
margin-right: 5px;
}
.btn + .btn {
// margin-left: 5px;
}
/* FamFamFam Flags */
.famfamfam-flags {
display: inline-block;
}
/* Social Login Icons */
.social-icons li .microsoft {
background: url(../Images/Social/microsoft.png) no-repeat;
}
.margin-bottom-0 {
margin-bottom: 0 !important;
}
/* Make user menu wider */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu {
width: 250px;
}
/* Fix for issue #407 */
br {
font-family: Verdana;
}
span.phone-number-verified {
border-bottom: var(--color-info, #36c6d3) 2px solid !important;
}
.margin-top-20 {
margin-top: 20px;
}
.margin-bottom-10 {
margin-bottom: 10px;
}
.margin-bottom-15 {
margin-bottom: 15px;
}
.margin-top-15 {
margin-top: 15px;
}
/* Sweet alert */
.swal-footer {
text-align: center;
}
/* jsTree default theme */
.jstree-node,
.jstree-children,
.jstree-container-ul {
display: block;
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.jstree-node {
white-space: nowrap;
}
.jstree-anchor {
display: inline-block;
color: black;
white-space: nowrap;
padding: 0 4px 0 1px;
margin: 0;
vertical-align: top;
}
.jstree-anchor:focus {
outline: 0;
}
.jstree-anchor,
.jstree-anchor:link,
.jstree-anchor:visited,
.jstree-anchor:hover,
.jstree-anchor:active {
text-decoration: none;
color: inherit;
}
.jstree-icon {
display: inline-block;
text-decoration: none;
margin: 0;
padding: 0;
vertical-align: top;
text-align: center;
}
.jstree-icon:empty {
display: inline-block;
text-decoration: none;
margin: 0;
padding: 0;
vertical-align: top;
text-align: center;
}
.jstree-ocl {
cursor: pointer;
}
.jstree-leaf > .jstree-ocl {
cursor: default;
}
.jstree .jstree-open > .jstree-children {
display: block;
}
.jstree .jstree-closed > .jstree-children,
.jstree .jstree-leaf > .jstree-children {
display: none;
}
.jstree-anchor > .jstree-themeicon {
margin-right: 2px;
}
.jstree-no-icons .jstree-themeicon,
.jstree-anchor > .jstree-themeicon-hidden {
display: none;
}
.jstree-hidden {
display: none;
}
.jstree-rtl .jstree-anchor {
padding: 0 1px 0 4px;
}
.jstree-rtl .jstree-anchor > .jstree-themeicon {
margin-left: 2px;
margin-right: 0;
}
.jstree-rtl .jstree-node {
margin-left: 0;
}
.jstree-rtl .jstree-container-ul > .jstree-node {
margin-right: 0;
}
.jstree-wholerow-ul {
position: relative;
display: inline-block;
min-width: 100%;
}
.jstree-wholerow-ul .jstree-leaf > .jstree-ocl {
cursor: pointer;
}
.jstree-wholerow-ul .jstree-anchor,
.jstree-wholerow-ul .jstree-icon {
position: relative;
}
.jstree-wholerow-ul .jstree-wholerow {
width: 100%;
cursor: pointer;
position: absolute;
left: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vakata-context {
display: none;
}
.vakata-context,
.vakata-context ul {
margin: 0;
padding: 2px;
position: absolute;
background: #f5f5f5;
border: 1px solid #979797;
box-shadow: 2px 2px 2px #999999;
}
.vakata-context ul {
list-style: none;
left: 100%;
margin-top: -2.7em;
margin-left: -4px;
}
.vakata-context .vakata-context-right ul {
left: auto;
right: 100%;
margin-left: auto;
margin-right: -4px;
}
.vakata-context li {
list-style: none;
display: inline;
}
.vakata-context li > a {
display: block;
padding: 0 2em 0 2em;
text-decoration: none;
width: auto;
color: black;
white-space: nowrap;
line-height: 2.4em;
text-shadow: 1px 1px 0 white;
border-radius: 1px;
}
.vakata-context li > a:hover {
position: relative;
background-color: #e8eff7;
box-shadow: 0 0 2px #0a6aa1;
}
.vakata-context li > a.vakata-context-parent {
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
background-position: right center;
background-repeat: no-repeat;
}
.vakata-context li > a:focus {
outline: 0;
}
.vakata-context .vakata-context-hover > a {
position: relative;
background-color: #e8eff7;
box-shadow: 0 0 2px #0a6aa1;
}
.vakata-context .vakata-context-separator > a,
.vakata-context .vakata-context-separator > a:hover {
background: white;
border: 0;
border-top: 1px solid #e2e3e3;
height: 1px;
min-height: 1px;
max-height: 1px;
padding: 0;
margin: 0 0 0 2.4em;
border-left: 1px solid #e0e0e0;
text-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
border-radius: 0;
}
.vakata-context .vakata-contextmenu-disabled a,
.vakata-context .vakata-contextmenu-disabled a:hover {
color: silver;
background-color: transparent;
border: 0;
box-shadow: 0 0 0;
}
.vakata-context li > a > i {
text-decoration: none;
display: inline-block;
width: 2.4em;
height: 2.4em;
background: transparent;
margin: 0 0 0 -2em;
vertical-align: top;
text-align: center;
line-height: 2.4em;
}
.vakata-context li > a > i:empty {
width: 2.4em;
line-height: 2.4em;
}
.vakata-context li > a .vakata-contextmenu-sep {
display: inline-block;
width: 1px;
height: 2.4em;
background: white;
margin: 0 0.5em 0 0;
border-left: 1px solid #e2e3e3;
}
.vakata-context .vakata-contextmenu-shortcut {
font-size: 0.8em;
color: silver;
opacity: 0.5;
display: none;
}
.vakata-context-rtl ul {
left: auto;
right: 100%;
margin-left: auto;
margin-right: -4px;
}
.vakata-context-rtl li > a.vakata-context-parent {
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAINjI+AC7rWHIsPtmoxLAA7");
background-position: left center;
background-repeat: no-repeat;
}
.vakata-context-rtl .vakata-context-separator > a {
margin: 0 2.4em 0 0;
border-left: 0;
border-right: 1px solid #e2e3e3;
}
.vakata-context-rtl .vakata-context-left ul {
right: auto;
left: 100%;
margin-left: -4px;
margin-right: auto;
}
.vakata-context-rtl li > a > i {
margin: 0 -2em 0 0;
}
.vakata-context-rtl li > a .vakata-contextmenu-sep {
margin: 0 0 0 0.5em;
border-left-color: white;
background: #e2e3e3;
}
#jstree-marker {
position: absolute;
top: 0;
left: 0;
margin: -5px 0 0 0;
padding: 0;
border-right: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
}
#jstree-dnd {
line-height: 16px;
margin: 0;
padding: 4px;
}
#jstree-dnd .jstree-icon,
#jstree-dnd .jstree-copy {
display: inline-block;
text-decoration: none;
margin: 0 2px 0 0;
padding: 0;
width: 16px;
height: 16px;
}
#jstree-dnd .jstree-ok {
background: green;
}
#jstree-dnd .jstree-er {
background: red;
}
#jstree-dnd .jstree-copy {
margin: 0 2px 0 2px;
}
.jstree-default .jstree-node,
.jstree-default .jstree-icon {
background-repeat: no-repeat;
background-color: transparent;
}
.jstree-default .jstree-anchor,
.jstree-default .jstree-wholerow {
transition: background-color 0.15s, box-shadow 0.15s;
}
.jstree-default .jstree-hovered {
background: #e7f4f9;
border-radius: 2px;
box-shadow: inset 0 0 1px #cccccc;
}
.jstree-default .jstree-clicked {
background: #beebff;
border-radius: 2px;
box-shadow: inset 0 0 1px #999999;
}
.jstree-default .jstree-no-icons .jstree-anchor > .jstree-themeicon {
display: none;
}
.jstree-default .jstree-disabled {
background: transparent;
color: #666666;
}
.jstree-default .jstree-disabled.jstree-hovered {
background: transparent;
box-shadow: none;
}
.jstree-default .jstree-disabled.jstree-clicked {
background: #efefef;
}
.jstree-default .jstree-disabled > .jstree-icon {
opacity: 0.8;
filter: url("data:image/svg+xml;utf8,#jstree-grayscale");
/* Firefox 10+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+ & Safari 6+ */
}
.jstree-default .jstree-search {
font-style: italic;
color: #8b0000;
font-weight: bold;
}
.jstree-default .jstree-no-checkboxes .jstree-checkbox {
display: none !important;
}
.jstree-default.jstree-checkbox-no-clicked .jstree-clicked {
background: transparent;
box-shadow: none;
}
.jstree-default.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered {
background: #e7f4f9;
}
.jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked {
background: transparent;
}
.jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered {
background: #e7f4f9;
}
.jstree-default > .jstree-striped {
min-width: 100%;
display: inline-block;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB/qqA+AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMNAMM9s3UAAAAXSURBVHjajcEBAQAAAIKg/H/aCQZ70AUBjAATb6YPDgAAAABJRU5ErkJggg==") left top repeat;
}
.jstree-default > .jstree-wholerow-ul .jstree-hovered,
.jstree-default > .jstree-wholerow-ul .jstree-clicked {
background: transparent;
box-shadow: none;
border-radius: 0;
}
.jstree-default .jstree-wholerow {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.jstree-default .jstree-wholerow-hovered {
background: #e7f4f9;
}
.jstree-default .jstree-wholerow-clicked {
background: #beebff;
background: -webkit-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
background: linear-gradient(to bottom, #beebff 0%, #a8e4ff 100%);
}
.jstree-default .jstree-node {
min-height: 24px;
line-height: 24px;
margin-left: 24px;
min-width: 24px;
}
.jstree-default .jstree-anchor {
line-height: 24px;
height: 24px;
}
.jstree-default .jstree-icon {
width: 24px;
height: 24px;
line-height: 24px;
}
.jstree-default .jstree-icon:empty {
width: 24px;
height: 24px;
line-height: 24px;
}
.jstree-default.jstree-rtl .jstree-node {
margin-right: 24px;
}
.jstree-default .jstree-wholerow {
height: 24px;
}
.jstree-default .jstree-node,
.jstree-default .jstree-icon {
background-image: url("/Common/Images/jstree_32px_line.png");
}
.jstree-default .jstree-node {
background-position: -292px -4px;
background-repeat: repeat-y;
}
.jstree-default .jstree-last {
background: transparent;
}
.jstree-default .jstree-open > .jstree-ocl {
background-position: -132px -4px;
}
.jstree-default .jstree-closed > .jstree-ocl {
background-position: -100px -4px;
}
.jstree-default .jstree-leaf > .jstree-ocl {
background-position: -68px -4px;
}
.jstree-default .jstree-themeicon {
background-position: -260px -4px;
}
.jstree-default > .jstree-no-dots .jstree-node,
.jstree-default > .jstree-no-dots .jstree-leaf > .jstree-ocl {
background: transparent;
}
.jstree-default > .jstree-no-dots .jstree-open > .jstree-ocl {
background-position: -36px -4px;
}
.jstree-default > .jstree-no-dots .jstree-closed > .jstree-ocl {
background-position: -4px -4px;
}
.jstree-default .jstree-disabled {
background: transparent;
}
.jstree-default .jstree-disabled.jstree-hovered {
background: transparent;
}
.jstree-default .jstree-disabled.jstree-clicked {
background: #efefef;
}
.jstree-default .jstree-checkbox {
background-position: -164px -4px;
}
.jstree-default .jstree-checkbox:hover {
background-position: -164px -36px;
}
.jstree-default.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
.jstree-default .jstree-checked > .jstree-checkbox {
background-position: -228px -4px;
}
.jstree-default.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
.jstree-default .jstree-checked > .jstree-checkbox:hover {
background-position: -228px -36px;
}
.jstree-default .jstree-anchor > .jstree-undetermined {
background-position: -196px -4px;
}
.jstree-default .jstree-anchor > .jstree-undetermined:hover {
background-position: -196px -36px;
}
.jstree-default .jstree-checkbox-disabled {
opacity: 0.8;
filter: url("data:image/svg+xml;utf8,#jstree-grayscale");
/* Firefox 10+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+ & Safari 6+ */
}
.jstree-default > .jstree-striped {
background-size: auto 48px;
}
.jstree-default.jstree-rtl .jstree-node {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
background-position: 100% 1px;
background-repeat: repeat-y;
}
.jstree-default.jstree-rtl .jstree-last {
background: transparent;
}
.jstree-default.jstree-rtl .jstree-open > .jstree-ocl {
background-position: -132px -36px;
}
.jstree-default.jstree-rtl .jstree-closed > .jstree-ocl {
background-position: -100px -36px;
}
.jstree-default.jstree-rtl .jstree-leaf > .jstree-ocl {
background-position: -68px -36px;
}
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-node,
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
background: transparent;
}
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
background-position: -36px -36px;
}
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
background-position: -4px -36px;
}
.jstree-default .jstree-themeicon-custom {
background-color: transparent;
background-image: none;
background-position: 0 0;
}
.jstree-default > .jstree-container-ul .jstree-loading > .jstree-ocl {
background: url("/Common/Images/throbber.gif") center center no-repeat;
}
.jstree-default .jstree-file {
background: url("/Common/Images/jstree_32px_line.png") -100px -68px no-repeat;
}
.jstree-default .jstree-folder {
background: url("/Common/Images/jstree_32px_line.png") -260px -4px no-repeat;
}
.jstree-default > .jstree-container-ul > .jstree-node {
margin-left: 0;
margin-right: 0;
}
#jstree-dnd.jstree-default {
line-height: 24px;
padding: 0 4px;
}
#jstree-dnd.jstree-default .jstree-ok,
#jstree-dnd.jstree-default .jstree-er {
background-image: url("/Common/Images/jstree_32px_line.png");
background-repeat: no-repeat;
background-color: transparent;
}
#jstree-dnd.jstree-default i {
background: transparent;
width: 24px;
height: 24px;
line-height: 24px;
}
#jstree-dnd.jstree-default .jstree-ok {
background-position: -4px -68px;
}
#jstree-dnd.jstree-default .jstree-er {
background-position: -36px -68px;
}
.jstree-default.jstree-rtl .jstree-node {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
}
.jstree-default.jstree-rtl .jstree-last {
background: transparent;
}
.jstree-default-small .jstree-node {
min-height: 18px;
line-height: 18px;
margin-left: 18px;
min-width: 18px;
}
.jstree-default-small .jstree-anchor {
line-height: 18px;
height: 18px;
}
.jstree-default-small .jstree-icon {
width: 18px;
height: 18px;
line-height: 18px;
}
.jstree-default-small .jstree-icon:empty {
width: 18px;
height: 18px;
line-height: 18px;
}
.jstree-default-small.jstree-rtl .jstree-node {
margin-right: 18px;
}
.jstree-default-small .jstree-wholerow {
height: 18px;
}
.jstree-default-small .jstree-node,
.jstree-default-small .jstree-icon {
background-image: url("/Common/Images/jstree_32px_line.png");
}
.jstree-default-small .jstree-node {
background-position: -295px -7px;
background-repeat: repeat-y;
}
.jstree-default-small .jstree-last {
background: transparent;
}
.jstree-default-small .jstree-open > .jstree-ocl {
background-position: -135px -7px;
}
.jstree-default-small .jstree-closed > .jstree-ocl {
background-position: -103px -7px;
}
.jstree-default-small .jstree-leaf > .jstree-ocl {
background-position: -71px -7px;
}
.jstree-default-small .jstree-themeicon {
background-position: -263px -7px;
}
.jstree-default-small > .jstree-no-dots .jstree-node,
.jstree-default-small > .jstree-no-dots .jstree-leaf > .jstree-ocl {
background: transparent;
}
.jstree-default-small > .jstree-no-dots .jstree-open > .jstree-ocl {
background-position: -39px -7px;
}
.jstree-default-small > .jstree-no-dots .jstree-closed > .jstree-ocl {
background-position: -7px -7px;
}
.jstree-default-small .jstree-disabled {
background: transparent;
}
.jstree-default-small .jstree-disabled.jstree-hovered {
background: transparent;
}
.jstree-default-small .jstree-disabled.jstree-clicked {
background: #efefef;
}
.jstree-default-small .jstree-checkbox {
background-position: -167px -7px;
}
.jstree-default-small .jstree-checkbox:hover {
background-position: -167px -39px;
}
.jstree-default-small.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
.jstree-default-small .jstree-checked > .jstree-checkbox {
background-position: -231px -7px;
}
.jstree-default-small.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
.jstree-default-small .jstree-checked > .jstree-checkbox:hover {
background-position: -231px -39px;
}
.jstree-default-small .jstree-anchor > .jstree-undetermined {
background-position: -199px -7px;
}
.jstree-default-small .jstree-anchor > .jstree-undetermined:hover {
background-position: -199px -39px;
}
.jstree-default-small .jstree-checkbox-disabled {
opacity: 0.8;
filter: url("data:image/svg+xml;utf8,#jstree-grayscale");
/* Firefox 10+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+ & Safari 6+ */
}
.jstree-default-small > .jstree-striped {
background-size: auto 36px;
}
.jstree-default-small.jstree-rtl .jstree-node {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
background-position: 100% 1px;
background-repeat: repeat-y;
}
.jstree-default-small.jstree-rtl .jstree-last {
background: transparent;
}
.jstree-default-small.jstree-rtl .jstree-open > .jstree-ocl {
background-position: -135px -39px;
}
.jstree-default-small.jstree-rtl .jstree-closed > .jstree-ocl {
background-position: -103px -39px;
}
.jstree-default-small.jstree-rtl .jstree-leaf > .jstree-ocl {
background-position: -71px -39px;
}
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-node,
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
background: transparent;
}
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
background-position: -39px -39px;
}
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
background-position: -7px -39px;
}
.jstree-default-small .jstree-themeicon-custom {
background-color: transparent;
background-image: none;
background-position: 0 0;
}
.jstree-default-small > .jstree-container-ul .jstree-loading > .jstree-ocl {
background: url("throbber.gif") center center no-repeat;
}
.jstree-default-small .jstree-file {
background: url("/Common/Images/jstree_32px_line.png") -103px -71px no-repeat;
}
.jstree-default-small .jstree-folder {
background: url("/Common/Images/jstree_32px_line.png") -263px -7px no-repeat;
}
.jstree-default-small > .jstree-container-ul > .jstree-node {
margin-left: 0;
margin-right: 0;
}
#jstree-dnd.jstree-default-small {
line-height: 18px;
padding: 0 4px;
}
#jstree-dnd.jstree-default-small .jstree-ok,
#jstree-dnd.jstree-default-small .jstree-er {
background-image: url("/Common/Images/jstree_32px_line.png");
background-repeat: no-repeat;
background-color: transparent;
}
#jstree-dnd.jstree-default-small i {
background: transparent;
width: 18px;
height: 18px;
line-height: 18px;
}
#jstree-dnd.jstree-default-small .jstree-ok {
background-position: -7px -71px;
}
#jstree-dnd.jstree-default-small .jstree-er {
background-position: -39px -71px;
}
.jstree-default-small.jstree-rtl .jstree-node {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAACAQMAAABv1h6PAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMHBgAAiABBI4gz9AAAAABJRU5ErkJggg==");
}
.jstree-default-small.jstree-rtl .jstree-last {
background: transparent;
}
.jstree-default-large .jstree-node {
min-height: 32px;
line-height: 32px;
margin-left: 32px;
min-width: 32px;
}
.jstree-default-large .jstree-anchor {
line-height: 32px;
height: 32px;
}
.jstree-default-large .jstree-icon {
width: 32px;
height: 32px;
line-height: 32px;
}
.jstree-default-large .jstree-icon:empty {
width: 32px;
height: 32px;
line-height: 32px;
}
.jstree-default-large.jstree-rtl .jstree-node {
margin-right: 32px;
}
.jstree-default-large .jstree-wholerow {
height: 32px;
}
.jstree-default-large .jstree-node,
.jstree-default-large .jstree-icon {
background-image: url("/Common/Images/jstree_32px_line.png");
}
.jstree-default-large .jstree-node {
background-position: -288px 0px;
background-repeat: repeat-y;
}
.jstree-default-large .jstree-last {
background: transparent;
}
.jstree-default-large .jstree-open > .jstree-ocl {
background-position: -128px 0px;
}
.jstree-default-large .jstree-closed > .jstree-ocl {
background-position: -96px 0px;
}
.jstree-default-large .jstree-leaf > .jstree-ocl {
background-position: -64px 0px;
}
.jstree-default-large .jstree-themeicon {
background-position: -256px 0px;
}
.jstree-default-large > .jstree-no-dots .jstree-node,
.jstree-default-large > .jstree-no-dots .jstree-leaf > .jstree-ocl {
background: transparent;
}
.jstree-default-large > .jstree-no-dots .jstree-open > .jstree-ocl {
background-position: -32px 0px;
}
.jstree-default-large > .jstree-no-dots .jstree-closed > .jstree-ocl {
background-position: 0px 0px;
}
.jstree-default-large .jstree-disabled {
background: transparent;
}
.jstree-default-large .jstree-disabled.jstree-hovered {
background: transparent;
}
.jstree-default-large .jstree-disabled.jstree-clicked {
background: #efefef;
}
.jstree-default-large .jstree-checkbox {
background-position: -160px 0px;
}
.jstree-default-large .jstree-checkbox:hover {
background-position: -160px -32px;
}
.jstree-default-large.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
.jstree-default-large .jstree-checked > .jstree-checkbox {
background-position: -224px 0px;
}
.jstree-default-large.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
.jstree-default-large .jstree-checked > .jstree-checkbox:hover {
background-position: -224px -32px;
}
.jstree-default-large .jstree-anchor > .jstree-undetermined {
background-position: -192px 0px;
}
.jstree-default-large .jstree-anchor > .jstree-undetermined:hover {
background-position: -192px -32px;
}
.jstree-default-large .jstree-checkbox-disabled {
opacity: 0.8;
filter: url("data:image/svg+xml;utf8,#jstree-grayscale");
/* Firefox 10+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+ & Safari 6+ */
}
.jstree-default-large > .jstree-striped {
background-size: auto 64px;
}
.jstree-default-large.jstree-rtl .jstree-node {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
background-position: 100% 1px;
background-repeat: repeat-y;
}
.jstree-default-large.jstree-rtl .jstree-last {
background: transparent;
}
.jstree-default-large.jstree-rtl .jstree-open > .jstree-ocl {
background-position: -128px -32px;
}
.jstree-default-large.jstree-rtl .jstree-closed > .jstree-ocl {
background-position: -96px -32px;
}
.jstree-default-large.jstree-rtl .jstree-leaf > .jstree-ocl {
background-position: -64px -32px;
}
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-node,
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
background: transparent;
}
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
background-position: -32px -32px;
}
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
background-position: 0px -32px;
}
.jstree-default-large .jstree-themeicon-custom {
background-color: transparent;
background-image: none;
background-position: 0 0;
}
.jstree-default-large > .jstree-container-ul .jstree-loading > .jstree-ocl {
background: url("throbber.gif") center center no-repeat;
}
.jstree-default-large .jstree-file {
background: url("/Common/Images/jstree_32px_line.png") -96px -64px no-repeat;
}
.jstree-default-large .jstree-folder {
background: url("/Common/Images/jstree_32px_line.png") -256px 0px no-repeat;
}
.jstree-default-large > .jstree-container-ul > .jstree-node {
margin-left: 0;
margin-right: 0;
}
#jstree-dnd.jstree-default-large {
line-height: 32px;
padding: 0 4px;
}
#jstree-dnd.jstree-default-large .jstree-ok,
#jstree-dnd.jstree-default-large .jstree-er {
background-image: url("/Common/Images/jstree_32px_line.png");
background-repeat: no-repeat;
background-color: transparent;
}
#jstree-dnd.jstree-default-large i {
background: transparent;
width: 32px;
height: 32px;
line-height: 32px;
}
#jstree-dnd.jstree-default-large .jstree-ok {
background-position: 0px -64px;
}
#jstree-dnd.jstree-default-large .jstree-er {
background-position: -32px -64px;
}
.jstree-default-large.jstree-rtl .jstree-node {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAACAQMAAAAD0EyKAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjgIIGBgABCgCBvVLXcAAAAABJRU5ErkJggg==");
}
.jstree-default-large.jstree-rtl .jstree-last {
background: transparent;
}
@media (max-width: 768px) {
#jstree-dnd.jstree-dnd-responsive {
line-height: 40px;
font-weight: bold;
font-size: 1.1em;
text-shadow: 1px 1px white;
}
#jstree-dnd.jstree-dnd-responsive > i {
background: transparent;
width: 40px;
height: 40px;
}
#jstree-dnd.jstree-dnd-responsive > .jstree-ok {
background-image: url("40px.png");
background-position: 0 -200px;
background-size: 120px 240px;
}
#jstree-dnd.jstree-dnd-responsive > .jstree-er {
background-image: url("40px.png");
background-position: -40px -200px;
background-size: 120px 240px;
}
#jstree-marker.jstree-dnd-responsive {
border-left-width: 10px;
border-top-width: 10px;
border-bottom-width: 10px;
margin-top: -10px;
}
}
@media (max-width: 768px) {
.jstree-default-responsive {
/*
.jstree-open > .jstree-ocl,
.jstree-closed > .jstree-ocl { border-radius:20px; background-color:white; }
*/
}
.jstree-default-responsive .jstree-icon {
background-image: url("40px.png");
}
.jstree-default-responsive .jstree-node,
.jstree-default-responsive .jstree-leaf > .jstree-ocl {
background: transparent;
}
.jstree-default-responsive .jstree-node {
min-height: 40px;
line-height: 40px;
margin-left: 40px;
min-width: 40px;
white-space: nowrap;
}
.jstree-default-responsive .jstree-anchor {
line-height: 40px;
height: 40px;
}
.jstree-default-responsive .jstree-icon,
.jstree-default-responsive .jstree-icon:empty {
width: 40px;
height: 40px;
line-height: 40px;
}
.jstree-default-responsive > .jstree-container-ul > .jstree-node {
margin-left: 0;
}
.jstree-default-responsive.jstree-rtl .jstree-node {
margin-left: 0;
margin-right: 40px;
}
.jstree-default-responsive.jstree-rtl .jstree-container-ul > .jstree-node {
margin-right: 0;
}
.jstree-default-responsive .jstree-ocl,
.jstree-default-responsive .jstree-themeicon,
.jstree-default-responsive .jstree-checkbox {
background-size: 120px 240px;
}
.jstree-default-responsive .jstree-leaf > .jstree-ocl {
background: transparent;
}
.jstree-default-responsive .jstree-open > .jstree-ocl {
background-position: 0 0px !important;
}
.jstree-default-responsive .jstree-closed > .jstree-ocl {
background-position: 0 -40px !important;
}
.jstree-default-responsive.jstree-rtl .jstree-closed > .jstree-ocl {
background-position: -40px 0px !important;
}
.jstree-default-responsive .jstree-themeicon {
background-position: -40px -40px;
}
.jstree-default-responsive .jstree-checkbox,
.jstree-default-responsive .jstree-checkbox:hover {
background-position: -40px -80px;
}
.jstree-default-responsive.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
.jstree-default-responsive.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
.jstree-default-responsive .jstree-checked > .jstree-checkbox,
.jstree-default-responsive .jstree-checked > .jstree-checkbox:hover {
background-position: 0 -80px;
}
.jstree-default-responsive .jstree-anchor > .jstree-undetermined,
.jstree-default-responsive .jstree-anchor > .jstree-undetermined:hover {
background-position: 0 -120px;
}
.jstree-default-responsive .jstree-anchor {
font-weight: bold;
font-size: 1.1em;
text-shadow: 1px 1px white;
}
.jstree-default-responsive > .jstree-striped {
background: transparent;
}
.jstree-default-responsive .jstree-wholerow {
border-top: 1px solid rgba(255, 255, 255, 0.7);
border-bottom: 1px solid rgba(64, 64, 64, 0.2);
background: #ebebeb;
height: 40px;
}
.jstree-default-responsive .jstree-wholerow-hovered {
background: #e7f4f9;
}
.jstree-default-responsive .jstree-wholerow-clicked {
background: #beebff;
}
.jstree-default-responsive .jstree-children .jstree-last > .jstree-wholerow {
box-shadow: inset 0 -6px 3px -5px #666666;
}
.jstree-default-responsive .jstree-children .jstree-open > .jstree-wholerow {
box-shadow: inset 0 6px 3px -5px #666666;
border-top: 0;
}
.jstree-default-responsive .jstree-children .jstree-open + .jstree-open {
box-shadow: none;
}
.jstree-default-responsive .jstree-node,
.jstree-default-responsive .jstree-icon,
.jstree-default-responsive .jstree-node > .jstree-ocl,
.jstree-default-responsive .jstree-themeicon,
.jstree-default-responsive .jstree-checkbox {
background-image: url("40px.png");
background-size: 120px 240px;
}
.jstree-default-responsive .jstree-node {
background-position: -80px 0;
background-repeat: repeat-y;
}
.jstree-default-responsive .jstree-last {
background: transparent;
}
.jstree-default-responsive .jstree-leaf > .jstree-ocl {
background-position: -40px -120px;
}
.jstree-default-responsive .jstree-last > .jstree-ocl {
background-position: -40px -160px;
}
.jstree-default-responsive .jstree-themeicon-custom {
background-color: transparent;
background-image: none;
background-position: 0 0;
}
.jstree-default-responsive .jstree-file {
background: url("40px.png") 0 -160px no-repeat;
background-size: 120px 240px;
}
.jstree-default-responsive .jstree-folder {
background: url("40px.png") -40px -40px no-repeat;
background-size: 120px 240px;
}
.jstree-default-responsive > .jstree-container-ul > .jstree-node {
margin-left: 0;
margin-right: 0;
}
}
/* =============================================================================
Metronic Overrides
=============================================================================
Legacy customisations on top of Metronic 4.x base styles.
All colour values now use WG design tokens from wg-theme.css / wg-components.css.
Menu active-state styling is handled by wg-components.css section 15b;
the rules below are kept as fallbacks until that migration is fully validated.
============================================================================= */
.input-group span.input-group-btn button i {
font-size: 1rem;
}
.small-profile-pic {
height: 30px;
}
.easy-pie-chart {
text-align: center;
}
.easy-pie-chart .number {
font-size: 14px !important;
font-weight: 300;
margin: 0 auto;
position: relative;
text-align: center;
width: 75px;
height: 75px;
line-height: 75px;
}
.easy-pie-chart .number canvas {
position: absolute;
top: 0;
left: 0;
}
.easy-pie-chart .title {
display: block;
text-align: center;
color: var(--text-primary);
font-weight: 300;
font-size: 16px;
margin-top: 5px;
margin-bottom: 10px;
}
.easy-pie-chart .title:hover {
color: var(--text-secondary);
text-decoration: none;
}
.easy-pie-chart .title > i {
margin-top: 5px;
}
.m-login.m-login--1 .m-login__wrapper .m-login__logo {
margin-bottom: .5rem !important;
}
.m--border-top-primary {
border-top-color: var(--color-primary) !important;
}
body.m-page--boxed {
background-image: url(/assets/metronic/src/media/app/img/bg/bg-4.jpg);
}
.m-brand__logo-wrapper {
margin-left: -5px !important;
}
.m-footer {
z-index: 100 !important;
}
.alert.alert-warning {
color: var(--text-primary);
}
.modal .modal-content .modal-header .close:before {
cursor: pointer !important;
}
.m-messenger__message {
width: 100% !important;
}
.m-messenger__message .m-messenger__message-body {
width: 100% !important;
}
.m-messenger__message .m-messenger__message-body .m-messenger__message-username {
text-align: right !important;
}
.m-messenger__message .m-messenger__message-body .m-messenger__message-username span {
float: left;
}
.m-messenger__message.m-messenger__message--out time {
color: var(--text-muted);
}
.m-messenger__message.m-messenger__message--out .m-messenger__message-body .m-messenger__message-username {
text-align: left !important;
}
.m-messenger__message.m-messenger__message--out .m-messenger__message-body .m-messenger__message-username span {
float: right;
color: var(--text-muted);
}
.m-messenger__message.m-messenger__message--out .m-messenger__message-body .m-messenger__message-text {
text-align: right;
color: var(--text-inverse, #fff) !important;
}
.m-messenger__message.m-messenger__message--out .m-messenger__message-body .m-messenger__message-text span {
color: var(--text-inverse, #fff);
}
.m-checkbox > input:disabled ~ span {
opacity: .3;
}
/* ── Sidebar active states (light skin) ──
Now handled by wg-components.css section 15b. Kept as token-based fallbacks. */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading {
background-color: var(--color-primary-light) !important;
}
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link {
background-color: var(--color-primary-light) !important;
}
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading {
background-color: var(--color-primary-light) !important;
}
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link {
background-color: var(--color-primary-light) !important;
}
/* ── Sidebar active states (dark skin) ── */
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
color: var(--color-primary-light) !important;
}
/* ── Minimised sidebar + dark submenu skin ── */
.m-aside-left--minimize .m-aside-menu.m-aside-menu--submenu-skin-dark .m-menu__nav .m-menu__item.m-menu__item--hover > .m-menu__submenu > .m-menu__subnav .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-icon,
.m-aside-left--minimize .m-aside-menu.m-aside-menu--submenu-skin-dark .m-menu__nav .m-menu__item.m-menu__item--hover > .m-menu__submenu > .m-menu__subnav .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-text,
.m-aside-left--minimize .m-aside-menu.m-aside-menu--submenu-skin-dark .m-menu__nav .m-menu__item.m-menu__item--hover > .m-menu__submenu > .m-menu__subnav .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
.m-aside-left--minimize .m-aside-menu.m-aside-menu--submenu-skin-dark .m-menu__nav .m-menu__item.m-menu__item--hover > .m-menu__submenu > .m-menu__subnav .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--dropdown.m-aside-menu--submenu-skin-dark .m-menu__nav .m-menu__item.m-menu__item--hover > .m-menu__submenu > .m-menu__subnav .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-icon,
.m-aside-menu.m-aside-menu--dropdown.m-aside-menu--submenu-skin-dark .m-menu__nav .m-menu__item.m-menu__item--hover > .m-menu__submenu > .m-menu__subnav .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-text,
.m-aside-menu.m-aside-menu--dropdown.m-aside-menu--submenu-skin-dark .m-menu__nav .m-menu__item.m-menu__item--hover > .m-menu__submenu > .m-menu__subnav .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--dropdown.m-aside-menu--submenu-skin-dark .m-menu__nav .m-menu__item.m-menu__item--hover > .m-menu__submenu > .m-menu__subnav .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
color: var(--color-primary-light) !important;
}
/* ── Mobile header menu ── */
@media (max-width: 992px) {
.m-aside-header-menu-mobile li.m-menu__item.m-menu__item--active {
color: var(--color-primary) !important;
}
.m-aside-header-menu-mobile li.m-menu__item.m-menu__item--active a {
background-color: var(--color-primary-light) !important;
}
.m-aside-header-menu-mobile li.m-menu__item.m-menu__item--active a:hover {
background-color: var(--bg-subtle) !important;
}
.m-aside-header-menu-mobile li.m-menu__item.m-menu__item--active ul.m-menu__subnav li a {
background-color: var(--bg-surface) !important;
}
.m-aside-header-menu-mobile li.m-menu__item.m-menu__item--active ul.m-menu__subnav li a:hover {
background-color: var(--bg-subtle) !important;
}
.m-aside-header-menu-mobile li.m-menu__item.m-menu__item--active ul.m-menu__subnav li.m-menu__item.m-menu__item--active a {
background-color: var(--color-primary-light) !important;
}
.m-aside-header-menu-mobile li.m-menu__item.m-menu__item--active ul.m-menu__subnav li.m-menu__item.m-menu__item--active a:hover {
background-color: var(--bg-subtle) !important;
}
}
div.btn-group label.btn-secondary.active {
background-color: var(--bg-subtle);
}
.m-list-timeline__items.empty:before {
background-color: transparent !important;
}
.m-subheader {
padding: 16px 20px 0 20px;
}
.m-subheader .m-section__sub {
position: relative;
top: 3px;
}
.m-content {
padding: 20px !important;
}
td label.m-checkbox span {
top: -4px !important;
}
.m-widget24 .m-widget24__item .m-widget24__title {
margin-top: 1.21rem;
}
.m-widget24 .m-widget24__item .m-widget24__change,
.m-widget24 .m-widget24__item .m-widget24__number {
margin-bottom: 0.86rem;
}
.m-subheader .m-subheader__daterange {
border-radius: 3.5px;
}
.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__user-profile.m-topbar__user-profile--img.m-dropdown--arrow .m-dropdown__arrow {
color: var(--text-muted);
}
.m-form .m-form__heading {
margin-top: 10px !important;
}
.m-card-user .m-card-user__details .m-card-user__name {
word-break: break-word;
color: var(--text-inverse, #fff) !important;
font-size: 1.1rem;
}
.form-control[readonly] {
background-color: var(--bg-subtle) !important;
}
/* ================================
STOCK SALES DASHBOARD
================================ */
/* ===== KPI WIDGETS ===== */
/* Grid layout provided by nd-widgets-grid in NewDashboardsTable.css */
/* Widget card, icon, title, value, subtext all inherit from
.nd-widgets-grid shared baseline in NewDashboardsTable.css */
/* ===== WIDGET COLOUR THEMES ===== */
.widget-approvedss .widget-icon {
background: var(--color-info-light);
color: var(--color-info);
}
.widget-approvedss .widget-value {
color: var(--color-info);
}
.widget-draftss .widget-icon {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.widget-draftss .widget-value {
color: var(--text-secondary);
}
.widget-dispatchedss .widget-icon {
background: var(--color-success-light);
color: var(--color-success);
}
.widget-dispatchedss .widget-value {
color: var(--color-success);
}
.widget-notinvoicedss .widget-icon {
background: var(--color-warning-light);
color: var(--color-warning);
}
.widget-notinvoicedss .widget-value {
color: var(--color-warning);
}
/* ===== TABLE CARD ===== */
.stocksales-table-card {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.stocksales-card-header {
padding: 16px 18px 14px;
border-bottom: 1px solid var(--border-default);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.stocksales-card-title {
font-size: 18px;
font-weight: 650;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.stocksales-card-subtitle {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
/* ===== TABLE TOOLBAR ===== */
.stocksales-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-default);
flex-wrap: wrap;
}
.stocksales-table-toolbar-left {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.stocksales-table-toolbar-right {
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: auto;
}
.stocksales-status-filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.stocksales-status-pill {
background: var(--bg-subtle);
color: var(--text-secondary);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
line-height: 1;
transition: all .15s ease;
}
.stocksales-status-pill:hover {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.stocksales-status-pill.is-active {
background: var(--color-primary-light);
color: var(--color-primary);
border-color: var(--border-brand, #c7d2fe);
font-weight: 600;
box-shadow: 0 1px 3px rgba(67, 56, 202, 0.10);
}
.stocksales-status-pill-count {
color: var(--text-muted);
margin-left: 4px;
font-weight: 600;
}
.stocksales-status-pill.is-active .stocksales-status-pill-count {
color: inherit;
}
.stocksales-search {
width: 40%;
min-width: 200px;
max-width: 500px;
}
.stocksales-search .input-group {
flex-wrap: nowrap;
}
.stocksales-search .form-control {
border-color: var(--border-default);
border-right: 0;
height: 36px;
font-size: 13px;
border-radius: var(--wg-input-radius, 6px) 0 0 var(--wg-input-radius, 6px);
}
.stocksales-search .form-control:focus {
border-color: var(--border-heavy, #cfd6e3);
box-shadow: none;
}
.stocksales-search .btn {
height: 36px;
margin-top: 0 !important;
border-radius: 0 var(--wg-input-radius, 6px) var(--wg-input-radius, 6px) 0;
}
/* ===== TABLE WRAP ===== */
.stocksales-table-wrap {
padding: 0 18px 18px;
}
.stocksales-table-wrap .dataTables_wrapper {
margin-top: 6px;
}
#StockSalesTable thead th {
background: var(--bg-page);
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border-default) !important;
}
#StockSalesTable tbody td {
padding-top: 14px !important;
padding-bottom: 14px !important;
vertical-align: top;
}
#StockSalesTable tbody tr:hover {
background: var(--bg-subtle);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 767.98px) {
.stocksales-search {
min-width: 100%;
width: 100%;
}
.stocksales-table-toolbar-right {
width: 100%;
justify-content: stretch;
}
}
/* =========================================================
TODO DASHBOARD
Full redesign matching new dashboard design language
========================================================= */
.todo-page-shell {
display: flex;
flex-direction: column;
gap: 20px;
}
/* =========================================================
HEADER
========================================================= */
.todo-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.todo-page-title {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
margin: 0;
}
.todo-page-subtitle {
font-size: 13px;
color: var(--text-muted);
margin-top: 3px;
margin-bottom: 0;
}
.todo-header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.todo-btn-primary {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
background: var(--color-primary);
color: #fff !important;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}
.todo-btn-primary:hover {
background: var(--color-primary-dark, #4338ca);
color: #fff !important;
text-decoration: none;
box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}
.todo-btn-secondary {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
background: var(--bg-surface);
color: var(--text-secondary);
border: 1px solid var(--border-default);
border-radius: 10px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.todo-btn-secondary:hover {
background: var(--bg-page);
border-color: var(--border-default);
color: var(--text-primary);
text-decoration: none;
}
/* =========================================================
KPI WIDGETS
Grid provided by nd-widgets-grid in NewDashboardsTable.css
========================================================= */
/* Widget sizing inherited from nd-widgets-grid base in NewDashboardsTable.css.
Only the active-highlight state is custom here. */
.todo-dashboard-widgets .dashboard-widget.is-active {
border-color: var(--border-brand, #c7d2fe) !important;
box-shadow: 0 0 0 3px rgba(199, 210, 254, 0.4), 0 4px 12px rgba(79, 70, 229, 0.08) !important;
transform: translateY(-1px);
}
/* Widget colour themes */
.widget-todo-open .widget-icon {
background: var(--color-primary-light);
color: var(--color-primary);
}
.widget-todo-open .widget-value {
color: var(--color-primary);
}
.widget-todo-overdue .widget-icon {
background: var(--color-danger-light);
color: var(--color-danger);
}
.widget-todo-overdue .widget-value {
color: var(--color-danger);
}
.widget-todo-completed .widget-icon {
background: var(--color-success-light);
color: var(--color-success);
}
.widget-todo-completed .widget-value {
color: var(--color-success);
}
.widget-todo-mine .widget-icon {
background: var(--color-primary-light);
color: var(--color-primary);
}
.widget-todo-mine .widget-value {
color: var(--color-primary);
}
/* =========================================================
TABLE CARD
========================================================= */
.todo-table-card {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(16, 24, 40, 0.04);
}
/* =========================================================
TOOLBAR
========================================================= */
.todo-toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--border-default);
flex-wrap: wrap;
}
.todo-status-filters {
display: flex;
align-items: center;
gap: 6px;
}
.todo-status-pill {
background: var(--bg-subtle);
color: var(--text-secondary);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
white-space: nowrap;
}
.todo-status-pill:hover {
background: var(--bg-subtle);
}
.todo-status-pill.is-active {
background: var(--color-primary-light);
color: var(--color-primary);
border-color: var(--border-brand, #c7d2fe);
font-weight: 600;
box-shadow: 0 1px 3px rgba(67, 56, 202, 0.10);
}
.todo-toolbar-right {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex-wrap: wrap;
}
.todo-user-filter {
min-width: 140px;
max-width: 200px;
height: 36px;
font-size: 13px;
}
.todo-date-filters {
display: flex;
align-items: stretch;
position: relative;
}
.todo-date-filters .date-range-picker {
height: 36px;
font-size: 13px;
padding: 0 10px;
border: 1px solid var(--border-default);
background: var(--bg-page);
color: var(--text-secondary);
cursor: pointer;
min-width: 110px;
max-width: 130px;
}
.todo-date-filters #StartDate {
border-radius: 8px 0 0 8px;
border-right: 0;
}
.todo-date-filters #EndDate {
border-radius: 0;
border-right: 0;
}
.todo-date-filters #DateTimesheetClearBtn {
height: 36px;
border-radius: 0 8px 8px 0;
border: 1px solid var(--border-default);
background: var(--bg-page);
color: var(--text-muted);
padding: 0 10px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.todo-date-filters #DateTimesheetClearBtn:hover {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.todo-search {
display: flex;
align-items: stretch;
}
.todo-search .form-control {
height: 36px;
font-size: 13px;
border: 1px solid var(--border-default);
border-right: 0;
border-radius: 8px 0 0 8px;
min-width: 280px;
box-shadow: none;
}
.todo-search .form-control:focus {
border-color: var(--border-brand, #c7d2fe);
box-shadow: none;
}
.todo-search .btn {
height: 36px;
border-radius: 0 8px 8px 0;
border: 1px solid var(--border-default);
background: var(--bg-page);
color: var(--text-secondary);
padding: 0 12px;
transition: background 0.12s ease;
margin-top: 0 !important;
}
.todo-search .btn:hover {
background: var(--bg-subtle);
color: var(--text-primary);
}
/* =========================================================
EXTRAS BAR (hide completed projects toggle)
========================================================= */
.todo-toolbar-extras {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 20px;
border-bottom: 1px solid var(--border-default);
flex-wrap: wrap;
}
.todo-hide-completed-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
margin: 0;
font-weight: 500;
}
.todo-hide-completed-label input[type=checkbox] {
margin: 0;
accent-color: var(--color-primary);
width: 14px;
height: 14px;
cursor: pointer;
}
/* =========================================================
TABLE WRAP
========================================================= */
.todo-table-wrap {
padding: 0 20px 20px;
}
.todo-table-wrap .dataTables_wrapper {
margin-top: 8px;
}
/* =========================================================
TABLE ITSELF
========================================================= */
#ToDoIndexTable {
width: 100% !important;
}
/* Column widths */
#ToDoIndexTable .responsive-control-col {
width: 30px;
min-width: 30px;
max-width: 30px;
padding: 0 !important;
}
#ToDoIndexTable .todo-name-col {
width: 26%;
min-width: 180px;
}
#ToDoIndexTable .todo-priority-col {
width: 10%;
min-width: 110px;
}
#ToDoIndexTable .todo-project-col {
width: 15%;
min-width: 120px;
}
#ToDoIndexTable .todo-assigned-col {
width: 15%;
min-width: 150px;
}
#ToDoIndexTable .todo-dates-col {
width: 18%;
min-width: 160px;
}
#ToDoIndexTable .todo-actions-col {
width: 9%;
min-width: 95px;
}
/* Prevent datetimepicker dropdown from clipping */
#ToDoIndexTable td .bootstrap-datetimepicker-widget.dropdown-menu {
width: auto;
min-width: fit-content;
overflow: visible;
white-space: normal;
}
#ToDoIndexTable thead th {
background: var(--bg-page);
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border-default) !important;
padding: 10px 14px !important;
white-space: nowrap;
}
#ToDoIndexTable tbody td {
padding: 10px 14px !important;
vertical-align: middle;
font-size: 13px;
color: var(--text-secondary);
}
#ToDoIndexTable tbody tr:hover td {
background: var(--bg-subtle);
}
/* =========================================================
CELL STYLES
========================================================= */
.todo-name-primary {
font-weight: 600;
color: var(--text-primary);
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 260px;
}
.todo-name-primary.is-completed {
text-decoration: line-through;
color: var(--text-muted);
font-weight: 400;
}
.todo-name-meta {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 260px;
}
/* Priority inline pill + select */
.todo-priority-cell {
display: flex;
flex-direction: column;
gap: 4px;
}
.todo-priority-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: background 0.12s ease, border-color 0.12s ease;
}
.todo-priority-pill::after {
content: '▾';
margin-left: 5px;
font-size: 10px;
opacity: 0.55;
flex-shrink: 0;
}
.todo-priority-pill:hover::after {
opacity: 0.9;
}
.todo-priority-pill--high {
background: var(--color-danger-light);
color: var(--color-danger);
border-color: var(--color-warning-border, #fecdca);
}
.todo-priority-pill--medium {
background: var(--color-warning-light);
color: var(--color-warning);
border-color: var(--color-warning-border, #fed7aa);
}
.todo-priority-pill--low {
background: var(--color-success-light);
color: var(--color-success);
border-color: var(--color-warning-border, #a6f4c5);
}
.todo-priority-pill--none {
background: var(--bg-subtle);
color: var(--text-muted);
border-color: transparent;
}
/* Priority select2 (hidden until pill is clicked) */
.todo-priority-cell .select2-container {
display: none !important;
}
.todo-priority-cell.is-editing .todo-priority-pill {
display: none;
}
.todo-priority-cell.is-editing .select2-container {
display: block !important;
width: 100% !important;
min-width: 120px;
}
/* User cell */
.todo-user-cell {
font-size: 13px;
color: var(--text-secondary);
}
.todo-user-unassigned {
color: var(--text-muted);
font-style: italic;
}
/* Date cell */
.todo-date-cell {
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
}
.todo-date-cell.is-overdue {
color: var(--color-danger);
font-weight: 600;
}
/* Inline datepicker in table */
#ToDoIndexTable .date-picker-wrap {
display: flex;
align-items: center;
gap: 4px;
}
#ToDoIndexTable .date-picker {
height: 30px;
font-size: 12px;
padding: 0 8px;
border: 1px solid var(--border-default);
border-radius: 6px;
background: var(--bg-page);
color: var(--text-secondary);
min-width: 90px;
max-width: 110px;
box-shadow: none;
}
#ToDoIndexTable .date-picker:focus {
border-color: var(--border-brand, #c7d2fe);
box-shadow: 0 0 0 2px rgba(199, 210, 254, 0.3);
background: var(--bg-surface);
}
#ToDoIndexTable .date-clear-btn {
width: 22px;
height: 22px;
border: none;
background: transparent;
color: var(--text-muted);
font-size: 11px;
padding: 0;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#ToDoIndexTable .date-clear-btn:hover {
color: var(--color-danger);
background: var(--color-danger-light);
}
/* ── Linked To (context) cell ──────────────────────────── */
.todo-context-cell {
display: flex;
align-items: flex-start;
gap: 7px;
}
.todo-context-icon {
color: var(--text-muted);
font-size: 12px;
margin-top: 2px;
flex-shrink: 0;
}
.todo-context-primary {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
max-width: 160px;
}
a.todo-context-primary:hover {
color: var(--color-primary);
text-decoration: underline;
}
.todo-context-meta {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.todo-context-none {
color: var(--text-muted);
font-size: 13px;
}
/* ── Stacked dates cell ────────────────────────────────── */
.todo-dates-cell {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Clickable due-date label */
.todo-date-primary {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
width: fit-content;
}
.todo-date-primary .fa {
color: var(--text-muted);
font-size: 11px;
flex-shrink: 0;
transition: color 0.12s;
}
.todo-date-primary:hover .fa {
color: var(--text-secondary);
}
.todo-date-text {
font-size: 13px;
color: var(--text-secondary);
font-weight: 500;
white-space: nowrap;
}
.todo-date-empty {
font-size: 12px;
color: var(--text-muted);
font-style: italic;
}
/* Overdue state */
.todo-date-primary.is-overdue .fa {
color: var(--color-danger);
}
.todo-date-primary.is-overdue .todo-date-text {
color: var(--color-danger);
font-weight: 600;
}
/* Datepicker: hidden by default, revealed on click */
.todo-dates-cell .todo-date-picker-wrap {
display: none;
}
.todo-dates-cell.is-editing .todo-date-primary {
display: none;
}
.todo-dates-cell.is-editing .todo-date-picker-wrap {
display: flex;
align-items: center;
gap: 4px;
}
/* Completed meta line (date + completed-by user) */
.todo-completed-meta {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--color-success);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.todo-completed-meta .fa {
font-size: 11px;
flex-shrink: 0;
}
/* User dropdown in table */
#ToDoIndexTable .user-dropdown-placeholder,
#ToDoIndexTable .user-dropdown {
height: 30px;
font-size: 12px;
border: 1px solid var(--border-default);
border-radius: 6px;
background: var(--bg-page);
color: var(--text-secondary);
width: 100%;
max-width: 100%;
}
/* Actions column */
.todo-actions {
display: flex;
align-items: center;
gap: 4px;
justify-content: flex-end;
}
.todo-action-btn {
width: 28px;
height: 28px;
border-radius: 7px;
border: 1px solid var(--border-default);
background: var(--bg-surface);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
padding: 0;
line-height: 1;
}
.todo-action-btn:hover {
background: var(--bg-subtle);
color: var(--text-primary);
border-color: var(--border-heavy, #c5cdd9);
}
.todo-action-btn--complete {
color: var(--color-success);
border-color: var(--color-warning-border, #a6f4c5);
background: var(--color-success-light);
}
.todo-action-btn--complete:hover {
background: var(--color-warning-border, #d1fadf);
border-color: var(--color-warning-border, #6ce9a6);
color: var(--color-warning-dark, #027a48);
}
.todo-action-btn--uncomplete {
color: var(--color-warning);
border-color: var(--color-warning-border, #fed7aa);
background: var(--color-warning-light);
}
.todo-action-btn--uncomplete:hover {
background: var(--color-warning-border, #ffedd5);
border-color: var(--color-warning-border, #fdba74);
color: var(--color-warning-dark, #c27803);
}
.todo-action-btn--delete {
color: var(--color-danger);
border-color: var(--color-warning-border, #fecdca);
background: var(--color-danger-light);
}
.todo-action-btn--delete:hover {
background: var(--color-danger-light, #fee4e2);
border-color: var(--color-warning-border, #fda29b);
color: var(--color-warning-dark, #b42318);
}
/* =========================================================
DATATABLE CHROME
========================================================= */
.todo-table-wrap .bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
flex-wrap: wrap;
}
.todo-table-wrap .dataTables_info {
color: var(--text-secondary);
font-size: 13px;
}
.todo-table-wrap .dataTables_length label {
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 6px;
}
.todo-table-wrap .dataTables_length select {
height: 34px;
border: 1px solid var(--border-default);
border-radius: 8px;
background: var(--bg-surface);
color: var(--text-secondary);
padding: 0 8px;
}
.todo-table-wrap .dataTables_paginate .paginate_button {
border-radius: 8px !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991.98px) {
.todo-toolbar-right {
margin-left: 0;
}
}
@media (max-width: 767.98px) {
.todo-toolbar {
flex-direction: column;
align-items: stretch;
}
.todo-toolbar-right {
flex-direction: column;
gap: 8px;
}
.todo-search .form-control {
min-width: unset;
flex: 1;
}
.todo-user-filter {
max-width: unset;
width: 100%;
}
.todo-date-filters .date-range-picker {
min-width: unset;
flex: 1;
}
}