, and Star Admin's
white-icon rules only match `i` — colour the SVGs too. A real active leaf link
(`.nav-link.active`) sits on a solid blue pill, so its icon stays white; a group merely
containing the active page (`.nav-item.active > .nav-link`, see the comment above the
matching background rule) now sits on a light tint, so its icon needs to stay dark instead. */
.sidebar .nav .nav-item .nav-link.active > svg.menu-icon,
.sidebar .nav .nav-item .nav-link.active > svg.menu-arrow { color: #fff; }
.sidebar .nav .nav-item.active > .nav-link > svg.menu-icon,
.sidebar .nav .nav-item.active > .nav-link > svg.menu-arrow { color: var(--zoho-sidebar-color); }
.sidebar .nav .nav-item:hover > .nav-link > svg.menu-icon,
.sidebar .nav .nav-item:hover > .nav-link > svg.menu-arrow { color: var(--zoho-sidebar-color); }
.sidebar .nav.sub-menu .nav-item .nav-link > svg.menu-icon { margin-right: 0.65rem; color: #8f9fb2; }
/* Tailwind v4's .collapse utility sets `visibility: collapse` on the Bootstrap .collapse
submenu container (inherited by the sub-links → hidden even when .show is added, because
Bootstrap only flips display). Restore visible once shown — for the inline expanded-rail
submenu (.show) AND for the collapsed-rail hover flyout (.hover-open .collapse), which never
gets .show and was staying visibility:collapse even though Star Admin's display:block fired,
so only the one group that also happened to be the active route (carrying .show) ever showed
its flyout on hover. */
.sidebar .nav .nav-item .collapse.show,
.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse { visibility: visible; }
/* A group's submenu currently snaps open/closed on the instant display:none <-> block flip —
there's no Bootstrap JS here adding the `.collapsing` height-animation class (this is plain
React state, not the jQuery plugin), so give the accordion its own CSS-only open/close
animation instead. 480px comfortably covers every group's submenu; overflow:hidden clips the
0-height collapsed state without needing JS to measure real content height. The icon-only
hover flyout (already self-sized + absolutely positioned) opts back out below. */
.sidebar .nav .nav-item .collapse {
display: block;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar .nav .nav-item .collapse.show { max-height: 480px; }
.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse {
max-height: none;
overflow: visible;
}
/* Main panel tracks the new sidebar width, and is now the one thing that actually scrolls (see
.page-body-wrapper above) — the sidebar and top navbar stay put while only page content moves. */
.main-panel {
width: calc(100% - 280px);
height: 100%;
overflow-y: auto;
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), margin 0.25s cubic-bezier(0.4, 0, 0.2, 1);
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge/IE */
}
.main-panel::-webkit-scrollbar {
display: none; /* Chrome/Safari/Edge (Chromium) */
}
/* ------------------------------------------------------------
5. Content area
------------------------------------------------------------ */
.content-wrapper {
background: var(--zoho-content-bg);
padding: 1rem 1.4rem;
}
/* Dashboard canvas is a light grey like Zoho's dashboard */
.dashboard-page .content-wrapper,
body.dashboard .content-wrapper,
.legacy-dashboard { background: var(--zoho-dashboard-bg); }
/* Admin-layout footer */
.admin-footer {
padding: 14px 1.4rem;
border-top: 1px solid var(--zoho-border);
background: var(--zoho-content-bg);
color: var(--zoho-text-secondary);
font-size: 12.5px;
text-align: center;
}
.admin-footer a { color: var(--zoho-link); }
.admin-footer a:hover { color: var(--zoho-link-hover); text-decoration: underline; }
/* ------------------------------------------------------------
6. Buttons — Zoho (blue primary / grey secondary, 5px radius)
------------------------------------------------------------ */
.btn {
font-family: var(--zoho-font);
font-size: var(--zoho-font-size) !important;
font-weight: 400 !important;
line-height: 1.5 !important;
padding: var(--zoho-btn-pad) !important;
border-radius: var(--zoho-radius-btn) !important;
border: 1px solid transparent;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn.btn-sm, .btn-sm { border-radius: var(--zoho-radius-btn) !important; }
.btn-primary {
background-color: var(--zoho-primary);
border-color: var(--zoho-primary);
color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary.show, .btn-primary.dropdown-toggle.show {
background-color: var(--zoho-primary-dark);
border-color: var(--zoho-primary-dark);
color: #fff;
}
.btn-secondary {
background-color: var(--zoho-btn-secondary-bg);
border-color: #ddd; /* --zf-btn-border-color */
color: var(--zoho-text);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
background-color: #f8f8f8; /* --zf-btn-secondary-hover-bg */
border-color: #c6c6c6; /* --zf-btn-secondary-hover-border-color */
color: var(--zoho-text);
}
.btn-info { background-color: var(--zoho-info); border-color: var(--zoho-info); color: #fff; }
.btn-info:hover, .btn-info:focus, .btn-info:active { background-color: var(--zoho-primary-dark); border-color: var(--zoho-primary-dark); }
.btn-success { background-color: var(--zoho-success); border-color: var(--zoho-success); color: #fff; }
.btn-success:hover, .btn-success:focus { background-color: #1a9a68; border-color: #1a9a68; }
.btn-danger { background-color: var(--zoho-danger); border-color: var(--zoho-danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background-color: #e4444c; border-color: #e4444c; }
.btn-warning { background-color: var(--zoho-warning); border-color: var(--zoho-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background-color: #e9832c; border-color: #e9832c; }
.btn-outline-primary { color: var(--zoho-primary); border-color: var(--zoho-primary); }
.btn-outline-primary:hover { background-color: var(--zoho-primary); border-color: var(--zoho-primary); color: #fff; }
.btn-outline-secondary { color: var(--zoho-text); border-color: #d4dadd; }
.btn-outline-secondary:hover { background-color: var(--zoho-btn-secondary-bg); color: var(--zoho-text); }
.btn-link { color: var(--zoho-link); }
.btn-link:hover { color: var(--zoho-link-hover); }
/* Export buttons in the DataTables chrome — icon-forward colour-coded pills (green/Excel,
red/PDF, the same convention most modern export UIs use) instead of identical grey boxes. */
.dt-buttons .dt-button {
display: inline-flex !important;
align-items: center;
gap: 6px;
background-image: none !important;
border-radius: 999px !important;
font-family: var(--zoho-font) !important;
font-size: var(--zoho-font-size) !important;
font-weight: 600 !important;
padding: 0.4rem 1rem !important;
line-height: 1.3 !important;
margin: 0 0 0 0.4rem;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dt-buttons .dt-button.buttons-excel {
background: #e8f7f1 !important;
border: 1px solid #b6f6dc !important;
color: #127a51 !important;
}
.dt-buttons .dt-button.buttons-excel:hover {
background: #d8f3e6 !important;
border-color: #8fe9bd !important;
transform: translateY(-1px);
box-shadow: 0 3px 8px -2px rgba(18, 122, 81, 0.3);
}
.dt-buttons .dt-button.buttons-pdf {
background: #feedee !important;
border: 1px solid #fad7d9 !important;
color: #b2343c !important;
}
.dt-buttons .dt-button.buttons-pdf:hover {
background: #fbdadd !important;
border-color: #f5b4b9 !important;
transform: translateY(-1px);
box-shadow: 0 3px 8px -2px rgba(178, 52, 60, 0.3);
}
.dt-buttons .dt-button:active, .dt-buttons .dt-button.active,
.dt-buttons .dt-button:focus:not(.disabled) { box-shadow: none !important; transform: translateY(0); }
/* ------------------------------------------------------------
7. Form controls — 34px, 6px radius, blue focus ring
------------------------------------------------------------ */
.form-control {
font-family: var(--zoho-font);
font-size: var(--zoho-font-size);
color: #212529; /* --zf-body-color-rgb */
background-color: #fff;
border: 1px solid var(--zoho-input-border);
border-radius: var(--zoho-radius-input);
height: var(--zoho-control-height);
padding: var(--zoho-input-pad);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
select.form-control { padding: 0 8px; height: var(--zoho-control-height); }
textarea.form-control { height: auto; }
.form-control:focus {
border-color: var(--zoho-primary) !important;
box-shadow: 0 0 0 3px rgba(64, 141, 251, 0.16) !important;
background-color: #fff;
color: #212529;
}
.form-control::placeholder { color: var(--zoho-text-muted) !important; }
.form-control:disabled, .form-control[readonly] { background-color: #f9f9fb; }
/* Field labels — plain 13px (Zoho form labels are unstyled text) */
.form-group label,
.form-grid > label,
label.form-label {
font-family: var(--zoho-font);
font-size: var(--zoho-font-size);
font-weight: 400;
color: var(--zoho-text);
margin-bottom: 0.35rem;
}
/* Required-field asterisks are already red in Zoho (#d6141d) */
.form-group label .text-danger,
.form-grid label .text-danger { color: #d6141d; }
/* Select2 (used by several lookup dropdowns) */
.select2-container--default .select2-selection--single {
border: 1px solid var(--zoho-input-border);
border-radius: var(--zoho-radius-input);
height: var(--zoho-control-height);
font-family: var(--zoho-font);
font-size: var(--zoho-font-size);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 32px;
color: #212529;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
border-color: var(--zoho-primary);
box-shadow: 0 0 0 3px rgba(64, 141, 251, 0.16);
}
/* ------------------------------------------------------------
8. Tables — Zoho grid (grey header, hairline rows, 50px rows)
------------------------------------------------------------ */
table.dataTable, table.table {
border-collapse: collapse;
background: #fff;
}
/* DataTables core sets content-box on cells; switch back so min-width includes padding */
table.dataTable th, table.dataTable td { box-sizing: border-box; }
table.dataTable thead th,
table.table thead th {
background-color: var(--zoho-surface-header);
color: var(--zoho-text-secondary);
font-size: 11px !important; /* --zf-table-header-font-size */
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: normal;
border-bottom: 1px solid #fff;
padding: 12px 8px 8px 14px;
line-height: 1.3;
font-family: var(--zoho-font);
}
table.dataTable thead th:first-child,
table.table thead th:first-child { padding-left: 20px; }
table.dataTable tbody td,
table.table tbody td {
color: var(--zoho-text);
font-size: var(--zoho-font-size);
font-weight: 400;
padding: 12px 8px 12px 14px;
border-bottom: 1px solid var(--zoho-border);
vertical-align: middle;
font-family: var(--zoho-font);
}
table.dataTable tbody td:first-child,
table.table tbody td:first-child { padding-left: 20px; }
table.dataTable tbody tr,
table.table tbody tr { height: 50px; }
table.dataTable tbody tr:hover,
table.table tbody tr:hover { background-color: var(--zoho-row-hover); }
table.dataTable tbody tr.selected,
table.table tbody tr.selected { background-color: var(--zoho-row-selected); }
/* RDT 8.10's CSS-Grid engine (see DataTableChrome.tsx zohoTheme comment): createTheme() covers
colours/spacing via --rdt-* vars, but not text-transform/letter-spacing/border-radius, so those
are finished here targeting the real rendered classes. */
.rdt_table {
border: 1px solid var(--zoho-border);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.03), 0 8px 20px -12px rgba(23, 28, 46, 0.1);
/* createTheme() (DataTableChrome.tsx) points RDT's header background at
var(--zoho-surface-header) — redeclaring that custom property here (CSS vars cascade to
descendants) swaps in a soft blue tint for just this table's header, without touching the
shared --zoho-surface-header token other components (card headers, etc.) still use as-is. */
--zoho-surface-header: #f3f7ff;
}
.rdt_headRow .rdt_cellBaseHead { font-weight: 700; color: #3f5578; letter-spacing: 0.02em; }
/* A coloured accent line under the header row instead of the plain 1px divider — a small but
noticeable "this is a designed table" touch instead of a bare grid of data. */
.rdt_headRow {
border-bottom: 2px solid transparent !important;
border-image: linear-gradient(90deg, var(--zoho-primary) 0%, rgba(64, 141, 251, 0.15) 70%) 1;
}
/* Long header labels (e.g. "BILL PAYABLE AMOUNT") were single-line-clipped: .rdt_headRow has a
fixed --rdt-header-height and .rdt_columnText forces nowrap+ellipsis. Let headers wrap to a
second line and grow the row to fit instead of truncating. */
.rdt_headRow { min-height: auto; align-items: stretch; }
.rdt_headRow .rdt_cellBaseHead {
min-height: var(--rdt-header-height, 40px);
height: auto;
align-items: center;
text-transform: uppercase;
letter-spacing: normal;
white-space: normal;
}
.rdt_headRow .rdt_columnSortable { gap: 4px; white-space: normal; }
.rdt_headRow .rdt_columnText {
overflow: visible;
white-space: normal;
text-overflow: clip;
line-height: 1.3;
}
/* The structural leading/index/trailing columns (checkbox+"All", "#", activity-log icon) are
short icon/label chrome, not long text headers — keep them single-line and vertically centred
instead of wrapping like a real column header. RDT only wraps a column's header in
`.rdt_columnText` when `name` is a plain string (see DataTable's render: `typeof e.name ==
'string' ? : e.name`) — `__lead`'s name is JSX (checkbox + "All"),
so it renders directly inside `.rdt_cellBaseHead` with NO `.rdt_columnText` wrapper at all;
targeting only `.rdt_columnText` (as a first pass here did) missed that case entirely and left
`__lead` cramped. Un-set `white-space: normal` on `.rdt_cellBaseHead` itself for these three. */
.rdt_headRow [data-column-id='__lead'].rdt_cellBaseHead,
.rdt_headRow [data-column-id='__index'].rdt_cellBaseHead,
.rdt_headRow [data-column-id='__trail'].rdt_cellBaseHead {
white-space: nowrap;
}
.rdt_headRow [data-column-id='__lead'] .rdt_columnText,
.rdt_headRow [data-column-id='__index'] .rdt_columnText,
.rdt_headRow [data-column-id='__trail'] .rdt_columnText {
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
}
.rdt_pagination {
border-top: 1px solid var(--zoho-border);
padding: 8px 14px;
background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}
.rdt_paginationButton {
border-radius: 8px !important;
transition: background 0.15s ease, transform 0.15s ease;
}
.rdt_paginationButton:not(:disabled):hover {
background: var(--zoho-row-hover) !important;
transform: translateY(-1px);
}
.rdt_paginationRowLabel, .rdt_paginationRange { font-weight: 600; color: var(--zoho-text-secondary); }
/* Row interaction: a soft left accent bar sliding in on hover (inset box-shadow, doesn't affect
layout/width) instead of just a flat background tint. */
.rdt_row {
transition: background-color 0.15s ease, box-shadow 0.15s ease;
/* Let a row grow past the theme's 50px rowHeight when a cell (e.g. a long Remarks value) needs
more than one line — otherwise wrapped/clamped text was fighting a fixed-height row for
space and getting cut off regardless of the clamp's own line count. */
height: auto !important;
min-height: var(--rdt-row-min-height, 50px);
}
.rdt_row:hover { box-shadow: inset 3px 0 0 var(--zoho-primary); }
.rdt_cellBase { padding-top: 8px; padding-bottom: 8px; }
.rdt_paginationRowLabel, .rdt_paginationRange { font-weight: 500; }
/* "All"-select header (leadingHeader in PaymentStatusPage.tsx etc.) — own nowrap flex row so it
never gets mid-word-wrapped by the header cell's own `white-space: normal`, whatever this
column's width ends up being. */
.dt-lead-header {
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
/* Row/header select checkboxes in the RDT-based lists — was a bare native checkbox forced to a
plain 25x25px square via inline style; a shared class gives every one of them the same
smaller, rounded, brand-accented look instead. */
.dt-checkbox {
width: 17px;
height: 17px;
border-radius: 4px;
accent-color: var(--zoho-primary);
cursor: pointer;
}
/* Row interaction: a soft left accent bar sliding in on hover (inset box-shadow, doesn't affect
layout/width) instead of just a flat background tint, plus a pointer cursor on the rows that
actually open something on click. */
.rdt_row {
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.rdt_row:hover {
box-shadow: inset 3px 0 0 var(--zoho-primary);
}
/* Row-index "activity log" icon button (`indexCell` in PaymentStatusPage.tsx etc.). Not built on
`.btn` — that class's `padding` and `font-size` are `!important` (see "6. Buttons" above), which
silently wins over inline styles and shrank a fixed 22x22px button's content box to negative
space, hiding the icon entirely. A dedicated class avoids fighting `.btn` altogether. */
.index-activity-cell { display: inline-flex; align-items: center; gap: 4px; }
.index-activity-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
border-radius: 7px;
color: #fff;
background: linear-gradient(155deg, #ffc94d 0%, #dd9a0e 100%);
box-shadow: 0 2px 6px -1px rgba(184, 148, 10, 0.5);
flex: none;
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}
.index-activity-btn:hover {
transform: translateY(-1px) scale(1.08);
box-shadow: 0 4px 10px -2px rgba(184, 148, 10, 0.6);
}
/* DataTables wrapper chrome (length / filter / info / paginate) */
.dataTables_wrapper .dataTables_length { color: var(--zoho-text); font-size: var(--zoho-font-size); }
.dataTables_wrapper .dataTables_length select {
border: 1px solid var(--zoho-input-border);
border-radius: 999px;
height: 32px;
padding: 0 14px;
background: #fff;
font-family: var(--zoho-font);
font-size: var(--zoho-font-size);
font-weight: 600;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dataTables_wrapper .dataTables_length select:focus {
border-color: var(--zoho-primary);
box-shadow: 0 0 0 3px rgba(64, 141, 251, 0.16);
}
.dataTables_wrapper .dataTables_filter input {
border: 1px solid var(--zoho-input-border);
border-radius: 999px;
height: 34px;
padding: 3px 14px 3px 34px;
background: #fff;
font-family: var(--zoho-font);
font-size: var(--zoho-font-size);
color: #212529;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dataTables_wrapper .dataTables_filter input:focus {
border-color: var(--zoho-primary);
box-shadow: 0 0 0 3px rgba(64, 141, 251, 0.16);
outline: none;
}
.dataTables_wrapper .dataTables_info {
color: var(--zoho-text-secondary);
font-size: var(--zoho-font-size);
padding-top: 0.8rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
display: inline-block;
margin-left: 4px;
padding: 0.35rem 0.7rem;
border: 1px solid transparent;
border-radius: var(--zoho-radius-nav);
color: var(--zoho-sidebar-color);
font-family: var(--zoho-font);
font-size: var(--zoho-font-size);
cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--zoho-row-hover);
color: var(--zoho-sidebar-color);
border-color: transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: var(--zoho-primary);
color: #fff;
border-color: var(--zoho-primary);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
color: var(--zoho-text-muted);
cursor: default;
background: transparent;
}
/* ---- Grid polish: balanced toolbar, aligned headers, tidy cells ----
Used by DataTableChrome on every list screen. Toolbar + table used to be two separately
bordered/shadowed boxes with a gap between them ("Flat list pages" decision) — that reads as
two disconnected pieces of chrome rather than one list, so they're now a single card: the
wrapper carries the border/radius/shadow, the toolbar is just its top strip, and the table
sits flush under it. */
.dataTables_wrapper {
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.04), 0 10px 24px -14px rgba(23, 28, 46, 0.12);
overflow: hidden;
}
.dataTables_wrapper .dt-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 18px;
padding: 14px 18px;
background: linear-gradient(165deg, #f5f8ff 0%, var(--zoho-surface-header) 100%);
border-bottom: 1px solid var(--zoho-border);
}
.dataTables_wrapper .dt-scroll-x { padding: 0; height: auto !important; }
.dataTables_wrapper .rdt_body { flex: none !important; }
.dataTables_wrapper .rdt_table {
/* RDT's own stylesheet sets `height: 100%` on this — fine given an explicit container height,
but here it inherits `auto` up an ancestor chain that eventually hits
`.page-body-wrapper`'s `height: 100vh`, so a short table (few rows) stretched to fill the
whole remaining viewport, leaving a large dead gap above the pagination footer. It only
needs to be as tall as its own rows. `!important` since RDT's stylesheet can load after
ours depending on module order, and this must always win. */
height: auto !important;
border: none;
border-radius: 0;
box-shadow: none;
}
/* `.rdt_pagination` is itself `flex: 1 1 auto` inside `.rdt_table`'s column flex layout — left
alone it grows to swallow any leftover space instead of sitting at its own natural height. */
.dataTables_wrapper .rdt_pagination { flex: none !important; border-radius: 0; }
/* Filter button row under the payment-status banner — separate from the dark zdash-hello banner
(a light btn-outline-secondary directly on that dark background would look out of place),
sitting tight just above the table instead of floating with a big gap under the banner. */
.zplist-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dt-buttons { float: none; margin: 0; }
.dataTables_wrapper .dt-toolbar .dataTables_length { margin-right: auto; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
color: var(--zoho-text-secondary);
white-space: nowrap;
}
.dataTables_wrapper .dataTables_filter label { position: relative; }
.dataTables_filter-icon {
position: absolute;
left: 12px;
color: var(--zoho-text-muted);
pointer-events: none;
}
.dataTables_wrapper .dataTables_filter input {
width: 200px;
margin-left: 0;
}
.dataTables_wrapper .dt-buttons .dt-button:first-child { margin-left: 0; }
/* Headers align with their cells: text left, numeric right, # / select centre
(must beat Star Admin's `#order-listing th { text-align: center }` id rule) */
#order-listing thead th:not(.text-right) { text-align: left; }
#order-listing thead th:first-child,
#order-listing thead th:nth-child(2),
#order-listing tbody td:first-child,
#order-listing tbody td:nth-child(2) { text-align: center; }
/* Numeric/currency cells: no wrapping, even column digits, breathing room */
table.dataTable tbody td.text-right {
white-space: nowrap;
font-variant-numeric: tabular-nums;
padding-right: 16px;
}
table.dataTable thead th.text-right {
padding-right: 18px;
}
/* Long text cells: 1-line / 2-line ellipsis with a native hover tooltip */
.cell-clip {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cell-clip-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 100%;
line-height: 1.45;
}
/* Checkboxes (select-all / row) — compact, aligned, blue accent */
#order-listing input[type='checkbox'],
table.dataTable input[type='checkbox'] {
width: 15px !important;
height: 15px !important;
margin: 0;
vertical-align: middle;
accent-color: var(--zoho-primary);
}
table.dataTable thead th input[type='checkbox'] { vertical-align: -2px; }
/* Approval amount — the decision value as a crisp green pill */
.approval-badge {
display: inline-block;
background: #e8f7f1;
border: 1px solid #b6f6dc;
color: #127a51;
border-radius: 999px;
padding: 4px 12px;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
line-height: 1.4;
box-shadow: 0 2px 6px -1px rgba(18, 122, 81, 0.2);
}
/* Total / document amount — amber pill */
.amount-badge {
display: inline-block;
background: #fef4ea;
border: 1px solid #fcdcc0;
color: #964600;
border-radius: 999px;
padding: 4px 12px;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
line-height: 1.4;
box-shadow: 0 2px 6px -1px rgba(150, 70, 0, 0.2);
}
/* Bulk approve bar — visibly separated from the table, the button itself gets a premium
gradient+lift treatment (scoped to this bar, not the global .btn, so other buttons are
untouched) matching the rest of the app's hover-lift vocabulary. */
.bulk-action-bar {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0 6px;
margin-top: 18px;
border-top: 1px solid var(--zoho-border);
}
.bulk-action-bar .btn {
min-width: 190px;
padding: 0.55rem 1.4rem;
font-weight: 600;
font-size: 13px;
border-radius: 10px;
box-shadow: 0 4px 12px -4px rgba(23, 28, 46, 0.22);
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}
.bulk-action-bar .btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 10px 20px -6px rgba(23, 28, 46, 0.3);
}
.bulk-action-bar .btn i { margin-right: 8px; }
/* ------------------------------------------------------------
9. Cards — flat white panels with Zoho border
------------------------------------------------------------ */
.card {
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 8px;
box-shadow: none;
}
.card .card-header {
background: var(--zoho-surface-header);
border-bottom: 1px solid var(--zoho-border);
padding: 0.75rem 1.25rem;
border-radius: 7px 7px 0 0;
}
.card .card-header .card-title,
.card .card-header h4,
.card .card-header h5 {
color: var(--zoho-text-secondary);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
margin: 0;
}
.card .card-body { padding: 1.25rem; }
/* List + persistent detail split (InitiateBillPaymentPage) — the reference screenshot's
"click a row on the left, its details appear on the side" pattern, but as an always-visible
pane next to the list instead of an overlay drawer. The list only shows the Bill No now (all
other columns moved into the detail panel), so it stays narrow and the detail panel gets the
bulk of the width; both stack on narrow screens. */
.zbill-split {
display: flex;
/* flex-start (not stretch) — the detail panel is now noticeably shorter than the bills list
(facts + amount summary + form, vs. up to a full scrollable list of rows), and stretching it
to match the list's height just left a large dead gap below its content. Each card sizes to
its own content instead; they'll naturally line up again once a card's content actually
needs the extra height. */
align-items: flex-start;
gap: 20px;
flex-wrap: wrap;
}
/* Compact "pick a bill" list — a purpose-built browser instead of the generic DataTableChrome
grid (which looked cramped and toolbar-heavy squeezed into a single-column width). Mirrors
the reference screenshot's Agencies list: header + count, a search box, then a scrollable
column of clickable rows with an icon tile, bill no + vendor, and a trailing chevron. */
.zbill-list {
flex: 1 1 280px;
max-width: 360px;
min-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.04), 0 10px 24px -12px rgba(23, 28, 46, 0.12);
}
.zbill-list-head {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 18px;
background: linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
border-bottom: 1px solid var(--zoho-border);
margin-bottom: 14px;
flex-wrap: wrap;
row-gap: 10px;
}
.zbill-list-head-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 9px;
background: linear-gradient(155deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
color: #fff;
flex: none;
box-shadow: 0 4px 10px -3px rgba(44, 102, 221, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.zbill-list-head .card-title {
/* inline-flex + fixed height (matching the icon tile's own 30px) instead of a line-height
trick — that only approximately centers text depending on font metrics, this pins it exactly
regardless. Root cause of it still looking off after that change: legacy style.css has
`.card-title { margin-bottom: 0.75rem }`, which is inert on a plain inline (margins
don't apply to inline elements) but activates the moment display becomes inline-flex — its
12px margin-bottom was being included in this item's flex cross-size, so align-items:center
centered a 42px box (30px content + 12px margin) against the icon's plain 30px box, visibly
pushing the text upward. Reset to 0 here. */
margin: 0;
flex: 1;
display: inline-flex;
align-items: center;
height: 30px;
font-size: 15px;
font-weight: 700 !important;
color: var(--zoho-text);
}
.zbill-list-count {
font-size: 12px;
font-weight: 700;
color: var(--zoho-primary);
background: linear-gradient(155deg, #eef4ff 0%, #e2ebfc 100%);
border-radius: 999px;
padding: 3px 11px;
flex: none;
}
/* Excel/PDF export chips — share the header row with the title/count (not stacked on their own
line below it), pinned to the row's right edge. */
.zbill-list-actions {
display: flex;
align-items: center;
gap: 8px;
flex: none;
margin-left: auto;
}
.zbill-list-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid transparent;
border-radius: 999px;
cursor: pointer;
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}
.zbill-list-chip:hover { transform: translateY(-1px) scale(1.03); }
.zbill-list-chip:active { transform: translateY(0) scale(0.94); }
.zbill-list-chip-excel { background: #e8f7f1; border-color: #b6f6dc; color: #127a51; }
.zbill-list-chip-excel:hover { box-shadow: 0 4px 10px -3px rgba(18, 122, 81, 0.4); }
.zbill-list-chip-pdf { background: #feedee; border-color: #fad7d9; color: #b2343c; }
.zbill-list-chip-pdf:hover { box-shadow: 0 4px 10px -3px rgba(178, 52, 60, 0.4); }
.zbill-list-search {
display: flex;
align-items: center;
gap: 8px;
margin: 0 18px 14px;
padding: 0 12px;
height: 38px;
background-color: #fbfbfe;
border: 1.5px solid var(--zoho-input-border);
border-radius: 10px;
color: var(--zoho-text-secondary);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.zbill-list-search:hover { border-color: #b7c6f2; background-color: #fff; }
.zbill-list-search:focus-within {
border-color: var(--zoho-primary);
background-color: #fff;
box-shadow: 0 0 0 4px rgba(64, 141, 251, 0.14);
}
.zbill-list-search svg { flex: none; color: var(--zoho-primary); opacity: 0.7; }
.zbill-list-search:focus-within svg { opacity: 1; }
.zbill-list-search input {
flex: 1;
min-width: 0;
border: none;
background: none;
outline: none;
font-size: 13px;
font-weight: 500;
color: var(--zoho-text);
}
.zbill-list-search button {
flex: none;
display: flex;
border: none;
background: none;
color: var(--zoho-text-secondary);
cursor: pointer;
padding: 2px;
}
.zbill-list-search button:hover { color: var(--zoho-text); }
.zbill-list-rows {
/* Fills whatever height .zbill-split's stretch gave the card (matching .zbill-detail's height)
instead of a fixed cap, so the list scrolls internally and both cards' bottoms line up. A
560px ceiling still applies when the detail panel is short (e.g. nothing selected yet), so
the list doesn't grow absurdly tall on its own. */
flex: 1 1 auto;
min-height: 0;
max-height: 560px;
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge/IE */
padding: 0 10px 10px;
}
.zbill-list-rows::-webkit-scrollbar {
display: none; /* Chrome/Safari/Edge (Chromium) */
}
.zbill-list-rows { display: flex; flex-direction: column; gap: 6px; }
.zbill-list-row {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 11px 12px;
border: 1px solid transparent;
background: #fbfbfe;
border-radius: 12px;
text-align: left;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.zbill-list-row:hover {
background: #fff;
border-color: var(--zoho-border);
transform: translateY(-1px);
box-shadow: 0 4px 12px -6px rgba(23, 28, 46, 0.14);
}
.zbill-list-row.active {
background: linear-gradient(135deg, #eef4ff 0%, #f5f9ff 100%);
border-color: rgba(64, 141, 251, 0.35);
box-shadow: inset 3px 0 0 var(--zoho-primary), 0 4px 14px -8px rgba(64, 141, 251, 0.35);
}
.zbill-list-row.active:hover {
transform: translateY(-1px);
box-shadow: inset 3px 0 0 var(--zoho-primary), 0 6px 16px -6px rgba(64, 141, 251, 0.4);
}
.zbill-list-row:active { transform: translateY(0) scale(0.985); }
.zbill-list-row:hover .zbill-list-row-icon { transform: scale(1.08) rotate(-4deg); }
/* Skeleton rows — first load only, matches the shimmer pattern already used on the dashboard
(.zdash-skel) instead of a bare "Loading..." line. */
.zbill-list-row-skeleton { display: flex; align-items: center; gap: 12px; padding: 11px 12px; }
.zbill-skel-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.zbill-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.zbill-skel-line-a { width: 70%; height: 12px; }
.zbill-skel-line-b { width: 45%; height: 10px; }
.zbill-list-row-icon {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(155deg, #eef4ff 0%, #e2ebfc 100%);
color: var(--zoho-primary);
transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease,
transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zbill-list-row.active .zbill-list-row-icon {
background: linear-gradient(155deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
color: #fff;
box-shadow: 0 4px 10px -3px rgba(44, 102, 221, 0.5);
}
.zbill-list-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zbill-list-row-no {
font-size: 13.5px;
font-weight: 700;
color: var(--zoho-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zbill-list-row.active .zbill-list-row-no { color: var(--zoho-primary-dark); }
.zbill-list-row-vendor {
font-size: 11.5px;
color: var(--zoho-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zbill-list-row-chevron {
flex: none;
padding: 4px;
border-radius: 50%;
color: var(--zoho-text-secondary);
background: transparent;
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.18s ease, color 0.18s ease;
}
.zbill-list-row:hover .zbill-list-row-chevron { transform: translateX(2px); background: #f0f3fb; }
.zbill-list-row.active .zbill-list-row-chevron { color: var(--zoho-primary); background: #e2ebff; }
.zbill-list-status {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 32px 16px;
text-align: center;
color: var(--zoho-text-secondary);
font-size: 13px;
}
.zbill-list-status svg { color: var(--zoho-border); }
.zbill-detail {
flex: 2 1 420px;
display: flex;
flex-direction: column;
overflow: hidden;
/* Soft, multi-layered shadow (a tight contact layer + a broad diffuse one) instead of one hard
drop-shadow — reads as gentle elevation rather than a flat cutout. */
box-shadow:
0 1px 2px rgba(23, 28, 46, 0.04),
0 6px 12px -6px rgba(23, 28, 46, 0.08),
0 18px 36px -16px rgba(23, 28, 46, 0.14);
}
/* Fills the stretched card height (see .zbill-split's align-items: stretch) so the empty state
below can center itself vertically instead of just sitting top-padded in a tall card. */
.zbill-detail .card-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Re-plays on every bill switch (both are keyed on billId in the JSX) instead of once. */
.zbill-detail-head,
.zbill-detail-content { animation: zbill-fade-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes zbill-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.zbill-detail-head, .zbill-detail-content, .zbill-list-row { animation: none !important; transition: none !important; }
}
.zbill-detail-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 32px;
text-align: center;
color: var(--zoho-text-secondary);
}
.zbill-detail-empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: radial-gradient(circle, #eef4ff 0%, #f7faff 70%);
color: var(--zoho-primary);
margin-bottom: 10px;
}
.zbill-detail-empty-title { font-size: 15px; font-weight: 700; color: var(--zoho-text); }
.zbill-detail-empty p { max-width: 280px; margin: 0; font-size: 13px; line-height: 1.5; }
/* Rich header — replaces the plain uppercase .card-header for a selected bill: bold bill
number + vendor name on the left, status pill on the right. */
.zbill-detail-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
background: linear-gradient(165deg, #f5f8ff 0%, #ffffff 70%);
border-bottom: 1px solid var(--zoho-border);
}
.zbill-detail-billno {
display: flex;
align-items: center;
gap: 2px;
font-size: 17px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--zoho-text);
}
.zbill-detail-billno-hash {
color: var(--zoho-primary);
font-weight: 700;
}
.zbill-detail-vendor { display: block; font-size: 12.5px; color: var(--zoho-text-secondary); margin-top: 2px; }
/* Status pill (overdue/paid) — a gradient glow pill with an icon instead of the generic flat
`.badge` used for status labels app-wide, so the bill's most important at-a-glance fact reads
as a deliberate, premium indicator rather than a plain colored tag. */
.zbill-status-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #fff;
}
.zbill-status-pill-danger {
background: linear-gradient(135deg, #ff6b6f 0%, var(--zoho-danger) 100%);
box-shadow: 0 3px 10px -2px rgba(247, 82, 90, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.zbill-status-pill-success {
background: linear-gradient(135deg, #34d399 0%, var(--zoho-success) 100%);
box-shadow: 0 3px 10px -2px rgba(34, 179, 120, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.zbill-status-pill-warning {
background: linear-gradient(135deg, #ffc94d 0%, var(--zoho-warning) 100%);
box-shadow: 0 3px 10px -2px rgba(253, 145, 52, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.zbill-status-pill-info {
background: linear-gradient(135deg, #60a5fa 0%, var(--zoho-primary) 100%);
box-shadow: 0 3px 10px -2px rgba(64, 141, 251, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Left (bill facts + amount summary) / right (initiate-payment form) split — the amount you're
paying against and the form to pay it sit side by side instead of stacked, so both are visible
at once without scrolling the detail panel. */
.zbill-detail-split {
display: flex;
gap: 24px;
align-items: flex-start;
}
.zbill-detail-left {
flex: 1 1 260px;
min-width: 0;
padding-right: 24px;
border-right: 1px solid var(--zoho-border);
}
.zbill-detail-right { flex: 1 1 280px; min-width: 0; }
@media (max-width: 720px) {
.zbill-detail-split { flex-direction: column; gap: 18px; }
.zbill-detail-left { padding-right: 0; border-right: none; padding-bottom: 18px; border-bottom: 1px solid var(--zoho-border); }
}
.zbill-detail-facts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 0 0 16px;
}
.zbill-detail-left .zbill-detail-facts { grid-template-columns: 1fr; }
.zbill-fact-tile {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: #f7f9fd;
border: 1px solid var(--zoho-border);
min-width: 0;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease,
border-color 0.2s ease;
}
/* Text column needs its own min-width:0 (flex items default to min-width:auto, which sizes to
content and defeats the value's text-overflow:ellipsis) so a long value like a date truncates
instead of wrapping onto a second line and making the tile taller than its neighbours. */
.zbill-fact-tile > div { min-width: 0; flex: 1; }
.zbill-fact-tile:hover {
transform: translateY(-2px);
border-color: rgba(64, 141, 251, 0.3);
box-shadow: 0 6px 14px -8px rgba(23, 28, 46, 0.18);
}
.zbill-fact-tile:hover .zbill-fact-icon { transform: scale(1.1); }
.zbill-fact-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: none;
border-radius: 8px;
background: linear-gradient(155deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
color: #fff;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zbill-fact-icon-success { background: linear-gradient(155deg, var(--zoho-success) 0%, #189960 100%); }
.zbill-fact-icon-warning { background: linear-gradient(155deg, var(--zoho-warning) 0%, #dd7412 100%); }
.zbill-fact-label {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #3d4560;
}
.zbill-fact-value {
margin-top: 1px;
font-size: 13px;
font-weight: 700;
color: var(--zoho-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zbill-fact-missing { color: var(--zoho-danger); }
.zbill-fact-open {
display: inline-flex;
align-items: center;
gap: 3px;
border: none;
background: none;
padding: 0;
font-size: 13px;
font-weight: 700;
color: var(--zoho-primary);
cursor: pointer;
}
.zbill-fact-open:hover { color: var(--zoho-primary-dark); }
@media (max-width: 480px) {
.zbill-detail-facts { grid-template-columns: 1fr; }
}
/* Amount summary — the numbers that matter most, lifted out of the plain fact list into their
own tinted panel so they read at a glance instead of blending into the rest of the details. */
.zbill-amount-panel {
background: linear-gradient(165deg, #eef4ff 0%, #f7faff 100%);
border: 1px solid var(--zoho-border);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 18px;
}
.zbill-amount-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
font-size: 13px;
}
.zbill-amount-row span:first-child {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
color: #3d4560;
}
.zbill-amount-row span:first-child svg { color: var(--zoho-primary); opacity: 0.75; }
.zbill-amount-row + .zbill-amount-row { border-top: 1px dashed rgba(64, 141, 251, 0.2); }
.zbill-amount-row span:last-child { font-weight: 600; color: var(--zoho-text); font-variant-numeric: tabular-nums; }
.zbill-amount-balance {
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid rgba(34, 179, 120, 0.3) !important;
}
/* No divider line to show when it's the only row in the panel (e.g. Other Payment's single
Amount summary) — the border-top only makes sense separating it from rows above it. */
.zbill-amount-balance-solo { margin-top: 0; padding-top: 0; border-top: none !important; }
.zbill-amount-balance span:first-child { font-weight: 600; color: var(--zoho-text); }
.zbill-amount-balance span:first-child svg { color: #17945f; opacity: 1; }
.zbill-amount-balance span:last-child { font-size: 18px; font-weight: 700; color: #17945f; }
.zbill-detail-form { padding-top: 4px; display: flex; flex-direction: column; gap: 12px; }
.zbill-detail-form-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--zoho-text);
margin-bottom: 2px;
}
/* Small-caps, icon-prefixed labels for this form only — matches the section title's look
instead of the plain default .form-group label used elsewhere in the app. */
.zbill-detail-form .form-group label {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--zoho-text);
}
.zbill-detail-form .form-group label svg { color: var(--zoho-primary); }
.zbill-detail-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 14px;
}
@media (max-width: 480px) {
.zbill-detail-form-grid { grid-template-columns: 1fr; }
}
/* Approval Amount — the one field that matters most on this form, so it gets a ₹ prefix and a
bolder, larger figure instead of blending in with the other plain inputs. */
.zbill-amt-field { position: relative; }
.zbill-amt-prefix {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
font-size: 14px;
color: var(--zoho-primary);
pointer-events: none;
}
.zbill-amt-input {
padding-left: 26px !important;
font-size: 16px;
font-weight: 700;
}
/* Now sits below the left/right split (Approve & Forward applies to the whole bill, not just
the "Initiate Payment" form column) — a full-bleed divider band with the button/link centered
and width-capped inside it, so the "final step" reads as its own deliberate zone rather than
just trailing off the bottom of the right column. */
.zbill-detail-actions-band {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--zoho-border);
}
.zbill-detail-actions {
margin: 0 auto;
max-width: 420px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* Premium gradient CTA — replaces the flat .btn-info block button with a glowing, hover-lifting
one so the primary action on this panel reads as the deliberate, confident "do this next"
button instead of a generic form submit. */
.zbill-approve-btn {
position: relative;
overflow: hidden;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
box-shadow: 0 4px 14px -4px rgba(64, 141, 251, 0.55);
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease,
background 0.18s ease;
}
/* Diagonal light sweep on hover — a small extra bit of "premium button" polish beyond the
lift/glow, echoing the shimmer already used on the loading skeletons. */
.zbill-approve-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 62%);
transform: translateX(-120%);
pointer-events: none;
}
.zbill-approve-btn:hover:not(:disabled)::before { animation: zbill-approve-sweep 0.7s ease; }
@keyframes zbill-approve-sweep {
to { transform: translateX(120%); }
}
.zbill-approve-btn svg { transition: transform 0.18s ease; }
.zbill-approve-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 22px -6px rgba(64, 141, 251, 0.65);
}
.zbill-approve-btn:hover:not(:disabled) svg { transform: translateX(3px); }
.zbill-approve-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.zbill-approve-btn:disabled { opacity: 0.65; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
.zbill-approve-btn:hover:not(:disabled)::before { animation: none; }
}
/* Clear Selection moved into the panel header (next to the status pill) as an icon-only button
— no separate text link at the bottom of the panel any more. */
.zbill-detail-head-actions { display: flex; align-items: center; gap: 8px; }
.zbill-detail-clear-top {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 1px solid var(--zoho-border);
border-radius: 50%;
background: #fff;
color: var(--zoho-text-secondary);
cursor: pointer;
transition: transform 0.2s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.zbill-detail-clear-top:hover {
transform: rotate(90deg);
background: #fdeceb;
color: var(--zoho-danger);
border-color: rgba(247, 82, 90, 0.35);
}
/* Legacy dashboard cards — flatten to Zoho's flat white panels */
.legacy-dashboard .card,
.legacy-dashboard .small-box {
box-shadow: none !important;
border-radius: 8px !important;
border: 1px solid var(--zoho-border);
background: #fff;
}
/* ------------------------------------------------------------
10. Modals — Zoho popup (header #f9f9fb, backdrop #191c29)
------------------------------------------------------------ */
.modal { position: fixed; top: 0; left: 0; z-index: 1100; overflow-y: auto; }
.modal-backdrop { background-color: var(--zoho-modal-backdrop); z-index: 1095; }
.modal-backdrop.show { opacity: 0.6; }
.modal-dialog { margin: 4vh auto; }
.modal-dialog.modal-sm { max-width: 500px; }
.modal-dialog.modal-md { max-width: 700px; }
.modal-dialog.modal-lg { max-width: 840px; }
.modal-dialog.modal-xlg { max-width: 1030px; }
.modal-body { max-height: 72vh; overflow: auto; }
.modal-content {
border: 1px solid var(--zoho-border);
border-radius: 8px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
font-family: var(--zoho-font);
}
.modal-header {
background: var(--zoho-surface-header);
border-bottom: 1px solid #eee;
padding: 12px 20px;
border-radius: 7px 7px 0 0;
}
.modal-header .modal-title {
font-size: 17px; /* measured "Create Account" title */
font-weight: 400;
color: #212529;
font-family: var(--zoho-font);
}
.modal-header .close { color: var(--zoho-text); opacity: 1; text-shadow: none; }
.modal-body { padding: 20px; }
.modal-footer {
border-top: 1px solid #eee;
padding: 20px;
}
/* ------------------------------------------------------------
11. Alerts / banners — Zoho alert surfaces
------------------------------------------------------------ */
.banner {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 0.75rem 1rem;
border-left-width: 3px;
border-left-style: solid;
border-radius: 6px;
font-size: var(--zoho-font-size);
}
.banner-icon { margin-top: 2px; font-size: 15px; }
.banner-body { flex: 1; min-width: 0; }
.banner p { margin: 0; }
.banner ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.banner-success {
background: #e8f7f1; /* --zf-alert-success-bg */
border: 1px solid #b6f6dc;
border-left-color: #22b378;
color: #127a51;
}
.banner-error {
background: #feedee; /* --zf-alert-danger-bg */
border: 1px solid #fad7d9;
border-left-color: #f5484d;
color: #b2343c;
}
.banner-info {
background: #ebf3fe; /* --zf-alert-info-bg */
border: 1px solid #d8e4fb;
border-left-color: #408dfb;
color: #1c5bd9;
}
.banner-warning,
.banner-warn {
background: #fef4ea; /* --zf-alert-warning-bg */
border: 1px solid #fcdcc0;
border-left-color: #ffb02e;
color: #964600;
}
.alert { border-radius: 6px; font-size: var(--zoho-font-size); }
/* ------------------------------------------------------------
12. Utility colors → Zoho palette
------------------------------------------------------------ */
.text-primary { color: var(--zoho-primary) !important; }
.text-info { color: var(--zoho-info) !important; }
.text-success { color: var(--zoho-success) !important; }
.text-danger { color: var(--zoho-danger) !important; }
.text-warning { color: var(--zoho-warning) !important; }
.text-muted { color: var(--zoho-text-muted) !important; }
a { color: var(--zoho-link); }
a:hover { color: var(--zoho-link-hover); }
.bg-primary { background-color: var(--zoho-primary) !important; }
.bg-info { background-color: var(--zoho-info) !important; }
.bg-success { background-color: var(--zoho-success) !important; }
.bg-danger { background-color: var(--zoho-danger) !important; }
.bg-warning { background-color: var(--zoho-warning) !important; }
/* Badges / status pills */
.badge {
font-family: var(--zoho-font);
font-weight: 500 !important;
border-radius: 6px !important;
padding: 0.35em 0.6em;
font-size: 0.75rem;
}
.badge-outline-primary { color: var(--zoho-primary); border: 1px solid var(--zoho-primary); }
.badge-outline-success { color: #127a51; border: 1px solid #22b378; background: #fff; }
.badge-outline-danger { color: #b2343c; border: 1px solid var(--zoho-danger); background: #fff; }
.badge-outline-warning { color: #964600; border: 1px solid var(--zoho-warning); background: #fff; }
.badge-outline-info { color: var(--zoho-primary); border: 1px solid var(--zoho-info); background: #fff; }
/* Dropdown menus */
.dropdown-menu {
border: 1px solid var(--zoho-border);
border-radius: 6px;
box-shadow: 0 6px 18px rgba(33, 38, 60, 0.12); /* --nav-dropdown-box-shadow */
font-family: var(--zoho-font);
font-size: var(--zoho-font-size);
padding: 4px;
}
.dropdown-menu .dropdown-item {
border-radius: 6px;
padding: 7px 10px;
color: #333850; /* --zf-dd-link-color */
}
.dropdown-menu .dropdown-item:hover { background: #f1f1fa; color: #333850; }
.dropdown-item.active, .dropdown-item:active { background: var(--zoho-primary); color: #fff; }
/* Profile popover — premium card: dark gradient banner (matches the top band), overlapping initials
avatar, level chips, last-login panel and icon-tile menu items. */
.profile-menu {
display: block;
visibility: hidden;
opacity: 0;
transform: translateY(-6px) scale(0.98);
transform-origin: top right;
pointer-events: none;
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
position: absolute;
top: calc(100% + 12px);
right: 0;
z-index: 1000;
width: 296px;
max-width: calc(100vw - 24px);
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 16px;
box-shadow: 0 2px 6px rgba(23, 28, 46, 0.06), 0 18px 44px rgba(23, 28, 46, 0.22);
padding: 0 8px 8px;
font-family: var(--zoho-font);
}
.profile-menu::before {
content: '';
position: absolute;
top: -6px;
right: 17px;
width: 12px;
height: 12px;
background: #202538;
transform: rotate(45deg);
border-radius: 3px 0 0 0;
}
.profile-menu.show {
visibility: visible;
opacity: 1;
transform: none;
pointer-events: auto;
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s;
}
.profile-menu-banner {
height: 64px;
margin: 0 -8px;
border-radius: 15px 15px 0 0;
background: linear-gradient(135deg, #202538 0%, #2c3558 60%, #34406c 100%);
position: relative;
overflow: hidden;
}
.profile-menu-banner::after {
content: '';
position: absolute;
right: -30px;
top: -40px;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle, rgba(64, 141, 251, 0.35), rgba(64, 141, 251, 0) 70%);
}
.profile-menu-head {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 0 6px;
margin-top: -26px;
position: relative;
}
.profile-menu-avatar {
flex: none;
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.5px;
color: #fff;
background: linear-gradient(135deg, #408dfb, #2f6fd6);
border: 3px solid #fff;
box-shadow: 0 6px 14px rgba(47, 111, 214, 0.35);
}
/* Starts below the 64px banner (avatar top sits 26px above it) so the text is always on white. */
.profile-menu-id { min-width: 0; display: flex; flex-direction: column; margin-top: 30px; }
.profile-menu-name {
font-size: 14.5px;
font-weight: 700;
color: var(--zoho-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-menu-org {
font-size: 12px;
color: var(--zoho-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-menu-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 6px 0; }
.profile-menu-chip {
font-size: 11px;
font-weight: 600;
line-height: 1;
padding: 5px 9px;
border-radius: 999px;
border: 1px solid transparent;
}
.profile-menu-chip-gold { color: #8a5a00; background: #fff4d6; border-color: #f6dc9b; }
.profile-menu-chip-blue { color: #1f5fc4; background: #e8f1ff; border-color: #c4dcff; }
/* Last sign-in panel (claims carry the pre-overwrite Users.LastLogin) */
.profile-menu-meta {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 0 4px;
padding: 10px 12px;
background: #f5f7fb;
border: 1px solid #eceff6;
border-radius: 12px;
}
.profile-menu-meta-icon {
flex: none;
width: 30px;
height: 30px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
color: var(--zoho-primary);
background: #fff;
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.08);
}
.profile-menu-meta-text { display: flex; flex-direction: column; min-width: 0; }
.profile-menu-meta-label {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--zoho-text-secondary);
}
.profile-menu-meta-value {
font-size: 12.5px;
font-weight: 600;
color: var(--zoho-text);
white-space: nowrap;
}
.profile-menu-divider { height: 1px; background: var(--zoho-border); margin: 8px 6px; }
.profile-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: var(--zoho-text);
transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.profile-menu-item-icon {
flex: none;
width: 30px;
height: 30px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
color: var(--zoho-primary);
background: rgba(64, 141, 251, 0.12);
transition: background 0.12s ease, color 0.12s ease;
}
.profile-menu-item:hover { background: var(--zoho-row-hover); color: var(--zoho-text); transform: translateX(2px); }
.profile-menu-item:focus-visible { outline: 2px solid var(--zoho-primary); outline-offset: -2px; }
.profile-menu-item-danger .profile-menu-item-icon { color: var(--zoho-danger); background: rgba(247, 82, 90, 0.12); }
.profile-menu-item-danger:hover { background: #fdeceb; color: var(--zoho-danger); }
.profile-menu-item-danger:hover .profile-menu-item-icon { color: #fff; background: var(--zoho-danger); }
@media (prefers-reduced-motion: reduce) {
.profile-menu, .profile-menu.show, .profile-menu-item { transition: none; transform: none; }
}
/* ------------------------------------------------------------
13. Detail popups — the legacy .popupContent/.backGround
panel used by every payment detail screen → Zoho modal look
------------------------------------------------------------ */
.backGround {
background-color: var(--zoho-modal-backdrop) !important;
opacity: 0.6 !important;
}
.popupContent {
/* The legacy rule (style.css) was `position: fixed; top: 0; margin: 10px auto;` — pinned to
the very top of the viewport (only ~30px down via margin-top), with horizontal `margin:
auto` centering that additionally never worked because `left`/`right` were never set (a
fixed element only distributes `margin: auto` when both are specified). A tall form popup
filling most of the screen height made "stuck at the top" hard to notice; the shorter
activity-log popup made it obvious. True centering on both axes via top/left 50% +
transform, folded into the entrance animation below (not left as a separate transform, or
the animation's own final `transform` value would overwrite the centering offset once it
finishes). `max-height` + its own scroll keeps a tall popup fully reachable on short
viewports instead of extending off-screen top/bottom. */
position: fixed;
top: 50%;
left: 50%;
margin: 0;
max-width: 1030px; /* --zf-modal-xlg */
max-height: 90vh;
overflow-y: auto;
border: 1px solid var(--zoho-border);
border-radius: 10px !important;
box-shadow: 0 8px 30px -6px rgba(23, 28, 46, 0.25), 0 2px 8px rgba(23, 28, 46, 0.08);
font-family: var(--zoho-font);
animation: zpopup-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes zpopup-in {
from { opacity: 0; transform: translate(-50%, -50%) translateY(10px) scale(0.98); }
to { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.popupContent { animation: none; transform: translate(-50%, -50%); }
}
/* Narrower variant for content that doesn't need the full 1030px width (e.g. the activity-log
popup — a search field + a timeline list, not a multi-column payment form). */
.popupContent-md { max-width: 700px; }
.popupContent .card { border: none; border-radius: 8px; }
.popupContent .card-title {
font-size: 17px;
font-weight: 500;
color: #212529;
}
/* Zoho's close button is a plain dark X, not a red circle */
#btnClose_Case,
.popupContent .btn-icon {
background: var(--zoho-btn-secondary-bg) !important;
border: 1px solid #ddd !important;
border-radius: 50% !important;
color: var(--zoho-text) !important;
font-size: 15px;
line-height: 34px;
width: 36px !important;
height: 36px !important;
padding: 0;
box-shadow: none;
}
/* ------------------------------------------------------------
14. Dashboard — Zoho Books style widgets (DashboardPage.tsx)
------------------------------------------------------------ */
.zdash { background: var(--zoho-dashboard-bg); }
/* Shared fade+rise entrance, staggered per-section via inline animationDelay
(DashboardPage.tsx) — same vocabulary as the login page's .home-reveal. */
.zdash-reveal { animation: zdash-reveal-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes zdash-reveal-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.zdash-reveal, .zdash-skel { animation: none; opacity: 1; }
}
.zdash-hello {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 20px 26px;
margin-bottom: 20px;
background: #fbfbfe
repeating-linear-gradient(
45deg,
rgba(64, 141, 251, 0.035) 0,
rgba(64, 141, 251, 0.035) 1px,
transparent 1px,
transparent 26px
);
border: 1px solid var(--zoho-sidebar-border);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.03), 0 8px 20px -8px rgba(23, 28, 46, 0.08);
}
/* Two faint colour-glow blobs in the corners, echoing the login page's multi-colour ambient
blobs — a bit of warmth/colour behind the header instead of a single flat blue tint. */
.zdash-hello::before {
content: '';
position: absolute;
top: -60%;
right: -8%;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(64, 141, 251, 0.16), transparent 70%);
pointer-events: none;
}
.zdash-hello::after {
content: '';
position: absolute;
bottom: -70%;
left: 6%;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(34, 179, 120, 0.12), transparent 70%);
pointer-events: none;
}
.zdash-hello-left { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.zdash-hello-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: none;
border-radius: 11px;
background: linear-gradient(155deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
color: #fff;
box-shadow: 0 4px 10px -2px rgba(44, 102, 221, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.zdash-hello-title {
font-size: 21px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--zoho-text);
line-height: 1.25;
}
.zdash-hello-sub {
font-size: 13px;
color: var(--zoho-text-secondary);
margin-top: 2px;
}
.zdash-hello-right { position: relative; z-index: 1; text-align: right; font-size: 13px; color: var(--zoho-text-secondary); }
.zdash-hello-help-label { color: var(--zoho-text-secondary); }
.zdash-hello-help-number { font-weight: 700; color: var(--zoho-text); }
.zdash-hello-help-hours { margin-top: 2px; color: var(--zoho-primary); }
@media (max-width: 640px) {
.zdash-hello { justify-content: flex-start; }
.zdash-hello-right { text-align: left; }
}
/* Dark variant — same markup/structure as `.zdash-hello` above, just re-themed to the app's
existing dark navy (matches the top navbar, `--zoho-topband-bg`) for pages that want a bolder
page-level banner than the light dashboard "Hello" card, e.g. a section title + breadcrumb. */
.zdash-hello-dark {
background: linear-gradient(165deg, #262c46 0%, var(--zoho-topband-bg) 65%);
border-color: #2f3554;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 12px 28px -12px rgba(0, 0, 0, 0.45);
}
.zdash-hello-dark::before { background: radial-gradient(circle, rgba(64, 141, 251, 0.22), transparent 70%); }
.zdash-hello-dark::after { background: radial-gradient(circle, rgba(34, 179, 120, 0.18), transparent 70%); }
.zdash-hello-dark .zdash-hello-title { color: #fff; }
.zdash-hello-dark .zdash-hello-sub {
color: var(--zoho-success);
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
.zdash-hello-dark .zdash-hello-right,
.zdash-hello-dark .zdash-hello-help-label { color: rgba(255, 255, 255, 0.65); }
.zdash-hello-dark .zdash-hello-help-number { color: #fff; }
/* Premium glass stat chips for a dark hero banner's right side (Bill Details, Vendor Advance,
…) — frosted pill cards with a gradient icon tile, instead of plain text or a separate stat-
card row, so the numbers read as a deliberate feature rather than an afterthought squeezed
into the empty space next to the breadcrumb. Shared/generic (`zhero-*`) so any `zdash-hello`
page can drop these in instead of duplicating the pattern per page. */
.zhero-stats {
position: relative;
z-index: 1;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.zhero-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(6px);
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease,
border-color 0.2s ease;
}
.zhero-chip:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.13);
border-color: rgba(255, 255, 255, 0.26);
}
.zhero-chip-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: none;
border-radius: 10px;
color: #fff;
}
.zhero-chip-icon-primary {
background: linear-gradient(155deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
box-shadow: 0 4px 10px -2px rgba(64, 141, 251, 0.5);
}
.zhero-chip-icon-success {
background: linear-gradient(155deg, var(--zoho-success) 0%, #189960 100%);
box-shadow: 0 4px 10px -2px rgba(34, 179, 120, 0.5);
}
.zhero-chip-icon-warning {
background: linear-gradient(155deg, var(--zoho-warning) 0%, #dd7412 100%);
box-shadow: 0 4px 10px -2px rgba(253, 145, 52, 0.5);
}
.zhero-chip-value { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.1; }
.zhero-chip-label {
margin-top: 2px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 640px) {
.zhero-stats { width: 100%; }
}
/* Error banner + inline retry (DashboardPage.tsx renders these together when the counts
request fails — e.g. the API being unreachable) */
.zdash-feedback { margin-bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.zdash-feedback .banner { width: 100%; }
.zdash-retry {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--zoho-border);
border-radius: 999px;
background: #fff;
color: var(--zoho-primary);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.zdash-retry:hover { background: #eef2ff; border-color: var(--zoho-primary); transform: translateY(-1px); }
.zdash-retry svg { transition: transform 0.3s ease; }
.zdash-retry:active svg { transform: rotate(180deg); }
/* KPI stat cards row — each carries a tone (primary/success/warning) reusing the app's existing
status colour tokens, so Bill / Vendor Advance / Statutory-Other read apart at a glance. */
.zdash-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.zdash-stat {
position: relative;
overflow: hidden;
/* Grid items default to min-width:auto, which refuses to shrink below the content's natural
(unwrapped) width — a long currency value (e.g. "₹657,318,865.34") then forces the card
wider than its actual grid track, so the excess just gets clipped by this element's own
overflow:hidden instead of wrapping. min-width:0 lets the card actually shrink to its track
width, so .zdash-stat-value's own wrap/shrink rules below can take effect. */
min-width: 0;
display: block;
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 12px;
padding: 20px 20px 16px;
text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zdash-stat:hover {
border-color: transparent;
box-shadow: 0 4px 10px -4px rgba(23, 28, 46, 0.08), 0 14px 28px -10px rgba(44, 102, 221, 0.28);
transform: translateY(-3px);
text-decoration: none;
}
.zdash-stat-icon-tile {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
margin-bottom: 14px;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zdash-stat:hover .zdash-stat-icon-tile { transform: scale(1.08) rotate(-4deg); }
.zdash-stat-value {
/* clamp() shrinks long currency values (e.g. "₹657,318,865.34") on narrower cards instead of
a fixed 32px overflowing them; word-break is a last-resort safety net if a value is still
too long to fit even at the smallest size, so it wraps within the card instead of the
card's own overflow:hidden silently clipping it. */
font-size: clamp(18px, 2.4vw, 32px);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--zoho-text);
line-height: 1.15;
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
overflow-wrap: break-word;
word-break: break-word;
}
.zdash-stat-label {
font-size: 13px;
font-weight: 500;
color: var(--zoho-text-secondary);
}
/* Tone → icon-tile + accent bar colours. A top accent bar per card reinforces the tone even
before the eye reaches the icon (::after keeps it out of the padding flow) — always visible,
not just on hover, so the row of cards reads as colourful at a glance. */
.zdash-stat::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--zdash-tone, var(--zoho-primary)), var(--zdash-tone, var(--zoho-primary)) 60%, transparent 130%);
opacity: 0.85;
transition: opacity 0.2s ease, height 0.2s ease;
}
.zdash-stat:hover::after { opacity: 1; height: 5px; }
.zdash-stat-primary {
--zdash-tone: var(--zoho-primary);
background: linear-gradient(165deg, #eef4ff 0%, #ffffff 55%);
}
.zdash-stat-primary .zdash-stat-icon-tile {
background: linear-gradient(155deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
color: #fff;
box-shadow: 0 6px 14px -4px rgba(64, 141, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.zdash-stat-primary .zdash-stat-value { color: var(--zoho-primary-dark); }
.zdash-stat-success {
--zdash-tone: var(--zoho-success);
background: linear-gradient(165deg, #e9f9f2 0%, #ffffff 55%);
}
.zdash-stat-success .zdash-stat-icon-tile {
background: linear-gradient(155deg, var(--zoho-success) 0%, #189960 100%);
color: #fff;
box-shadow: 0 6px 14px -4px rgba(34, 179, 120, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.zdash-stat-success .zdash-stat-value { color: #17945f; }
.zdash-stat-warning {
--zdash-tone: var(--zoho-warning);
background: linear-gradient(165deg, #fff3e7 0%, #ffffff 55%);
}
.zdash-stat-warning .zdash-stat-icon-tile {
background: linear-gradient(155deg, var(--zoho-warning) 0%, #dd7412 100%);
color: #fff;
box-shadow: 0 6px 14px -4px rgba(253, 145, 52, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.zdash-stat-warning .zdash-stat-value { color: #c2650a; }
/* Skeleton loading state — first paint only (see DashboardPage.tsx's showSkeleton), avoids the
old behaviour of a failed/slow fetch looking identical to a genuinely-all-zero dashboard. */
.zdash-skel {
display: block;
border-radius: 6px;
background: linear-gradient(90deg, #eef0f6 25%, #f6f7fb 37%, #eef0f6 63%);
background-size: 400% 100%;
animation: zdash-skel-shimmer 1.4s ease infinite;
}
@keyframes zdash-skel-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
.zdash-stat-skeleton { cursor: default; }
.zdash-stat-skeleton .zdash-skel-icon { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 14px; }
.zdash-stat-skeleton .zdash-skel-value { width: 70px; height: 28px; margin-bottom: 10px; }
.zdash-stat-skeleton .zdash-skel-label { width: 55%; height: 13px; }
.zdash-row-skeleton { cursor: default; }
.zdash-row-skeleton .zdash-skel-row-icon { width: 28px; height: 28px; border-radius: 8px; margin-right: 12px; flex: none; }
.zdash-row-skeleton .zdash-skel-row-value { width: 34px; height: 22px; margin-right: 12px; }
.zdash-row-skeleton .zdash-skel-row-label { flex: 1; height: 13px; max-width: 120px; }
/* Section widgets (uppercase grey titles like Zoho widgets) */
.zdash-section {
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.03);
}
.zdash-section-title {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
border-bottom: 1px solid var(--zoho-border);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--zoho-text-secondary);
}
.zdash-section-title svg {
flex: none;
width: 14px;
height: 14px;
padding: 5px;
box-sizing: content-box;
border-radius: 7px;
background: linear-gradient(155deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
color: #fff;
box-shadow: 0 2px 6px -1px rgba(64, 141, 251, 0.45);
}
.zdash-section-body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0;
}
.zdash-row {
display: flex;
align-items: center;
padding: 16px 20px;
text-decoration: none;
border-right: 1px solid var(--zoho-border);
transition: background 0.15s ease, padding-left 0.15s ease;
}
.zdash-row:last-child { border-right: 0; }
.zdash-row:hover { background: var(--zoho-row-hover); padding-left: 24px; text-decoration: none; }
.zdash-row-icon-tile {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
margin-right: 12px;
flex: none;
}
.zdash-row-primary .zdash-row-icon-tile {
background: linear-gradient(155deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
color: #fff;
box-shadow: 0 3px 8px -2px rgba(64, 141, 251, 0.45);
}
.zdash-row-success .zdash-row-icon-tile {
background: linear-gradient(155deg, var(--zoho-success) 0%, #189960 100%);
color: #fff;
box-shadow: 0 3px 8px -2px rgba(34, 179, 120, 0.45);
}
.zdash-row-warning .zdash-row-icon-tile {
background: linear-gradient(155deg, var(--zoho-warning) 0%, #dd7412 100%);
color: #fff;
box-shadow: 0 3px 8px -2px rgba(253, 145, 52, 0.45);
}
.zdash-row-primary .zdash-row-value { color: var(--zoho-primary-dark); }
.zdash-row-success .zdash-row-value { color: #17945f; }
.zdash-row-warning .zdash-row-value { color: #c2650a; }
.zdash-row-value {
font-size: 24px;
font-weight: 700;
color: var(--zoho-text);
min-width: 44px;
font-variant-numeric: tabular-nums;
}
.zdash-row-label {
flex: 1;
font-size: 13px;
color: var(--zoho-text);
}
.zdash-row-arrow {
color: var(--zoho-text-muted);
font-size: 16px;
transition: transform 0.15s ease, color 0.15s ease;
}
.zdash-row:hover .zdash-row-arrow { transform: translateX(3px); color: var(--zoho-primary); }
/* ------------------------------------------------------------
15. Empty / blank list state — Zoho "no records" panels
------------------------------------------------------------ */
.empty-state {
text-align: center;
padding: 56px 24px;
}
.empty-state-icon {
width: 56px;
height: 56px;
margin: 0 auto 16px;
border-radius: 50%;
background: linear-gradient(155deg, #eef2ff 0%, #e3ebff 100%);
color: var(--zoho-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.empty-state-title {
font-size: 20px;
font-weight: 400;
color: var(--zoho-text);
margin-bottom: 6px;
}
.empty-state-hint {
font-size: 13px;
color: var(--zoho-text-secondary);
margin-bottom: 18px;
}
/* ------------------------------------------------------------
16. Filter button + right-side offcanvas (FilterOffcanvas.tsx)
------------------------------------------------------------ */
.filter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0.4rem 0.8rem !important;
position: relative;
}
.filter-btn i { font-size: 13px; }
.filter-btn-active { border-color: var(--zoho-primary) !important; color: var(--zoho-primary) !important; background: #fff !important; }
.filter-btn-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--zoho-primary);
position: absolute;
top: 4px;
right: 4px;
animation: zfilter-dot-pulse 2s ease-in-out infinite;
}
@keyframes zfilter-dot-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(64, 141, 251, 0.45); }
50% { box-shadow: 0 0 0 4px rgba(64, 141, 251, 0); }
}
@media (prefers-reduced-motion: reduce) {
.filter-btn-dot { animation: none; }
}
.zoffcanvas-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--zoho-modal-backdrop);
opacity: 0;
visibility: hidden;
z-index: 1080;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.zoffcanvas-backdrop.show { opacity: 0.6; visibility: visible; }
.zoffcanvas {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 380px;
max-width: 92vw;
background: #fff;
z-index: 1081;
transform: translateX(100%);
transition: transform 0.25s ease;
display: flex;
flex-direction: column;
border-left: 1px solid var(--zoho-border);
box-shadow: -6px 0 24px rgba(0, 0, 0, 0.14);
font-family: var(--zoho-font);
}
.zoffcanvas.open { transform: translateX(0); }
.zoffcanvas-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: var(--zoho-surface-header);
border-bottom: 1px solid #eee;
}
.zoffcanvas-title { font-size: 17px; font-weight: 500; color: #212529; }
.zoffcanvas-close {
border: 0;
background: transparent;
font-size: 16px;
color: var(--zoho-text);
padding: 4px;
line-height: 1;
}
.zoffcanvas-body {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.zoffcanvas-body .form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.zoffcanvas-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 20px;
border-top: 1px solid #eee;
background: #fff;
}
.zoffcanvas-foot .btn { min-width: 90px; }
/* Zoho-style list header bar: title on the left, actions on the right */
.zpage-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
min-height: 34px;
}
.zpage-head-title {
font-size: 19px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--zoho-text);
}
.zpage-head-actions {
display: flex;
align-items: center;
gap: 8px;
}
/* Auth (login / home) page logo */
.ibps-login img[alt='logo'],
.ibps-login img[alt='Atha Group'] {
max-width: 220px;
max-height: 80px;
object-fit: contain;
}
/* ------------------------------------------------------------
17. Responsive — laptop / tablet list screens
------------------------------------------------------------ */
@media (max-width: 1366px) {
.card .card-body { padding: 18px; }
table.dataTable thead th { padding-left: 14px; }
table.dataTable tbody td { padding-left: 14px; }
}
@media (max-width: 1199.98px) {
.zpage-head { flex-wrap: wrap; }
.zpage-head-actions { margin-left: auto; }
}
@media (max-width: 991.98px) {
.card .card-body { padding-left: 14px; padding-right: 14px; }
}
/* ------------------------------------------------------------
17b. Responsive — sidebar becomes a slide-in overlay drawer below
the lg breakpoint, main-panel/bill-details reflow to full width
------------------------------------------------------------ */
@media (max-width: 991.98px) {
/* Fixed, off-screen by default, slides in over the content instead of pushing it — toggled by
the hamburger button (Layout.tsx) via the `sidebar-mobile-open` class. There's no hover on a
touch device, so the desktop icon-only rail + hover-flyout doesn't apply here at all: force
it to always render at full width with labels visible (same look as the desktop pinned
state), regardless of the `sidebar-icon-only`/pinned class that's driving desktop behaviour. */
.sidebar {
position: fixed;
top: var(--zoho-topband-height);
left: -280px;
width: 280px !important;
height: calc(100vh - var(--zoho-topband-height));
z-index: 1085;
transition: left 0.25s ease;
}
.sidebar.sidebar-mobile-open { left: 0; }
@media (prefers-reduced-motion: reduce) {
.sidebar { transition: none; }
}
/* Pin/hover-expand is a desktop-only distinction (the drawer is just open or closed here). */
.sidebar-pin-toggle { display: none; }
/* Undo icon-only's 44px square tiles + hidden labels so the drawer looks like the normal
expanded rail no matter which mode desktop last left it in (see the base selectors this
mirrors at zoho-books.css:410 and :582-597). */
.sidebar-icon-only .sidebar .nav:not(.sub-menu) { padding-left: 12px; padding-right: 12px; }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
width: auto;
height: auto;
padding: 11px 14px;
min-height: 44px;
margin: 0;
justify-content: flex-start;
}
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .menu-title,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .menu-arrow,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .badge { display: flex !important; }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link i.menu-icon,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link > svg.menu-icon,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link > svg:first-child { margin-right: 0.85rem; }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item.active::before { display: none; }
/* The sidebar is an overlay now, not a column — main-panel/navbar stop tracking its width. */
.main-panel { width: 100% !important; margin-left: 0 !important; }
.navbar .navbar-brand-wrapper { width: 64px !important; }
.navbar .navbar-menu-wrapper { width: calc(100% - 64px) !important; }
/* Bill Details — .zbill-split's own flex-wrap already stacks the list above the detail panel
below this width; it just needs to stop capping itself to the desktop rail width once it's
the only thing on its row, and its internal scroll shouldn't dominate the viewport. */
.zbill-list { max-width: none; }
.zbill-list-rows { max-height: 42vh; }
}
@media (max-width: 640px) {
.zbill-detail .card-body { padding: 16px; }
.zbill-amount-panel { padding: 12px 14px; }
.zdash-hello { padding: 16px 18px; }
}
/* ------------------------------------------------------------
18. Flat list pages — card-less table directly under zpage-head
(2026-09-27: master/list screens no longer wrap their table in
.card/.card-body, matching Zoho Books' "All Items" list look)
------------------------------------------------------------ */
.content-wrapper > .zpage-head + .table-responsive,
.content-wrapper > .zpage-head ~ .table-responsive:first-of-type {
border-top: 1px solid var(--zoho-border);
}
.content-wrapper > .table-responsive {
margin-bottom: 0;
}
.content-wrapper > .table-responsive + .table-responsive {
margin-top: 18px;
border-top: 1px solid var(--zoho-border);
padding-top: 18px;
}
/* ------------------------------------------------------------
19. Payment activity log — ActivityLogPanel.tsx
(timeline opened from the "#" cell on the payment lists, plus the
standalone /activity-log route). `.alog-*` prefixed so it can't
collide with anything else; no ancestor scope, because the same
panel renders both inside the Modal body and inside the standalone
page's .card-body. Supersedes the bare `.activity-timeline` rules
that used to live in src/App.css — those classes had NO styling at
all before this section, which is why the log read as raw HTML.
------------------------------------------------------------ */
/* Star Admin's `style.css:23754` sets `.modal-body { padding: 35px 26px }` through a 4-class
selector that beats this file's own `.modal-body { padding: 20px }` (§10), so every modal
really gets 35px of top padding. Inside the activity-log modal that just reads as dead space
under the header — win the specificity war for this panel only, leaving the other modals
exactly as they are today. */
.modal .modal-dialog .modal-content .modal-body:has(.alog-toolbar), .modal .modal-dialog .modal-content .modal-body:has(.alog-summary), .modal .modal-dialog .modal-content .modal-body:has(.alog-section-head) {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
/* Context strip — org + payment id + entry count chips */
.alog-context {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.alog-context-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid var(--zoho-border);
border-radius: 999px;
background: var(--zoho-surface-header);
color: var(--zoho-text-secondary);
font-size: 12px;
line-height: 1.4;
max-width: 100%;
}
.alog-context-chip svg { color: var(--zoho-text-muted); flex: none; }
.alog-context-chip b {
color: var(--zoho-text);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.alog-context-chip-id { background: #ebf3fe; border-color: #d8e4fb; color: #1c5bd9; }
.alog-context-chip-id svg { color: #408dfb; }
.alog-context-chip-count { background: #e8f7f1; border-color: #b6f6dc; color: #127a51; font-weight: 600; }
/* Toolbar — search + Load + Download PDF + Print on one tinted bar */
.alog-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 12px;
background: var(--zoho-surface-header);
border: 1px solid var(--zoho-border);
border-radius: 8px;
margin-bottom: 4px;
}
.alog-search {
position: relative;
flex: 1 1 200px;
min-width: 170px;
display: flex;
align-items: center;
}
.alog-search-icon {
position: absolute;
left: 10px;
color: var(--zoho-text-muted);
pointer-events: none;
}
.alog-search .form-control {
width: 100%;
padding-left: 32px;
}
.alog-btn {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
flex: none;
}
.alog-btn:disabled { opacity: 0.55; }
.alog-spin { animation: alog-spin 0.8s linear infinite; }
@keyframes alog-spin { to { transform: rotate(360deg); } }
/* Section head above the timeline */
.alog-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 18px 0 12px;
}
.alog-section-head .alog-section-title {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--zoho-text-secondary);
}
.alog-section-head .alog-section-title svg { color: var(--zoho-primary); }
.alog-section-count {
padding: 2.5px 10px;
border: 1px solid var(--zoho-border);
border-radius: 999px;
background: var(--zoho-surface-header);
color: var(--zoho-text-muted);
font-size: 11.5px;
font-variant-numeric: tabular-nums;
}
/* Timeline — left connector + tone dot + card per entry */
.alog-timeline {
list-style: none;
margin: 0;
padding: 0;
}
.alog-item {
position: relative;
padding: 0 0 14px 34px;
}
.alog-item::after { /* connector segment, hidden after the last entry */
content: '';
position: absolute;
left: 14px;
top: 28px;
bottom: 2px;
width: 2px;
background: var(--zoho-border);
border-radius: 2px;
}
.alog-item:last-child::after { display: none; }
.alog-dot {
position: absolute;
left: 8px;
top: 17px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--zoho-text-muted);
box-shadow: 0 0 0 3px #fff;
z-index: 1;
}
.alog-item-success .alog-dot { background: var(--zoho-success); }
.alog-item-danger .alog-dot { background: var(--zoho-danger); }
.alog-item-info .alog-dot { background: var(--zoho-primary); }
.alog-card {
display: flex;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
animation: alog-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: var(--alog-delay, 0ms);
}
.alog-card:hover {
border-color: #dcdcf0;
box-shadow: 0 6px 18px -8px rgba(23, 28, 46, 0.28);
transform: translateY(-1px);
}
@keyframes alog-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.alog-card { animation: none; }
.alog-card:hover { transform: none; }
.alog-spin, .alog-skel-avatar, .alog-skel-line { animation: none; }
}
.alog-avatar {
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: #1c5bd9;
background: #ebf3fe;
border: 1px solid #d8e4fb;
}
.alog-avatar-success { color: #127a51; background: #e8f7f1; border-color: #b6f6dc; }
.alog-avatar-danger { color: #b2343c; background: #feedee; border-color: #fad7d9; }
.alog-avatar-default { color: #5a5f7a; background: #f1f1fa; border-color: #e2e2f2; }
.alog-body { flex: 1; min-width: 0; }
.alog-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.alog-name {
font-size: 13.5px;
font-weight: 600;
color: var(--zoho-text);
overflow-wrap: anywhere;
}
.alog-time {
margin-left: auto;
font-size: 11.5px;
color: var(--zoho-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Action pill — keyword-toned, purely presentational */
.alog-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2.5px 9px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.alog-pill-success { background: #e8f7f1; border-color: #b6f6dc; color: #127a51; }
.alog-pill-danger { background: #feedee; border-color: #fad7d9; color: #b2343c; }
.alog-pill-info { background: #ebf3fe; border-color: #d8e4fb; color: #1c5bd9; }
.alog-pill-default { background: #f1f1fa; border-color: #e2e2f2; color: #5a5f7a; }
/* Meta chips — level / amount / sent-to / bank / pay mode */
.alog-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 9px;
}
.alog-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border: 1px solid var(--zoho-border);
border-radius: 6px;
background: var(--zoho-surface-header);
color: var(--zoho-text-secondary);
font-size: 12px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.alog-chip svg { color: var(--zoho-text-muted); flex: none; }
.alog-chip-amount {
background: #f1f9f5;
border-color: #cdeee0;
color: #127a51;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.alog-chip-amount svg { color: #22b378; }
/* Remarks — soft quote block (primary accent) + muted follow-up comment */
.alog-remarks {
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 9px;
padding: 8px 10px;
background: var(--zoho-surface-header);
border-left: 3px solid var(--zoho-primary);
border-radius: 0 6px 6px 0;
font-size: 12.5px;
line-height: 1.55;
color: var(--zoho-text);
overflow-wrap: anywhere;
}
.alog-remarks > svg { flex: none; margin-top: 2px; color: var(--zoho-primary); }
.alog-remarks-muted {
display: block;
margin-top: 6px;
background: #fcfcfd;
border-left-color: var(--zoho-border);
color: var(--zoho-text-muted);
font-size: 12px;
}
/* Loading skeleton (shown while busy) */
.alog-skel-dot,
.alog-skel-avatar,
.alog-skel-line {
background: linear-gradient(90deg, #eeeef4 25%, #f7f7fb 37%, #eeeef4 63%);
background-size: 400% 100%;
animation: alog-shimmer 1.3s ease-in-out infinite;
}
@keyframes alog-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
.alog-skel-line {
height: 10px;
border-radius: 5px;
margin-top: 8px;
}
.alog-skel-line-lg { width: 42%; margin-top: 3px; }
.alog-skel-line-sm { width: 68%; }
/* Empty state */
.alog-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
padding: 34px 18px;
background: #fbfbfe;
border: 1px dashed var(--zoho-border);
border-radius: 10px;
}
.alog-empty-icon {
width: 52px;
height: 52px;
margin-bottom: 5px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f1f1fa;
color: #5a5f7a;
}
.alog-empty-title { font-size: 14px; font-weight: 600; color: var(--zoho-text); }
.alog-empty-hint { font-size: 12.5px; color: var(--zoho-text-muted); max-width: 360px; }
/* ------------------------------------------------------------
20. Shared themed Dropdown (.z-select) + right-side detail drawer
(.zsidepanel) — Dropdown.tsx / SidePanel.tsx.
Replaces raw `.form-control` s (which render the browser
arrow, misaligned with the Zoho look) and the legacy centered
`.popupContent` overlays. Covers the Bills screens; other modules
adopt the same components for parity.
------------------------------------------------------------ */
/* Form field that wraps a labelled Dropdown (rendered by Dropdown.tsx
when a `label` is passed) — mirrors `.form-grid > label` styling. */
.z-field {
display: block;
font-family: var(--zoho-font);
font-size: var(--zoho-font-size);
font-weight: 400;
color: var(--zoho-text);
margin-bottom: 0.35rem;
}
.z-field .text-danger { color: #d6141d; }
.z-select {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-width: 0;
}
.z-select select {
appearance: none;
-webkit-appearance: none;
font-family: var(--zoho-font);
font-size: var(--zoho-font-size);
font-weight: 500;
color: #212529;
/* Pure white, not the near-identical #fbfbfe this used to be — that off-white was so close to
the disabled-state grey (#f9f9fb) that an enabled, simply-unselected dropdown read as
disabled at a glance. */
background-color: #fff;
border: 1.5px solid var(--zoho-input-border);
border-radius: 9px;
height: var(--zoho-control-height);
padding: 0 34px 0 12px;
width: 100%;
min-width: 0;
cursor: pointer;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.z-select select:hover:not(:disabled) {
border-color: #b7c6f2;
background-color: #fff;
}
.z-select select:focus-visible {
outline: none;
border-color: var(--zoho-primary) !important;
background-color: #fff;
box-shadow: 0 0 0 4px rgba(64, 141, 251, 0.14) !important;
}
.z-select select:disabled { color: var(--zoho-text-muted); }
.z-select select option { color: #212529; font-weight: 500; }
.z-select-chevron {
position: absolute;
right: 8px;
padding: 4px;
border-radius: 7px;
background: #eef2ff;
color: var(--zoho-primary);
pointer-events: none;
flex: none;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;
}
.z-select:hover .z-select-chevron { background: #e2e9ff; }
.z-select:focus-within .z-select-chevron { transform: rotate(180deg); background: #dce6ff; }
.z-select-sm select {
height: 30px;
font-size: 12.5px;
padding: 0 28px 0 10px;
}
.z-select-sm .z-select-chevron { right: 6px; padding: 3px; }
.z-select-lg select {
height: 42px;
font-size: 15px;
padding: 0 38px 0 14px;
}
.z-select-lg .z-select-chevron { right: 9px; padding: 5px; }
.z-select-disabled select { background-color: #f9f9fb; cursor: not-allowed; }
.z-select-disabled .z-select-chevron { opacity: 0.55; }
/* Inline variant for the DataTable "Show [n] entries" toolbar select (Dropdown inside the
`dataTables_length` label) — block `.z-select` would split "Show … entries" onto its own line. */
.dataTables_wrapper .dataTables_length .z-select {
display: inline-flex;
width: auto;
min-width: 68px;
vertical-align: middle;
margin: 0 2px;
}
/* Side panel drawer — like .zoffcanvas but full-height content panel */
.zsidepanel-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--zoho-modal-backdrop);
opacity: 0;
visibility: hidden;
z-index: 1090;
transition: opacity 0.22s ease, visibility 0.22s ease;
}
.zsidepanel-backdrop.show { opacity: 0.6; visibility: visible; }
.zsidepanel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
background: #fff;
border-left: 1px solid var(--zoho-border);
box-shadow: -8px 0 30px rgba(23, 28, 46, 0.18);
z-index: 1091;
transform: translateX(105%);
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
font-family: var(--zoho-font);
width: 720px;
max-width: 96vw;
}
.zsidepanel-sm { width: 460px; }
.zsidepanel-lg { width: 900px; }
.zsidepanel-xl { width: 1030px; max-width: 97vw; }
.zsidepanel.open { transform: translateX(0); }
.zsidepanel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 20px;
background: var(--zoho-surface-header);
border-bottom: 1px solid #eee;
flex: none;
}
.zsidepanel-title {
font-size: 17px;
font-weight: 600;
color: #212529;
overflow-wrap: anywhere;
}
.zsidepanel-close {
border: 0;
background: transparent;
color: var(--zoho-text);
padding: 4px;
line-height: 1;
border-radius: 6px;
flex: none;
transition: background 0.15s ease;
}
.zsidepanel-close:hover { background: #eef1f6; }
.zsidepanel-body {
flex: 1;
overflow-y: auto;
padding: 20px;
overscroll-behavior: contain;
}
.zsidepanel-body .form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.zsidepanel-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 20px;
border-top: 1px solid #eee;
background: #fff;
flex: none;
}
.zsidepanel-foot .btn { min-width: 90px; }
/* A drawer opened from inside another (Activity Log over a payment detail) renders later in the DOM; make
its backdrop and panel sit above the first pair explicitly instead of relying on DOM order alone. */
.zsidepanel ~ .zsidepanel-backdrop { z-index: 1092; }
.zsidepanel ~ .zsidepanel-backdrop ~ .zsidepanel { z-index: 1093; }
/* Full-row click-to-detail hint on the RDT lists (DataTableChrome onRowClicked) */
.dt-row-clickable .rdt_TableRow { cursor: pointer; }
/* Mobile — side panel takes the full viewport, toolbar wraps */
@media (max-width: 767.98px) {
.zsidepanel, .zsidepanel-sm, .zsidepanel-lg, .zsidepanel-xl {
width: 100vw;
max-width: 100vw;
}
.zsidepanel-title { font-size: 16px; }
.dt-toolbar { flex-wrap: wrap; row-gap: 10px; }
.dataTables_filter { order: -1; width: 100%; }
.dataTables_length, .dataTables_filter label { width: 100%; }
.dataTables_length select { flex: 1; }
.rdt_pagination { flex-wrap: wrap; gap: 6px; }
.rdt_pagination .rdt_paginationTotalPages, .rdt_pagination .rdt_paginationRange { display: none; }
/* Wide RDT tables scroll sideways on phones instead of collapsing */
.dt-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dt-scroll-x .rdt_Table { min-width: 920px; }
}
/* ------------------------------------------------------------
21. App-wide branded loader (Loader.tsx) — bare IBPS "typing wave"
(no card/background), used both full-page (auth-callback redirects,
an initial fetch with nothing else on screen yet) and inline within
a section of an already-visible page (.ibps-loader-wrap-inline).
------------------------------------------------------------ */
.ibps-loader-wrap {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 22px;
background: transparent;
}
/* Inline: no forced full-viewport height, just breathing room within whatever section it sits
in (e.g. a stats row that's still loading, under a header that's already rendered). */
.ibps-loader-wrap-inline { min-height: 0; padding: 32px 0; }
/* No card/glassmorphism wrapper — just the four blocks, centred. */
.ibps-loader {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.ibps-loader-block {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: #fff;
font-family: var(--zoho-font);
font-size: 17px;
font-weight: 700;
opacity: 0.35;
transform: translateY(0) scale(0.9);
animation: ibps-loader-wave 1.4s ease-in-out infinite;
}
.ibps-loader-i { background: #e32227; animation-delay: 0s; --ibps-loader-shadow: rgba(227, 34, 39, 0.55); }
.ibps-loader-b { background: #1f9c4f; animation-delay: 0.15s; --ibps-loader-shadow: rgba(31, 156, 79, 0.55); }
.ibps-loader-p { background: #0063d1; animation-delay: 0.3s; --ibps-loader-shadow: rgba(0, 99, 209, 0.55); }
.ibps-loader-s { background: #fdb900; animation-delay: 0.45s; --ibps-loader-shadow: rgba(253, 185, 0, 0.55); }
@keyframes ibps-loader-wave {
0%, 60%, 100% { transform: translateY(0) scale(0.9); opacity: 0.35; box-shadow: 0 0 0 transparent; }
30% { transform: translateY(-12px) scale(1.1); opacity: 1; box-shadow: 0 8px 16px var(--ibps-loader-shadow); }
}
.ibps-loader-text { color: var(--zoho-text-secondary); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) {
.ibps-loader-block { animation: none; opacity: 0.9; transform: none; }
}
/* ------------------------------------------------------------
22. Searchable combobox (SearchableDropdown.tsx) + the Vendor
Advance initiate screen's two-pane layout (InitiateVendorAdvancePage.tsx)
------------------------------------------------------------ */
/* --- Searchable combobox -----------------------------------
Same footprint as `.z-select`, but the trigger is a button and the
popup is a filter-as-you-type list. Reuse it anywhere an option list
can get long (vendors, branches, banks, chart of accounts…). */
.zsd {
position: relative;
display: block;
width: 100%;
min-width: 0;
}
.zsd-trigger {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
height: var(--zoho-control-height);
padding: 0 8px 0 10px;
/* Pure white, not the near-identical #fbfbfe this used to be — that off-white was so close to
the disabled-state grey (#f9f9fb) that an enabled, simply-unselected dropdown read as
disabled at a glance. */
background-color: #fff;
border: 1.5px solid var(--zoho-input-border);
border-radius: 9px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.zsd-trigger:hover { border-color: #b7c6f2; background-color: #fff; }
.zsd-trigger:focus-within,
.zsd-open .zsd-trigger {
border-color: var(--zoho-primary) !important;
background-color: #fff;
box-shadow: 0 0 0 4px rgba(64, 141, 251, 0.14) !important;
}
.zsd-trigger-search-icon { flex: none; color: var(--zoho-primary); opacity: 0.6; }
.zsd-open .zsd-trigger-search-icon { opacity: 1; }
.zsd-trigger-input {
flex: 1;
min-width: 0;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0;
font-family: var(--zoho-font);
font-size: var(--zoho-font-size);
font-weight: 500;
color: #212529;
cursor: pointer;
}
.zsd-open .zsd-trigger-input { cursor: text; }
.zsd-trigger-input::placeholder { color: var(--zoho-text-muted); font-weight: 400; }
.zsd-chevron {
flex: none;
padding: 4px;
border-radius: 7px;
background: #eef2ff;
color: var(--zoho-primary);
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;
}
.zsd-trigger:hover .zsd-chevron { background: #e2e9ff; }
.zsd-open .zsd-chevron { transform: rotate(180deg); background: #dce6ff; }
.zsd-disabled .zsd-trigger { background-color: #f9f9fb !important; }
.zsd-disabled .zsd-trigger-input { color: var(--zoho-text-muted); cursor: not-allowed; }
.zsd-disabled .zsd-chevron { opacity: 0.55; }
.zsd-sm .zsd-trigger { height: 30px; font-size: 12.5px; padding: 0 6px 0 8px; }
.zsd-sm .zsd-trigger-input { font-size: 12.5px; }
.zsd-sm .zsd-chevron { padding: 3px; }
.zsd-lg .zsd-trigger { height: 42px; font-size: 15px; padding: 0 9px 0 12px; }
.zsd-lg .zsd-trigger-input { font-size: 15px; }
.zsd-lg .zsd-chevron { padding: 5px; }
/* Position (`top`/`left`/`min-width`) comes from inline styles — SearchableDropdown.tsx portals
this to `document.body` and measures the trigger itself, so it can't be clipped by an
ancestor's `overflow: hidden` (several call sites sit inside cards that clip). */
.zsd-pop {
width: max-content;
max-width: min(420px, 92vw);
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.06), 0 20px 44px -18px rgba(23, 28, 46, 0.38);
z-index: 1200;
overflow: hidden;
animation: zsd-pop-in 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.zsd-pop.zsd-pop-up { animation: zsd-pop-in-up 0.16s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes zsd-pop-in {
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes zsd-pop-in-up {
from { opacity: 0; transform: translateY(6px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .zsd-pop, .zsd-pop.zsd-pop-up { animation: none; } }
.zsd-list {
list-style: none;
margin: 0;
padding: 4px;
max-height: 264px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge/IE */
}
.zsd-list::-webkit-scrollbar {
display: none; /* Chrome/Safari/Edge (Chromium) */
}
.zsd-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin: 1px 0;
border-radius: 8px;
font-size: 12.5px;
color: var(--zoho-text);
cursor: pointer;
transition: background-color 0.12s ease, transform 0.12s ease, padding-left 0.12s ease;
}
.zsd-option-selected { font-weight: 600; background: #eef4ff; color: var(--zoho-primary-dark); }
.zsd-option-active { background: var(--zoho-row-hover); padding-left: 13px; }
.zsd-option-selected.zsd-option-active { background: #e2ebff; }
.zsd-option:active { transform: scale(0.98); }
@keyframes zsd-check-pop {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.zsd-option-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zsd-option-check {
flex: none;
border-radius: 50%;
background: var(--zoho-primary);
color: #fff;
padding: 2px;
animation: zsd-check-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zsd-mark {
background: rgba(64, 141, 251, 0.18);
color: var(--zoho-primary-dark);
border-radius: 2px;
padding: 0 1px;
}
.zsd-empty {
padding: 14px 8px;
text-align: center;
font-size: 12.5px;
color: var(--zoho-text-muted);
}
/* --- DatePicker.tsx — replaces the browser's native . */
.zva-balance {
display: inline-flex;
align-items: center;
max-width: 100%;
margin-top: 6px;
padding: 3px 9px;
font-size: 11.5px;
font-weight: 600;
color: var(--zoho-primary-dark);
background: rgba(64, 141, 251, 0.1);
border: 1px solid rgba(64, 141, 251, 0.28);
border-radius: 999px;
overflow-wrap: anywhere;
animation: zva-balance-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zva-balance-pop {
from { opacity: 0; transform: translateY(-3px) scale(0.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.zva-balance.zva-balance-error {
color: #b2343c;
background: rgba(247, 82, 90, 0.1);
border-color: rgba(247, 82, 90, 0.3);
}
.zva-submit { margin-top: 18px; }
.zva-submit .btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.zva-no-level {
display: block;
margin-bottom: 10px;
font-size: 12.5px;
line-height: 1.5;
}
/* Auto-calculated fields (GST Amount, Total Advance, TDS Amount, Advance Payable) — a distinct
tinted look instead of the generic disabled-grey `.form-control[readonly]`, so it reads as
"the app computed this for you" rather than "this field is broken/locked". */
.zva-form .form-control[readonly] {
background-color: #f5f8ff;
border-color: rgba(64, 141, 251, 0.25);
color: var(--zoho-primary-dark);
font-weight: 700;
cursor: default;
}
/* Stack the panes on laptop/tablet widths (the summary no longer needs to be sticky once it
sits below the form). */
@media (max-width: 991.98px) {
.zva-form { flex: 1 1 100%; }
.zva-summary { position: static; flex: 1 1 100%; min-width: 0; }
}
/* Middle ground between the old ultra-compact mode (icon tiles hidden entirely, 8-14px
paddings — looked cramped) and the fully roomy defaults (needed a scroll to see the submit
button on a normal laptop screen, for a form with this little content). Keeps the KPI cards'
icon tiles and normal-size banner text (that's what actually fixed "looks small"), just
trims the vertical rhythm — section dividers, field spacing, card padding — enough to fit a
typical ~900-950px laptop viewport without scrolling. */
.zdash-compact .zdash-hello { padding: 14px 22px; margin-bottom: 14px; }
.zdash-compact .zdash-stats { gap: 12px; margin-bottom: 14px; }
.zdash-compact .zdash-stat { padding: 13px 16px 11px; }
.zdash-compact .zdash-stat-icon-tile { width: 28px; height: 28px; margin-bottom: 8px; }
.zdash-compact .zdash-stat-value { font-size: clamp(17px, 1.8vw, 24px); margin-bottom: 2px; }
/* Bill Details, same "fit a laptop viewport without scrolling" goal as the Vendor Advance rules
above — tighter list/detail card padding, form gaps and button height now that the page is
just banner + list/detail split (no stat-card row). */
.zdash-compact .zbill-list-head { padding: 12px 16px; }
.zdash-compact .zbill-list-search { margin: 0 16px 10px; height: 34px; }
.zdash-compact .zbill-list-rows { gap: 4px; }
.zdash-compact .zbill-list-row { padding: 9px 10px; gap: 10px; }
.zdash-compact .zbill-list-row-icon { width: 32px; height: 32px; }
.zdash-compact .zbill-detail .card-body { padding: 16px 20px 18px; }
.zdash-compact .zbill-detail-head { padding: 12px 18px; }
.zdash-compact .zbill-detail-facts { margin-bottom: 10px; }
.zdash-compact .zbill-amount-panel { padding: 10px 14px; margin-bottom: 12px; }
.zdash-compact .zbill-amount-row { padding: 5px 0; }
.zdash-compact .zbill-detail-form { gap: 8px; }
.zdash-compact .zbill-detail-actions { margin-top: 12px; }
.zdash-compact .zbill-approve-btn { height: 40px; }
.zva-form .card-body { padding: 16px 22px; gap: 10px; }
.zva-form .form-group { margin-bottom: 8px; }
/* Fixed height (not just line-height) so a label with a nested tag (e.g. "Naration
(Maxlength:500 character)") can't render even 1-2px taller than a plain-text label ("Upload
File") next to it — any such difference pushes the shorter label's control down relative to
the other column's. overflow:hidden is a safety net in case a label ever wraps to 2 lines. */
.zva-form label {
display: block;
height: 18px;
margin-bottom: 4px;
line-height: 18px;
overflow: hidden;
}
/* Required fields (label has a `.text-danger` asterisk) — colour the whole label text red, not
just the asterisk, so a required field stands out at a glance while scanning the form. */
.zva-form label:has(.text-danger) { color: var(--zoho-danger); font-weight: 600; }
.zva-hint { margin-top: 3px; }
.zva-words { margin: 3px 0 4px; padding: 7px 10px; }
.zva-submit { margin-top: 12px; }/* ------------------------------------------------------------
14b. Dashboard revamp (pages/dashboard/*) - grid, widgets,
matrix, bars, settlement, tables, density toggle.
------------------------------------------------------------ */
/* 12-column grid so the asymmetrical widget rows are expressible
(the old auto-fit minmax() grids could only do equal cards). */
.zdash-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
align-items: start;
}
.zdash-col-12 { grid-column: span 12; }
.zdash-col-8 { grid-column: span 8; }
.zdash-col-6 { grid-column: span 6; }
.zdash-col-4 { grid-column: span 4; }
/* ---- Widget frame ---- */
.zdash-widget {
display: flex;
flex-direction: column;
min-width: 0;
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: var(--zoho-radius);
overflow: hidden;
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.03);
}
.zdash-widget-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px 10px;
border-bottom: 1px solid var(--zoho-divider);
}
.zdash-widget-title {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--zoho-text-secondary);
}
.zdash-widget-title svg { flex: none; color: var(--zoho-primary); }
.zdash-widget-meta { font-size: 12px; color: var(--zoho-text-muted); }
.zdash-widget-body { padding: 16px; flex: 1; }
.zdash-widget-empty { margin: 8px 0; color: var(--zoho-text-muted); font-size: 13px; }
.zdash-widget-loading { color: var(--zoho-text-muted); font-size: 13px; }
.zdash-widget-error { margin: 8px 0; color: #c0392b; font-size: 13px; }
.zdash-widget-meta-count { font-weight: 600; color: var(--zoho-primary-dark); }
.zdash-widget-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.zdash-select {
height: 28px;
padding: 0 26px 0 8px;
font-size: 12px;
color: var(--zoho-text);
background-color: #fff;
border: 1px solid var(--zoho-input-border);
border-radius: var(--zoho-radius-input);
}
.zdash-select:focus { outline: 2px solid rgba(64, 141, 251, 0.35); outline-offset: 0; border-color: var(--zoho-primary); }
.zdash-input {
height: 30px;
padding: 0 10px;
font-size: 13px;
color: var(--zoho-text);
background-color: #fff;
border: 1px solid var(--zoho-input-border);
border-radius: var(--zoho-radius-input);
}
.zdash-input:focus { outline: 2px solid rgba(64, 141, 251, 0.35); outline-offset: 0; border-color: var(--zoho-primary); }
.zdash-input::placeholder { color: var(--zoho-text-muted); }
/* ---- KPI cards: money + hint line (extends the existing .zdash-stat vocabulary) ---- */
.zdash-stat-danger {
background: #fff;
background-image: linear-gradient(to top, rgba(247, 82, 90, 0.08), transparent 55%);
border-color: rgba(247, 82, 90, 0.35) !important;
}
.zdash-stat-danger .zdash-stat-icon-tile { background: rgba(247, 82, 90, 0.14); color: #c0392b; }
.zdash-stat-danger .zdash-stat-value { color: #c0392b; }
.zdash-stat-info .zdash-stat-icon-tile { background: rgba(64, 141, 251, 0.12); color: var(--zoho-primary-dark); }
.zdash-stat-info .zdash-stat-value { color: var(--zoho-primary-dark); }
.zdash-stat-inert { cursor: default; }
.zdash-stat-inert:hover { transform: none !important; border-color: var(--zoho-border) !important; }
.zdash-stat-inert:hover::after { opacity: 0; }
.zdash-stat-hint {
font-size: 12px;
color: var(--zoho-text-muted);
overflow-wrap: break-word;
margin-top: 2px;
}
.zdash-stat-success .zdash-stat-hint { }
/* ---- Workflow x status matrix ---- */
.zdash-mx { width: 100%; }
.zdash-mx-head,
.zdash-mx-row {
display: grid;
grid-template-columns: minmax(140px, 1.4fr) repeat(4, minmax(74px, 1fr));
align-items: center;
gap: 4px;
}
.zdash-mx-head {
padding: 2px 12px 8px;
font-size: 11px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--zoho-text-muted);
}
.zdash-mx-row { padding: 0 12px; }
.zdash-mx-row + .zdash-mx-row { border-top: 1px solid var(--zoho-divider); }
.zdash-mx-name {
padding: 10px 4px 10px 0;
font-size: 13px;
font-weight: 600;
color: var(--zoho-text);
overflow-wrap: anywhere;
}
.zdash-mx-cell {
display: flex;
flex-direction: column;
gap: 2px;
padding: 9px 8px;
text-align: right;
border-radius: 8px;
color: var(--zoho-text);
text-decoration: none;
transition: background 0.15s ease;
}
a.zdash-mx-cell:hover { background: var(--zoho-row-hover); }
.zdash-mx-cell-zero { opacity: 0.45; }
.zdash-mx-num { font-weight: 700; font-size: 15px; line-height: 1.2; color: inherit; }
.zdash-mx-cash { font-size: 11px; color: var(--zoho-text-muted); }
.zdash-mx-cell-primary .zdash-mx-num { color: var(--zoho-primary-dark); }
.zdash-mx-cell-success .zdash-mx-num { color: #127a4e; }
.zdash-mx-cell-warning .zdash-mx-num { color: #c2650a; }
.zdash-mx-cell-info .zdash-mx-num { color: #1f6feb; }
.zdash-mx-cell-muted .zdash-mx-num { color: var(--zoho-text-secondary); }
/* ---- CSS-only bar lists (ageing / pipeline / breakdown) ----
Width is value- or count-share; fills use the full-sat tokens
because they are graphics, not text. */
.zdash-bars { display: flex; flex-direction: column; gap: 13px; }
.zdash-bar-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 4px;
}
.zdash-bar-label { font-size: 13px; font-weight: 500; color: var(--zoho-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zdash-bar-value { font-size: 12px; color: var(--zoho-text-muted); white-space: nowrap; }
.zdash-bar-track { height: 7px; background: var(--zoho-surface-header); border-radius: 4px; overflow: hidden; }
.zdash-bar-fill { height: 100%; border-radius: 4px; min-width: 2px; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.zdash-bar-tone-0 { background: var(--zoho-primary); }
.zdash-bar-tone-1 { background: var(--zoho-success); }
.zdash-bar-tone-2 { background: #fd9134; }
.zdash-bar-tone-3 { background: var(--zoho-danger); }
.zdash-bar-tone-4 { background: var(--zoho-info); }
.zdash-bar-tone-5 { background: var(--zoho-text-muted); }
/* ---- Pipeline level chip ---- */
.zdash-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 1px 7px;
border-radius: 999px;
background: var(--zoho-surface-header);
border: 1px solid var(--zoho-input-border);
font-size: 12px;
font-weight: 600;
color: var(--zoho-text);
}
/* ---- Settlement health chips ---- */
.zdash-settle {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
gap: 10px;
}
.zdash-settle-chip {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 2px 10px;
padding: 10px 12px;
background: var(--zoho-surface-header);
border: 1px solid var(--zoho-border);
border-radius: 8px;
border-left-width: 3px;
}
.zdash-settle-chip-name { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--zoho-text); }
.zdash-settle-chip-bucket { font-size: 11px; color: var(--zoho-text-muted); }
.zdash-settle-chip-count { font-size: 15px; font-weight: 700; text-align: right; }
.zdash-settle-chip-value { font-size: 12px; color: var(--zoho-text-muted); text-align: right; }
.zdash-tone-success { border-left-color: var(--zoho-success); }
.zdash-tone-success .zdash-settle-chip-count { color: #127a4e; }
.zdash-tone-info { border-left-color: var(--zoho-info); }
.zdash-tone-info .zdash-settle-chip-count { color: #1f6feb; }
.zdash-tone-danger { border-left-color: var(--zoho-danger); }
.zdash-tone-danger .zdash-settle-chip-count { color: #c0392b; }
.zdash-tone-danger.zdash-table-row > span { color: #c0392b; }
.zdash-tone-warning { border-left-color: #fd9134; }
.zdash-tone-warning .zdash-settle-chip-count { color: #c2650a; }
.zdash-tone-muted { border-left-color: var(--zoho-text-muted); }
.zdash-tone-muted .zdash-settle-chip-count { color: var(--zoho-text-secondary); }
/* ---- Roll-up + payee queue tables ---- */
.zdash-table { min-width: 0; }
.zdash-table-head,
.zdash-table-row {
display: grid;
grid-template-columns: minmax(200px, 2fr) 90px 90px minmax(110px, 1fr) 80px 70px;
gap: 10px;
align-items: center;
}
.zdash-table-head {
padding: 0 12px 8px;
font-size: 11px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--zoho-text-muted);
}
.zdash-table-head span:nth-child(n+2),
.zdash-table-row span:nth-child(n+2) { text-align: right; }
.zdash-table-row {
padding: 10px 12px;
font-size: 13px;
color: var(--zoho-text);
border-top: 1px solid var(--zoho-divider);
}
.zdash-table-org { display: flex; flex-direction: column; min-width: 0; }
.zdash-table-org-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zdash-table-org-id { font-size: 11px; color: var(--zoho-text-muted); }
.zdash-table-cash { font-weight: 600; }
/* ---- Payee approval queue ---- */
.zdash-queue { display: block; text-decoration: none; }
.zdash-queue-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
}
.zdash-queue-row:hover { background: var(--zoho-row-hover); }
.zdash-queue-main { display: flex; flex-direction: column; min-width: 0; }
.zdash-queue-name { font-size: 13px; font-weight: 600; color: var(--zoho-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zdash-queue-meta { font-size: 12px; color: var(--zoho-text-muted); }
.zdash-queue-side { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--zoho-text-muted); flex: none; }
.zdash-queue-level {
background: var(--zoho-primary);
color: #fff;
padding: 1px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
.zdash-queue-all {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
padding: 10px 12px;
color: var(--zoho-link);
font-size: 13px;
font-weight: 600;
}
.zdash-queue-arrow { transition: transform 0.2s ease; }
.zdash-queue-all:hover .zdash-queue-arrow { transform: translateX(3px); }
.zdash-rollup-controls { margin-bottom: 10px; }
/* ---- GST / investment quick links ---- */
.zdash-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-top: 16px;
}
.zdash-link-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 10px;
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.03);
color: var(--zoho-text);
text-decoration: none;
}
.zdash-link-card:hover { border-color: var(--zoho-primary); }
.zdash-link-card > svg { flex: none; color: var(--zoho-primary); }
.zdash-link-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: none;
border-radius: 9px;
color: var(--zoho-primary-dark) !important;
background: var(--zoho-surface-header);
}
.zdash-link-card span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.zdash-link-card-title { font-size: 13px; font-weight: 600; }
.zdash-link-card-sub { font-size: 12px; color: var(--zoho-text-muted); }
/* ---- Header: badges, generation time, density toggle ---- */
.zdash-hello-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-bottom: 6px; }
.zdash-hello-badge {
font-size: 11px;
font-weight: 600;
color: var(--zoho-primary-dark);
background: rgba(64, 141, 251, 0.1);
border: 1px solid rgba(64, 141, 251, 0.25);
padding: 3px 8px;
border-radius: 999px;
}
.zdash-hello-generation { color: var(--zoho-text-muted); font-size: 12px; }
.zdash-density-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 12px;
color: var(--zoho-text-secondary);
background: transparent;
border: 1px solid var(--zoho-input-border);
border-radius: var(--zoho-radius-btn);
padding: 4px 10px;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.zdash-density-toggle:hover { border-color: var(--zoho-primary); }
.zdash-density-toggle-on { color: var(--zoho-primary-dark); border-color: rgba(64, 141, 251, 0.45); background: rgba(64, 141, 251, 0.06); }
/* ---- Density: compact (persisted toggle) ----
Kept a separate class from the old .zdash-compact so the two don't fight. */
.zdash-density-compact .zdash-hello { padding: 14px 22px; margin-bottom: 14px; }
.zdash-density-compact .zdash-stats { gap: 12px; margin-bottom: 14px; }
.zdash-density-compact .zdash-stat { padding: 13px 16px 11px; }
.zdash-density-compact .zdash-stat-icon-tile { width: 28px; height: 28px; }
.zdash-density-compact .zdash-stat-value { font-size: clamp(17px, 1.8vw, 24px); }
.zdash-density-compact .zdash-widget-body { padding: 12px 14px; }
.zdash-density-compact .zdash-widget-head { padding: 10px 14px 8px; }
.zdash-density-compact .zdash-bars { gap: 10px; }
/* ---- Responsive collapse ---- */
@media (max-width: 991.98px) {
.zdash-grid { grid-template-columns: 1fr; }
.zdash-col-12, .zdash-col-8, .zdash-col-6, .zdash-col-4 { grid-column: span 1; }
}
@media (max-width: 767.98px) {
.zdash-table { overflow-x: auto; }
.zdash-table-head,
.zdash-table-row { min-width: 620px; }
.zdash-mx-head,
.zdash-mx-row { grid-template-columns: minmax(120px, 1fr) repeat(4, minmax(68px, 1fr)); }
}
/* ============================================================
14c. Premium dashboard redesign (IBPS-Premium-Dashboard-Visual-Redesign)
Presentation-layer overrides on top of 14b. The legacy data, API
wiring, permissions and navigation are untouched; only the visual
language changes (palette, shell, cards, charts, no fake metrics).
Later in the file = same specificity wins, so the whole shell's
sizes keep animating without touching the 14b rules.
------------------------------------------------------------
Palette: Inter; canvas #F5F7FB; white cards; primary #408DFB;
success #16A36A; warning #D9822B; danger #D94A55; text #171A24;
16px card radius; subtle shadows; 12-col grid; 18px gaps.
============================================================ */
/* ---- Shell tokens (overridden once, later in file) ---- */
:root {
--zoho-topband-height: 64px;
--zoho-topband-bg: #202538;
--zoho-sidebar-bg: #F8F9FC;
--zoho-sidebar-border: #E8EBF1;
--zoho-dashboard-bg: #F5F7FB;
}
/* ---- Premium shell: 64px dark top band, 248px light sidebar ---- */
.navbar { background: #fff; }
.navbar.fixed-top { border-bottom: 1px solid var(--zoho-sidebar-border); }
.navbar .navbar-brand-wrapper { width: 248px; border-right: 1px solid #1a1e2e; }
.navbar .navbar-menu-wrapper { width: calc(100% - 248px); }
.sidebar {
width: 248px;
background: #F8F9FC;
border-right: 1px solid var(--zoho-sidebar-border);
box-shadow: none;
}
.sidebar .nav:not(.sub-menu) { padding: 10px 14px 64px; }
.sidebar .nav:not(.sub-menu) > .nav-item { margin-bottom: 4px; }
/* Item pills */
body:not(.sidebar-icon-only) .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
position: relative;
min-height: 44px;
padding: 11px 14px;
border-radius: 10px;
font-weight: 500;
color: var(--zoho-sidebar-color);
}
body:not(.sidebar-icon-only) .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link:hover {
background: #EEF1F7;
color: var(--zoho-sidebar-color);
}
/* Active = light primary tint + 3px left indicator (expanded rail only) */
body:not(.sidebar-icon-only) .sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link {
background: rgba(64, 141, 251, 0.06);
}
body:not(.sidebar-icon-only) .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link.active {
background: rgba(64, 141, 251, 0.10);
color: var(--zoho-primary-dark);
}
body:not(.sidebar-icon-only) .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link::before {
content: '';
position: absolute;
left: -14px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 20px;
border-radius: 0 3px 3px 0;
background: transparent;
transition: background 0.15s ease;
}
body:not(.sidebar-icon-only) .sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link::before,
body:not(.sidebar-icon-only) .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link.active::before {
background: var(--zoho-primary);
}
/* Keep group icons dark on the tinted active pill (they'd otherwise flip white) */
body:not(.sidebar-icon-only) .sidebar .nav .nav-item.active > .nav-link > svg.menu-icon,
body:not(.sidebar-icon-only) .sidebar .nav .nav-item > .nav-link.active > svg.menu-icon {
color: var(--zoho-primary-dark);
}
/* Section group labels: OVERVIEW / PAYMENTS / FINANCE / SYSTEM */
.sidebar-section-label { display: none; }
body:not(.sidebar-icon-only) .sidebar .nav:not(.sub-menu) > .sidebar-section-label {
display: block;
margin: 16px 0 4px;
padding: 0 14px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #98A2B6;
white-space: nowrap;
}
body:not(.sidebar-icon-only) .sidebar .nav:not(.sub-menu) > .sidebar-section-label:first-child {
margin-top: 4px;
}
/* Sub-menu links: smaller text, airier, rounded */
.sidebar .nav.sub-menu .nav-link {
min-height: 36px;
padding: 8px 12px;
font-size: 13px;
border-radius: 8px;
}
/* Pin toggle: flat circular control centered under the 248px rail */
.sidebar-pin-toggle {
left: 124px;
background: #fff;
border: 1px solid var(--zoho-sidebar-border);
box-shadow: 0 1px 3px rgba(23, 28, 46, 0.12);
color: #687083;
}
.sidebar-pin-toggle:hover {
transform: translateX(-50%) scale(1.1);
box-shadow: 0 6px 16px -6px rgba(23, 28, 46, 0.3), 0 0 0 4px #fff;
color: var(--zoho-primary-dark);
}
.sidebar-pin-toggle.pinned { background: var(--zoho-primary); color: #fff; border-color: var(--zoho-primary); }
.sidebar-icon-only .sidebar-pin-toggle { left: 35px; }
/* Top band avatar chip */
.navbar .nav-profile-icon {
color: var(--zoho-text-secondary);
background: #F1F3F8;
border-radius: 10px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
/* ---- Top-right user identity: two-line org cell + avatar (Layout.tsx) ---- */
.navbar .navbar-nav-right.header-user-section {
display: flex;
flex-direction: row;
align-items: center;
gap: 18px;
}
.navbar .navbar-nav-right.header-user-section .nav-item { margin: 0; padding: 0; }
.navbar .header-user-info {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 3px;
min-width: 0;
max-width: min(300px, 40vw);
}
/* Name: ~16px medium, truncates instead of pushing the level/avatar off-screen */
.navbar .header-user-info .org-switcher-name {
max-width: 260px;
font-size: 16px;
font-weight: 500;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.navbar .header-user-info .topbar-org {
font-size: 16px;
font-weight: 500;
line-height: 1.2;
max-width: 260px;
padding: 2px 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Tighten the org-switcher anchor so the two lines fit inside the 64px band */
.navbar .header-user-info .org-switcher.nav-link {
padding: 2px 10px;
line-height: 1.2;
}
/* Level: the golden Level pill (+ blue OP pill when set) under the org name */
.navbar .header-user-info .header-user-level {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.navbar .header-user-info .header-user-level:empty { display: none; }
.navbar .header-user-info .header-user-level .level-pill {
padding: 2px 9px;
line-height: 1.3;
}
/* Tablet: same two-line layout, tighter touch gap. */
@media (max-width: 991.98px) {
.navbar .navbar-nav-right.header-user-section { gap: 10px; }
.navbar .header-user-info { max-width: 44vw; }
.navbar .header-user-info .org-switcher-name,
.navbar .header-user-info .topbar-org { max-width: 42vw; }
}
/* ---- Dashboard canvas + premium tokens (scoped to the dashboard) ---- */
.zdash {
background: var(--zdash-canvas);
padding: 22px clamp(16px, 2.4vw, 30px) 40px;
--zdash-primary: #408DFB;
--zdash-primary-dark: #2F6FE4;
--zdash-primary-soft: rgba(64, 141, 251, 0.10);
--zdash-success: #16A36A;
--zdash-success-soft: rgba(22, 163, 106, 0.10);
--zdash-warning: #D9822B;
--zdash-warning-soft: rgba(217, 130, 43, 0.12);
--zdash-danger: #D94A55;
--zdash-danger-soft: rgba(217, 74, 85, 0.12);
--zdash-info: #1F6FEB;
--zdash-info-soft: rgba(31, 111, 235, 0.10);
--zdash-text: #171A24;
--zdash-text-2: #687083;
--zdash-muted: #9098A8;
--zdash-border: #E8EBF1;
}
/* ---- Command header (replaces the old welcome card) ---- */
.zdash-command {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px 20px;
margin-bottom: 22px;
}
.zdash-command-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--zdash-muted);
margin-bottom: 6px;
}
.zdash-command-title {
margin: 0;
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 700;
letter-spacing: -0.4px;
color: var(--zdash-text);
}
.zdash-command-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--zdash-text-2); }
.zdash-command-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.zdash-command-updated {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--zdash-muted);
font-variant-numeric: tabular-nums;
}
.zdash-command-updated-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--zdash-success);
box-shadow: 0 0 0 3px rgba(22, 163, 106, 0.15);
}
.zdash-command-actions { display: flex; gap: 8px; align-items: center; }
.zdash-refresh {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 13px;
border-radius: 9px;
border: 1px solid var(--zdash-border);
background: #fff;
color: var(--zdash-text-2);
font-size: 12.5px;
font-weight: 600;
font-family: var(--zoho-font);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.zdash-refresh:hover { border-color: var(--zdash-primary); color: var(--zdash-primary-dark); }
.zdash-refresh svg { transition: transform 0.3s ease; }
.zdash-refresh:active svg { transform: rotate(180deg); }
.zdash-command .zdash-density-toggle {
margin-top: 0;
width: 34px;
height: 34px;
justify-content: center;
border-radius: 9px;
background: #fff;
}
/* ---- KPI strip (Row 1): 4 premium white cards ---- */
.zdash-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 14px;
}
.zdash-stat {
display: flex;
flex-direction: row;
align-items: center;
gap: 11px;
padding: 11px 13px;
border-radius: 13px;
border: 1px solid var(--zdash-border);
border-left: 3px solid transparent;
background: #fff;
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.04), 0 8px 22px -18px rgba(23, 28, 46, 0.14);
text-decoration: none;
color: var(--zdash-text);
cursor: pointer;
transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.zdash-stat-body {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
}
.zdash-stat:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(23, 28, 46, 0.05), 0 14px 28px -18px rgba(23, 28, 46, 0.22);
border-color: #DFE4EE;
}
.zdash-stat::after { content: none; }
.zdash-stat-primary { border-left-color: var(--zdash-primary); }
.zdash-stat-success { border-left-color: var(--zdash-success); }
.zdash-stat-info { border-left-color: var(--zdash-info); }
.zdash-stat-teal { border-left-color: var(--zdash-teal); }
.zdash-stat-warning { border-left-color: var(--zdash-warning); }
.zdash-stat-danger { border-left-color: var(--zdash-danger); }
.zdash-stat-icon-circle {
width: 34px;
height: 34px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex: none;
transition: transform 0.16s ease;
}
.zdash-stat:hover .zdash-stat-icon-circle { transform: scale(1.06); }
.zdash-stat-primary .zdash-stat-icon-circle { background: var(--zdash-primary-soft); color: var(--zdash-primary-dark); }
.zdash-stat-success .zdash-stat-icon-circle { background: var(--zdash-success-soft); color: var(--zdash-success); }
.zdash-stat-info .zdash-stat-icon-circle { background: var(--zdash-info-soft); color: var(--zdash-info); }
.zdash-stat-teal .zdash-stat-icon-circle { background: var(--zdash-teal-soft); color: var(--zdash-teal); }
.zdash-stat-warning .zdash-stat-icon-circle { background: var(--zdash-warning-soft); color: var(--zdash-warning); }
.zdash-stat-danger .zdash-stat-icon-circle { background: var(--zdash-danger-soft); color: var(--zdash-danger); }
.zdash-stat-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--zdash-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zdash-stat-value {
font-size: clamp(19px, 1.6vw, 23px);
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.14;
margin-top: 2px;
color: var(--zdash-text);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zdash-stat-primary .zdash-stat-value,
.zdash-stat-success .zdash-stat-value,
.zdash-stat-warning .zdash-stat-value,
.zdash-stat-info .zdash-stat-value,
.zdash-stat-danger .zdash-stat-value { color: var(--zdash-text); }
.zdash-stat-hint,
.zdash-stat-dist {
margin-top: 2px;
font-size: 11.5px;
line-height: 1.35;
color: var(--zdash-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zdash-stat-dist { color: var(--zdash-text-2); }
.zdash-stat-inert { cursor: default; }
.zdash-stat-inert:hover { transform: none !important; }
/* ---- Widget frame premium ---- */
.zdash-grid { gap: 18px; }
.zdash-col-5 { grid-column: span 5; }
.zdash-col-7 { grid-column: span 7; }
.zdash-widget {
border-radius: 16px;
border-color: var(--zdash-border);
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.04), 0 12px 30px -20px rgba(23, 28, 46, 0.16);
}
.zdash-widget-head {
flex-wrap: wrap;
align-items: center;
padding: 16px 20px 0;
border-bottom: none;
}
.zdash-widget-copy { min-width: 0; }
.zdash-widget-title {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--zdash-text);
}
.zdash-widget-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--zdash-primary-soft);
color: var(--zdash-primary-dark);
flex: none;
}
.zdash-widget-title-icon svg { color: inherit; }
.zdash-widget-sub { margin: 5px 0 0; font-size: 12.5px; color: var(--zdash-muted); }
.zdash-widget-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--zdash-muted); }
.zdash-widget-body { padding: 14px 20px 20px; }
.zdash-widget-empty { margin: 6px 0; font-size: 13px; color: var(--zdash-muted); }
.zdash-widget-loading { font-size: 13px; color: var(--zdash-muted); }
.zdash-widget-error { margin: 6px 0; font-size: 13px; color: var(--zdash-danger); }
.zdash-widget-meta-count {
font-weight: 600;
color: var(--zdash-text-2);
background: #F1F3F8;
border: 1px solid var(--zdash-border);
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px;
}
.zdash-widget-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--zdash-primary-dark);
font-weight: 600;
font-size: 12px;
text-decoration: none;
}
.zdash-widget-link:hover { color: var(--zdash-primary); }
/* ---- Workflow visual mode (stacked status bars) ---- */
.zdash-worklist { display: flex; flex-direction: column; gap: 18px; }
.zdash-work-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.zdash-work-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--zdash-muted); }
.zdash-work-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.zdash-work-linkwrap { display: block; text-decoration: none; }
.zdash-work { padding: 0 2px; }
.zdash-work-linkwrap:hover .zdash-work-name { color: var(--zdash-primary-dark); }
.zdash-work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.zdash-work-name { font-size: 13.5px; font-weight: 600; color: var(--zdash-text); }
.zdash-work-total { font-size: 12px; color: var(--zdash-muted); font-variant-numeric: tabular-nums; }
.zdash-work-stack { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #EFF2F7; }
.zdash-work-seg { height: 100%; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.zdash-work-seg-approved { background: var(--zdash-success); }
.zdash-work-seg-under { background: var(--zdash-info); }
.zdash-work-seg-pending { background: var(--zdash-primary); }
.zdash-work-seg-cancelled { background: #C3C9D6; }
.zdash-work-legend-dot.zdash-work-seg-approved { background: var(--zdash-success); }
.zdash-work-legend-dot.zdash-work-seg-under { background: var(--zdash-info); }
.zdash-work-legend-dot.zdash-work-seg-pending { background: var(--zdash-primary); }
.zdash-work-legend-dot.zdash-work-seg-cancelled { background: #C3C9D6; }
.zdash-work-meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 8px;
}
.zdash-work-meta-item { font-size: 11.5px; color: var(--zdash-muted); font-variant-numeric: tabular-nums; }
.zdash-work-meta-item b { display: block; color: var(--zdash-text); font-weight: 600; }
/* Visual | Table toggle + filter chips */
.zdash-view-toggle {
display: inline-flex;
border: 1px solid var(--zdash-border);
border-radius: 9px;
padding: 2px;
background: #F5F7FB;
}
.zdash-view-toggle button {
display: inline-flex;
align-items: center;
gap: 5px;
border: none;
background: transparent;
padding: 5px 10px;
border-radius: 7px;
font-size: 12px;
font-weight: 600;
font-family: var(--zoho-font);
color: var(--zdash-muted);
cursor: pointer;
}
.zdash-view-toggle-on { background: #fff !important; color: var(--zdash-primary-dark) !important; box-shadow: 0 1px 2px rgba(23, 28, 46, 0.1); }
.zdash-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zdash-chip {
border: 1px solid var(--zdash-border);
background: #fff;
color: var(--zdash-text-2);
font-size: 11.5px;
font-weight: 600;
font-family: var(--zoho-font);
padding: 4px 11px;
border-radius: 999px;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.zdash-chip:hover { border-color: rgba(64, 141, 251, 0.4); }
.zdash-chip-on { background: var(--zdash-primary-soft); border-color: rgba(64, 141, 251, 0.4); color: var(--zdash-primary-dark); }
/* Matrix rows: roomier, unhovered clean, row hover highlight */
.zdash-mx-row { border-radius: 10px; }
.zdash-mx-row + .zdash-mx-row { border-top: 1px solid var(--zdash-divider); }
.zdash-mx-row:hover { background: #FAFBFD; }
/* ---- Ageing: semantic buckets ---- */
.zdash-age { display: flex; flex-direction: column; gap: 14px; }
.zdash-bar-track-soft { background: #EFF2F7; }
.zdash-age-fill-0 { background: var(--zdash-primary); }
.zdash-age-fill-1 { background: #6B8FD6; }
.zdash-age-fill-2 { background: var(--zdash-warning); }
.zdash-age-fill-3 { background: #E8652A; }
.zdash-age-fill-4 { background: var(--zdash-danger); }
/* ---- Approval pipeline: node rail ---- */
.zdash-pipe { display: flex; align-items: flex-start; gap: 6px; padding-top: 8px; }
.zdash-pipe-node {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
animation: pipeStagger 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pipeStagger {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.zdash-pipe-node:not(:first-child) .zdash-pipe-track::before,
.zdash-pipe-node:not(:last-child) .zdash-pipe-track::after {
content: '';
position: absolute;
top: 0;
height: 3px;
background: #DCE3EE;
}
.zdash-pipe-node:not(:first-child) .zdash-pipe-track::before { left: 0; width: 100%; }
.zdash-pipe-node:not(:last-child) .zdash-pipe-track::after { right: 0; width: 100%; }
.zdash-pipe-track { position: relative; width: 100%; height: 3px; background: #EFF2F7; }
.zdash-pipe-dot {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
border: 3px solid #BCC7D9;
transition: border-color 0.15s ease;
}
.zdash-pipe-node-current .zdash-pipe-dot {
border-color: var(--zdash-primary);
box-shadow: 0 0 0 4px rgba(64, 141, 251, 0.15);
}
.zdash-pipe-label {
margin-top: 10px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--zdash-muted);
}
.zdash-pipe-node-current .zdash-pipe-label { color: var(--zdash-primary-dark); }
.zdash-pipe-count { margin-top: 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--zdash-text); font-variant-numeric: tabular-nums; }
.zdash-pipe-node-current .zdash-pipe-count { color: var(--zdash-primary-dark); }
.zdash-pipe-value { font-size: 11.5px; color: var(--zdash-muted); font-variant-numeric: tabular-nums; }
.zdash-pipe-tag {
margin-top: 6px;
padding: 2px 9px;
border-radius: 999px;
background: var(--zdash-primary);
color: #fff;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
animation: pipeStagger 0.3s ease both;
}
/* ---- Settlement health: aggregated rows + stacked distribution bar ---- */
.zdash-settle { display: flex; flex-direction: column; gap: 14px; }
.zdash-settle-stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #EFF2F7; }
.zdash-settle-stack-seg { height: 100%; }
.zdash-settle-stack-success { background: var(--zdash-success); }
.zdash-settle-stack-info { background: var(--zdash-info); }
.zdash-settle-stack-neutral { background: #C3C9D6; }
.zdash-settle-stack-danger { background: var(--zdash-danger); }
.zdash-settle-rows { display: flex; flex-direction: column; }
.zdash-settle-row {
display: grid;
grid-template-columns: 10px 1fr auto auto;
align-items: center;
gap: 10px;
padding: 9px 2px 9px 8px;
border-top: 1px solid var(--zdash-border);
font-size: 13px;
}
.zdash-settle-row:first-child { border-top: none; }
.zdash-settle-row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zdash-muted); flex: none; }
.zdash-settle-row-label { color: var(--zdash-text); font-weight: 500; }
.zdash-settle-row-value { color: var(--zdash-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.zdash-settle-row-count { color: var(--zdash-muted); font-size: 12px; text-align: right; min-width: 2.6em; font-variant-numeric: tabular-nums; }
.zdash-tone-success .zdash-settle-row-dot { background: var(--zdash-success); }
.zdash-tone-info .zdash-settle-row-dot { background: var(--zdash-info); }
.zdash-tone-neutral .zdash-settle-row-dot { background: #C3C9D6; }
.zdash-tone-danger .zdash-settle-row-dot { background: var(--zdash-danger); }
.zdash-tone-success.zdash-settle-row,
.zdash-tone-info.zdash-settle-row,
.zdash-tone-neutral.zdash-settle-row,
.zdash-tone-danger.zdash-settle-row { border-left-color: transparent; }
/* ---- Quick links inside the grid ---- */
.zdash-links { margin-top: 0; }
.zdash-link-card {
border-radius: 14px;
border-color: var(--zdash-border);
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.04);
}
/* ---- First-paint skeletons ---- */
.zdash-skeletons { display: flex; flex-direction: column; gap: 18px; }
.zdash-skel-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.zdash-skel-row.zdash-skel-8 { grid-template-columns: 8fr 4fr; }
.zdash-skel-card {
height: 158px;
border-radius: 16px;
background: linear-gradient(100deg, #F0F3F8 40%, #F9FBFE 50%, #F0F3F8 60%);
background-size: 200% 100%;
animation: zdash-skel-shimmer 1.4s linear infinite;
}
@keyframes zdash-skel-shimmer {
from { background-position: 120% 0; }
to { background-position: -80% 0; }
}
/* ---- Form controls inside widgets ---- */
.zdash-select, .zdash-input {
height: 30px;
border-color: var(--zdash-border);
border-radius: 8px;
background: #fff;
font-family: var(--zoho-font);
}
.zdash-select:focus, .zdash-input:focus { outline: 2px solid rgba(64, 141, 251, 0.3); outline-offset: 0; border-color: var(--zdash-primary); }
/* ---- Compact density overrides for the new premium classes ---- */
.zdash-density-compact .zdash-command { margin-bottom: 16px; }
.zdash-density-compact .zdash-stats { gap: 12px; margin-bottom: 14px; }
.zdash-density-compact .zdash-stat { padding: 9px 11px; }
.zdash-density-compact .zdash-stat-icon-circle { width: 30px; height: 30px; margin-bottom: 0; }
.zdash-density-compact .zdash-stat-value { font-size: clamp(17px, 1.5vw, 21px); }
.zdash-density-compact .zdash-grid { gap: 14px; }
.zdash-density-compact .zdash-widget-head { padding: 12px 16px 0; }
.zdash-density-compact .zdash-widget-body { padding: 10px 16px 14px; }
.zdash-density-compact .zdash-worklist { gap: 14px; }
/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
.zdash-stats { grid-template-columns: repeat(2, 1fr); }
.zdash-skel-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991.98px) {
.zdash-col-5, .zdash-col-7 { grid-column: span 1; }
.zdash-skel-row, .zdash-skel-row.zdash-skel-8 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
.zdash-command-right { align-items: flex-start; }
.zdash-stats, .zdash-skel-row, .zdash-skel-row.zdash-skel-8 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.zdash-stats, .zdash-skel-row, .zdash-skel-row.zdash-skel-8 { grid-template-columns: 1fr; }
.zdash-work-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.zdash-pipe-node, .zdash-pipe-tag { animation: none; }
.zdash-skel-card { animation: none; }
.zdash-reveal { animation: none; }
}
/* ============================================================
14d. Premium colour & interactivity enhancement
Companion spec: IBPS-Dashboard-Color-Interactive-Enhancement.md
Colour system: navy #202538 / blue #408DFB / green #16A36A / teal #159A9C /
amber #D9822B / red #D94A55 / purple #7657D9 on a #F4F6FA canvas. Per-tone colour
washes, semantic top accent lines, tinted icons and coloured charts - cards were made
colourful by §14f (2026-09-30) and never show invented data (percentages are real
fractions of returned counts).
============================================================ */
/* ---- Canvas: soft blue/purple ambient wash (never obvious) ---- */
.zdash {
--zdash-canvas: #F4F6FA;
--zdash-teal: #159A9C;
--zdash-teal-soft: rgba(21, 154, 156, 0.12);
--zdash-purple: #7657D9;
--zdash-purple-soft: rgba(118, 87, 217, 0.12);
--zdash-orange: #E8652A;
--zdash-divider: #EDF0F5;
--zdash-navy: #202538;
background-color: var(--zdash-canvas);
background-image:
radial-gradient(1000px 420px at 8% -6%, rgba(64, 141, 251, 0.08), transparent 60%),
radial-gradient(820px 360px at 96% 2%, rgba(118, 87, 217, 0.07), transparent 62%),
radial-gradient(700px 320px at 50% 100%, rgba(64, 141, 251, 0.04), transparent 60%);
}
/* ---- Shell: dark navy header gets a subtle navy gradient; light sidebar gets a blue ambient ---- */
.navbar,
.navbar .navbar-brand-wrapper,
.navbar .navbar-menu-wrapper {
background: linear-gradient(165deg, #243157 0%, #202538 62%, #1B2240 100%);
}
.sidebar {
background:
radial-gradient(620px 300px at 0% 0%, rgba(64, 141, 251, 0.06), transparent 60%),
radial-gradient(520px 280px at 100% 100%, rgba(118, 87, 217, 0.05), transparent 62%),
linear-gradient(180deg, #fbfbff 0%, #F8F9FC 60%);
}
/* Active sidebar item: blue tint, blue text, 3px left indicator (kept at the pill level so it
can't fight the group-expanded / icon-only rules). */
.sidebar .nav .nav-item .nav-link.active,
.sidebar .nav:not(.sub-menu) .nav-item .nav-link.active {
background: #EAF2FF;
color: var(--zdash-primary-dark);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(64, 141, 251, 0.1);
}
.sidebar .nav .nav-item .nav-link.active i,
.sidebar .nav .nav-item .nav-link.active .menu-title { color: var(--zdash-primary-dark); }
.sidebar .nav .nav-item .nav-link.active::before {
background: var(--zdash-primary-dark);
box-shadow: 0 0 6px 1px rgba(47, 111, 228, 0.55);
}
/* ---- Dashboard command header: compact panel with a subtle blue-to-purple wash + real status chip ---- */
.zdash-command {
position: relative;
padding: 16px 18px;
margin-bottom: 22px;
border: 1px solid rgba(64, 141, 251, 0.1);
border-radius: 18px;
background:
radial-gradient(480px 140px at 0% 0%, rgba(64, 141, 251, 0.1), transparent 66%),
radial-gradient(520px 150px at 100% 0%, rgba(118, 87, 217, 0.08), transparent 68%),
#fff;
}
.zdash-command-status {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 10px;
padding: 4px 11px;
font-size: 12px;
font-weight: 500;
color: var(--zdash-text-2);
background: rgba(64, 141, 251, 0.07);
border: 1px solid rgba(64, 141, 251, 0.13);
border-radius: 999px;
font-variant-numeric: tabular-nums;
}
.zdash-command-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--zdash-success);
box-shadow: 0 0 0 3px rgba(22, 163, 106, 0.16);
}
/* ---- KPI cards: white cards + top tinted gradient, 36px tinted icon, -3px hover lift ---- */
.zdash-stat {
background-color: #fff;
background-image: linear-gradient(100deg, var(--zdash-stat-tint) 0%, rgba(255, 255, 255, 0) 62%);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.zdash-stat-primary { --zdash-stat-tint: rgba(64, 141, 251, 0.1); }
.zdash-stat-success { --zdash-stat-tint: rgba(22, 163, 106, 0.1); }
.zdash-stat-teal { border-left-color: var(--zdash-teal); --zdash-stat-tint: rgba(21, 154, 156, 0.1); }
.zdash-stat-warning { --zdash-stat-tint: rgba(217, 130, 43, 0.1); }
.zdash-stat-danger { border-left-color: var(--zdash-danger); --zdash-stat-tint: rgba(217, 74, 85, 0.1); }
.zdash-stat:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(23, 28, 46, 0.04), 0 12px 30px rgba(25, 40, 70, 0.08);
border-color: #DCE4F0;
}
.zdash-stat-icon-circle {
width: 36px;
height: 36px;
border-radius: 10px;
}
.zdash-stat-primary .zdash-stat-icon-circle {
background: linear-gradient(135deg, rgba(64, 141, 251, 0.18), rgba(64, 141, 251, 0.05));
box-shadow: inset 0 0 0 1px rgba(64, 141, 251, 0.16);
}
.zdash-stat-success .zdash-stat-icon-circle {
background: linear-gradient(135deg, rgba(22, 163, 106, 0.16), rgba(22, 163, 106, 0.04));
box-shadow: inset 0 0 0 1px rgba(22, 163, 106, 0.16);
}
.zdash-stat-info .zdash-stat-icon-circle,
.zdash-stat-teal .zdash-stat-icon-circle {
background: linear-gradient(135deg, rgba(21, 154, 156, 0.18), rgba(21, 154, 156, 0.05));
box-shadow: inset 0 0 0 1px rgba(21, 154, 156, 0.18);
color: var(--zdash-teal);
}
.zdash-stat-warning .zdash-stat-icon-circle {
background: linear-gradient(135deg, rgba(217, 130, 43, 0.16), rgba(217, 130, 43, 0.04));
box-shadow: inset 0 0 0 1px rgba(217, 130, 43, 0.16);
}
.zdash-stat-danger .zdash-stat-icon-circle {
background: linear-gradient(135deg, rgba(217, 74, 85, 0.16), rgba(217, 74, 85, 0.04));
box-shadow: inset 0 0 0 1px rgba(217, 74, 85, 0.16);
color: var(--zdash-danger);
}
.zdash-stat-value-money { color: var(--zdash-success); }
.zdash-density-compact .zdash-stat-icon-circle { width: 30px; height: 30px; border-radius: 9px; }
/* ---- Widget frame: per-tone accent strip + title icon tint ---- */
.zdash-widget { --zw-accent: var(--zdash-primary); --zw-accent-2: #6FA8FF; position: relative; }
.zdash-widget-tone-blue { --zw-accent: var(--zdash-primary); --zw-accent-2: #6FA8FF; }
.zdash-widget-tone-teal { --zw-accent: var(--zdash-teal); --zw-accent-2: #2ABFB4; }
.zdash-widget-tone-amber { --zw-accent: var(--zdash-warning); --zw-accent-2: #E8A23C; }
.zdash-widget-tone-purple { --zw-accent: var(--zdash-purple); --zw-accent-2: #9B7FF0; }
.zdash-widget::before {
content: '';
position: absolute;
left: 16px;
right: 16px;
top: 0;
height: 3px;
border-radius: 0 0 8px 8px;
background: linear-gradient(90deg, var(--zw-accent), var(--zw-accent-2));
}
.zdash-widget-tone-blue .zdash-widget-title-icon { background: var(--zdash-primary-soft); color: var(--zdash-primary-dark); }
.zdash-widget-tone-teal .zdash-widget-title-icon { background: var(--zdash-teal-soft); color: var(--zdash-teal); }
.zdash-widget-tone-amber .zdash-widget-title-icon {
background: linear-gradient(135deg, rgba(217, 130, 43, 0.16), rgba(217, 130, 43, 0.05));
color: var(--zdash-warning);
}
.zdash-widget-tone-purple .zdash-widget-title-icon { background: var(--zdash-purple-soft); color: var(--zdash-purple); }
/* ---- Workflow: semantic stacked bars (pending blue / under teal / approved green / cancelled red) ---- */
.zdash-work-linkwrap { cursor: pointer; transition: background 0.15s ease; }
.zdash-work-linkwrap:hover .zdash-work { background: rgba(64, 141, 251, 0.045); }
.zdash-work { border-radius: 10px; transition: opacity 0.18s ease, background 0.15s ease; }
.zdash-work-seg-under { background: var(--zdash-teal); }
.zdash-work-seg-cancelled { background: var(--zdash-danger); }
.zdash-work-legend-dot.zdash-work-seg-under { background: var(--zdash-teal); }
.zdash-work-legend-dot.zdash-work-seg-cancelled { background: var(--zdash-danger); }
.zdash-work-head-right { display: flex; align-items: center; gap: 12px; }
.zdash-work-view {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
font-weight: 600;
color: var(--zdash-primary-dark);
text-decoration: none;
white-space: nowrap;
}
.zdash-work-view:hover { color: var(--zdash-primary); }
.zdash-work-selected .zdash-work-name { color: var(--zdash-primary-dark); }
.zdash-work-selected .zdash-work {
background: rgba(64, 141, 251, 0.06);
box-shadow: inset 0 0 0 1px rgba(64, 141, 251, 0.2);
}
.zdash-worklist.has-selection .zdash-work:not(.zdash-work-selected) { opacity: 0.55; }
/* ---- Ageing: semantic progression with a teal 4-7 bucket + bars growing from the left ---- */
.zdash-age-fill-1 { background: var(--zdash-teal); }
.zdash-age .zdash-bar-fill,
.zdash-bars .zdash-bar-fill {
transform-origin: left center;
animation: zdash-bar-grow 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes zdash-bar-grow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* ---- Approval pipeline: completed green / current blue / future grey / exception red dots ---- */
.zdash-pipe-dot {
background: #C7CFDD;
border: none;
width: 12px;
height: 12px;
}
.zdash-pipe-node-completed .zdash-pipe-dot {
background: var(--zdash-success);
box-shadow: 0 0 0 4px rgba(22, 163, 106, 0.12);
}
.zdash-pipe-node-completed .zdash-pipe-label { color: var(--zdash-success); }
.zdash-pipe-node-current .zdash-pipe-dot {
background: var(--zdash-primary);
border-color: var(--zdash-primary);
width: 13px;
height: 13px;
box-shadow: 0 0 0 4px rgba(64, 141, 251, 0.18);
}
.zdash-pipe-node-exception .zdash-pipe-dot {
background: var(--zdash-danger);
box-shadow: 0 0 0 4px rgba(217, 74, 85, 0.14);
}
.zdash-pipe-node-exception .zdash-pipe-label { color: var(--zdash-danger); }
.zdash-pipe-node-exception .zdash-pipe-count,
.zdash-pipe-node-exception .zdash-pipe-value { color: var(--zdash-danger); }
/* ---- Settlement: teal/green treatment + real settled-to-total ring ---- */
.zdash-settle-top {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.zdash-settle-ring {
--zdash-settle-deg: 0deg;
position: relative;
width: 54px;
height: 54px;
flex: none;
border-radius: 50%;
background: conic-gradient(var(--zdash-success) var(--zdash-settle-deg), #EDF1F7 0deg);
display: flex;
align-items: center;
justify-content: center;
}
.zdash-settle-ring::before {
content: '';
position: absolute;
inset: 7px;
border-radius: 50%;
background: #fff;
box-shadow: inset 0 0 0 1px var(--zdash-border);
}
.zdash-settle-ring span {
position: relative;
font-size: 11.5px;
font-weight: 700;
color: var(--zdash-text);
font-variant-numeric: tabular-nums;
}
.zdash-settle-ring-caption { display: flex; flex-direction: column; gap: 2px; }
.zdash-settle-ring-title { font-size: 13px; font-weight: 600; color: var(--zdash-text); }
.zdash-settle-ring-sub { font-size: 11.5px; color: var(--zdash-muted); }
.zdash-settle-stack-info { background: var(--zdash-teal); }
.zdash-tone-info .zdash-settle-row-dot { background: var(--zdash-teal); }
/* ---- Breakdown: analytical blue gradient bars on a purple-wash widget ---- */
.zdash-bars .zdash-bar-fill.zdash-bar-tone-0 {
background: linear-gradient(90deg, #408DFB 0%, #6FA8FF 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.zdash-select, .zdash-input { box-shadow: none; }
/* ---- Premium styled chart tooltip (dark navy, count + value, shown via data-* attrs) ---- */
.zdash-tt { position: relative; }
.zdash-tt::after {
content: attr(data-tip-head) "\A" attr(data-tip-value);
white-space: pre;
position: absolute;
left: 50%;
bottom: calc(100% + 9px);
transform: translateX(-50%) translateY(3px);
background: #202538;
color: #fff;
font-size: 11px;
font-weight: 500;
line-height: 1.5;
padding: 6px 9px;
border-radius: 8px;
box-shadow: 0 8px 24px -8px rgba(20, 26, 48, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease, transform 0.12s ease;
z-index: 30;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
}
.zdash-tt::before {
content: '';
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #202538;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 30;
}
.zdash-tt:hover::after,
.zdash-tt:hover::before { opacity: 1; }
.zdash-tt:hover::after { transform: translateX(-50%) translateY(0); }
/* ---- Refresh: spin only the icon, values stay visible until the response arrives ---- */
.zdash-refresh-spinning svg { animation: zdash-spin 0.7s linear infinite; }
@keyframes zdash-spin { to { transform: rotate(360deg); } }
.zdash-refresh:disabled { opacity: 0.65; cursor: default; }
/* ---- Keyboard focus is always visible ---- */
.zdash-stat:focus-visible,
.zdash-refresh:focus-visible,
.zdash-density-toggle:focus-visible,
.zdash-view-toggle button:focus-visible,
.zdash-chip:focus-visible {
outline: 2px solid var(--zdash-primary);
outline-offset: 2px;
}
/* ---- Compact density refinements for the enrichment layer ---- */
.zdash-density-compact .zdash-command { padding: 12px 15px; }
.zdash-density-compact .zdash-command-status { margin-top: 8px; padding: 3px 10px; font-size: 11.5px; }
.zdash-density-compact .zdash-settle-ring { width: 46px; height: 46px; }
.zdash-density-compact .zdash-settle-ring::before { inset: 6px; }
/* ---- Responsive: simplify decorations on small screens ---- */
@media (max-width: 767.98px) {
.zdash-command { padding: 13px 15px; }
.zdash-stat { background-image: none; }
.zdash-settle-top { justify-content: center; flex-wrap: wrap; }
.zdash-work-head-right { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 480px) {
.zdash-settle-ring { width: 46px; height: 46px; }
.zdash-settle-ring::before { inset: 6px; }
}
/* ---- Reduced-motion additions for the enrichment layer ---- */
@media (prefers-reduced-motion: reduce) {
.zdash-age .zdash-bar-fill,
.zdash-bars .zdash-bar-fill { animation: none; }
.zdash-refresh-spinning svg { animation: none; }
.zdash-tt::after,
.zdash-tt::before { transition: none; }
.zdash-stat { transition: none; }
}
/* ---- Lower dashboard: settlement health + payment distribution as a balanced 50/50 row ---- */
.zdash-bottom {
grid-column: span 12;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.zdash-bottom > .zdash-widget {
grid-column: auto;
height: 100%;
}
@media (max-width: 991.98px) {
.zdash-bottom { grid-template-columns: 1fr; gap: 18px; }
}
/* ============================================================
14e. Premium dashboard data visualizations (2026-09-30)
The cards become charts with zero new libraries - workflow bars,
ageing's risk emphasis and the settlement donut all render from
the same API payloads the cards already used.
============================================================ */
/* ---- 14e.1 Rich 3-line tooltip (meta label / sub label / value); .zdash-tt stays 2-line ---- */
.zdash-tt-sub { position: relative; }
.zdash-tt-sub::after {
content: attr(data-tip-head) "\A" attr(data-tip-sub) "\A" attr(data-tip-value);
white-space: pre;
position: absolute;
left: 50%;
bottom: calc(100% + 9px);
transform: translateX(-50%) translateY(3px);
background: #202538;
color: #fff;
font-size: 11px;
font-weight: 500;
line-height: 1.5;
padding: 7px 9px;
border-radius: 8px;
box-shadow: 0 8px 24px -8px rgba(20, 26, 48, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease, transform 0.12s ease;
z-index: 30;
max-width: 230px;
text-align: center;
}
.zdash-tt-sub::before {
content: '';
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #202538;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 30;
}
.zdash-tt-sub:hover::after,
.zdash-tt-sub:hover::before { opacity: 1; }
.zdash-tt-sub:hover::after { transform: translateX(-50%) translateY(0); }
/* ---- 14e.2 Workflow Overview: body toolbar, status-filter muting, entrance ---- */
.zdash-work-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
margin-bottom: 12px;
}
.zdash-work-seg {
transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}
.zdash-work-seg + .zdash-work-seg { margin-left: 2px; border-radius: 999px; }
.zdash-work-seg:hover { filter: brightness(1.06); }
.zdash-work-meta-item { transition: opacity 0.18s ease; }
.zdash-work-stack {
height: 14px;
transform-origin: left center;
animation: zdash-bar-grow 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
will-change: transform;
}
/* ---- 14e.3 Ageing: zero buckets stay muted so real risk draws the eye ---- */
.zdash-age-fill-muted { background: #CBD3E0; }
.zdash-age-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 16px 12px 20px;
}
.zdash-age-empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: #eef2f8;
color: #8a94a6;
margin-bottom: 6px;
}
.zdash-age-empty-title { font-size: 13.5px; font-weight: 600; color: var(--zdash-text); }
.zdash-age-empty-sub {
font-size: 12px;
color: var(--zdash-muted);
max-width: 260px;
line-height: 1.45;
}
/* ---- 14e.4 Settlement donut: segments, centre readout, hover tooltip ---- */
.zdash-donut {
position: relative;
width: 172px;
height: 172px;
flex: none;
}
.zdash-donut svg { display: block; width: 100%; height: 100%; }
.zdash-donut-seg {
cursor: pointer;
transition: stroke-width 0.18s ease, opacity 0.18s ease;
}
.zdash-donut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
text-align: center;
}
.zdash-donut-center b {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--zdash-text);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.zdash-donut-center span {
font-size: 10.5px;
font-weight: 600;
color: var(--zdash-muted);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.zdash-donut-tip {
position: absolute;
transform: translate(-50%, -115%);
background: #202538;
color: #fff;
font-size: 11px;
font-weight: 500;
line-height: 1.5;
padding: 7px 9px;
border-radius: 8px;
box-shadow: 0 8px 24px -8px rgba(20, 26, 48, 0.45);
pointer-events: none;
white-space: nowrap;
text-align: center;
z-index: 40;
}
.zdash-donut-tip b { display: block; font-weight: 600; }
.zdash-density-compact .zdash-donut { width: 140px; height: 140px; }
/* donut hover feeds back into the matching legend row (and vice versa) */
.zdash-settle-row { transition: background 0.16s ease; }
.zdash-settle-row:hover { background: #f6f8fc; }
.zdash-settle-row-on { background: #f3f7ff; }
.zdash-settle-row-on .zdash-settle-row-label { color: var(--zdash-primary-dark); }
/* ---- 14e.5 Loading skeleton + in-card error for the settlement widget ---- */
.zdash-skel-donut {
width: 148px;
height: 148px;
border-radius: 50%;
margin: 10px auto;
background: linear-gradient(100deg, #f0f3f8 40%, #f9fbfe 50%, #f0f3f8 60%);
background-size: 200% 100%;
animation: zdash-skel-shimmer 1.4s linear infinite;
}
.zdash-err-line {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 18px 12px 22px;
}
.zdash-err-hint { font-size: 12px; color: var(--zdash-muted); }
@media (max-width: 767.98px) {
.zdash-donut { margin: 0 auto; }
}
/* ---- 14e.6 Reduced-motion guards for the new visualizations ---- */
@media (prefers-reduced-motion: reduce) {
.zdash-work-stack { animation: none; }
.zdash-work-seg,
.zdash-work-meta-item { transition: none; }
.zdash-donut-seg,
.zdash-settle-row { transition: none; }
.zdash-tt-sub::after,
.zdash-tt-sub::before { transition: none; }
.zdash-skel-donut { animation: none; }
}
/* ============================================================
14f. Colourful dashboard surfaces (2026-09-30)
User request: colour over white. Cards drop the plain white
surface for per-tone colour washes, KPI values pick up their
tone colour and the header gets a livelier blue -> purple ->
teal gradient. Text stays high-contrast navy - colourful, never
pastel-clash, and never invented data.
============================================================ */
/* ---- Canvas: livelier ambient wash ---- */
.zdash {
background-color: #F1F4FB;
background-image:
radial-gradient(1000px 460px at 6% -8%, rgba(64, 141, 251, 0.12), transparent 60%),
radial-gradient(860px 400px at 97% 0%, rgba(118, 87, 217, 0.1), transparent 62%),
radial-gradient(680px 340px at 45% 105%, rgba(21, 154, 156, 0.08), transparent 62%);
}
/* ---- Command header: colourful blue > purple wash with a teal echo ---- */
.zdash-command {
border-color: rgba(64, 141, 251, 0.18);
box-shadow: 0 12px 32px -24px rgba(35, 60, 120, 0.4);
background:
radial-gradient(560px 170px at 0% 0%, rgba(64, 141, 251, 0.18), transparent 66%),
radial-gradient(620px 180px at 100% 0%, rgba(118, 87, 217, 0.16), transparent 68%),
radial-gradient(480px 160px at 0% 100%, rgba(21, 154, 156, 0.1), transparent 62%),
linear-gradient(135deg, #F5F9FF 0%, #FEFBFF 60%);
}
/* ---- KPI cards: per-tone colour wash + tone-coloured value ---- */
.zdash-stat {
background-image: none;
}
.zdash-stat-primary {
background: linear-gradient(100deg, #E2EDFF 0%, #F5F9FF 46%, #FFFFFF 100%);
border-left-color: var(--zdash-primary);
}
.zdash-stat-success {
background: linear-gradient(100deg, #DDF5E9 0%, #F3FBF7 46%, #FFFFFF 100%);
border-left-color: var(--zdash-success);
}
.zdash-stat-info,
.zdash-stat-teal {
background: linear-gradient(100deg, #DFF5F5 0%, #F2FAFA 46%, #FFFFFF 100%);
border-left-color: var(--zdash-teal);
}
.zdash-stat-warning {
background: linear-gradient(100deg, #FBEEDD 0%, #FDF8F0 46%, #FFFFFF 100%);
border-left-color: var(--zdash-warning);
}
.zdash-stat-danger {
background: linear-gradient(100deg, #FBE6E9 0%, #FEF7F8 46%, #FFFFFF 100%);
border-left-color: var(--zdash-danger);
}
.zdash-stat-primary .zdash-stat-value { color: var(--zdash-primary-dark); }
.zdash-stat-success .zdash-stat-value { color: var(--zdash-success); }
.zdash-stat-teal .zdash-stat-value { color: var(--zdash-teal); }
.zdash-stat-warning .zdash-stat-value { color: #C97A24; }
.zdash-stat-danger .zdash-stat-value { color: var(--zdash-danger); }
/* money keeps its semantic green after the tone washes */
.zdash-stat-value-money { color: var(--zdash-success); }
/* ---- Widget cards: per-tone colour wash + tinted border ---- */
.zdash-widget {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(23, 28, 46, 0.04), 0 12px 30px -20px rgba(23, 28, 46, 0.16);
}
.zdash-widget-tone-blue {
background:
radial-gradient(720px 200px at 100% 0%, rgba(64, 141, 251, 0.1), transparent 68%),
linear-gradient(180deg, #EFF5FF 0%, #FFFFFF 54%);
border-color: rgba(64, 141, 251, 0.2);
}
.zdash-widget-tone-teal {
background:
radial-gradient(720px 200px at 100% 0%, rgba(21, 154, 156, 0.1), transparent 68%),
linear-gradient(180deg, #E8F7F7 0%, #FFFFFF 54%);
border-color: rgba(21, 154, 156, 0.22);
}
.zdash-widget-tone-amber {
background:
radial-gradient(720px 200px at 100% 0%, rgba(217, 130, 43, 0.1), transparent 68%),
linear-gradient(180deg, #FDF3E4 0%, #FFFFFF 54%);
border-color: rgba(217, 130, 43, 0.22);
}
.zdash-widget-tone-purple {
background:
radial-gradient(720px 200px at 100% 0%, rgba(118, 87, 217, 0.1), transparent 68%),
linear-gradient(180deg, #F2EEFE 0%, #FFFFFF 54%);
border-color: rgba(118, 87, 217, 0.22);
}
.zdash-widget {
background: linear-gradient(180deg, #F8FAFE 0%, #FFFFFF 54%);
}
/* ---- Controls blend into the washes (soft white pills, not stark white blocks) ---- */
.zdash-refresh,
.zdash-command .zdash-density-toggle {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(64, 141, 251, 0.18);
}
.zdash-chip { background: rgba(255, 255, 255, 0.85); }
.zdash-view-toggle-on { background: #fff !important; color: var(--zdash-primary-dark) !important; }
/* reduced-motion guards for the colourful overrides (no new animation was added) */
@media (prefers-reduced-motion: reduce) {
.zdash-command,
.zdash-stat,
.zdash-widget { transition: none; }
}
/* ============================================================
15. Topbar refinements (2026-09-30)
Atha Group brand chip (favicon mark + name) beside the IBPS
logo, plus compact level / OP-level icon chips between the org
cell and the avatar. Levels moved out from under the org name
into small hover-labelled chips per Layout.tsx.
============================================================ */
/* ---- 15.1 Left branding: IBPS brand box, then the Atha Group box in the nav ----
Root cause of the clipping: the loose logo + chip flex row totalled ~266px while the rail is
248px (the later premium-shell override at 4712), so the centred content overflowed left and
got cut under the sidebar/top-band boundary. The IBPS logo now lives in its own fixed box and
the Atha Group brand sits just after the rail (the rail's border-right is the divider), which
keeps it visible in both the expanded and the icon-only rail states. */
.navbar .navbar-brand-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
box-sizing: border-box;
}
.navbar .topbar-brand {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* IBPS brand box: fixed width, logo centred, aspect ratio kept via object-contain */
.navbar .topbar-brand-ibps {
width: 96px;
flex: none;
}
.navbar .topbar-brand-ibps img {
max-width: 100%;
width: auto;
object-fit: contain;
}
.navbar .topbar-brand-ibps .topbar-brand-ibps-full { max-height: 48px; }
.navbar .topbar-brand-ibps .topbar-brand-ibps-mini { display: none; }
/* Atha Group brand box, first item in the top nav - never hidden by the rail state */
.navbar .topbar-atha {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--zoho-topband-color);
white-space: nowrap;
}
.navbar .topbar-atha-icon {
width: 26px;
height: 26px;
padding: 3px;
border-radius: 8px;
/* favicon.png is a dark-green mark on a transparent canvas, so it needs a light tile to
read clearly against the dark top band. */
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.45);
object-fit: contain;
flex: none;
}
.navbar .topbar-atha-name {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.4px;
}
/* Icon-only rail (collapsed): the rail itself narrows to 70px and shows the compact mark */
@media (min-width: 992px) {
.sidebar-icon-only .navbar .topbar-brand-ibps { width: 70px; }
.sidebar-icon-only .navbar .topbar-brand-ibps .topbar-brand-ibps-full { display: none; }
.sidebar-icon-only .navbar .topbar-brand-ibps .topbar-brand-ibps-mini {
display: block;
max-height: 20px;
}
}
/* Tablet/mobile: drop the wordmark, keep the mark tile so the brand is still present */
@media (max-width: 1199.98px) {
.navbar .topbar-brand-ibps { width: 88px; }
.navbar .topbar-atha-name { display: none; }
.navbar .topbar-atha-icon { width: 24px; height: 24px; }
}
/* Mobile: the rail itself is 64px wide here, so the IBPS box must fit and use the compact mark */
@media (max-width: 991.98px) {
.navbar .topbar-brand-ibps { width: auto; max-width: 56px; }
.navbar .topbar-brand-ibps .topbar-brand-ibps-full { display: none; }
.navbar .topbar-brand-ibps .topbar-brand-ibps-mini { display: block; max-height: 20px; }
}
/* ---- 15.2 Compact level / OP-level numeral badges with hover labels ---- */
.navbar .topbar-level-icons {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 0;
margin: 0;
}
.navbar .topbar-level-icons:empty { display: none; }
.topbar-tt { position: relative; }
.topbar-level-icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 26px;
padding: 0 7px;
border-radius: 8px;
cursor: default;
position: relative;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
/* The level number itself: tabular figures keep the two badges optically aligned. */
.topbar-level-num {
position: relative;
font-family: var(--zoho-font);
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1, 'ss01' 1;
letter-spacing: -0.02em;
line-height: 1;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
}
.topbar-level-icon-gold {
color: #F0B459;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%),
linear-gradient(180deg, rgba(255, 214, 102, 0.2), rgba(255, 190, 60, 0.1));
box-shadow: inset 0 0 0 1px rgba(255, 200, 60, 0.38);
}
.topbar-level-icon-blue {
color: #8FC0FF;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%),
linear-gradient(180deg, rgba(96, 165, 255, 0.2), rgba(70, 140, 240, 0.1));
box-shadow: inset 0 0 0 1px rgba(96, 165, 255, 0.38);
}
.topbar-level-icon:hover {
transform: translateY(-1px);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 4px 10px -3px rgba(0, 0, 0, 0.35);
}
.topbar-tt::after {
content: attr(data-tip);
position: absolute;
left: 50%;
top: calc(100% + 8px);
transform: translateX(-50%) translateY(-3px);
background: #fff;
color: var(--zoho-text);
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
padding: 5px 9px;
border-radius: 7px;
box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
opacity: 0;
pointer-events: none;
z-index: 60;
transition: opacity 0.12s ease, transform 0.12s ease;
}
.topbar-tt:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Tablet: tighten the touch gap so the chips keep clear of the avatar. */
@media (max-width: 991.98px) {
.navbar .topbar-level-icons { gap: 6px; }
}
/* ------------------------------------------------------------
Vendor Advance detail drawer (pages/payments/VendorAdvanceDetail.tsx)
Fact tiles / amount panel reuse the .zbill-* styles; these cover the
account strip, attachment/log chips, editable form, comments + actions.
------------------------------------------------------------ */
.zva-detail-popup { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.zva-detail-popup .zbill-detail-facts,
.zva-detail-popup .zbill-amount-panel { margin: 0; }
.zva-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zva-detail-facts .zbill-fact-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zva-detail-account { margin: 0; line-height: 1.6; }
.zva-detail-account svg { color: var(--zoho-primary); align-self: center; }
.zva-detail-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.zva-detail-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 14px;
border: 1px solid var(--zoho-border);
border-radius: 999px;
background: #fff;
font-family: var(--zoho-font);
font-size: 12.5px;
font-weight: 600;
line-height: 1;
color: var(--zoho-text-secondary);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.zva-detail-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(23, 28, 46, 0.25); }
.zva-detail-chip-primary { color: var(--zoho-primary-dark); background: rgba(64, 141, 251, 0.08); border-color: rgba(64, 141, 251, 0.3); }
.zva-detail-chip-primary:hover { background: rgba(64, 141, 251, 0.14); }
.zva-detail-chip-info { color: #17945f; background: rgba(34, 179, 120, 0.08); border-color: rgba(34, 179, 120, 0.3); }
.zva-detail-chip-info:hover { background: rgba(34, 179, 120, 0.14); }
.zva-detail-chip-muted { color: var(--zoho-danger); background: rgba(247, 82, 90, 0.07); border-color: rgba(247, 82, 90, 0.25); cursor: default; }
.zva-detail-chip-muted:hover { transform: none; box-shadow: none; }
.zva-detail-form {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 14px 10px;
background: #f7f9fd;
border: 1px solid var(--zoho-border);
border-radius: 10px;
}
.zva-detail-form .form-group { margin-bottom: 8px; min-width: 0; }
.zva-detail-form label {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 4px;
font-size: 12px;
font-weight: 600;
color: var(--zoho-text-secondary);
}
.zva-detail-form label svg { color: var(--zoho-primary); opacity: 0.8; flex-shrink: 0; }
.zva-detail-form .form-control[readonly] { background: #eef2f9; color: var(--zoho-text); }
.zva-detail-form .zva-detail-payable { font-weight: 700; color: #17945f; background: rgba(34, 179, 120, 0.1); border-color: rgba(34, 179, 120, 0.35); }
.zva-detail-form .zva-words { margin: 0; background: #fff; }
.zva-detail-comments {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
padding: 10px 12px;
font-size: 12.5px;
font-weight: 600;
color: var(--zoho-text-secondary);
background: rgba(253, 145, 52, 0.07);
border: 1px solid rgba(253, 145, 52, 0.25);
border-left: 3px solid var(--zoho-warning);
border-radius: 8px;
}
.zva-detail-comments svg { color: var(--zoho-warning); align-self: center; flex-shrink: 0; }
.zva-detail-comments span { font-weight: 500; color: var(--zoho-text); overflow-wrap: anywhere; min-width: 0; flex: 1 1 200px; }
.zva-detail-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 4px;
padding-top: 16px;
border-top: 1px solid var(--zoho-border);
}
.zva-detail-actions .btn { margin: 0 !important; }
.zva-detail-action-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 31px;
padding: 0 14px;
border: none;
border-radius: var(--zoho-radius-btn);
font-family: var(--zoho-font);
font-size: 12.5px;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.zva-detail-action-btn-primary { background: linear-gradient(135deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%); box-shadow: 0 3px 10px -3px rgba(64, 141, 251, 0.55); }
.zva-detail-action-btn:hover:not(:disabled) { transform: translateY(-1px); }
.zva-detail-action-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.zva-detail-popup > .text-center { padding-top: 16px; border-top: 1px solid var(--zoho-border); }
@media (max-width: 575px) {
.zva-detail-facts { grid-template-columns: 1fr; }
.zva-detail-form .row > [class*='col-'] { flex: 0 0 100%; max-width: 100%; }
.zva-detail-actions > * { flex: 1 1 100%; justify-content: center; }
.zva-detail-chip { flex: 1 1 auto; justify-content: center; }
.zva-detail-account strong { overflow-wrap: anywhere; }
}
/* Pending-payment drawers (Bill, Other): amounts summary LEFT, action form RIGHT. Only when the drawer is
actionable (.is-split); read-only views keep the stacked flow. Stacks again below 1100px. */
.zva-detail-split.is-split {
display: grid;
grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr);
gap: 14px;
align-items: stretch;
}
.zva-detail-split.is-split > .zbill-amount-panel {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.zva-detail-split.is-split > .zva-detail-form { min-width: 0; }
/* Inside the narrower right column the 3/4-up bootstrap row becomes a grid: first field (Approval
Amount) full width, the rest side by side. */
.zva-detail-split.is-split .zva-detail-form .row:first-child {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0 12px;
margin: 0;
}
.zva-detail-split.is-split .zva-detail-form .row:first-child > [class*='col-'] {
flex: none;
width: auto;
max-width: none;
padding: 0;
}
.zva-detail-split.is-split .zva-detail-form .row:first-child > [class*='col-']:first-child { grid-column: 1 / -1; }
.zva-detail-split.is-split .zva-detail-form .row:not(:first-child) { margin: 0; }
.zva-detail-split.is-split .zva-detail-form .row:not(:first-child) > [class*='col-'] { padding: 0; }
@media (max-width: 1100px) {
.zva-detail-split.is-split { grid-template-columns: 1fr; }
.zva-detail-split.is-split > .zbill-amount-panel { justify-content: flex-start; }
}
/* Vendor Advance drawer — entrance transition + loading skeleton */
@keyframes zva-fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.zva-detail-popup:not(.zva-detail-loading) > * {
animation: zva-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.zva-detail-popup:not(.zva-detail-loading) > *:nth-child(2) { animation-delay: 0.05s; }
.zva-detail-popup:not(.zva-detail-loading) > *:nth-child(3) { animation-delay: 0.1s; }
.zva-detail-popup:not(.zva-detail-loading) > *:nth-child(4) { animation-delay: 0.15s; }
.zva-detail-popup:not(.zva-detail-loading) > *:nth-child(5) { animation-delay: 0.2s; }
.zva-detail-popup:not(.zva-detail-loading) > *:nth-child(n+6) { animation-delay: 0.25s; }
.zva-skel-icon { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.zva-skel-line { height: 13px; width: 70%; }
.zva-skel-line-sm { height: 9px; width: 40%; margin-bottom: 7px; }
.zva-skel-block { width: 100%; border-radius: 10px; }
.zva-skel-strip { height: 36px; }
.zva-skel-panel { height: 170px; }
@media (prefers-reduced-motion: reduce) {
.zva-detail-popup > * { animation: none !important; }
}
/* Activity log — summary header card (replaces the context chips + tinted toolbar in the modal) */
.alog-summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: 'icon main side' 'actions actions actions';
align-items: center;
gap: 12px 14px;
padding: 14px 16px;
margin-bottom: 6px;
background: linear-gradient(135deg, #f3f8ff 0%, #f7f9fd 60%, #fff 100%);
border: 1px solid #d8e4fb;
border-radius: 12px;
animation: zva-fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.alog-summary-icon {
grid-area: icon;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px;
color: #fff;
background: linear-gradient(155deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
box-shadow: 0 4px 12px -3px rgba(64, 141, 251, 0.55);
}
.alog-summary-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.alog-summary-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zoho-text-muted); }
.alog-summary-id { font-size: 16px; font-weight: 700; color: var(--zoho-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.alog-summary-org { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; color: var(--zoho-text-secondary); overflow-wrap: anywhere; }
.alog-summary-org svg { flex: none; color: var(--zoho-text-muted); }
.alog-summary-side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.alog-summary-actions {
grid-area: actions;
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-top: 12px;
border-top: 1px dashed #cfdcf5;
}
.alog-section-head .alog-section-title { margin-top: 0; }
@media (max-width: 575px) {
.alog-summary { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'icon main' 'side side' 'actions actions'; }
.alog-summary-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
.alog-summary-actions .alog-btn { flex: 1 1 auto; justify-content: center; }
.alog-time { margin-left: 0; flex-basis: 100%; }
.alog-card { padding: 11px 11px; gap: 10px; }
.alog-toolbar .alog-search { flex-basis: 100%; }
}
/* ---- Activity log v3: dark hero header + labelled fact grid ---- */
.alog-summary {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: 'icon main actions' 'side side side';
background: radial-gradient(120% 160% at 100% 0%, rgba(64, 141, 251, 0.35) 0%, transparent 55%),
linear-gradient(135deg, #1b2038 0%, #2a3560 100%);
border: none;
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 10px 24px -12px rgba(27, 32, 56, 0.6);
}
.alog-summary-icon { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); width: 46px; height: 46px; }
.alog-summary-label { color: rgba(255, 255, 255, 0.6); }
.alog-summary-id { color: #fff; font-size: 18px; letter-spacing: 0.01em; }
.alog-summary-org { color: rgba(255, 255, 255, 0.72); }
.alog-summary-org svg { color: rgba(255, 255, 255, 0.5); }
.alog-summary-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
.alog-summary-actions { border-top: none; padding-top: 0; justify-content: flex-end; }
.alog-summary .alog-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #fff;
}
.alog-summary .alog-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); color: #fff; }
.alog-summary .alog-context-chip-count { background: rgba(34, 179, 120, 0.2); border-color: rgba(34, 179, 120, 0.5); color: #8cf0c6; font-weight: 600; }
.alog-summary .alog-pill-info { background: rgba(64, 141, 251, 0.25); border-color: rgba(120, 175, 255, 0.5); color: #cfe2ff; }
.alog-summary .alog-pill-success { background: rgba(34, 179, 120, 0.2); border-color: rgba(34, 179, 120, 0.5); color: #8cf0c6; }
.alog-summary .alog-pill-danger { background: rgba(247, 82, 90, 0.22); border-color: rgba(247, 82, 90, 0.5); color: #ffc2c5; }
.alog-summary .alog-pill-default { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: #e6e8f2; }
.alog-section-head { margin: 22px 0 14px; }
.alog-card { border-left: 3px solid var(--zoho-border); padding: 14px 16px; }
.alog-item-info .alog-card { border-left-color: var(--zoho-primary); }
.alog-item-success .alog-card { border-left-color: var(--zoho-success); }
.alog-item-danger .alog-card { border-left-color: var(--zoho-danger); }
.alog-avatar { width: 40px; height: 40px; font-size: 13.5px; }
.alog-name { font-size: 14.5px; }
.alog-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 8px;
margin: 12px 0 0;
}
.alog-fact {
min-width: 0;
padding: 8px 10px;
background: #f7f9fd;
border: 1px solid var(--zoho-border);
border-radius: 8px;
}
.alog-fact dt {
display: flex;
align-items: center;
gap: 4px;
margin: 0 0 2px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--zoho-text-muted);
}
.alog-fact dt svg { color: var(--zoho-primary); opacity: 0.8; }
.alog-fact dd { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--zoho-text); overflow-wrap: anywhere; }
.alog-fact-amount { background: #f1f9f5; border-color: #cdeee0; }
.alog-fact-amount dd { color: #127a51; font-size: 14px; font-variant-numeric: tabular-nums; }
.alog-fact-amount dt svg { color: var(--zoho-success); }
.alog-remarks b { display: block; margin-bottom: 1px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zoho-primary-dark); }
@media (max-width: 575px) {
.alog-summary { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'icon main' 'side side' 'actions actions'; }
.alog-summary-actions { justify-content: stretch; }
.alog-facts { grid-template-columns: 1fr 1fr; }
}
/* "Show [n] entries" pill — matches the Search / Excel / PDF pills in the table toolbar and
overrides the legacy `.dataTables_length select` rule that squeezed the chevron. */
.dataTables_wrapper .dataTables_length .z-select { min-width: 78px; }
.dataTables_wrapper .dataTables_length .z-select select {
height: 34px;
padding: 0 38px 0 16px;
border: 1px solid var(--zoho-input-border);
border-radius: 999px;
background-color: #fff;
font-size: 13px;
font-weight: 700;
color: var(--zoho-text);
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.05);
}
.dataTables_wrapper .dataTables_length .z-select select:hover:not(:disabled) { border-color: #b7c6f2; }
.dataTables_wrapper .dataTables_length .z-select select:focus,
.dataTables_wrapper .dataTables_length .z-select select:focus-visible {
border-color: var(--zoho-primary) !important;
box-shadow: 0 0 0 3px rgba(64, 141, 251, 0.16) !important;
}
.dataTables_wrapper .dataTables_length .z-select .z-select-chevron {
right: 7px;
width: 20px;
height: 20px;
padding: 3px;
border-radius: 50%;
background: #e8f0ff;
}
@media (max-width: 575px) {
.dataTables_wrapper .dataTables_length .z-select { flex: 1; }
}
/* Custom "Show [n] entries" menu (DataTableChrome LengthMenu) */
.dt-length-menu { position: relative; display: inline-block; vertical-align: middle; margin: 0 2px; }
.dt-length-trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 78px;
height: 34px;
padding: 0 8px 0 16px;
border: 1px solid var(--zoho-input-border);
border-radius: 999px;
background: #fff;
font-family: var(--zoho-font);
font-size: 13px;
font-weight: 700;
color: var(--zoho-text);
box-shadow: 0 1px 2px rgba(23, 28, 46, 0.05);
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dt-length-trigger:hover { border-color: #b7c6f2; }
.dt-length-menu.open .dt-length-trigger,
.dt-length-trigger:focus-visible {
outline: none;
border-color: var(--zoho-primary);
box-shadow: 0 0 0 3px rgba(64, 141, 251, 0.16);
}
.dt-length-chevron {
width: 20px;
height: 20px;
padding: 3px;
border-radius: 50%;
background: #e8f0ff;
color: var(--zoho-primary);
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dt-length-menu.open .dt-length-chevron { transform: rotate(180deg); }
.dt-length-list {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 50;
min-width: 100%;
margin: 0;
padding: 5px;
list-style: none;
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 12px;
box-shadow: 0 12px 28px -8px rgba(23, 28, 46, 0.28);
animation: zva-fade-up 0.16s ease both;
}
.dt-length-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 7px 10px;
border: none;
border-radius: 8px;
background: transparent;
font-family: var(--zoho-font);
font-size: 13px;
font-weight: 600;
color: var(--zoho-text);
text-align: left;
cursor: pointer;
transition: background 0.12s ease;
}
.dt-length-option:hover { background: var(--zoho-row-hover); }
.dt-length-option.active { background: rgba(64, 141, 251, 0.1); color: var(--zoho-primary-dark); }
.dt-length-option svg { color: var(--zoho-primary); }
@media (max-width: 575px) {
.dt-length-menu { flex: 1; }
.dt-length-trigger { width: 100%; }
}
/* ---- Filters button + panel polish (FilterOffcanvas.tsx) ---- */
.zplist-toolbar .filter-btn,
.filter-btn {
gap: 9px;
height: 38px;
padding: 0 16px 0 6px !important;
border: 1px solid #d8e4fb !important;
border-radius: 999px !important;
background: linear-gradient(180deg, #fff 0%, #f3f8ff 100%) !important;
color: var(--zoho-primary-dark) !important;
font-weight: 600;
box-shadow: 0 2px 8px -3px rgba(64, 141, 251, 0.35);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.filter-btn:hover {
transform: translateY(-1px);
border-color: var(--zoho-primary) !important;
box-shadow: 0 6px 14px -5px rgba(64, 141, 251, 0.5);
}
.filter-btn-icon {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
background: linear-gradient(155deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
box-shadow: 0 3px 8px -2px rgba(64, 141, 251, 0.6);
}
.filter-btn-active { background: linear-gradient(180deg, #f3f8ff 0%, #e6f0ff 100%) !important; border-color: var(--zoho-primary) !important; }
.filter-btn-dot { top: 5px; right: 6px; background: var(--zoho-success); border: 2px solid #fff; width: 10px; height: 10px; }
.zfilter-panel { width: 400px; border-radius: 14px 0 0 14px; overflow: hidden; }
.zfilter-panel .zoffcanvas-head {
justify-content: flex-start;
gap: 12px;
padding: 18px 20px;
background: radial-gradient(120% 160% at 100% 0%, rgba(64, 141, 251, 0.35) 0%, transparent 55%), linear-gradient(135deg, #1b2038 0%, #2a3560 100%);
border-bottom: none;
}
.zfilter-head-icon {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px;
color: #fff;
background: rgba(255, 255, 255, 0.14);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
flex: none;
}
.zfilter-head-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.zfilter-panel .zoffcanvas-title { color: #fff; font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.zfilter-head-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.65); }
.zfilter-panel .zoffcanvas-close {
width: 30px;
height: 30px;
border-radius: 50%;
color: #fff;
background: rgba(255, 255, 255, 0.12);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, transform 0.2s ease;
}
.zfilter-panel .zoffcanvas-close:hover { background: rgba(255, 255, 255, 0.24); transform: rotate(90deg); }
.zfilter-panel .zoffcanvas-body { padding: 20px; background: #f9fafd; }
.zfilter-panel .form-grid { gap: 16px; }
.zfilter-panel .form-grid > label {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 12px 14px 14px;
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--zoho-text-secondary);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.zfilter-panel .form-grid > label:focus-within { border-color: var(--zoho-primary); box-shadow: 0 0 0 3px rgba(64, 141, 251, 0.12); }
.zfilter-panel .zoffcanvas-foot { padding: 14px 20px; gap: 10px; box-shadow: 0 -6px 16px -10px rgba(23, 28, 46, 0.2); }
.zfilter-panel .zoffcanvas-foot .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 10px; font-weight: 600; }
.zfilter-panel .zfilter-reset { flex: 1; background: #fff; border: 1px solid var(--zoho-input-border); color: var(--zoho-text-secondary); }
.zfilter-panel .zfilter-reset:hover { background: var(--zoho-row-hover); }
.zfilter-panel .zfilter-apply {
flex: 2;
border: none;
background: linear-gradient(135deg, var(--zoho-primary) 0%, var(--zoho-primary-dark) 100%);
box-shadow: 0 4px 14px -4px rgba(64, 141, 251, 0.55);
}
@media (max-width: 575px) { .zfilter-panel { width: 100vw; max-width: 100vw; border-radius: 0; } }
/* Bill detail drawer: unused-credit chip */
.zva-detail-chip-credit { cursor: default; color: #a35a0a; background: rgba(253, 145, 52, 0.09); border-color: rgba(253, 145, 52, 0.3); }
.zva-detail-chip-credit:hover { transform: none; box-shadow: none; }
/* Payee detail drawer: payee-name tile spans the full row and may wrap (long fund/company names) */
.zva-detail-facts .zva-fact-wide { grid-column: 1 / -1; }
.zva-detail-facts .zva-fact-wrap { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* ============================================================
Payment Activity Log v4 (.alx-*) — ActivityLogPanel.tsx
Hero with stats + approval path, sticky filter bar, day-grouped timeline with icon nodes.
Standalone namespace: the older .alog-* rules above are no longer used by the panel.
============================================================ */
.alx { display: flex; flex-direction: column; gap: 16px; font-family: var(--zoho-font); }
/* Standalone search (only when opened without a Payment ID) */
.alx-search { position: relative; display: flex; gap: 8px; align-items: center; }
.alx-search .form-control { height: 40px; padding-left: 36px; border-radius: 10px; }
.alx-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--zoho-text-muted); pointer-events: none; }
.alx-btn {
display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px;
font-family: var(--zoho-font); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.alx-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.alx-btn-solid { background: linear-gradient(135deg, var(--zoho-primary), var(--zoho-primary-dark)); color: #fff; border: 0; }
.alx-btn-solid:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(64, 141, 251, 0.7); }
.alx-btn-ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); }
.alx-btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
/* ---- Hero ---- */
.alx-hero {
position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px;
padding: 18px 20px 16px; border-radius: 16px; color: #fff;
background:
radial-gradient(90% 140% at 100% 0%, rgba(64, 141, 251, 0.4) 0%, transparent 55%),
radial-gradient(70% 120% at 0% 100%, rgba(34, 179, 120, 0.18) 0%, transparent 60%),
linear-gradient(135deg, #171c34 0%, #2a3560 100%);
box-shadow: 0 14px 30px -16px rgba(23, 28, 52, 0.75);
animation: zva-fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.alx-hero-top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.alx-hero-icon {
flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 13px; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.alx-hero-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; gap: 2px; }
.alx-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.alx-id-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.alx-id { font-size: 20px; font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.alx-copy {
display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px; border-radius: 7px; flex: none;
border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 11px; font-weight: 600; cursor: pointer;
}
.alx-copy:hover { background: rgba(255, 255, 255, 0.2); }
.alx-org { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255, 255, 255, 0.72); overflow-wrap: anywhere; }
.alx-org svg { flex: none; color: rgba(255, 255, 255, 0.5); }
.alx-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.alx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.alx-stat {
display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 13px; border-radius: 12px;
background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
}
.alx-stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.58); }
.alx-stat-value { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.alx-stat-money { font-size: 17px; color: #8cf0c6; font-variant-numeric: tabular-nums; }
.alx-stat-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
.alx-stat-tone-success { color: #8cf0c6; }
.alx-stat-tone-danger { color: #ffc2c5; }
.alx-stat-tone-info { color: #cfe2ff; }
.alx-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 2px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.2); }
.alx-journey-step { display: inline-flex; align-items: center; gap: 2px; }
.alx-journey-chip {
display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px;
font-size: 12px; font-weight: 600; color: #e6e8f2; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
}
.alx-journey-arrow { color: rgba(255, 255, 255, 0.45); }
.alx-journey-end-success { color: #8cf0c6; background: rgba(34, 179, 120, 0.2); border-color: rgba(34, 179, 120, 0.55); }
.alx-journey-end-danger { color: #ffc2c5; background: rgba(247, 82, 90, 0.22); border-color: rgba(247, 82, 90, 0.5); }
.alx-journey-end-info, .alx-journey-end-default { color: #cfe2ff; background: rgba(64, 141, 251, 0.25); border-color: rgba(120, 175, 255, 0.5); }
/* ---- Sticky toolbar: title + filters + sort ---- */
.alx-toolbar {
position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
margin: 0 -20px; padding: 10px 20px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--zoho-border);
}
.alx-title { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zoho-text-secondary); }
.alx-title svg { color: var(--zoho-primary); }
.alx-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alx-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.alx-filter {
display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; cursor: pointer;
font-family: var(--zoho-font); font-size: 12px; font-weight: 600; color: var(--zoho-text-secondary); background: #fff; border: 1px solid var(--zoho-border);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.alx-filter b { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: #eef1f7; color: var(--zoho-text-secondary); }
.alx-filter:hover { border-color: #c9d6f0; background: #f7f9fe; }
.alx-filter.is-on { color: #fff; background: #2a3560; border-color: #2a3560; }
.alx-filter.is-on b { background: rgba(255, 255, 255, 0.22); color: #fff; }
.alx-filter-success.is-on { background: #17945f; border-color: #17945f; }
.alx-filter-danger.is-on { background: #d6454d; border-color: #d6454d; }
.alx-filter-info.is-on { background: var(--zoho-primary); border-color: var(--zoho-primary); }
.alx-sort {
display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; cursor: pointer;
font-family: var(--zoho-font); font-size: 12px; font-weight: 600; color: var(--zoho-primary-dark); background: rgba(64, 141, 251, 0.08); border: 1px solid rgba(64, 141, 251, 0.25);
}
.alx-sort:hover { background: rgba(64, 141, 251, 0.15); }
/* ---- Timeline ---- */
.alx-timeline { display: flex; flex-direction: column; gap: 6px; }
.alx-day-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zoho-text-muted); }
.alx-day-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--zoho-border), transparent); }
.alx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.alx-item { position: relative; padding-left: 46px; animation: alx-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--alx-delay, 0ms); }
.alx-item::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: -16px; width: 2px; background: linear-gradient(#d8e2f5, #eef2fa); border-radius: 2px; }
.alx-item:last-child::before { display: none; }
@keyframes alx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.alx-node {
position: absolute; left: 0; top: 4px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; color: #fff; background: var(--zoho-text-muted); box-shadow: 0 0 0 4px #fff, 0 4px 10px -3px rgba(23, 28, 52, 0.35);
}
.alx-item-info .alx-node { background: linear-gradient(135deg, var(--zoho-primary), var(--zoho-primary-dark)); }
.alx-item-success .alx-node { background: linear-gradient(135deg, #22b378, #17945f); }
.alx-item-danger .alx-node { background: linear-gradient(135deg, #f7525a, #d6454d); }
.alx-item-default .alx-node { background: linear-gradient(135deg, #8a93ad, #6b7490); }
.alx-card {
display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: #fff; border: 1px solid var(--zoho-border);
border-left: 3px solid var(--zoho-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(23, 28, 52, 0.04);
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.alx-card:hover { box-shadow: 0 10px 22px -12px rgba(23, 28, 52, 0.28); transform: translateY(-1px); }
.alx-item-info .alx-card { border-left-color: var(--zoho-primary); }
.alx-item-success .alx-card { border-left-color: #22b378; background: linear-gradient(90deg, rgba(34, 179, 120, 0.05), #fff 38%); }
.alx-item-danger .alx-card { border-left-color: #f7525a; background: linear-gradient(90deg, rgba(247, 82, 90, 0.05), #fff 38%); }
.alx-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alx-avatar {
flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
font-size: 12px; font-weight: 700; color: #2a3560; background: #e9efff; border: 1px solid #d3defa;
}
.alx-who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.alx-name { font-size: 14px; font-weight: 700; color: var(--zoho-text); overflow-wrap: anywhere; }
.alx-role { font-size: 11.5px; color: var(--zoho-text-muted); }
.alx-pill {
display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: capitalize; border: 1px solid transparent;
}
.alx-pill-success { background: #e8f7f1; border-color: #b6f6dc; color: #127a51; }
.alx-pill-danger { background: #feedee; border-color: #fad7d9; color: #b2343c; }
.alx-pill-info { background: #ebf3fe; border-color: #d8e4fb; color: #1c5bd9; }
.alx-pill-default { background: #f1f1fa; border-color: #e2e2f2; color: #5a5f7a; }
.alx-time { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.alx-time-clock { font-size: 13px; font-weight: 700; color: var(--zoho-text); font-variant-numeric: tabular-nums; }
.alx-time-rel { font-size: 11px; color: var(--zoho-text-muted); }
.alx-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.alx-fact {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 9px; font-size: 12.5px; color: var(--zoho-text);
background: #f5f7fc; border: 1px solid #e7ebf5;
}
.alx-fact svg { color: var(--zoho-text-muted); flex: none; }
.alx-fact small { font-size: 11.5px; color: var(--zoho-text-muted); }
.alx-fact b { font-weight: 700; }
.alx-fact-amount { background: #eaf8f2; border-color: #bfe9d6; }
.alx-fact-amount svg { color: #17945f; }
.alx-fact-amount b { color: #127a51; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.alx-fact em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.alx-fact em.is-down { color: #a8630a; background: #fff2dc; }
.alx-fact em.is-up { color: #1c5bd9; background: #e4eeff; }
.alx-remarks {
display: flex; gap: 8px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.45; color: var(--zoho-text);
background: #f8f9fd; border-left: 3px solid #c3d3f5; overflow-wrap: anywhere;
}
.alx-remarks > svg { flex: none; margin-top: 2px; color: var(--zoho-primary); }
.alx-remarks small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zoho-text-muted); }
.alx-note { font-size: 12px; color: var(--zoho-text-secondary); }
.alx-note summary { cursor: pointer; width: fit-content; font-weight: 600; color: var(--zoho-text-muted); list-style: none; }
.alx-note summary::-webkit-details-marker { display: none; }
.alx-note summary::before { content: '▸'; display: inline-block; margin-right: 5px; transition: transform 0.15s ease; }
.alx-note[open] summary::before { transform: rotate(90deg); }
.alx-note p { margin: 6px 0 0; padding: 8px 11px; border-radius: 8px; background: #f8f9fd; overflow-wrap: anywhere; }
/* ---- Empty ---- */
.alx-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; text-align: center; border: 1px dashed var(--zoho-border); border-radius: 14px; background: #fafbfe; }
.alx-empty-icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; color: var(--zoho-primary); background: rgba(64, 141, 251, 0.1); }
.alx-empty-title { font-size: 14px; font-weight: 700; color: var(--zoho-text); }
.alx-empty-hint, .alx-empty-filter { font-size: 12.5px; color: var(--zoho-text-muted); }
.alx-empty-filter { text-align: center; padding: 24px 0; }
@media (max-width: 767px) {
.alx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alx-hero-actions { width: 100%; }
.alx-hero-actions .alx-btn { flex: 1 1 auto; justify-content: center; }
.alx-time { align-items: flex-start; flex-basis: 100%; flex-direction: row; gap: 8px; }
.alx-item { padding-left: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.alx-item, .alx-hero { animation: none; }
.alx-card, .alx-card:hover { transition: none; transform: none; }
}
@media print {
.alx-toolbar-right, .alx-hero-actions, .alx-search, .alx-copy { display: none !important; }
.alx-toolbar { position: static; backdrop-filter: none; }
.alx-card, .alx-hero { break-inside: avoid; box-shadow: none; animation: none; }
.alx-item { animation: none; opacity: 1; }
}
/* ---- Compact fact tiles in the payment detail drawers (Bill / Vendor Advance / Payee / Other) ----
Scoped to .zva-detail-popup so the initiate pages' side-pane tiles keep their roomier look. */
.zva-detail-popup .zva-detail-facts {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.zva-detail-popup .zva-detail-facts .zbill-fact-tile {
gap: 8px;
padding: 6px 10px;
border-radius: 8px;
}
.zva-detail-popup .zva-detail-facts .zbill-fact-tile:hover {
transform: none;
box-shadow: none;
border-color: rgba(64, 141, 251, 0.35);
}
.zva-detail-popup .zva-detail-facts .zbill-fact-tile:hover .zbill-fact-icon { transform: none; }
.zva-detail-popup .zva-detail-facts .zbill-fact-icon { width: 24px; height: 24px; border-radius: 6px; }
.zva-detail-popup .zva-detail-facts .zbill-fact-icon svg { width: 13px; height: 13px; }
.zva-detail-popup .zva-detail-facts .zbill-fact-label { font-size: 9.5px; letter-spacing: 0.04em; line-height: 1.2; }
.zva-detail-popup .zva-detail-facts .zbill-fact-value { margin-top: 0; font-size: 12.5px; line-height: 1.25; }
.zva-detail-popup .zva-detail-facts .zbill-status-pill {
padding: 2px 9px;
font-size: 10px;
box-shadow: none;
}
@media (max-width: 900px) {
.zva-detail-popup .zva-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.zva-detail-popup .zva-detail-facts { grid-template-columns: 1fr; }
}
/* ---- Toast notifications (components/Toast.tsx) ---- */
.ztoast-stack {
position: fixed;
top: 76px;
right: 20px;
z-index: 1200; /* above the side panels (1091-1093) and modals (1100) */
display: flex;
flex-direction: column;
gap: 10px;
width: 360px;
max-width: calc(100vw - 32px);
pointer-events: none;
font-family: var(--zoho-font);
}
.ztoast {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 14px 15px 14px;
background: #fff;
border: 1px solid var(--zoho-border);
border-left: 4px solid var(--ztoast-accent, var(--zoho-primary));
border-radius: 12px;
box-shadow: 0 2px 6px rgba(23, 28, 46, 0.06), 0 16px 34px -10px rgba(23, 28, 46, 0.28);
pointer-events: auto;
animation: ztoast-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ztoast-in {
from { opacity: 0; transform: translateX(24px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.ztoast-success { --ztoast-accent: #22b378; --ztoast-tint: rgba(34, 179, 120, 0.12); --ztoast-ink: #17945f; }
.ztoast-error { --ztoast-accent: #f7525a; --ztoast-tint: rgba(247, 82, 90, 0.12); --ztoast-ink: #d6454d; }
.ztoast-info { --ztoast-accent: var(--zoho-primary); --ztoast-tint: rgba(64, 141, 251, 0.12); --ztoast-ink: var(--zoho-primary-dark); }
.ztoast-icon {
flex: none;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: var(--ztoast-ink);
background: var(--ztoast-tint);
}
.ztoast-body { flex: 1; min-width: 0; padding-top: 1px; }
.ztoast-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--zoho-text); overflow-wrap: anywhere; }
.ztoast-text { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--zoho-text-secondary); overflow-wrap: anywhere; white-space: pre-line; }
.ztoast-close {
flex: none;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--zoho-text-muted);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.ztoast-close:hover { background: #eef1f7; color: var(--zoho-text); }
.ztoast-progress {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
transform-origin: left center;
background: var(--ztoast-accent);
opacity: 0.55;
animation: ztoast-progress var(--ztoast-ms, 4000ms) linear forwards;
}
.ztoast-progress.is-paused { animation-play-state: paused; }
@keyframes ztoast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 575px) {
.ztoast-stack { top: 70px; right: 12px; left: 12px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.ztoast { animation: none; }
.ztoast-progress { animation: none; transform: scaleX(0.4); }
}
@media print {
.ztoast-stack { display: none !important; }
}
/* ---- Confirm card (components/ConfirmDialog.tsx) — replaces the browser's window.confirm ---- */
.zconfirm-backdrop {
position: fixed;
inset: 0;
z-index: 1300; /* above side panels (1091-1093), modals (1100) and toasts (1200) */
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: radial-gradient(80% 80% at 50% 40%, rgba(32, 37, 64, 0.5), rgba(12, 16, 32, 0.66));
backdrop-filter: blur(5px) saturate(1.1);
animation: zconfirm-fade 0.18s ease both;
}
@keyframes zconfirm-fade { from { opacity: 0; } to { opacity: 1; } }
.zconfirm {
--zc-accent: var(--zoho-primary);
--zc-accent-dark: var(--zoho-primary-dark);
--zc-tint: rgba(64, 141, 251, 0.14);
--zc-glow: rgba(64, 141, 251, 0.38);
position: relative;
width: 100%;
max-width: 432px;
padding: 20px 20px 16px;
overflow: hidden;
background:
radial-gradient(130% 100% at 0% 0%, var(--zc-tint) 0%, transparent 52%),
linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 18px;
box-shadow:
0 0 0 1px rgba(23, 28, 46, 0.07),
0 4px 10px rgba(23, 28, 46, 0.06),
0 30px 60px -16px rgba(12, 16, 32, 0.55);
font-family: var(--zoho-font);
animation: zconfirm-pop 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes zconfirm-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
.zconfirm-success { --zc-accent: #22b378; --zc-accent-dark: #17945f; --zc-tint: rgba(34, 179, 120, 0.15); --zc-glow: rgba(34, 179, 120, 0.4); }
.zconfirm-danger { --zc-accent: #f7525a; --zc-accent-dark: #d6454d; --zc-tint: rgba(247, 82, 90, 0.14); --zc-glow: rgba(247, 82, 90, 0.4); }
.zconfirm-warning { --zc-accent: #fd9134; --zc-accent-dark: #dd7412; --zc-tint: rgba(253, 145, 52, 0.16); --zc-glow: rgba(253, 145, 52, 0.42); }
.zconfirm-main { display: flex; align-items: center; gap: 14px; }
.zconfirm-icon {
position: relative;
flex: none;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
background: linear-gradient(145deg, var(--zc-accent), var(--zc-accent-dark));
box-shadow: 0 0 0 5px var(--zc-tint), 0 10px 20px -6px var(--zc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.zconfirm-text { flex: 1; min-width: 0; }
.zconfirm-title { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: #161b2e; }
.zconfirm-msg { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: #646c85; }
/* Summary panel: Payment ID + Amount, the amount set large in the tone colour */
.zconfirm-summary {
display: flex;
align-items: stretch;
margin-top: 16px;
background: rgba(255, 255, 255, 0.75);
border: 1px solid #e6ebf4;
border-radius: 12px;
box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(23, 28, 46, 0.04);
}
.zconfirm-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 14px; }
.zconfirm-cell + .zconfirm-cell { border-left: 1px solid #e6ebf4; }
.zconfirm-cell small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8b93ab; }
.zconfirm-cell b { font-size: 13px; font-weight: 700; color: #161b2e; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.zconfirm-cell-amount { flex: none; margin-left: auto; text-align: right; }
.zconfirm-cell-amount b { font-size: 19px; letter-spacing: -0.01em; color: var(--zc-accent-dark); }
.zconfirm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.zconfirm-hint { margin-right: auto; font-size: 11px; color: #9aa1b8; }
.zconfirm-hint kbd {
padding: 1px 6px;
font-family: inherit;
font-size: 10px;
font-weight: 700;
color: #6b7390;
background: #f1f4f9;
border: 1px solid #dfe5ef;
border-bottom-width: 2px;
border-radius: 5px;
}
.zconfirm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 36px;
padding: 0 16px;
border-radius: 10px;
font-family: var(--zoho-font);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.zconfirm-btn:focus-visible { outline: 3px solid var(--zc-tint); outline-offset: 1px; }
.zconfirm-btn-cancel { color: #4d5570; background: rgba(255, 255, 255, 0.8); border: 1px solid #dde3ee; }
.zconfirm-btn-cancel:hover { background: #f3f5fa; color: #161b2e; }
.zconfirm-btn-confirm {
padding: 0 14px 0 18px;
color: #fff;
border: 0;
background: linear-gradient(135deg, var(--zc-accent), var(--zc-accent-dark));
box-shadow: 0 8px 18px -8px var(--zc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.zconfirm-btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -8px var(--zc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.zconfirm-btn-confirm svg { transition: transform 0.15s ease; }
.zconfirm-btn-confirm:hover svg { transform: translateX(2px); }
@media (max-width: 480px) {
.zconfirm-hint { display: none; }
.zconfirm-actions .zconfirm-btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
.zconfirm, .zconfirm-backdrop { animation: none; }
.zconfirm-btn, .zconfirm-btn-confirm:hover, .zconfirm-btn-confirm svg { transition: none; transform: none; }
}
@media print {
.zconfirm-backdrop { display: none !important; }
}
/* ---- Navbar notification bell (components/NotificationBell.tsx) ---- */
.navbar .znotif { position: relative; display: flex; align-items: center; }
/* Bell button: radar pulse rings (while unread), spring hover with dark/neon restyle, bell-ring wiggle, sparks, press squish. */
.znotif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.znotif-pulse {
position: absolute;
inset: 0;
border-radius: 10px;
background: rgba(99, 102, 241, 0.45);
pointer-events: none;
z-index: 0;
animation: znotif-radar 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.znotif-pulse.delay { animation-delay: 1.25s; }
@keyframes znotif-radar { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(1.9); opacity: 0; } }
.znotif-btn {
position: relative;
z-index: 1;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid transparent;
border-radius: 10px;
color: #334155;
background: #f8fafc;
cursor: pointer;
outline: none;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 #fff;
}
.znotif-btn:hover, .znotif-btn.is-open {
/* The top band is dark, so the hover stays LIGHT (soft indigo tint) with a neon ring: it lifts out instead of blending in. */
transform: translateY(-2px) scale(1.1);
color: #4f46e5;
background: linear-gradient(145deg, #ffffff 0%, #e4e7ff 100%);
border-color: #818cf8;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(99, 102, 241, 0.35), 0 0 18px rgba(129, 140, 248, 0.7), inset 0 1px 0 #fff;
}
.znotif-btn:active { transform: translateY(1px) scale(0.92); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); transition-duration: 0.1s; }
.znotif-btn:focus-visible { outline: 3px solid rgba(99, 102, 241, 0.5); outline-offset: 2px; }
.znotif-btn svg { transform-origin: 50% 0; transition: filter 0.4s ease; }
.znotif-btn:hover svg, .znotif-btn.is-open svg { filter: drop-shadow(0 0 2px rgba(99, 102, 241, 0.55)); }
.znotif-btn:hover svg, .znotif-btn.is-ringing svg { animation: znotif-super-ring 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes znotif-super-ring {
0% { transform: rotate(0) scale(1); } 15% { transform: rotate(25deg) scale(1.1); } 30% { transform: rotate(-22deg) scale(1.1); }
45% { transform: rotate(15deg) scale(1.05); } 60% { transform: rotate(-12deg) scale(1.05); } 75% { transform: rotate(6deg) scale(1); }
85% { transform: rotate(-3deg) scale(1); } 100% { transform: rotate(0) scale(1); }
}
.znotif-spark {
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
opacity: 0;
pointer-events: none;
z-index: 5;
transform: translate(-50%, -50%) scale(0);
}
.znotif-btn:hover .znotif-spark, .znotif-btn.is-ringing .znotif-spark { animation: znotif-shoot 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.znotif-spark.s1 { --tx: -20px; --ty: -26px; background: #ff4757; }
.znotif-spark.s2 { --tx: 20px; --ty: -26px; background: #2ed573; }
.znotif-spark.s3 { --tx: -30px; --ty: -4px; background: #1e90ff; }
.znotif-spark.s4 { --tx: 30px; --ty: -4px; background: #ffa502; }
.znotif-spark.s5 { --tx: -16px; --ty: 24px; background: #eccc68; }
.znotif-spark.s6 { --tx: 16px; --ty: 24px; background: #ff7f50; }
@keyframes znotif-shoot {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
80% { opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}
.znotif-badge {
position: absolute;
top: -5px;
right: -5px;
min-width: 20px;
height: 20px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
color: #fff;
background: linear-gradient(135deg, #ff6b6f, #e5383f);
border: 2px solid #202538; /* cut-out against the dark top band */
border-radius: 999px;
box-sizing: border-box;
animation: znotif-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes znotif-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
/* ---- Panel ---- */
.znotif-panel {
display: flex;
flex-direction: column;
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
top: calc(100% + 12px);
right: -8px;
z-index: 1000;
width: 404px;
max-width: calc(100vw - 24px);
max-height: min(580px, calc(100vh - 96px));
overflow: hidden;
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 18px;
box-shadow: 0 2px 6px rgba(23, 28, 46, 0.06), 0 26px 56px -16px rgba(23, 28, 46, 0.45);
transform: translateY(-6px) scale(0.98);
transform-origin: top right;
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
font-family: var(--zoho-font);
}
.znotif-panel.show {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: none;
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s;
}
.znotif-head {
flex: none;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px 14px 16px;
color: #fff;
background:
radial-gradient(110% 170% at 100% 0%, rgba(64, 141, 251, 0.4) 0%, transparent 55%),
radial-gradient(70% 120% at 0% 100%, rgba(34, 179, 120, 0.16) 0%, transparent 60%),
linear-gradient(135deg, #171c34 0%, #2a3560 100%);
}
.znotif-head-icon {
flex: none;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(255, 255, 255, 0.14);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.znotif-head-text { flex: 1; min-width: 0; }
.znotif-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.znotif-sub { margin-top: 1px; font-size: 11.5px; color: rgba(255, 255, 255, 0.72); }
.znotif-iconbtn {
flex: none;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 9px;
cursor: pointer;
transition: background 0.15s ease;
}
.znotif-iconbtn:hover { background: rgba(255, 255, 255, 0.22); }
.znotif-iconbtn.is-spinning svg { animation: znotif-spin 0.8s linear infinite; }
@keyframes znotif-spin { to { transform: rotate(360deg); } }
.znotif-toolbar {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid #eef1f6;
}
.znotif-tabs { display: inline-flex; padding: 3px; gap: 2px; background: #f0f3f9; border-radius: 10px; }
.znotif-tab {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 11px;
font-family: var(--zoho-font);
font-size: 12px;
font-weight: 600;
color: var(--zoho-text-secondary);
background: transparent;
border: 0;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.znotif-tab b { padding: 0 6px; font-size: 10.5px; color: var(--zoho-text-secondary); background: rgba(23, 28, 52, 0.07); border-radius: 999px; }
.znotif-tab.is-on { color: var(--zoho-text); background: #fff; box-shadow: 0 1px 3px rgba(23, 28, 52, 0.14); }
.znotif-tab.is-on b { color: #fff; background: var(--zoho-primary); }
.znotif-markall {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 10px;
font-family: var(--zoho-font);
font-size: 12px;
font-weight: 600;
color: var(--zoho-primary-dark);
background: rgba(64, 141, 251, 0.08);
border: 1px solid rgba(64, 141, 251, 0.22);
border-radius: 9px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease;
}
.znotif-markall:hover:not(:disabled) { background: rgba(64, 141, 251, 0.16); }
.znotif-markall:disabled { color: var(--zoho-text-muted); background: #f5f7fb; border-color: #e8ecf4; cursor: default; }
.znotif-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 6px; }
.znotif-body { scrollbar-width: thin; scrollbar-color: #c9d2e3 transparent; }
.znotif-body::-webkit-scrollbar { width: 6px; }
.znotif-body::-webkit-scrollbar-thumb { background: #c9d2e3; border-radius: 6px; }
.znotif-list, .znotif-list ul { list-style: none; margin: 0; padding: 0; }
.znotif-group { padding: 10px 18px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zoho-text-muted); }
/* ---- Rows ---- */
.znotif-item {
--zn: #408dfb;
--zn-2: #2f6fd6;
--zn-tint: rgba(64, 141, 251, 0.12);
position: relative;
display: flex;
align-items: center;
margin: 2px 8px;
border-radius: 12px;
transition: background 0.12s ease;
}
.znotif-item.znotif-wf-vendorAdvance { --zn: #22b378; --zn-2: #17945f; --zn-tint: rgba(34, 179, 120, 0.13); }
.znotif-item.znotif-wf-payee { --zn: #8366f0; --zn-2: #6b4fd8; --zn-tint: rgba(107, 79, 216, 0.12); }
.znotif-item.znotif-wf-other { --zn: #fd9134; --zn-2: #dd7412; --zn-tint: rgba(253, 145, 52, 0.15); }
.znotif-item:hover { background: #f4f7fd; }
.znotif-item.is-unread { background: linear-gradient(90deg, var(--zn-tint) 0%, rgba(255, 255, 255, 0) 70%); }
.znotif-item.is-unread::before {
content: '';
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(var(--zn), var(--zn-2));
}
.znotif-row {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 6px 10px 14px;
text-align: left;
font-family: var(--zoho-font);
background: transparent;
border: 0;
border-radius: 12px;
cursor: pointer;
}
.znotif-row:focus-visible { outline: 2px solid var(--zoho-primary); outline-offset: -2px; }
.znotif-row-icon {
flex: none;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
background: linear-gradient(145deg, var(--zn), var(--zn-2));
border-radius: 12px;
box-shadow: 0 6px 12px -6px var(--zn-2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.znotif-item:not(.is-unread) .znotif-row-icon { filter: saturate(0.55); opacity: 0.85; }
.znotif-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.znotif-row-party { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--zoho-text); }
.znotif-item:not(.is-unread) .znotif-row-party { font-weight: 600; color: #4d5570; }
.znotif-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--zn); box-shadow: 0 0 0 3px var(--zn-tint); }
.znotif-row-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.znotif-row-meta { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11.5px; color: var(--zoho-text-muted); }
.znotif-chip { flex: none; padding: 1px 8px; font-size: 10.5px; font-weight: 700; color: var(--zn-2); background: var(--zn-tint); border-radius: 999px; }
.znotif-ago { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.znotif-row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.znotif-row-amount { font-size: 13px; font-weight: 700; color: #127a51; font-variant-numeric: tabular-nums; }
.znotif-item:not(.is-unread) .znotif-row-amount { color: #5c6781; }
.znotif-review {
display: inline-flex;
align-items: center;
gap: 1px;
font-size: 11px;
font-weight: 600;
color: var(--zoho-primary-dark);
opacity: 0;
transform: translateX(-3px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.znotif-item:hover .znotif-review, .znotif-row:focus-visible .znotif-review { opacity: 1; transform: none; }
.znotif-check {
flex: none;
width: 28px;
height: 28px;
margin-right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--zoho-text-secondary);
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.znotif-item:hover .znotif-check, .znotif-check:focus-visible { opacity: 1; }
.znotif-check:hover { color: #fff; background: #22b378; border-color: #22b378; }
/* ---- Loading skeleton / empty ---- */
.znotif-skel { display: flex; align-items: center; gap: 12px; margin: 2px 8px; padding: 10px 14px; }
.znotif-skel-icon, .znotif-skel-lines span {
background: linear-gradient(90deg, #eef1f7 25%, #f7f9fc 50%, #eef1f7 75%);
background-size: 200% 100%;
animation: znotif-shimmer 1.3s ease-in-out infinite;
}
.znotif-skel-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; }
.znotif-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.znotif-skel-lines span { display: block; height: 10px; border-radius: 6px; }
.znotif-skel-lines span:first-child { width: 62%; }
.znotif-skel-lines span:last-child { width: 38%; }
@keyframes znotif-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.znotif-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 34px 24px 38px; text-align: center; font-size: 12.5px; color: var(--zoho-text-muted); }
.znotif-empty strong { font-size: 14px; color: var(--zoho-text); }
.znotif-empty-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; border-radius: 16px; color: #17945f; background: rgba(34, 179, 120, 0.12); box-shadow: 0 0 0 6px rgba(34, 179, 120, 0.06); }
/* ---- Footer ---- */
.znotif-foot { flex: none; padding: 10px 12px 11px; background: #f8f9fd; border-top: 1px solid var(--zoho-border); }
.znotif-foot-links { display: flex; flex-wrap: wrap; gap: 6px; }
.znotif-link {
display: inline-flex;
align-items: center;
gap: 5px;
height: 28px;
padding: 0 9px 0 11px;
font-family: var(--zoho-font);
font-size: 12px;
font-weight: 600;
color: var(--zn, var(--zoho-primary-dark));
background: #fff;
border: 1px solid var(--zoho-border);
border-radius: 999px;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.znotif-link.znotif-wf-bill { --zn: #2f6fd6; }
.znotif-link.znotif-wf-vendorAdvance { --zn: #17945f; }
.znotif-link.znotif-wf-payee { --zn: #6b4fd8; }
.znotif-link.znotif-wf-other { --zn: #dd7412; }
.znotif-link b { padding: 0 6px; font-size: 11px; color: #fff; background: var(--zn, var(--zoho-primary-dark)); border-radius: 999px; }
.znotif-link:hover { background: #f1f5fd; border-color: #c9d6f0; }
.znotif-updated { margin-top: 8px; font-size: 10.5px; color: var(--zoho-text-muted); text-align: right; }
@media (max-width: 575px) {
.znotif-panel { position: fixed; top: 70px; right: 12px; left: 12px; width: auto; max-width: none; }
.znotif-markall { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
.znotif-panel, .znotif-panel.show, .znotif-btn, .znotif-review, .znotif-check { transition: none; }
.znotif-badge, .znotif-btn.is-ringing svg, .znotif-iconbtn.is-spinning svg, .znotif-skel-icon, .znotif-skel-lines span { animation: none; }
.znotif-pulse, .znotif-btn:hover svg, .znotif-btn:hover .znotif-spark, .znotif-btn.is-ringing .znotif-spark { animation: none; }
.znotif-pulse { display: none; }
.znotif-spark { display: none; }
}
@media print {
.znotif { display: none !important; }
}
/* ---- Sidebar "new payment" blink (components/NavBlink.tsx, pendingApprovals.tsx) ---- */
.znav-blink {
flex: none;
position: relative;
width: 9px;
height: 9px;
border-radius: 50%;
background: linear-gradient(135deg, #ff6b6f, #e5383f);
animation: znav-blink 1.2s ease-in-out infinite;
}
.znav-blink::after {
content: '';
position: absolute;
inset: -4px;
border: 2px solid rgba(229, 56, 63, 0.6);
border-radius: 50%;
animation: znav-ring 1.2s ease-out infinite;
}
@keyframes znav-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.75); } }
@keyframes znav-ring { 0% { transform: scale(0.55); opacity: 0.95; } 100% { transform: scale(1.7); opacity: 0; } }
/* Group header: sits before the arrow (the arrow keeps a small gap instead of pushing apart). */
.sidebar .nav .nav-item .nav-link .znav-blink-group { margin-left: auto; }
.sidebar .nav .nav-item .nav-link .znav-blink-group + .menu-arrow { margin-left: 12px; }
/* "Pending Payments" row inside an expanded group: dot at the right edge and the label turns semi-bold. */
.sidebar .nav.sub-menu .nav-item .nav-link .znav-blink-child { margin-left: auto; margin-right: 2px; }
.sidebar .nav.sub-menu .nav-item .nav-link:has(.znav-blink) { font-weight: 600 !important; }
/* Active (blue) row / flyout row: white dot so it still reads. */
.sidebar .nav.sub-menu .nav-item .nav-link.active .znav-blink,
.sidebar-flyout-list a.active .znav-blink { background: #fff; }
.sidebar .nav.sub-menu .nav-item .nav-link.active .znav-blink::after,
.sidebar-flyout-list a.active .znav-blink::after { border-color: rgba(255, 255, 255, 0.75); }
/* Hover flyout rows (portalled to , outside .sidebar). */
.sidebar-flyout-list a:has(.znav-blink) { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 600; }
/* Icon-only rail: the group dot becomes a small bubble on the icon's corner. */
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link { position: relative; }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .znav-blink-group {
position: absolute;
top: 7px;
left: calc(50% + 9px);
margin: 0;
box-shadow: 0 0 0 2px var(--zoho-sidebar-bg, #f7f7fe);
}
@media (prefers-reduced-motion: reduce) {
.znav-blink { animation: none; }
.znav-blink::after { animation: none; opacity: 0.5; transform: scale(1.2); }
}
@media print {
.znav-blink { display: none !important; }
}