` error rows used for failed table loads (colspan
cells across admin/pharmacy/receptionist), forcing a long API error
message onto one `white-space:nowrap` line and overflowing the table. */
b.np-error, span.np-error{
display: inline-block;
padding: .1rem .5rem;
border-radius: 999px;
font-size: .78rem;
line-height: 1.5;
white-space: nowrap;
}
/* Billing stock hint (In stock / low / out) gets the same padded pill so it
never touches the edge of its line container. */
.np-bill-stock{
display: inline-block;
margin-top: .35rem;
padding: .15rem .55rem;
border-radius: 999px;
font-size: .75rem;
font-weight: 600;
background: var(--nk-teal-50);
color: var(--nk-teal-700);
border: 1px solid var(--nk-teal-100);
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
/* Same "stretched pill" root cause .np-badge already guards against
(see that rule's comment): sitting inside a flex/grid ancestor (the
mobile bill-line card layout) let the default cross-axis stretch pull
this into a tall/wide smear instead of a compact pill on narrow
screens. Size to content in every context, like every other badge. */
flex: 0 0 auto;
align-self: flex-start;
width: fit-content;
}
/* Before a medicine is picked the hint has no text — collapse it entirely so
an empty padded pill doesn't render as a stray artifact under the search. */
.np-bill-stock:empty{ display: none; }
.np-bill-stock.is-low{ background:#FEF3CC; color:#8A5A0F; border-color:#F4D9A3; }
.np-bill-stock.is-out{ background:#FEE2E5; color:#9F1E36; border-color:#F5BFBF; }
html[data-theme="dark"] .np-bill-stock{ background:rgba(137,188,189,.14); color:#B4D7D7; border-color:rgba(137,188,189,.3); }
html[data-theme="dark"] .np-bill-stock.is-low{ background:rgba(249,169,69,.18); color:#FBC97A; border-color:rgba(249,169,69,.35); }
html[data-theme="dark"] .np-bill-stock.is-out{ background:rgba(225,29,72,.2); color:#FECDD3; border-color:rgba(225,29,72,.35); }
/* ── File upload presentation (KYC and every other uploader) ───────────────
The filename is user content: it wraps instead of truncating, and the
control keeps the shared 40px/radius/border tokens. */
input[type="file"].np-input{
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.35;
}
.np-dropzone__hint, .np-file-name, [data-file-name]{
overflow-wrap: anywhere;
word-break: break-word;
white-space: normal;
}
/* ── Cards, modals & mobile rounding ───────────────────────────────────────
Rounded outer card + square inner strip was the most visible mobile defect
(Today's Snapshot and siblings). Inner header/footer strips now inherit the
parent radius on their touching corners, and every card clips its own
content so nothing square can ever poke past a rounded edge. */
.np-panel, .np-kpi, .np-modal__panel, .np-drawer, .np-doc-card{
overflow: hidden;
}
.np-panel__head, .np-card__head, .np-widget__head{
border-radius: calc(var(--nk-radius-card) - 1px) calc(var(--nk-radius-card) - 1px) 0 0;
}
.np-panel__foot, .np-card__foot, .np-modal__foot{
border-radius: 0 0 calc(var(--nk-radius-card) - 1px) calc(var(--nk-radius-card) - 1px);
}
@media (max-width: 600px){
/* One radius scale on phones: slightly tighter than desktop, consistent
across every card/modal/widget instead of desktop values squeezed down. */
.np-panel, .np-kpi, .np-doc-card{ border-radius: var(--nk-radius); }
.np-modal__panel{ border-radius: var(--nk-radius-card); }
.np-panel__head, .np-card__head, .np-widget__head{
border-radius: calc(var(--nk-radius) - 1px) calc(var(--nk-radius) - 1px) 0 0;
}
.np-panel__body, .np-card__body{ padding-left: 1rem; padding-right: 1rem; }
}
/* ==========================================================================
CANONICAL DATE/TIME ICON — one calendar glyph, every module, every input,
mobile and desktop (v30).
Every previous attempt at a date-icon fix (see the superseded comments
earlier in this file, plus the per-module filter-bar rules in
admin/styles.css and doctor/styles.css) relied on styling the browser's
own ::-webkit-calendar-picker-indicator. That pseudo-element is where the
"icons missing on mobile" bug actually comes from: mobile WebKit renders
it inconsistently — sometimes invisible, sometimes mis-sized — and it
doesn't exist at all outside Chromium/WebKit, so Firefox never matched
either. Each module also nudged its margin/opacity slightly differently,
which is the "spacing differs from other dropdowns" complaint.
Fix: stop drawing the browser's glyph entirely. Every date/time field
gets appearance:none and a drawn SVG calendar icon as a background-image,
positioned with the exact same right-inset (.85rem) and box model
(2.35rem right padding) as the .np-select chevron, so date pickers and
dropdowns finally match. The native picker-indicator is kept in the DOM
(for keyboard/screen-reader users) but made invisible and full-width, so
clicking anywhere still opens the picker — this doubles up with (and
never conflicts with) the whole-field-click handled by NPDatePicker in
np-ui.js. This one block wins the cascade everywhere because this file
loads after admin/styles.css and doctor/styles.css on every module page.
========================================================================== */
input[type="date"], input[type="time"], input[type="datetime-local"]{
position: relative;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: var(--nk-card) url("data:image/svg+xml;utf8,
") no-repeat right .85rem center;
background-size: 16px;
padding-right: 2.35rem !important;
color-scheme: light;
cursor: pointer; /* whole field opens the picker, see NPDatePicker in np-ui.js */
}
input[type="time"]{
background-image: url("data:image/svg+xml;utf8,
");
}
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"]{
color-scheme: dark;
background-color: #0E1A22;
color: #E6EEF1;
border-color: #234551;
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: right .85rem center;
background-size: 16px;
}
html[data-theme="dark"] input[type="time"]{
background-image: url("data:image/svg+xml;utf8,
");
}
/* Keep the native indicator in the hit-testing tree (screen readers, and a
fallback native tap-target) but make it invisible and stretch it over the
whole field so it never shows a second, misaligned glyph next to ours. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
cursor: pointer;
}
/* Reusable mobile card-transform for any data table — add the
.np-table--cards class to the
and give every | a
data-label="Column Name" attribute. Used across Admin (Medical
Centres, Receptionists, Pharmacy Users, Data Management, Revenue
Reports, Settlements, Invoices), Receptionist and Pharmacy portals.
Shared here (not per-portal styles.css) so it works everywhere without
duplicating the same ~40 lines per portal. */
@media (max-width:720px){
.np-table--cards.np-table-wrap,
.np-table-wrap:has(> .np-table--cards){ overflow:visible; max-height:none; border:0; border-radius:0; background:transparent; }
.np-table--cards,
.np-table--cards tbody{ display:block; width:100%; min-width:0; }
.np-table--cards thead{
position:absolute; width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.np-table--cards tr{
display:block; width:100%; box-sizing:border-box; margin:0 0 .75rem; padding:.9rem 1rem;
background:var(--nk-card); border:1px solid var(--nk-border); border-left-width:3px;
border-radius:14px; box-shadow:var(--nk-shadow-sm);
}
.np-table--cards.np-table--danger tr{ border-left-color:#DC2626; }
.np-table--cards td[data-label]{
display:grid; grid-template-columns:minmax(76px,.55fr) minmax(0,1.45fr); gap:.7rem; align-items:start;
width:100%; min-width:0; padding:.52rem 0; text-align:left !important; border-bottom:1px dashed var(--nk-border-soft);
}
.np-table--cards td[data-label]::before{
content:attr(data-label); color:var(--nk-muted); font-size:.68rem; font-weight:700;
letter-spacing:.045em; line-height:1.35; text-transform:uppercase;
}
.np-table--cards td[data-label] > *{ min-width:0; max-width:100%; overflow-wrap:anywhere; }
.np-table--cards td[data-label]:last-child{ border-bottom:0; }
.np-table--cards td[data-label="Name"],
.np-table--cards td[data-label="Doctor"],
.np-table--cards td[data-label="Patient"],
.np-table--cards td[data-label="Medicine"]{ grid-template-columns:1fr; gap:.2rem; }
/* Actions cell: was a single-column grid with every button forced to
width:100%. With more than one action (e.g. Invoice + Certificate) that
produced one full-width stretched button followed by others that,
depending on button count/order, ended up cramped in a corner instead
of lining up as a matching row. Switched to a wrapping flex row so
every action button keeps its natural size and they sit evenly spaced,
right-aligned, wrapping to a new line only when they don't fit. */
.np-table--cards td[data-label="Action"],
.np-table--cards td[data-label="Actions"]{
display:flex; flex-wrap:wrap; gap:.4rem; justify-content:flex-end; align-items:center;
text-align:right !important;
}
.np-table--cards td[data-label="Action"]::before,
.np-table--cards td[data-label="Actions"]::before{ flex:1 0 100%; }
.np-table--cards td[data-label="Action"] .np-btn,
.np-table--cards td[data-label="Actions"] .np-btn{ width:auto; flex:0 0 auto; margin:0; }
.np-table--cards td[colspan]{ display:block; padding:.5rem 0; text-align:center; border:0; }
.np-table--cards tr:hover td{ background:transparent; }
html[data-theme="dark"] .np-table--cards tr{ background:var(--nk-card) !important; border-color:var(--nk-border) !important; }
}
|