.table > :not(caption) > * > * {
background-color: var(--bs-white);
}
/*-----Custom Global theme Changes ----------*/
.sidebar-area {
display: flex;
flex-direction: column;
height: 100vh;
max-height: 100vh;
overflow: hidden;
z-index: 60 !important;
}
[icon-sidebar-none-data-theme="icon-sidebar-block-switch"] .sidebar-area {
z-index: 60 !important;
}
[icon-sidebar-none-data-theme="icon-sidebar-block-switch"] .sidebar-area:hover {
z-index: 60 !important;
box-shadow: 4px 0 12px rgba(15, 23, 42, 0.08);
}
.sidebar-area > .layout-menu {
flex: 1 1 auto;
min-height: 0;
height: auto;
}
#fullscreen-icon {
transition: color 0.3s ease;
user-select: none;
}
#fullscreen-icon:hover {
opacity: 0.7;
}
.btn {
padding: 10px 10px;
font-size: 14px;
border-radius: 4px;
}
.header-area {
padding: 5px 10px !important;
margin-top: 5px !important;
}
body .form-control,
body .form-select,
body .input-group-text {
background-color: #fff;
border: 1px solid #dae0ec;
height: 40px;
color: #475569 !important;
font-size: 14px;
padding: 5px 15px;
transition: all ease 0.5s;
border-radius: 5px;
}
body .form-control,
body .form-select {
width: 100%;
}
body .form-select {
padding-right: 2.25rem;
}
body .input-group-text {
background-color: #f8f9fa;
padding: 5px 12px;
width: auto;
}
body .input-group > .form-control,
body .input-group > .form-select,
body .input-group > .input-group-text {
height: 40px;
}
.custom_form .form-control {
background-color: #fff;
border: 1px solid #dae0ec;
height: 40px;
color: #475569 !important;
font-size: 14px;
padding: 5px 15px;
width: 100%;
transition: all ease 0.5s;
border-radius: 5px;
}
.mic-icon.listening {
color: #ff1d1d;
}
.mic-icon.listening::after {
content: "";
position: absolute;
top: -5px;
left: 0px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid rgba(255, 0, 0, 0.62);
animation: pulse 1.2s infinite ease-in-out;
}
@keyframes pulse {
0% {
transform: scale(0.8);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(0.8);
opacity: 0.5;
}
}
/* ============================================ */
/* CUSTOM DATATABLE STYLES - COMPLETE VERSION */
/* ============================================ */
:root {
--cdt-bg-body: #f8f9fa;
--cdt-bg-card: #ffffff;
--cdt-bg-table: #ffffff;
--cdt-bg-table-alt: #f8f9fa;
--cdt-bg-table-hover: #e7f1ff;
--cdt-text-primary: #1e293b;
--cdt-text-secondary: #64748b;
--cdt-text-table: #334155;
--cdt-border-color: #f0f4f8;
--cdt-border-table: #e2e8f0;
--cdt-header-bg: #ffb637;
--cdt-header-text: #000000;
--cdt-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
--cdt-shadow-hover: 0 2px 8px rgba(13, 110, 253, 0.1);
--cdt-scrollbar-track: #f1f3f5;
--cdt-scrollbar-thumb: #cbd5e1;
--cdt-scrollbar-thumb-hover: #94a3b8;
}
[data-theme="dark"] {
--cdt-bg-body: #0f172a;
--cdt-bg-card: #1e293b;
--cdt-bg-table: #1e293b;
--cdt-bg-table-alt: #334155;
--cdt-bg-table-hover: #475569;
--cdt-text-primary: #f1f5f9;
--cdt-text-secondary: #94a3b8;
--cdt-text-table: #e2e8f0;
--cdt-border-color: #334155;
--cdt-border-table: #475569;
--cdt-header-bg: #000103;
--cdt-header-text: #f1f5f9;
--cdt-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
--cdt-shadow-hover: 0 2px 8px rgba(13, 110, 253, 0.3);
--cdt-scrollbar-track: #1e293b;
--cdt-scrollbar-thumb: #475569;
--cdt-scrollbar-thumb-hover: #64748b;
}
/* Apply theme to body */
body {
background-color: var(--cdt-bg-body) !important;
transition: background-color 0.3s ease !important;
}
/* Custom DataTable Container */
.custom-data-table-container {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, sans-serif;
}
.custom-data-table-card {
background: var(--cdt-bg-card);
border-radius: 0px;
/* box-shadow: var(--cdt-shadow); */
padding: 5px;
overflow: hidden;
transition: all 0.3s ease;
}
.custom-data-table-header {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 2px solid var(--cdt-border-color);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.custom-data-table-header-content h1 {
font-size: 24px;
font-weight: 700;
color: var(--cdt-text-primary);
margin-bottom: 4px;
transition: color 0.3s ease;
}
.custom-data-table-header-content p {
font-size: 14px;
color: var(--cdt-text-secondary);
margin-bottom: 0;
transition: color 0.3s ease;
}
/* Theme Toggle Button */
.theme-toggle-btn {
padding: 10px 16px;
border-radius: 8px;
border: 2px solid var(--cdt-border-color);
background: var(--cdt-bg-card);
color: var(--cdt-text-primary);
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.theme-toggle-btn:hover {
border-color: #0d6efd;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}
.theme-icon {
width: 18px;
height: 18px;
}
/* Button Container */
.custom-data-table-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 5px;
}
/* Override DataTables default button styles - SCOPED */
.custom-data-table-buttons .dt-button {
padding: 8px 16px !important;
border-radius: 3px !important;
font-size: 12px !important;
font-weight: 500 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
border: none !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}
.custom-data-table-buttons .dt-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.custom-data-table-buttons .dt-button:active {
transform: translateY(0);
}
/* Bootstrap 5 Button Colors */
.custom-data-table-buttons .btn-copy {
background-color: #6f42c1 !important;
color: #fff !important;
}
.custom-data-table-buttons .btn-copy:hover {
background-color: #5a32a3 !important;
}
.custom-data-table-buttons .btn-excel {
background-color: #198754 !important;
color: #fff !important;
}
.custom-data-table-buttons .btn-excel:hover {
background-color: #157347 !important;
}
.custom-data-table-buttons .btn-csv {
background-color: #fd7e14 !important;
color: #fff !important;
}
.custom-data-table-buttons .btn-csv:hover {
background-color: #e56b0c !important;
}
.custom-data-table-buttons .btn-pdf {
background-color: #dc3545 !important;
color: #fff !important;
}
.custom-data-table-buttons .btn-pdf:hover {
background-color: #bb2d3b !important;
}
.custom-data-table-buttons .btn-print {
background-color: #0d6efd !important;
color: #fff !important;
}
.custom-data-table-buttons .btn-print:hover {
background-color: #0b5ed7 !important;
}
.custom-data-table-btn-svg {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
}
/* Scrollable Table Container with Custom Scrollbars */
.custom-data-table-scroll-container {
overflow-x: auto;
overflow-y: auto;
max-height: 600px;
border-radius: 10px;
position: relative;
}
.custom-data-table-wrapper table.custom-data-table thead {
position: sticky;
top: 0;
z-index: 20;
}
.custom-data-table-wrapper table.custom-data-table thead tr {
background-color: var(--cdt-header-bg, #ffb637);
}
.custom-data-table-wrapper table.custom-data-table thead th {
position: sticky;
top: 0;
z-index: 20;
background-color: var(--cdt-header-bg, #ffb637) !important;
}
/* Custom Scrollbar Styles - Webkit browsers (Chrome, Safari, Edge) */
.custom-data-table-scroll-container::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-data-table-scroll-container::-webkit-scrollbar-track {
background: var(--cdt-scrollbar-track);
border-radius: 10px;
}
.custom-data-table-scroll-container::-webkit-scrollbar-thumb {
background: var(--cdt-scrollbar-thumb);
border-radius: 10px;
transition: background 0.3s ease;
}
.custom-data-table-scroll-container::-webkit-scrollbar-thumb:hover {
background: var(--cdt-scrollbar-thumb-hover);
}
/* Custom Scrollbar for Firefox */
.custom-data-table-scroll-container {
scrollbar-width: thin;
scrollbar-color: var(--cdt-scrollbar-thumb) var(--cdt-scrollbar-track);
}
/* Table Styling - SCOPED under wrapper */
.custom-data-table-wrapper table.custom-data-table {
width: 100% !important;
border-collapse: separate;
border-spacing: 0;
background: var(--cdt-bg-table);
transition: background-color 0.3s ease;
margin: 0 !important;
}
.table{
background: var(--cdt-bg-table) !important;
}
.custom-data-table-wrapper table.custom-data-table thead th {
background-color: var(--cdt-header-bg, #ffb637) !important;
color: var(--cdt-header-text);
/* font-weight: 600; */
font-size: 12px;
padding: 10px 10px;
text-align: left;
border: none;
border-bottom: 2px solid var(--cdt-border-table);
position: sticky;
top: 0;
z-index: 20;
white-space: nowrap;
transition: all 0.3s ease;
}
.custom-data-table-wrapper table.custom-data-table thead th:first-child {
border-top-left-radius: 10px;
}
.custom-data-table-wrapper table.custom-data-table thead th:last-child {
border-top-right-radius: 10px;
}
.custom-data-table-wrapper table.custom-data-table thead th.sorting,
.custom-data-table-wrapper table.custom-data-table thead th.sorting_asc,
.custom-data-table-wrapper table.custom-data-table thead th.sorting_desc {
cursor: pointer;
padding-right: 30px;
}
.custom-data-table-wrapper table.custom-data-table thead th.sorting:after,
.custom-data-table-wrapper table.custom-data-table thead th.sorting_asc:after,
.custom-data-table-wrapper table.custom-data-table thead th.sorting_desc:after {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
opacity: 0.6;
font-size: 11px;
color: var(--cdt-header-text);
}
.custom-data-table-wrapper table.custom-data-table tbody tr {
transition: all 0.2s ease;
background: var(--cdt-bg-table);
}
.custom-data-table-wrapper table.custom-data-table tbody tr:nth-child(even) {
background-color: var(--cdt-bg-table-alt);
}
.custom-data-table-wrapper table.custom-data-table tbody tr:hover {
background-color: var(--cdt-bg-table-hover) !important;
box-shadow: var(--cdt-shadow-hover);
}
.custom-data-table-wrapper table.custom-data-table tbody td {
padding: 5px 5px;
font-size: 13px;
color: var(--cdt-text-table);
border: none;
border-bottom: 1px solid var(--cdt-border-table);
transition: all 0.3s ease;
white-space: nowrap;
}
.custom-data-table-wrapper table.custom-data-table tbody tr:last-child td {
border-bottom: none;
}
.custom-data-table-wrapper
table.custom-data-table
tbody
tr:last-child
td:first-child {
border-bottom-left-radius: 10px;
}
.custom-data-table-wrapper
table.custom-data-table
tbody
tr:last-child
td:last-child {
border-bottom-right-radius: 10px;
}
/* Info text styling - applies at container level */
.custom-data-table-container .dataTables_info {
margin-top: 20px;
font-size: 14px;
color: var(--cdt-text-secondary);
padding: 8px 0;
transition: color 0.3s ease;
}
/* Pagination container - applies at container level */
.custom-data-table-container .dataTables_paginate {
margin-top: 20px;
display: flex;
justify-content: flex-end;
gap: 4px;
margin-bottom: 20px; /* ✅ ADD THIS - Creates space below pagination */
margin-right: 10px; /* ✅ ADD THIS - Creates space from right edge */
}
/* Pagination buttons - applies at container level */
.custom-data-table-container .dataTables_paginate .paginate_button {
padding: 8px 14px !important;
margin: 0 !important;
border-radius: 6px !important;
border: 1px solid var(--cdt-border-table) !important;
background: var(--cdt-bg-card) !important;
color: #0d6efd !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
display: inline-block !important;
min-width: 38px !important;
text-align: center !important;
font-size: 14px !important;
text-decoration: none !important;
}
.custom-data-table-container .dataTables_paginate .paginate_button:hover {
background: #0d6efd !important;
border-color: #0d6efd !important;
color: #ffffff !important;
box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3) !important;
}
.custom-data-table-container .dataTables_paginate .paginate_button.current {
background: #0d6efd !important;
border-color: #0d6efd !important;
color: #ffffff !important;
box-shadow: 0 2px 6px rgba(13, 110, 253, 0.4) !important;
}
.custom-data-table-container
.dataTables_paginate
.paginate_button.current:hover {
background: #0b5ed7 !important;
border-color: #0b5ed7 !important;
color: #ffffff !important;
}
.custom-data-table-container .dataTables_paginate .paginate_button.disabled,
.custom-data-table-container
.dataTables_paginate
.paginate_button.disabled:hover {
opacity: 0.5 !important;
cursor: not-allowed !important;
background: var(--cdt-bg-table-alt) !important;
border-color: var(--cdt-border-table) !important;
color: var(--cdt-text-secondary) !important;
box-shadow: none !important;
}
/* Hide search and length controls - SCOPED */
.custom-data-table-container .dataTables_filter,
.custom-data-table-container .dataTables_length {
display: none !important;
}
/* Loading State - SCOPED */
.custom-data-table-container .dataTables_processing {
top: 50%;
left: 50%;
background: #ffffff00;
padding: 20px 40px;
border-radius: 12px;
font-size: 14px;
color: #0d6efd;
font-weight: 600;
z-index: 100;
}
/* Responsive - SCOPED */
@media (max-width: 768px) {
.custom-data-table-card {
padding: 5px;
border-radius: 0px;
}
.custom-data-table-header-content h1 {
font-size: 20px;
}
.custom-data-table-buttons {
justify-content: center;
}
.custom-data-table-wrapper table.custom-data-table thead th,
.custom-data-table-wrapper table.custom-data-table tbody td {
padding: 8px 12px;
font-size: 12px;
}
.custom-data-table-container .dataTables_paginate {
justify-content: center;
flex-wrap: wrap;
}
.custom-data-table-container .dataTables_info {
text-align: center;
}
.custom-data-table-scroll-container {
max-height: 400px;
}
}
/* ============================================ */
/* NO DATA STATE STYLING */
/* ============================================ */
.custom-data-table-no-data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 20px;
text-align: center;
}
.custom-data-table-no-data img {
max-width: 300px;
width: 100%;
height: auto;
margin-bottom: 20px;
opacity: 0.7;
transition: opacity 0.3s ease;
}
/* .custom-data-table-no-data img:hover {
opacity: 1;
} */
.custom-data-table-no-data p {
font-size: 16px;
color: var(--cdt-text-secondary);
font-weight: 500;
margin: 0;
transition: color 0.3s ease;
}
/* When table has no data, center the message */
.custom-data-table-scroll-container.no-data-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
}
/* Hide table elements when no data */
.custom-data-table-scroll-container.no-data-state table thead {
display: none;
}
/* DataTables empty message styling */
.dataTables_empty {
padding: 0 !important;
border: none !important;
}
/* Responsive */
@media (max-width: 768px) {
.custom-data-table-no-data {
padding: 40px 20px;
}
.custom-data-table-no-data img {
max-width: 200px;
}
.custom-data-table-no-data p {
font-size: 14px;
}
.custom-data-table-scroll-container.no-data-state {
min-height: 300px;
}
}
/*===============Custom table for info*/
.custom-info-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #ffffff;
border-radius: 5px;
overflow: hidden;
font-size: 12px;
}
/* Table cells */
.custom-info-table td {
padding: 12px 14px;
vertical-align: middle;
}
/* Label cells */
.custom-info-table .label {
background: #f8f9fb;
color: #6b7280;
font-weight: 600;
width: 20%;
white-space: nowrap;
}
/* Value cells */
.custom-info-table .value {
color: #111827;
font-weight: 500;
width: 30%;
}
/* Borders */
.custom-info-table tr:not(:last-child) td {
border-bottom: 1px solid #e5e7eb;
}
.custom-info-table td:not(:last-child) {
border-right: 1px solid #f1f5f9;
}
/* Hover effect */
.custom-info-table tr:hover {
background: #f9fafb;
}
/* Responsive */
@media (max-width: 768px) {
.custom-info-table td {
padding: 10px;
}
.custom-info-table .label {
font-size: 12px;
}
.custom-info-table .value {
font-size: 13px;
}
}
/*======VIP Badges=========*/
/* VIP Patient - Amber/Gold */
.badge-vip-patient {
background-color: #ffc107 !important;
color: #1a1a1a !important;
font-weight: 600;
padding: 8px;
}
/* Special Patient - Soft Blue */
.badge-special-patient {
background-color: #64b5f6 !important;
color: #0d47a1 !important;
font-weight: 600;
padding: 8px;
}
/* FOC Patient - Emerald Green */
.badge-foc-patient {
background-color: #4caf50 !important;
color: #ffffff !important;
font-weight: 600;
padding: 8px;
}
/* Urgent Patient - Vivid Red/Orange */
.badge-urgent-patient {
background-color: #ff5722 !important;
color: #ffffff !important;
font-weight: 600;
padding: 8px;
}
/* STATS Patient - Hot Pink/Magenta */
.badge-stats-patient {
background-color: #ec407a !important;
color: #ffffff !important;
font-weight: 600;
padding: 8px;
}
/* Out-Source Sample - Teal/Cyan */
.badge-outsource-patient {
background-color: #26c6da !important; /* Cyan */
color: #ffffff !important;
font-weight: 600;
padding: 8px;
}
/* Sample to Re-run - Coral/Peach */
.badge-rerun-sample {
background-color: #e94c4c !important; /* Coral */
color: #ffffff !important;
font-weight: 600;
padding: 8px;
}
/* Case Reopened - Lavender/Purple */
.badge-reopen-case {
background-color: #ab47bc !important; /* Purple */
color: #ffffff !important;
font-weight: 600;
padding: 8px;
}
/* Case Reopened - Lavender/Purple */
.badge-barcode-generated {
background-color: #6cb849 !important; /* Purple */
color: #ffffff !important;
font-weight: 600;
padding: 8px;
}
.badge-partially-collected {
background-color: #dd7353 !important; /* Purple */
color: #ffffff !important;
font-weight: 600;
padding: 8px;
}
.badge-re-collect {
background-color: #ddc853 !important; /* Purple */
color: #ffffff !important;
font-weight: 600;
padding: 8px;
}
/*=========Stats Card Design===========*/
.stats-card {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.stats-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.stats-card-header {
padding: 12px;
font-weight: 700;
text-align: center;
color: #fff;
}
.stats-card-primary .stats-card-header {
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
}
.stats-card-info .stats-card-header {
background: linear-gradient(135deg, #0097a7 0%, #00838f 100%);
}
.stats-card-success .stats-card-header {
background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
}
.stats-card-warning .stats-card-header {
background: linear-gradient(135deg, #f57c00 0%, #ef6c00 100%);
}
.stats-card-body {
padding: 16px;
background: #fff;
}
.stat-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.stat-item:last-child {
border-bottom: none;
}
.stat-label {
font-size: 13px;
color: #666;
}
.stat-value {
font-size: 20px;
font-weight: 700;
color: #002d78;
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.7) !important;
backdrop-filter: blur(3px);
}
/*=====Sweet Alter =======*/
div:where(.swal2-container) div:where(.swal2-popup)
{
display: none;
position: relative;
box-sizing: border-box;
grid-template-columns: minmax(0, 100%);
width: var(--swal2-width);
max-width: 100%;
padding: var(--swal2-padding);
border: var(--swal2-border);
border-radius: var(--swal2-border-radius);
background: var(--swal2-background);
color: var(--swal2-color);
font-family: inherit;
font-size: 12px !important;
container-name: swal2-popup;
}
/* ─── Global table header band (yellow) for app tables ───
Scoped to .main-content (Pharmacy app shell) so print/invoice views
rendered outside the app shell keep their own thead styling.
Opt out by adding `.no-yellow-header` on the table or any ancestor. */
.main-content table.table:not(.no-yellow-header) > thead > tr > th,
.main-content table.synp-table--warning:not(.no-yellow-header) > thead > tr > th,
.main-content table.custom-data-table:not(.no-yellow-header) > thead > tr > th {
background-color: var(--cdt-header-bg, #ffb637) !important;
color: var(--cdt-header-text, #000) !important;
}
.main-content table.table:not(.no-yellow-header) > thead > tr > th:first-child,
.main-content table.synp-table--warning:not(.no-yellow-header) > thead > tr > th:first-child,
.main-content table.custom-data-table:not(.no-yellow-header) > thead > tr > th:first-child {
border-top-left-radius: 10px !important;
}
.main-content table.table:not(.no-yellow-header) > thead > tr > th:last-child,
.main-content table.synp-table--warning:not(.no-yellow-header) > thead > tr > th:last-child,
.main-content table.custom-data-table:not(.no-yellow-header) > thead > tr > th:last-child {
border-top-right-radius: 10px !important;
}
.main-content .no-yellow-header table > thead > tr > th,
.main-content table.no-yellow-header > thead > tr > th {
background-color: revert !important;
color: revert !important;
}
/* Unified table header font-size across listing pages (Purchase Management etc.).
Opt out by adding `.no-header-fs-unify` on the table. */
.main-content table.table:not(.no-header-fs-unify) > thead > tr > th,
.main-content table.synp-table--warning:not(.no-header-fs-unify) > thead > tr > th { font-size: 11px !important; }
/* ─── Card-header action buttons (Back / Download PDF / etc) ───
Reusable chassis:
Forces 8081 sizing (36px / 14px / 4px) over global .btn rule. */
.main-content .header-action-btns .btn.btn-sm {
font-size: 14px !important;
font-weight: 500 !important;
padding: 10px !important;
height: 36px !important;
line-height: 1 !important;
border-radius: 4px !important;
display: inline-flex;
align-items: center;
gap: 6px;
}
.main-content .header-action-btns .btn.btn-sm i { font-size: 14px !important; }
/* Report Action btn — match date-filter trigger box (36px / 13px / radius 5px).
High-specificity selector to beat .header-action-btns .btn.btn-sm sibling rule. */
.main-content .header-action-btns .btn.btn-sm.report-action-btn,
.erp-table-section .header-action-btns .btn.btn-sm.report-action-btn,
.btn.btn-sm.report-action-btn.dropdown-toggle {
font-size: 13px !important;
font-weight: 400 !important;
padding: 4px 10px 4px 12px !important;
height: 36px !important;
min-width: 120px !important;
line-height: 1.4 !important;
border-radius: 5px !important;
border: 1px solid #2ED47E !important;
display: inline-flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
box-shadow: none !important;
}
.main-content .header-action-btns .btn.btn-sm.report-action-btn i,
.btn.btn-sm.report-action-btn i { font-size: 13px !important; }
/* Title-case across admin/business content — neutralize vendor CSS uppercase.
Scoped to .main-content so login / landing remain unaffected.
Excludes .text-uppercase utility (intentional) and .badge (semantic). */
.main-content table thead th,
.main-content .erp-table-section .table thead th,
.main-content .erp-table-section .synp-table--warning thead th,
.main-content .table-header-content,
.main-content .nav-link,
.main-content .breadcrumb-item,
.main-content .card-title,
.main-content .card-title-heading,
.main-content .form-label,
.main-content .dropdown-item,
.main-content .btn:not(.text-uppercase) { text-transform: none !important; }
/* ─── 8081 flat color palette for header action btns + supplier-card actions ───
Neutralizes erp-shell.css gradient overrides with solid 8081 hex values. */
.main-content .header-action-btns .btn.btn-primary,
.main-content .supplier-card .btn.btn-primary {
background: #0F79F3 !important; background-color: #0F79F3 !important;
border: 1px solid #0F79F3 !important; color: #fff !important;
}
.main-content .header-action-btns .btn.btn-success,
.main-content .header-action-btns .btn-success.dropdown-toggle,
.main-content .supplier-card .btn.btn-success {
background: #2ED47E !important; background-color: #2ED47E !important;
border: 1px solid #2ED47E !important; color: #fff !important;
}
.main-content .header-action-btns .btn.btn-info,
.main-content .supplier-card .btn.btn-info {
background: #00CAE3 !important; background-color: #00CAE3 !important;
border: 1px solid #00CAE3 !important; color: #fff !important;
}
.main-content .header-action-btns .btn.btn-warning,
.main-content .supplier-card .btn.btn-warning {
background: #FFB264 !important; background-color: #FFB264 !important;
border: 1px solid #FFB264 !important; color: #fff !important;
}
.main-content .header-action-btns .btn.btn-danger,
.main-content .supplier-card .btn.btn-danger {
background: #EA5455 !important; background-color: #EA5455 !important;
border: 1px solid #EA5455 !important; color: #fff !important;
}
/* ─── Toolbar Action button (.btn-action) — match 8081 .btn.btn-sm.btn-success chassis ───
Used on index pages as a custom Bootstrap-dropdown trigger.
Forces consistent green pill across all pages without rewriting markup. */
.main-content .btn-action,
.main-content button.btn-action {
background-color: #2ed47e !important;
border: 1px solid #2ed47e !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
padding: 0 14px !important;
line-height: 1 !important;
border-radius: 4px !important;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
box-shadow: none !important;
}
.main-content .btn-action:hover { background-color: #28b86d !important; border-color: #28b86d !important; color: #fff !important; }
.main-content .btn-action:focus { outline: 2px solid rgba(46, 212, 126, 0.35); outline-offset: 1px; }
.main-content .btn-action::after {
content: "";
display: inline-block;
width: 0; height: 0;
margin-left: 6px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
.main-content .btn-action i { font-size: 14px !important; }
/* ===== Dark mode form control readability (per_page select, search inputs, generic form-controls) ===== */
[data-theme="dark"] .form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] input.form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] .form-select {
background-color: #1e293b !important;
color: #f1f5f9 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input.form-control::placeholder {
color: #94a3b8 !important;
opacity: 1;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
background-color: #1e293b !important;
color: #f1f5f9 !important;
border-color: #0f79f3 !important;
box-shadow: 0 0 0 0.15rem rgba(15, 121, 243, 0.25) !important;
}
[data-theme="dark"] select.form-control option {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
/* Custom up/down arrow wrapper used for per_page dropdowns */
[data-theme="dark"] .gpt-up-down-arrow span {
border-top-color: #f1f5f9 !important;
}
[data-theme="dark"] .gpt-up-down-arrow .form-control {
color: #f1f5f9 !important;
}
/* Date filter trigger button */
[data-theme="dark"] .synp-date-range-trigger.form-control {
background: #1e293b !important;
color: #f1f5f9 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .synp-date-range-trigger .synp-date-chevron,
[data-theme="dark"] .synp-date-range-trigger .date-range-text {
color: #f1f5f9 !important;
}
/* Toolbar Action / Add New buttons keep their solid bg in dark, ensure white text */
[data-theme="dark"] .btn-action,
[data-theme="dark"] .btn-add-new { color: #fff !important; }
.opd-show {
--opd-surface: #ffffff;
--opd-surface-alt: #f8fafc;
--opd-border: #e7e9f5;
--opd-border-strong: #d5d9e5;
--opd-text: #1f3150;
--opd-muted: #6b7280;
--opd-label: #3f4254;
--opd-primary: var(--theme-primary-color, #00987F);
--opd-success: #16a34a;
--opd-warning: #f59e0b;
--opd-info: #2563eb;
--opd-danger: #dc2626;
--opd-dark: #334155;
font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.82rem;
color: var(--opd-text);
letter-spacing: .01em;
}
.opd-show .opd-header {
background: var(--opd-surface);
border-bottom: 1px solid var(--opd-border);
border-radius: 10px 10px 0 0;
}
.opd-show .opd-header h3 { font-size: 1rem; font-weight: 700; color: var(--opd-text); }
.opd-show .opd-header .menu-icon { font-size: 22px; color: var(--opd-primary); }
.opd-show .opd-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.opd-show .opd-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 14px;
font-size: 0.78rem; font-weight: 600;
border-radius: 7px; line-height: 1; border: 0 !important;
color: #fff !important;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(15,23,42,.06);
text-decoration: none !important;
transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}
.opd-show .opd-btn:hover { filter: brightness(.94); color: #fff !important; box-shadow: 0 2px 6px rgba(15,23,42,.12) !important; }
.opd-show .opd-btn:active { transform: translateY(1px); }
.opd-show .opd-btn i { font-size: 14px; line-height: 1; color: #fff !important; }
.opd-show .opd-btn-dark { background: var(--opd-dark) !important; }
.opd-show .opd-btn-info { background: var(--opd-info) !important; }
.opd-show .opd-btn-success { background: var(--opd-success) !important; }
.opd-show .opd-btn-outline-success { background: #fff !important; color: var(--opd-success) !important; border: 1px solid #cbd5e1 !important; }
.opd-show .opd-btn-outline-success i { color: var(--opd-success) !important; }
.opd-show .opd-btn-outline-success:hover { background: #f1f5f9 !important; border-color: var(--opd-success) !important; }
.opd-show .opd-btn-danger { background: var(--opd-danger) !important; }
.opd-show .opd-btn-primary { background: var(--opd-primary) !important; }
.opd-show .opd-btn-warning { background: var(--opd-warning) !important; }
.opd-show .opd-btn[disabled],
.opd-show .opd-btn:disabled { opacity: .65; cursor: not-allowed; }
.opd-show .opd-status-badge {
font-size: 0.7rem; padding: 4px 10px; border-radius: 999px;
font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}
.opd-show .opd-meta-time { font-size: 0.74rem; color: var(--opd-muted); }
.opd-show .opd-info-row {
background: var(--opd-surface-alt);
border-bottom: 1px solid var(--opd-border);
}
.opd-show .opd-info-row .info-label {
font-size: 0.68rem; font-weight: 700; color: var(--opd-label);
text-transform: uppercase; letter-spacing: .4px;
}
.opd-show .opd-info-row .info-label i { color: var(--opd-primary); margin-right: 4px; }
.opd-show .opd-info-row .info-value {
font-size: 0.92rem; font-weight: 700; color: var(--opd-text);
}
.opd-show .opd-info-row .info-sub { font-size: 0.78rem; color: var(--opd-muted); }
.opd-show .opd-items-table-wrap {
margin: 12px 18px;
background: var(--cdt-bg-card, #fff);
border: 1px solid var(--cdt-border-table, #e2e8f0);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.opd-show .opd-items-table-wrap > .table-responsive { margin: 0; }
.opd-show .opd-items-table {
width: 100%;
border-collapse: separate; border-spacing: 0;
font-size: 0.82rem;
color: var(--cdt-text-table, var(--opd-text));
background: var(--cdt-bg-table, #fff);
}
.opd-show .opd-items-table thead th {
background: var(--cdt-header-bg, #ffb637) !important;
color: var(--cdt-header-text, #000) !important;
font-size: 0.72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .4px;
padding: 10px 10px;
border: 0;
border-bottom: 2px solid var(--cdt-border-table, #e2e8f0);
white-space: nowrap;
position: sticky; top: 0; z-index: 10;
}
.opd-show .opd-items-table thead th:first-child { border-top-left-radius: 10px; }
.opd-show .opd-items-table thead th:last-child { border-top-right-radius: 10px; }
.opd-show .opd-items-table tbody tr { transition: background-color .15s ease; }
.opd-show .opd-items-table tbody td {
padding: 8px 10px; vertical-align: middle;
border: 0;
border-bottom: 1px solid var(--cdt-border-table, #e2e8f0);
color: var(--cdt-text-table, var(--opd-text));
}
.opd-show .opd-items-table tbody tr:nth-child(even) td { background: var(--cdt-bg-table-alt, #f8f9fa); }
.opd-show .opd-items-table tbody tr:hover td { background: var(--cdt-bg-table-hover, #e7f1ff) !important; }
.opd-show .opd-items-table tfoot td {
padding: 9px 10px; font-size: 0.85rem;
border: 0; border-top: 1px solid var(--cdt-border-table, #e2e8f0);
}
.opd-show .opd-items-table tfoot tr.opd-tfoot-gross td { background: var(--cdt-bg-table-alt, #f8f9fa); font-weight: 700; }
.opd-show .opd-items-table tfoot tr.opd-tfoot-copay td { background: rgba(8,145,178,.08); }
.opd-show .opd-items-table tfoot tr.opd-tfoot-payable td { background: rgba(0,152,127,.1); font-weight: 800; color: var(--opd-primary); }
.opd-show .opd-items-table tfoot tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.opd-show .opd-items-table tfoot tr:last-child td:last-child { border-bottom-right-radius: 10px; }
.opd-show .opd-items-table input,
.opd-show .opd-items-table select {
height: 30px; font-size: 0.78rem;
border: 1px solid var(--opd-border-strong);
border-radius: 6px; padding: 0 8px;
color: var(--opd-text); background: var(--opd-surface);
}
.opd-show .opd-items-table input:focus,
.opd-show .opd-items-table select:focus {
outline: 0; border-color: var(--opd-primary);
box-shadow: 0 0 0 2px rgba(0,152,127,.18);
}
.opd-show .opd-payment-row {
background: var(--opd-surface);
border-top: 1px solid var(--opd-border);
padding: 14px 18px;
}
.opd-show .opd-payment-row .pay-label {
font-size: 0.7rem; font-weight: 700;
color: var(--opd-label);
text-transform: uppercase; letter-spacing: .3px;
}
.opd-show .opd-payment-row .pay-cell {
display: flex; flex-direction: column; gap: 4px;
}
.opd-show .opd-payment-row select,
.opd-show .opd-payment-row input {
height: 36px; font-size: 0.85rem;
border: 1px solid var(--opd-border-strong);
border-radius: 7px; padding: 0 12px;
background: var(--opd-surface); color: var(--opd-text);
}
.opd-show .opd-payment-row select:focus,
.opd-show .opd-payment-row input:focus {
outline: 0; border-color: var(--opd-primary);
box-shadow: 0 0 0 2px rgba(0,152,127,.18);
}
.opd-show .opd-alert {
margin: 0; border: 0;
padding: 10px 18px;
font-size: 0.85rem; font-weight: 600;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px;
}
.opd-show .opd-alert-success { background: rgba(22,163,74,.08); color: #15803d; border-left: 3px solid var(--opd-success); }
.opd-show .opd-alert-danger { background: rgba(220,38,38,.08); color: #b91c1c; border-left: 3px solid var(--opd-danger); }
.opd-show .opd-alert-warning { background: rgba(245,158,11,.10); color: #92400e; border-left: 3px solid var(--opd-warning); }
.opd-show .opd-alert-info { background: rgba(37,99,235,.08); color: #1e40af; border-left: 3px solid var(--opd-info); }
.opd-show .opd-qty-stepper {
display: inline-flex; align-items: center; gap: 4px;
background: var(--opd-surface);
border: 1px solid var(--opd-border-strong);
border-radius: 7px;
padding: 2px;
}
.opd-show .opd-qty-stepper .opd-qty-btn {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; border-radius: 5px;
color: var(--opd-primary); cursor: pointer;
transition: background .12s ease;
}
.opd-show .opd-qty-stepper .opd-qty-btn:hover { background: rgba(0,152,127,.10); }
.opd-show .opd-qty-stepper .opd-qty-btn:disabled { color: var(--opd-muted); cursor: not-allowed; background: transparent; }
.opd-show .opd-qty-stepper .opd-qty-input {
width: 56px; height: 26px;
text-align: center; font-weight: 700; font-size: 0.85rem;
border: 0; outline: 0; padding: 0;
color: var(--opd-text); background: transparent;
}
.opd-show .opd-qty-stepper .opd-qty-input:focus { box-shadow: none; }
.opd-show .opd-topbar {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px;
padding: 10px 16px;
background: var(--opd-surface);
border-radius: 10px 10px 0 0;
border-bottom: 1px solid var(--opd-border);
}
.opd-show .opd-topbar-left {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.opd-show .opd-brand-chip {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
background: var(--opd-primary); color: #fff; border-radius: 8px;
box-shadow: 0 1px 2px rgba(0,152,127,.22);
}
.opd-show .opd-brand-chip i { font-size: 16px; color: #fff !important; }
.opd-show .opd-crumb {
font-size: 0.82rem; color: var(--opd-muted); display: inline-flex;
align-items: center; gap: 4px;
}
.opd-show .opd-crumb strong { color: var(--opd-text); font-weight: 700; }
.opd-show .opd-crumb .sep { color: var(--opd-border-strong); }
.opd-show .opd-meta-strip {
display: flex; flex-wrap: wrap; align-items: stretch;
background: var(--opd-surface-alt);
border-bottom: 1px solid var(--opd-border);
padding: 8px 12px; gap: 18px;
}
.opd-show .opd-ms-cell { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px; }
.opd-show .opd-ms-label {
font-size: 0.62rem; font-weight: 700; color: var(--opd-label);
text-transform: uppercase; letter-spacing: .4px;
}
.opd-show .opd-ms-value { font-size: 0.85rem; font-weight: 700; color: var(--opd-text); }
.opd-show .opd-ms-value .badge { font-size: 0.7rem; padding: 4px 8px; }
.opd-show .opd-ms-ref-head { display: inline-flex; align-items: center; gap: 6px; }
.opd-show .opd-ms-ref-head .badge {
font-size: 0.6rem; font-weight: 700; line-height: 1; padding: 3px 8px;
border-radius: 999px; text-transform: none; letter-spacing: .2px;
}
.opd-show .badge.opd-ref-insurance { background: rgba(37,99,235,.12); color: #1d4ed8; }
.opd-show .badge.opd-ref-corporate { background: rgba(0,152,127,.12); color: #00987f; }
.opd-show .badge.opd-ref-walkin { background: rgba(100,116,139,.12); color: #475569; }
.opd-show .opd-ms-lastvisit { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opd-show .opd-pay-chip {
display: inline-flex; align-items: center; gap: 4px;
height: 20px; padding: 0 8px; border-radius: 999px;
font-size: 0.66rem; font-weight: 700; letter-spacing: .2px; line-height: 1;
text-transform: uppercase;
}
.opd-show .opd-pay-chip i { font-size: 11px; }
.opd-show .opd-pay-chip.is-paid { background: rgba(22,163,74,.12); color: #15803d; }
.opd-show .opd-pay-chip.is-unpaid { background: rgba(234,88,12,.12); color: #c2410c; }
.opd-show .opd-ms-spacer { flex: 1 1 auto; }
.opd-show .opd-ms-pill {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(0,152,127,.10); color: var(--opd-primary);
border-radius: 999px; padding: 5px 14px;
font-size: 0.78rem; font-weight: 700; align-self: center;
}
.opd-show .opd-patient-card {
margin: 12px 16px;
background: linear-gradient(180deg, #ecfdf5 0%, #f0fdfa 100%);
border: 1px solid #d1fae5;
border-radius: 12px;
padding: 14px 16px;
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 14px;
align-items: start;
}
.opd-show .opd-pt-avatar {
width: 64px; height: 64px; border-radius: 50%;
background: var(--opd-primary); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 700; letter-spacing: .5px;
box-shadow: 0 2px 6px rgba(0,152,127,.25);
overflow: hidden;
}
.opd-show .opd-pt-avatar img {
width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
display: block;
}
.opd-show .opd-pt-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.opd-show .opd-pt-name {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
font-size: 1.05rem; font-weight: 800; color: var(--opd-text);
}
.opd-show .opd-pt-name .opd-pt-id {
font-size: 0.72rem; font-weight: 700; color: var(--opd-primary);
background: rgba(0,152,127,.10); padding: 2px 8px; border-radius: 999px;
}
.opd-show .opd-pt-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
font-size: 0.78rem; color: var(--opd-muted); font-weight: 600;
}
.opd-show .opd-pt-meta .opd-pt-meta-sep { opacity: .4; }
.opd-show .opd-pt-meta strong { color: var(--opd-text); font-weight: 700; }
.opd-show .opd-pt-stats {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
font-size: 0.78rem; color: var(--opd-label); margin-top: 2px;
}
.opd-show .opd-pt-stat { display: inline-flex; align-items: center; gap: 4px; }
.opd-show .opd-pt-stat i { color: var(--opd-primary); }
.opd-show .opd-pt-stat strong { color: var(--opd-text); font-weight: 700; }
.opd-show .opd-pt-payer {
display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
text-align: right; line-height: 1.25;
}
.opd-show .opd-pt-payer-name { font-size: 0.78rem; font-weight: 700; color: var(--opd-text); }
.opd-show .opd-pt-payer-policy { font-size: 0.68rem; font-weight: 600; color: var(--opd-muted); }
.opd-show .opd-pt-credit { width: auto; min-width: 240px; max-width: 100%; }
.opd-show .opd-pt-credit-head {
display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 10px;
font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
color: var(--opd-muted); margin-bottom: 3px; white-space: nowrap;
}
.opd-show .opd-pt-credit-head .opd-pt-credit-val { color: var(--opd-primary); font-size: 0.72rem; white-space: nowrap; }
.opd-show .opd-pt-credit-track {
height: 6px; border-radius: 999px; background: rgba(0,152,127,.15); overflow: hidden;
}
.opd-show .opd-pt-credit-fill {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--opd-primary) 0%, #007a66 100%);
}
.opd-show .opd-pt-contact {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
font-size: 0.8rem; color: var(--opd-label);
}
.opd-show .opd-pt-contact i { color: var(--opd-primary); margin-right: 4px; }
.opd-show .opd-pt-chips-row {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 4px;
}
.opd-show .opd-pt-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px; border-radius: 999px;
font-size: 0.74rem; font-weight: 600; line-height: 1.2;
max-width: 100%;
}
.opd-show .opd-pt-chip i { font-size: 13px; }
.opd-show .opd-pt-chip .opd-pt-chip-label { font-weight: 700; }
.opd-show .opd-pt-chip .opd-pt-chip-items { font-weight: 500; }
.opd-show .opd-pt-chip-allergy { background: #fee2e2; color: #991b1b; }
.opd-show .opd-pt-chip-allergy i { color: #b91c1c; }
.opd-show .opd-pt-chip-rx { background: #dbeafe; color: #1e40af; }
.opd-show .opd-pt-chip-rx i { color: #1d4ed8; }
.opd-show .opd-pt-chip-cond { background: #fef3c7; color: #92400e; }
.opd-show .opd-pt-chip-cond i { color: #b45309; }
.opd-show .opd-pt-icd-tag {
display: inline-block; padding: 0 5px; margin-left: 3px;
background: rgba(0,0,0,.08); border-radius: 4px;
font-size: 0.66rem; font-weight: 700; letter-spacing: .2px;
}
.opd-show .opd-pt-cond-sep { opacity: .4; margin: 0 3px; }
.opd-show .opd-pt-tag {
display: inline-flex; align-items: center; gap: 6px;
background: var(--opd-surface);
border: 1px solid #d1fae5;
color: var(--opd-primary);
border-radius: 8px;
padding: 6px 12px;
font-size: 0.75rem; font-weight: 700;
letter-spacing: .3px;
}
.opd-show .opd-pt-tag i { color: var(--opd-primary); }
.opd-show .opd-pt-side {
display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
flex-shrink: 0;
}
.opd-show .opd-pt-rx-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.opd-show .opd-rx-pill {
display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 12px; border-radius: 999px;
font-size: 0.78rem; font-weight: 600; letter-spacing: .2px;
border: 1px solid transparent; cursor: pointer;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
line-height: 1;
}
.opd-show .opd-rx-pill i { font-size: 14px; line-height: 1; }
.opd-show .opd-rx-pill--ghost {
background: #fff; color: #1f3150; border-color: #cbd5e1;
}
.opd-show .opd-rx-pill--ghost i { color: var(--opd-primary); }
.opd-show .opd-rx-pill--ghost:hover { background: rgba(0,152,127,.06); border-color: var(--opd-primary); color: var(--opd-primary); }
.opd-show .opd-rx-pill--solid {
background: var(--opd-primary); color: #fff; border-color: var(--opd-primary);
box-shadow: 0 2px 6px rgba(0,152,127,.18);
}
.opd-show .opd-rx-pill--solid i { color: #fff; }
.opd-show .opd-rx-pill--solid:hover { filter: brightness(.95); }
.opd-show .opd-rx-pill--hold {
background: #fff7ed; color: #c2410c; border-color: #fdba74;
}
.opd-show .opd-rx-pill--hold i { color: #ea580c; }
.opd-show .opd-rx-pill--hold:hover { background: #fde9d3; border-color: #ea580c; }
.opd-show .opd-rx-pill--unhold {
background: var(--opd-primary); color: #fff; border-color: var(--opd-primary);
box-shadow: 0 2px 6px rgba(0,152,127,.20);
}
.opd-show .opd-rx-pill--unhold i { color: #fff; }
.opd-show .opd-rx-pill--unhold:hover { filter: brightness(.95); }
body div#prescriptionModal div.modal-dialog div.modal-content div.modal-header.rx-modal-header {
background: linear-gradient(135deg, #00987F 0%, #007a66 100%) !important;
background-color: #00987F !important;
color: #fff !important;
border: 0 !important;
border-bottom: 0 !important;
padding: 14px 22px !important;
}
body div#prescriptionModal h5.modal-title.rx-modal-title {
color: #fff !important;
font-weight: 700 !important;
letter-spacing: .3px !important;
font-size: 1rem !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
body div#prescriptionModal h5.modal-title.rx-modal-title i,
body div#prescriptionModal h5.modal-title.rx-modal-title span {
color: #fff !important;
}
body div#prescriptionModal h5.modal-title.rx-modal-title i {
font-size: 18px !important;
line-height: 1 !important;
}
body div#prescriptionModal button.btn-close.rx-modal-close {
filter: brightness(0) invert(1) !important;
opacity: .9 !important;
background-color: transparent !important;
}
#prescriptionModal .modal-content { border-radius: 12px; overflow: hidden; }
#prescriptionModal .modal-body { background: #f8fafc; }
#prescriptionModal h6 {
color: #1f3150; font-weight: 700; font-size: 0.85rem;
display: inline-flex; align-items: center; gap: 6px;
margin: 6px 0 10px;
}
#prescriptionModal h6 i { color: var(--opd-primary); font-size: 16px; }
#prescriptionModal table th {
background: rgba(0,152,127,.10) !important;
color: var(--opd-primary) !important;
border-color: rgba(0,152,127,.20) !important;
font-size: 0.78rem; font-weight: 700; letter-spacing: .2px;
}
#prescriptionModal table.rx-grouped-table th.rx-group-th {
background: rgba(0,152,127,.18) !important;
color: var(--opd-primary) !important;
text-transform: uppercase;
letter-spacing: .5px;
font-size: 0.72rem;
border-bottom: 1px solid rgba(0,152,127,.30) !important;
}
#prescriptionModal table td { vertical-align: middle; }
#prescriptionModal .rx-section-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
padding: 12px 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
margin-bottom: 10px;
}
#prescriptionModal .rx-section-card:last-child { margin-bottom: 0; }
#prescriptionModal .rx-past-order-header {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 6px 8px; margin-bottom: 6px;
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
font-size: 0.82rem;
}
#prescriptionModal .rx-past-order-header .badge { font-weight: 600; }
.opd-show .opd-main-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
padding: 0 16px 12px;
}
.opd-show .opd-main-left { min-width: 0; }
.opd-show .opd-rail-card {
background: var(--opd-surface);
border: 1px solid var(--opd-border);
border-radius: 10px;
padding: 12px 14px;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.opd-show .opd-rail-label {
font-size: 0.7rem; font-weight: 800; color: var(--opd-label);
text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px;
}
.opd-show .opd-discount-chips {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px;
}
.opd-show .opd-discount-chip {
border: 1px solid var(--opd-border-strong);
background: var(--opd-surface);
color: var(--opd-text);
border-radius: 8px; height: 32px;
font-size: 0.8rem; font-weight: 700;
cursor: pointer;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.opd-show .opd-discount-chip:hover { background: rgba(0,152,127,.08); border-color: var(--opd-primary); color: var(--opd-primary); }
.opd-show .opd-discount-chip.is-active { background: var(--opd-primary); color: #fff; border-color: var(--opd-primary); }
.opd-show .opd-rail-input {
display: flex; align-items: center; gap: 6px;
border: 1px solid var(--opd-border-strong);
border-radius: 8px;
padding: 0 8px; height: 36px;
background: var(--opd-surface);
}
.opd-show .opd-rail-input label {
font-size: 0.72rem; font-weight: 700; color: var(--opd-muted); margin: 0;
min-width: 60px;
}
.opd-show .opd-rail-input input {
flex: 1; border: 0; outline: 0; background: transparent;
text-align: right; font-size: 0.9rem; font-weight: 700; color: var(--opd-text);
padding: 0; height: 100%;
}
.opd-show .opd-rail-input .opd-rail-suffix { font-size: 0.78rem; color: var(--opd-muted); font-weight: 700; }
.opd-show .opd-pay-tabs {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 10px;
}
.opd-show .opd-pay-tab {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 34px; border-radius: 8px;
border: 1px solid var(--opd-border-strong); background: var(--opd-surface);
color: var(--opd-text); font-size: 0.78rem; font-weight: 700;
cursor: pointer;
transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.opd-show .opd-pay-tab i { font-size: 14px; color: var(--opd-muted); }
.opd-show .opd-pay-tab:hover { border-color: var(--opd-primary); color: var(--opd-primary); }
.opd-show .opd-pay-tab:hover i { color: var(--opd-primary); }
.opd-show .opd-pay-tab.is-active {
background: rgba(0,152,127,.10); color: var(--opd-primary); border-color: var(--opd-primary);
box-shadow: 0 0 0 2px rgba(0,152,127,.10) inset;
}
.opd-show .opd-pay-tab.is-active i { color: var(--opd-primary); }
.opd-show .opd-paid-strip {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
background: rgba(22,163,74,.10); color: #15803d;
border-radius: 8px; padding: 8px 10px;
font-size: 0.78rem; font-weight: 700; margin-top: 10px;
}
.opd-show .opd-paid-strip i { color: #15803d; }
.opd-show {
display: flex;
flex-direction: column;
min-height: calc(100vh - 120px);
}
.opd-show > .card {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.opd-show .card-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.opd-show .opd-bottom-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
margin: auto 16px 12px;
background: linear-gradient(90deg, var(--opd-primary) 0%, #007a66 100%);
color: #fff;
border-radius: 12px;
padding: 12px 16px;
box-shadow: 0 2px 8px rgba(0,152,127,.18);
}
.opd-show .opd-bb-words {
display: flex; align-items: center; gap: 10px;
color: rgba(255,255,255,.92);
font-size: 0.78rem; font-weight: 700;
}
.opd-show .opd-bb-words i { font-size: 16px; }
.opd-show .opd-bb-words-text { font-size: 0.78rem; color: rgba(255,255,255,.78); font-weight: 600; max-width: 320px; }
.opd-show .opd-bb-metrics {
display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.opd-show .opd-bb-cell { display: flex; flex-direction: column; gap: 1px; min-width: 60px; }
.opd-show .opd-bb-label {
font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,.72);
text-transform: uppercase; letter-spacing: .4px;
}
.opd-show .opd-bb-val { font-size: 0.92rem; font-weight: 800; color: #fff; }
.opd-show .opd-bb-val.opd-bb-primary { font-size: 1.1rem; }
.opd-show .opd-bb-val.opd-bb-tax { color: #fcd34d; }
.opd-show .opd-bb-val.opd-bb-disc { color: #fcd34d; }
.opd-show .opd-bb-cell.opd-bb-cell-edit { min-width: 130px; }
.opd-show .opd-bb-edit-wrap {
display: inline-flex; align-items: center; gap: 2px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.22);
border-radius: 7px;
padding: 2px 8px;
transition: background .12s ease, border-color .12s ease;
}
.opd-show .opd-bb-edit-wrap:focus-within {
background: rgba(255,255,255,.18);
border-color: rgba(255,255,255,.50);
box-shadow: 0 0 0 2px rgba(252,211,77,.25);
}
.opd-show .opd-bb-edit-prefix { font-size: 0.78rem; color: #fcd34d; font-weight: 800; letter-spacing: .02em; }
.opd-show .opd-bb-edit-input {
width: 78px; background: transparent; border: 0; outline: 0;
color: #fff; font-size: 0.92rem; font-weight: 800;
padding: 2px 0; text-align: right;
}
.opd-show .opd-bb-edit-input::-webkit-outer-spin-button,
.opd-show .opd-bb-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.opd-show .opd-bb-edit-input { -moz-appearance: textfield; }
.opd-show .opd-bb-edit-input::placeholder { color: rgba(255,255,255,.50); }
.opd-show .opd-bb-words-text { font-style: italic; }
.opd-show .opd-bb-words-text::before { content: '\201C'; padding-right: 2px; opacity: .85; font-style: normal; }
.opd-show .opd-bb-words-text::after { content: '\201D'; padding-left: 2px; opacity: .85; font-style: normal; }
.opd-show .opd-items-table thead th:nth-child(2),
.opd-show .opd-items-table tbody td:nth-child(2) { width: 30%; }
.opd-show .opd-items-table thead th:nth-child(3),
.opd-show .opd-items-table tbody td:nth-child(3) { white-space: nowrap; }
.opd-show .opd-items-table tbody td:nth-child(3) .badge { margin-right: 2px !important; }
.opd-show .opd-items-table .item-tax { white-space: nowrap; line-height: 1.15; text-align: right; }
.opd-show .opd-items-table .item-tax .ns-tax-amt { font-weight: 600; color: #92400e; }
.opd-show .opd-items-table .item-tax .ns-tax-rate { display: block; font-size: 10px; font-weight: 500; color: #b45309; }
.opd-show .opd-items-table .item-tax .ns-tax-none { color: #cbd5e1; }
.opd-show .opd-items-table input.dispense-qty {
width: 84px; font-weight: 600; text-align: center;
}
.opd-show .opd-items-table input.dispense-qty::-webkit-outer-spin-button,
.opd-show .opd-items-table input.dispense-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.opd-show .opd-items-table input.dispense-qty { -moz-appearance: textfield; }
.opd-show .opd-qty-stepper .opd-qty-input::-webkit-outer-spin-button,
.opd-show .opd-qty-stepper .opd-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.opd-show .opd-qty-stepper .opd-qty-input[type=number] { -moz-appearance: textfield; }
.opd-show .opd-summary-row {
background: var(--opd-surface-alt);
border-top: 1px solid var(--opd-border);
padding: 12px 18px;
}
.opd-show .opd-summary-row .summary-label {
font-size: 0.72rem; font-weight: 700; color: var(--opd-label);
text-transform: uppercase; letter-spacing: .4px;
}
.opd-show .opd-summary-row .summary-value {
font-size: 1.05rem; font-weight: 800; color: var(--opd-primary);
}
.opd-show .opd-chip-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.opd-show .opd-chip {
display: inline-flex; align-items: center; gap: 3px;
background: rgba(100,116,139,0.10); color: #475569;
border-radius: 4px; font-size: 10px; font-weight: 500;
padding: 1px 6px; line-height: 1.4; white-space: nowrap;
}
.opd-show .opd-chip .lbl { font-weight: 700; color: #94a3b8; font-size: 9px; }
.opd-show .opd-chip-code { background: rgba(37,99,235,0.10); color: #1d4ed8; }
.opd-show .opd-chip-code .lbl { color: #2563eb; }
.opd-show .opd-chip-avail { background: rgba(22,163,74,0.10); color: #15803d; }
.opd-show .opd-chip-avail .lbl { color: #16a34a; }
.opd-show .opd-copay-unit { font-size: 11px; font-weight: 500; color: var(--opd-muted); line-height: 1.2; white-space: nowrap; }
.opd-show .opd-chip-mfr { background: rgba(124,58,237,0.10); color: #6d28d9; }
.opd-show .opd-chip-mfr i { font-size: 11px; }
.opd-show .opd-chip-hold { background: rgba(220,38,38,0.10); color: #b91c1c; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* Medicine cell: small thumbnail + name on one line, chips below (gap before CODE) */
.opd-show .opd-med-cell .ns-product-img-wrap { float: left; margin: 1px 8px 2px 0; }
.opd-show .opd-med-name { display: inline; }
.opd-show .opd-med-cell .opd-chip-row { clear: both; margin-top: 6px; }
/* Medicine image thumbnail + hover preview (reused from new-sale) */
.ns-product-img-wrap { display: inline-block; vertical-align: middle; }
.ns-product-thumb {
width: 30px; height: 30px; object-fit: cover; border-radius: 5px;
border: 1px solid #e2e8f0; vertical-align: middle; cursor: zoom-in; background: #fff;
}
.ns-img-preview-pop {
position: fixed; z-index: 9999; background: #fff;
border: 1px solid #d5d9e5; border-radius: 8px; padding: 6px;
box-shadow: 0 20px 50px rgba(15,23,42,.25); pointer-events: none; display: none;
}
.ns-img-preview-pop img { display: block; max-width: 280px; max-height: 280px; width: auto; height: auto; border-radius: 4px; }
/* Theme-matched SweetAlert popups (rendered at body level, so NOT scoped to .opd-show) */
.opd-swal.swal2-popup {
width: 30em; max-width: 94vw; padding: 22px 26px 20px;
border-radius: 14px; font-family: inherit;
}
.opd-swal .swal2-title {
font-size: 1.18rem; font-weight: 800; color: #0f172a;
padding: 4px 0 2px; line-height: 1.3;
}
.opd-swal .swal2-html-container {
font-size: 0.88rem; color: #64748b; margin: 6px 0 0; line-height: 1.45;
}
.opd-swal .swal2-icon { width: 54px; height: 54px; border-width: 3px; margin: 4px auto 8px; }
.opd-swal .swal2-icon .swal2-icon-content { font-size: 1.9rem; }
.opd-swal .swal2-input-label {
font-size: 0.78rem; font-weight: 700; color: #334155;
margin: 12px 0 5px; align-self: flex-start;
}
.opd-swal .swal2-textarea, .opd-swal .swal2-input {
width: 100%; margin: 0; box-shadow: none; font-size: 0.9rem; color: #0f172a;
border: 1px solid #d9e0ea; border-radius: 9px; padding: 10px 12px;
}
.opd-swal .swal2-textarea { min-height: 84px; max-height: 200px; resize: vertical; }
.opd-swal .swal2-textarea:focus, .opd-swal .swal2-input:focus {
border-color: var(--opd-primary); box-shadow: 0 0 0 3px rgba(0,152,127,.15); outline: none;
}
.opd-swal .swal2-validation-message {
background: transparent; color: #dc2626; font-size: 0.78rem; font-weight: 600; padding: 6px 0 0;
}
.opd-swal .swal2-actions { gap: 10px; margin-top: 20px; }
.opd-swal .swal2-styled,
.opd-swal .swal2-confirm, .opd-swal .swal2-cancel, .opd-swal .swal2-deny {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 40px; padding: 0 18px; margin: 0; border-radius: 9px;
font-size: 0.85rem; font-weight: 700; border: 1px solid transparent;
box-shadow: none; cursor: pointer; transition: filter .15s ease, background .15s ease;
}
.opd-swal .swal2-confirm { background: var(--opd-primary); color: #fff; }
.opd-swal .swal2-confirm:hover { filter: brightness(.93); }
.opd-swal .swal2-cancel { background: #fff; color: #334155; border-color: #d9e0ea; }
.opd-swal .swal2-cancel:hover { background: #f1f5f9; }
.opd-swal .swal2-deny { background: #dc2626; color: #fff; }
.opd-swal .swal2-deny:hover { filter: brightness(.93); }
.opd-swal .swal2-confirm i, .opd-swal .swal2-cancel i, .opd-swal .swal2-deny i { font-size: 15px; }
.opd-swal .swal2-confirm.opd-swal-btn-hold { background: #ea580c; color: #fff; }
.opd-swal .swal2-confirm.opd-swal-btn-hold:hover { filter: brightness(.93); }
body { background: #f8fafc; }
.sales-main-container,
.sales-main-container *,
.main-container,
.sales-container { font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; }
.sales-main-container { color: #1f3150; }
.sales-main-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 12px 16px !important;
}
@media (max-width: 1199px) { .sales-main-container { grid-template-columns: 1fr; } }
.main-container, .sales-container {
background: #fff;
border: none;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
/* Products header (search + filters) */
.products-header {
padding: 14px 18px !important;
background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
border-bottom: 1px solid #e5e7eb;
}
.products-header .products-toolbar {
display: grid;
grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(180px, 2fr) 38px;
gap: 8px;
align-items: center;
}
.products-header .sale-purchase-input,
.products-header .form-control,
.products-header .form-select {
height: 38px !important;
min-height: 38px !important;
padding: 6px 12px !important;
font-size: 12.5px !important;
color: #1f3150 !important;
background: #fff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
box-shadow: 0 1px 2px rgba(15,23,42,0.03);
transition: border-color .15s, box-shadow .15s;
min-width: 0;
}
.products-header select.form-control { padding-right: 28px !important; }
.products-header .sale-purchase-input:focus,
.products-header .form-select:focus {
border-color: #00987F !important;
box-shadow: 0 0 0 3px rgba(0,152,127,0.15) !important;
outline: none !important;
}
.products-header .btn-search.pt-add {
width: 38px; height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #00987F 0%, #00766B 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 0 !important;
box-shadow: 0 2px 6px rgba(0,118,107,0.25);
}
.products-header .btn-search.pt-add i { font-size: 14px; }
.products-header .btn-search.pt-add:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,118,107,0.35); }
/* Product list cards */
.products-container { padding: 16px 18px; }
.scroll-card { max-height: calc(100vh - 220px); overflow-y: auto; }
.scroll-card::-webkit-scrollbar { width: 8px; }
.scroll-card::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.scroll-card::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* Quick Action header (cart side) - modernized */
.qa-modern {
padding: 14px 18px !important;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border-bottom: 1px solid #e5e7eb;
}
.qa-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.qa-title-block {
display: flex;
align-items: center;
gap: 10px;
}
.qa-title-icon {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 1px solid #fcd34d;
border-radius: 8px;
color: #b45309;
font-size: 14px;
box-shadow: 0 1px 2px rgba(180,83,9,0.15);
}
.qa-modern .quick-act-title {
font-size: 16px !important;
font-weight: 700 !important;
color: #0f172a !important;
letter-spacing: -0.01em;
margin: 0 !important;
}
.qa-actions {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* Chip buttons with icon + label (Stock, Today) */
.qa-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 32px;
padding: 0 10px;
border-radius: 8px;
font-size: 11.5px;
font-weight: 600;
text-decoration: none !important;
border: 1px solid transparent;
transition: all .15s;
line-height: 1;
white-space: nowrap;
}
.qa-chip i { font-size: 12px !important; }
.qa-chip i, .qa-date i, .qa-icon-btn i, .qa-title-icon i,
.payment-title i, .total-text i,
.submit-btn.payment-btn i, .save-btn.cancel-sale-btn i {
font-family: "Font Awesome 6 Free", "FontAwesome" !important;
font-weight: 900 !important;
font-style: normal !important;
display: inline-block !important;
min-width: 1em;
text-align: center;
line-height: 1;
}
.qa-chip i, .qa-date i, .qa-icon-btn i, .qa-title-icon i { font-size: 13px; }
.payment-title i { font-size: 12px; }
.total-text i { font-size: 14px; }
.qa-chip--primary {
background: #e6f7f4;
color: #005a52 !important;
border-color: #a3d6cd;
}
.qa-chip--primary i { color: #00766B; }
.qa-chip--primary:hover {
background: #cef0e8;
border-color: #7cc4b8;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0,118,107,0.15);
}
.qa-chip--success {
background: #ecfdf5;
color: #047857 !important;
border-color: #a7f3d0;
}
.qa-chip--success i { color: #059669; }
.qa-chip--success:hover {
background: #d1fae5;
border-color: #6ee7b7;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(5,150,105,0.15);
}
.qa-chip--save {
background: #ecfdf5;
color: #047857 !important;
border-color: #a7f3d0;
}
.qa-chip--save i { color: #059669; }
.qa-chip--save:hover {
background: #16a34a;
color: #fff !important;
border-color: #16a34a;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(22,163,74,0.25);
}
.qa-chip--save:hover i { color: #fff; }
.qa-chip--neutral {
background: #fff;
color: #475569 !important;
border-color: #e2e8f0;
}
.qa-chip--neutral i { color: #64748b; }
.qa-chip--neutral:hover {
background: #f8fafc;
border-color: #cbd5e1;
color: #1f3150 !important;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.qa-chip--warning {
background: #fff7ed;
color: #c2410c !important;
border-color: #fed7aa;
}
.qa-chip--warning i { color: #ea580c; }
.qa-chip--warning:hover {
background: #fed7aa;
border-color: #fdba74;
color: #9a3412 !important;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(234,88,12,0.18);
}
.qa-form-meta {
display: grid;
grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(180px, 2fr) 38px;
gap: 8px;
padding: 0 18px;
margin: 14px 0 12px;
align-items: center;
}
.qa-form-meta .qa-meta-input {
height: 38px !important;
font-size: 12.5px !important;
border-radius: 8px !important;
border: 1px solid #e2e8f0 !important;
background: #fff !important;
color: #1f3150 !important;
padding: 6px 12px !important;
min-width: 0;
}
.qa-form-meta .qa-meta-input:focus {
border-color: #00987F !important;
box-shadow: 0 0 0 3px rgba(0,152,127,0.12) !important;
outline: none !important;
}
.qa-form-meta .qa-meta-invoice { font-weight: 600; background: #f8fafc !important; }
.qa-form-meta .qa-meta-add {
width: 38px; height: 38px;
background: linear-gradient(135deg, #00987F 0%, #00766B 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
box-shadow: 0 2px 6px rgba(0,118,107,0.25);
transition: transform .15s, box-shadow .15s;
padding: 0;
}
.qa-form-meta .qa-meta-add i { font-size: 14px; }
.qa-form-meta .qa-meta-add:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,118,107,0.35);
color: #fff !important;
}
.qa-note-row {
padding: 0 18px;
}
.qa-note-row .payment-title {
font-size: 11px !important;
font-weight: 600 !important;
color: #6b7280 !important;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 6px !important;
}
.qa-note-row .form-control {
height: 40px;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 13px;
padding: 8px 14px;
}
.qa-note-row .form-control:focus {
border-color: #00987F;
box-shadow: 0 0 0 3px rgba(0,152,127,0.12);
outline: none;
}
/* Date input with leading icon */
.qa-date {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 10px 0 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
}
.qa-date:hover { border-color: #a3d6cd; }
.qa-date:focus-within { border-color: #00987F; box-shadow: 0 0 0 3px rgba(0,152,127,0.15); }
.qa-date i { color: #00987F; font-size: 13px; }
.qa-date input[type="date"] {
border: none !important;
outline: none !important;
background: transparent !important;
font-size: 12.5px !important;
color: #0f172a !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
min-width: 120px;
font-family: inherit !important;
cursor: pointer;
}
/* Square icon-only buttons (Calculator, Power, Menu) */
.qa-icon-btn {
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
color: #475569;
font-size: 14px;
cursor: pointer;
text-decoration: none;
transition: all .15s;
}
.qa-icon-btn i { color: inherit; font-size: 14px; }
.qa-icon-btn:hover {
background: #e6f7f4;
border-color: #a3d6cd;
color: #005a52;
transform: translateY(-1px);
}
.qa-icon-btn--danger {
background: #fef2f2;
border-color: #fecaca;
color: #b91c1c;
}
.qa-icon-btn--danger:hover {
background: #fee2e2;
border-color: #fca5a5;
color: #991b1b;
}
/* Old quick-act-header rules kept for compat (overridden by qa-modern) */
.quick-act-header:not(.qa-modern) {
padding: 12px 18px !important;
background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
border-bottom: 1px solid #e5e7eb;
}
.quick-act-title {
font-size: 16px !important;
font-weight: 700 !important;
color: #111827 !important;
margin: 0 !important;
letter-spacing: -0.01em;
}
.quick-actions-container { display: flex; align-items: center; gap: 6px; }
.quick-actions-container .sale-stock-btn,
.quick-actions-container .today-sale-btn {
height: 34px;
padding: 0 12px;
display: inline-flex;
align-items: center;
background: #e6f7f4 !important;
color: #005a52 !important;
border: 1px solid #a3d6cd !important;
border-radius: 8px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
text-decoration: none;
transition: all .15s;
}
.quick-actions-container .sale-stock-btn:hover,
.quick-actions-container .today-sale-btn:hover { background: #cef0e8 !important; border-color: #7cc4b8 !important; }
.quick-actions-container #datePicker {
height: 34px !important;
padding: 4px 10px !important;
font-size: 12.5px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
background: #fff !important;
color: #0f172a !important;
}
.quick-actions-container .sale-power-btn,
.quick-actions-container .burger-menu {
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
transition: all .15s;
}
.quick-actions-container .sale-power-btn:hover,
.quick-actions-container .burger-menu:hover { background: #e6f7f4 !important; border-color: #a3d6cd !important; }
/* Customer select row */
.sales-container form { padding: 16px 18px; }
.sales-container .customer-select,
.sales-container .choices__inner {
height: 42px !important;
min-height: 42px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
background: #fff !important;
font-size: 13.5px !important;
color: #0f172a !important;
}
.sales-container .square-btn {
width: 42px; height: 42px;
margin-left: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #00987F 0%, #00766B 100%) !important;
border: none !important;
border-radius: 10px !important;
box-shadow: 0 2px 6px rgba(0,118,107,0.25);
}
.sales-container .square-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,118,107,0.35); }
/* Cart table — modern light-gray header */
.cart-payment .table-responsive-custom {
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
margin-top: 4px;
}
.cart-payment { padding: 0 18px; }
.cart-payment .table-responsive-custom { overflow-x: auto; }
.cart-payment .table {
margin: 0;
border: 1px solid var(--cdt-border-table, #e2e8f0);
border-radius: 10px;
overflow: hidden;
border-collapse: separate;
border-spacing: 0;
min-width: 560px;
}
.cart-payment .table thead th,
.cart-payment .table .table-light th,
.sales-purchase-th {
background: var(--cdt-header-bg, #ffb637) !important;
color: var(--cdt-header-text, #000) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.04em;
border: none !important;
border-bottom: 2px solid var(--cdt-border-table, #e2e8f0) !important;
padding: 8px 6px !important;
white-space: nowrap;
}
.cart-payment .table thead th:first-child { border-top-left-radius: 10px; }
.cart-payment .table thead th:last-child { border-top-right-radius: 10px; }
.cart-payment .table tbody td {
font-size: 12.5px; color: #1f3150;
padding: 8px 6px; vertical-align: middle;
border: none !important;
border-bottom: 1px solid var(--cdt-border-table, #e2e8f0) !important;
}
.cart-payment .table tbody tr:last-child td { border-bottom: none !important; }
.cart-payment .table tbody tr:nth-child(even) td { background: var(--cdt-bg-table-alt, #f8f9fa); }
.cart-payment .table tbody tr:hover td { background: var(--cdt-bg-table-hover, #e7f1ff); }
.cart-payment .table tbody img {
width: 32px; height: 32px;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--cdt-border-table, #e2e8f0);
}
/* Payment panel cards */
.make-payment-with-btn { padding: 0 18px 18px; }
.payment-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 10px;
padding: 0 18px;
align-items: start;
}
.amount-info-container {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
display: contents;
}
.pay-cell {
display: grid;
grid-template-columns: minmax(110px, auto) 1fr;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid #e7e9f5;
border-left: 3px solid var(--cell-accent, #00987F);
border-radius: 8px;
padding: 6px 10px;
margin: 0 !important;
}
.pay-cell.pay-combo {
grid-template-columns: minmax(80px, max-content) minmax(120px, 1.3fr) minmax(90px, 1fr);
gap: 6px;
}
.pay-cell.pay-combo > .form-select,
.pay-cell.pay-combo > select {
padding-right: 26px !important;
background-position: right 8px center !important;
background-size: 10px !important;
}
.pay-cell.pay-combo > .form-control,
.pay-cell.pay-combo > input {
padding-left: 8px !important;
padding-right: 8px !important;
}
.pay-cell.pay-combo .payment-title {
font-size: 10px !important;
letter-spacing: 0.02em !important;
}
.payment-section .pay-cell.pay-paymode-cell {
grid-column: 1 / -1;
grid-template-columns: minmax(110px, auto) 1fr;
align-items: start;
padding: 10px 12px;
}
.pay-cell.pay-paymode-cell .payment-title { padding-top: 6px; }
.pay-cell.pay-paymode-cell .ns-paymode { width: 100%; padding: 8px; }
.pay-cell.pay-paymode-cell .ns-paymode-input { height: 34px; font-size: 0.84rem; }
.pay-cell.pay-paymode-cell .ns-paymode-tab { padding: 7px 10px; font-size: 0.78rem; }
.pay-cell .payment-title,
.pay-cell .total-text {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10.5px !important;
font-weight: 700 !important;
color: var(--cell-accent, #3f4254) !important;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 !important;
white-space: nowrap;
width: auto !important;
}
.pay-cell .payment-title i,
.pay-cell .total-text i {
font-size: 12px;
color: var(--cell-accent, #00987F) !important;
}
.pay-cell > .form-control,
.pay-cell > .form-select,
.pay-cell > input,
.pay-cell > select {
height: 32px !important;
min-height: 32px !important;
padding: 0 10px !important;
font-size: 12.5px !important;
background: #fff !important;
border: 1px solid #d5d9e5 !important;
border-radius: 6px !important;
color: #1f3150 !important;
font-weight: 600;
min-width: 0;
width: 100%;
}
.pay-cell > input[readonly] { background: #f8fafc !important; font-weight: 700; }
.pay-cell > .form-control:focus,
.pay-cell > .form-select:focus {
border-color: var(--cell-accent, #00987F) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--cell-accent, #00987F) 18%, transparent) !important;
outline: none !important;
}
.pay-cell.pay-receive { --cell-accent: #16a34a; }
.pay-cell.pay-change { --cell-accent: #2563eb; }
.pay-cell.pay-due { --cell-accent: #dc2626; }
.pay-cell.pay-type {
--cell-accent: #00987F;
grid-template-columns: 1fr;
align-items: stretch;
gap: 6px;
}
.pay-cell.pay-type .payment-title { margin-bottom: 0 !important; }
.pay-cell.pay-tax { --cell-accent: #0891b2; }
.pay-cell.pay-discount { --cell-accent: #f59e0b; }
.pay-cell.pay-delivery { --cell-accent: #7c3aed; }
.pay-cell.pay-type .pay-type-wrap {
display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.pay-cell.pay-type .pay-type-wrap > select#payment_type {
width: 100%; height: 32px; padding: 0 10px;
border: 1px solid #d5d9e5; border-radius: 6px;
font-size: 12.5px; color: #1f3150;
}
.pay-cell.pay-total {
background: linear-gradient(135deg, rgba(0,152,127,.12), rgba(0,152,127,.04));
border: 1px solid rgba(0,152,127,.35);
border-left: 3px solid #00987F;
min-height: 44px;
grid-template-columns: minmax(110px, auto) 1fr;
}
.pay-cell.pay-total .total-text {
color: #00987F !important; font-size: 12px !important; font-weight: 800 !important;
}
.pay-cell.pay-total .total-text i { color: #00987F !important; }
.total-amount {
font-size: 18px !important;
font-weight: 800 !important;
color: #00987F !important;
text-align: right;
}
.add-payment-btn {
height: 32px;
padding: 0 12px;
background: rgba(0,152,127,.08) !important;
color: #00987F !important;
border: 1px dashed #a3d6cd !important;
border-radius: 6px !important;
font-size: 11.5px !important;
font-weight: 600 !important;
transition: all .15s;
align-self: flex-start;
display: inline-flex; align-items: center;
}
.add-payment-btn:hover { background: #00987F !important; color: #fff !important; border-color: #00987F !important; }
/* Multi-payment dynamic rows — type + amount + delete on one line */
.pay-cell.pay-type .payment-main-container {
display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.pay-cell.pay-type .payment-main-container .payment-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(60px, 90px) auto;
gap: 6px;
align-items: center;
margin: 0;
}
.pay-cell.pay-type .payment-main-container .payment-grid select.payment_type,
.pay-cell.pay-type .payment-main-container .payment-grid input.amount {
height: 32px; min-height: 32px;
font-size: 12px;
padding: 0 10px;
border: 1px solid #d5d9e5;
border-radius: 6px;
color: #1f3150;
background: #fff;
min-width: 0;
width: 100%;
}
.pay-cell.pay-type .payment-main-container .payment-grid input.amount {
text-align: right;
font-weight: 600;
}
.pay-cell.pay-type .payment-main-container .payment-grid .delete-btn {
background: rgba(220,38,38,.1);
color: #dc2626;
border: none;
border-radius: 6px;
padding: 0 8px;
height: 32px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.pay-cell.pay-type .payment-main-container .payment-grid .delete-btn:hover {
background: #dc2626; color: #fff;
}
.pay-cell.pay-type .payment-main-container .payment-grid .delete-btn i { font-size: 14px; }
/* Choices.js select polish */
.sales-container .choices__list--single { padding: 0 !important; }
.sales-container .choices__list--dropdown {
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
box-shadow: 0 8px 24px rgba(15,23,42,0.1);
margin-top: 4px;
}
.sales-container .choices__list--dropdown .choices__item--selectable.is-highlighted {
background: #e6f7f4;
color: #005a52;
}
/* Product grid cards — responsive auto-fill, modern cards */
.search-product-card.products,
.product-list-container {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px !important;
}
.single-product {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 10px;
cursor: pointer;
display: flex;
flex-direction: column;
transition: transform .15s, box-shadow .15s, border-color .15s;
position: relative;
overflow: hidden;
}
.single-product:hover {
transform: translateY(-2px);
border-color: #a3d6cd;
box-shadow: 0 8px 20px rgba(0,118,107,0.12);
}
.single-product .pro-img {
background: #f8fafc;
border-radius: 8px;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
overflow: hidden;
}
.single-product .pro-img img {
max-width: 70%;
max-height: 70%;
object-fit: contain;
}
.single-product .product-con { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.single-product .pro-title {
font-size: 13px !important;
font-weight: 600 !important;
color: #0f172a !important;
margin: 0;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 34px;
}
.single-product .pro-category {
font-size: 11px !important;
color: #6b7280 !important;
margin: 0 !important;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.single-product .price { margin-top: auto; padding-top: 6px; }
.single-product .pro-price {
font-size: 15px !important;
font-weight: 700 !important;
color: #005a52 !important;
margin: 0;
}
/* Empty state */
.alert.not-found {
grid-column: 1 / -1;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 10px;
color: #991b1b;
font-weight: 500;
text-align: center;
padding: 14px;
}
/* Save / Save & Print / Reset buttons */
.sales-purchase-btn-container,
.payment-btn-container-sm {
display: flex;
gap: 8px;
margin-top: 12px;
}
.sales-purchase-btn-container > div { flex: 1; }
.submit-btn.payment-btn {
width: 100%;
height: 44px;
background: transparent !important;
color: #2563eb !important;
border: 1.5px solid #2563eb !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
transition: background .15s, color .15s, box-shadow .15s;
}
.submit-btn.payment-btn:hover {
background: #2563eb !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(37,99,235,0.25);
}
.submit-btn.payment-btn[value="final"] {
color: #16a34a !important;
border-color: #16a34a !important;
}
.submit-btn.payment-btn[value="final"]:hover {
background: #16a34a !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(22,163,74,0.25);
}
.save-btn.cancel-sale-btn {
width: 100%;
height: 44px;
background: transparent !important;
color: #f59e0b !important;
border: 1.5px solid #f59e0b !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 600 !important;
transition: background .15s, color .15s, box-shadow .15s;
}
.save-btn.cancel-sale-btn:hover {
background: #f59e0b !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(245,158,11,0.25);
}
/* Cart row remove + qty controls polish */
#cart-list .cart-img img,
#cart-list img.cart-img {
width: 36px; height: 36px;
object-fit: cover;
border-radius: 6px;
background: #f8fafc;
border: 1px solid #e2e8f0;
}
#cart-list .removeBtn,
#cart-list .remove-cart-item,
#cart-list .cart-remove {
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fee2e2 !important;
color: #dc2626 !important;
border: 1px solid #fca5a5 !important;
border-radius: 6px !important;
transition: all .15s;
}
#cart-list .removeBtn:hover { background: #fecaca !important; color: #991b1b !important; }
#cart-list input[type="number"] {
width: 56px;
height: 32px;
border: 1px solid #e2e8f0 !important;
border-radius: 6px !important;
text-align: center;
font-weight: 600;
font-size: 13px;
background: #fff !important;
}
#cart-list input[type="number"]:focus {
border-color: #00987F !important;
box-shadow: 0 0 0 3px rgba(0,152,127,0.15) !important;
outline: none !important;
}
/* Empty cart placeholder */
#cart-list:empty::after {
content: '';
}
.cart-payment .table tbody tr.empty-cart td,
.cart-payment .table tbody:empty {
color: #9ca3b6;
text-align: center;
padding: 24px;
}
/* Stronger visibility pass */
.quick-actions-container .sale-stock-btn i,
.quick-actions-container .today-sale-btn i { font-size: 12px; }
.quick-actions-container .sale-power-btn i,
.quick-actions-container .burger-menu i {
font-size: 15px;
color: #005a52;
}
.quick-actions-container .sale-power-btn {
background: #fef2f2 !important;
border-color: #fecaca !important;
}
.quick-actions-container .sale-power-btn i { color: #dc2626; }
.quick-actions-container .sale-power-btn:hover {
background: #fee2e2 !important;
border-color: #fca5a5 !important;
}
/* Total amount card — make it stand out */
.save-amount-container:first-child {
background: linear-gradient(135deg, #00987F 0%, #00766B 100%);
border-radius: 10px;
padding: 14px 16px !important;
margin: -12px -12px 12px !important;
color: #fff !important;
}
.save-amount-container:first-child .total-text { color: rgba(255,255,255,0.9) !important; }
.save-amount-container:first-child .total-text i { color: #fff; opacity: 0.9; }
.save-amount-container:first-child .total-amount {
color: #fff !important;
font-size: 26px !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* Hide the top duplicate Save & Print on small (now removed from markup, keep CSS belt-and-suspenders) */
.payment-btn-container-sm { display: none !important; }
/* Buttons — bigger icons, separation */
.submit-btn.payment-btn i,
.save-btn.cancel-sale-btn i { font-size: 13px; }
/* Payment-title icons subtle indigo */
.payment-title i { color: #00987F; opacity: 0.9; }
.total-text i { color: #005a52; }
/* Quick action header alignment */
.quick-act-header .d-flex { gap: 12px; flex-wrap: wrap; }
.quick-actions-container { flex-wrap: wrap; row-gap: 6px; }
/* Section dividers between info card rows */
.amount-info-container .amount-container,
.amount-info-container .save-amount-container {
padding: 8px 10px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 8px !important;
}
.amount-info-container .amount-container:last-child,
.amount-info-container .save-amount-container:last-child { margin-bottom: 0 !important; }
.ns-paymode { display: flex; flex-direction: column; gap: 10px; background: var(--ns-surface-alt, #f1f5fb); border-radius: 12px; padding: 10px; }
.ns-paymode-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ns-paymode-tab {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
background: #fff; border: 1px solid var(--ns-border-strong, #cbd5e1); color: var(--ns-primary, #2563eb);
padding: 9px 10px; font-weight: 600; font-size: 0.82rem;
border-radius: 8px; cursor: pointer; text-align: center; white-space: nowrap;
transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.ns-paymode-tab i { font-size: 16px; }
.ns-paymode-tab:hover { background: rgba(37, 99, 235, 0.08); border-color: var(--ns-primary, #2563eb); }
.ns-paymode-tab.is-active { background: var(--ns-primary, #2563eb); color: #fff; border-color: var(--ns-primary, #2563eb); box-shadow: 0 4px 10px rgba(37,99,235,0.25); }
.ns-paymode-tab.is-active i { color: #fff; }
.ns-paymode-body { display: flex; flex-direction: column; gap: 8px; }
.ns-paymode-pane { display: none; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ns-paymode-pane.is-active { display: grid; }
.ns-paymode-pane[data-pane="Cash"].is-active { grid-template-columns: 1fr; }
.ns-paymode-field { display: flex; }
.ns-paymode-field.full { grid-column: 1 / -1; }
.ns-paymode-input {
width: 100%; height: 40px; padding: 0 12px;
border: 1px solid var(--ns-border-strong, #cbd5e1); border-radius: 8px;
background: #fff; font-size: 0.86rem; color: var(--ns-text, #1f3150);
transition: border-color .15s, box-shadow .15s;
}
.ns-paymode-input::placeholder { color: #94a3b8; }
.ns-paymode-input:focus { outline: none; border-color: var(--ns-primary, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.ns-paymode-input[readonly] { background: #f8fafc; color: #475569; }
select.ns-paymode-input { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
@media (max-width: 640px) {
.ns-paymode-tabs { grid-template-columns: repeat(2, 1fr); }
.ns-paymode-pane.is-active { grid-template-columns: 1fr; }
}
.opd-show .opd-rail-card .ns-paymode {
background: rgba(15, 23, 42, 0.04);
padding: 8px;
border-radius: 10px;
margin-bottom: 8px;
}
.opd-show .opd-rail-card .ns-paymode-tabs {
grid-template-columns: repeat(2, 1fr);
gap: 5px;
}
.opd-show .opd-rail-card .ns-paymode-tab {
padding: 7px 8px;
font-size: 0.74rem;
gap: 4px;
}
.opd-show .opd-rail-card .ns-paymode-tab i { font-size: 14px; }
.opd-show .opd-rail-card .ns-paymode-pane.is-active {
grid-template-columns: 1fr;
gap: 6px;
}
.opd-show .opd-rail-card .ns-paymode-input {
height: 34px;
font-size: 0.78rem;
padding: 0 10px;
}
.opd-show .opd-rail-card select.ns-paymode-input {
padding-right: 28px;
background-position: right 8px center;
}
.walkin-sale-shell {
--ws-brand-50: #ECFDF5;
--ws-brand-100: #D1FAE5;
--ws-brand-200: #A7F3D0;
--ws-brand-600: #059669;
--ws-brand-700: #047857;
--ws-brand-800: #065F46;
--ws-brand-900: #064E3B;
--ws-ink-50: #FAFAF9;
--ws-ink-100: #F5F5F4;
--ws-ink-200: #E7E5E4;
--ws-ink-300: #D6D3D1;
--ws-ink-400: #A8A29E;
--ws-ink-500: #78716C;
--ws-ink-600: #57534E;
--ws-ink-700: #44403C;
--ws-ink-800: #292524;
--ws-ink-900: #1C1917;
--ws-amber-50: #FFFBEB;
--ws-amber-100: #FEF3C7;
--ws-amber-200: #FDE68A;
--ws-amber-600: #D97706;
--ws-amber-700: #B45309;
--ws-rose-50: #FFF1F2;
--ws-rose-600: #E11D48;
--ws-rose-700: #BE123C;
--ws-radius-sm: 6px;
--ws-radius: 10px;
--ws-radius-lg: 14px;
--ws-shadow-card: 0 1px 0 rgba(28,25,23,.04), 0 1px 2px rgba(28,25,23,.04);
--ws-shadow-pop: 0 12px 32px -8px rgba(6,78,59,.18), 0 4px 8px rgba(28,25,23,.05);
font-family: 'Manrope', system-ui, sans-serif;
color: var(--ws-ink-900);
}
.walkin-sale-shell .mono { font-family: 'JetBrains Mono', monospace; }
.walkin-sale-shell .pos-body {
display: grid;
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
gap: 16px;
padding: 16px;
align-items: start;
max-width: 1700px;
margin: 0 auto;
}
.walkin-sale-shell .pane {
background: #fff;
border: 1px solid var(--ws-ink-200);
border-radius: var(--ws-radius-lg);
box-shadow: var(--ws-shadow-card);
overflow: hidden;
}
.walkin-sale-shell .catalog-head {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 14px; border-bottom: 1px solid var(--ws-ink-200);
}
.walkin-sale-shell .catalog-title {
font-size: 14px; font-weight: 700; color: var(--ws-ink-900);
display: inline-flex; align-items: center; gap: 8px;
}
.walkin-sale-shell .catalog-title i { color: var(--ws-brand-700); font-size: 17px; }
.walkin-sale-shell .collapse-btn {
width: 32px; height: 32px;
border: 1px solid var(--ws-ink-200); background: #fff;
border-radius: var(--ws-radius-sm); color: var(--ws-ink-600); cursor: pointer;
display: grid; place-items: center; transition: all .15s ease;
}
.walkin-sale-shell .collapse-btn:hover { background: var(--ws-ink-100); color: var(--ws-ink-900); border-color: var(--ws-ink-300); }
.walkin-sale-shell .collapse-btn i { font-size: 18px; }
.walkin-sale-shell .catalog-filters {
display: flex; flex-direction: column; gap: 10px;
padding: 14px; border-bottom: 1px solid var(--ws-ink-200);
background: var(--ws-ink-50);
}
.walkin-sale-shell .catalog-filters .filter-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.walkin-sale-shell .catalog-filters .filter-row.two { grid-template-columns: 1fr 1fr; }
.walkin-sale-shell .fld {
position: relative;
height: 40px; background: #fff;
border: 1px solid var(--ws-ink-200); border-radius: var(--ws-radius);
display: flex; align-items: center; gap: 8px; padding: 0 10px;
transition: all .15s ease; min-width: 0;
}
.walkin-sale-shell .fld:focus-within { border-color: var(--ws-brand-600); box-shadow: 0 0 0 3px var(--ws-brand-50); }
.walkin-sale-shell .fld > i.lead {
color: var(--ws-ink-400); font-size: 16px; flex-shrink: 0;
pointer-events: none;
}
.walkin-sale-shell .fld > i.chev {
color: var(--ws-ink-400); font-size: 16px;
pointer-events: none;
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
}
.walkin-sale-shell .fld select,
.walkin-sale-shell .fld input {
border: 0; outline: 0; background: transparent; flex: 1; min-width: 0;
font-family: inherit; font-size: 13px; color: var(--ws-ink-800);
appearance: none; -webkit-appearance: none;
}
.walkin-sale-shell .fld select {
cursor: pointer; color: var(--ws-ink-600);
padding-right: 24px;
}
.walkin-sale-shell .fld .choices {
flex: 1; min-width: 0; margin: 0;
}
.walkin-sale-shell .fld .choices__inner {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
min-height: 0 !important;
font-size: 13px;
border-radius: 0 !important;
box-shadow: none !important;
}
.walkin-sale-shell .fld .choices__inner > .choices__list { padding: 0 !important; }
.walkin-sale-shell .fld .choices__list--single { padding: 0 !important; }
.walkin-sale-shell .fld .choices__list--single .choices__item {
display: block;
max-width: 100%;
padding: 0 24px 0 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--ws-ink-800);
font-size: 13px; font-weight: 500;
line-height: 38px;
}
.walkin-sale-shell .fld .choices__list--single .choices__placeholder {
opacity: 1; color: var(--ws-ink-400); font-weight: 400;
}
.walkin-sale-shell .fld .choices[data-type*="select-one"]::after { display: none !important; }
.walkin-sale-shell .fld .choices[data-type*="select-one"].is-open .choices__inner { border: 0 !important; }
.walkin-sale-shell .fld .choices__list--dropdown {
z-index: 30;
border-radius: var(--ws-radius-sm);
border: 1px solid var(--ws-ink-200);
box-shadow: var(--ws-shadow-pop);
word-break: break-word;
font-size: 13px;
}
.walkin-sale-shell .fld .choices__list--dropdown .choices__item--selectable {
padding: 8px 12px;
white-space: normal;
}
.walkin-sale-shell .fld .choices__list--dropdown .choices__item--selectable.is-highlighted {
background: var(--ws-brand-50);
color: var(--ws-brand-800);
}
.walkin-sale-shell .fld.search > i.lead { color: var(--ws-brand-600); }
.walkin-sale-shell .btn-add {
width: 40px; height: 40px;
background: var(--ws-brand-700); color: #fff;
border: 0; border-radius: var(--ws-radius);
cursor: pointer; display: grid; place-items: center;
box-shadow: 0 1px 2px rgba(4,120,87,.3);
transition: all .15s ease;
}
.walkin-sale-shell .btn-add:hover { background: var(--ws-brand-800); color: #fff; }
.walkin-sale-shell .btn-add i { font-size: 20px; }
.walkin-sale-shell .product-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
gap: 10px !important;
padding: 14px !important;
max-height: calc(100vh - 220px);
overflow-y: auto;
}
.walkin-sale-shell .product-grid .single-product {
grid-column: auto;
background: #fff;
border: 1px solid var(--ws-ink-200);
border-radius: var(--ws-radius);
padding: 12px 10px 11px !important;
display: flex; flex-direction: column; align-items: center; gap: 7px;
text-align: center; cursor: pointer; overflow: hidden;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.walkin-sale-shell .product-grid .single-product:hover {
border-color: var(--ws-brand-200);
box-shadow: var(--ws-shadow-pop);
transform: translateY(-2px);
}
.walkin-sale-shell .product-grid .single-product .pro-img {
width: 100%; height: 112px;
aspect-ratio: auto !important;
margin-bottom: 4px; padding: 4px;
background: var(--ws-ink-50);
border-radius: 8px;
display: grid; place-items: center;
overflow: hidden;
}
.walkin-sale-shell .product-grid .single-product .pro-img img {
max-width: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.walkin-sale-shell .product-grid .single-product .product-con {
flex: 0 0 auto; gap: 2px; align-items: center;
}
.walkin-sale-shell .product-grid .single-product .pro-title {
font-size: 12px !important; font-weight: 600 !important;
color: var(--ws-ink-800) !important;
min-height: 0 !important; -webkit-line-clamp: 2;
line-height: 1.25 !important;
}
.walkin-sale-shell .product-grid .single-product .pro-category { display: none !important; }
.walkin-sale-shell .product-grid .single-product .price { margin: 0; padding: 0; }
.walkin-sale-shell .product-grid .single-product .pro-price {
font-family: 'JetBrains Mono', monospace !important;
font-size: 13px !important; font-weight: 700 !important;
color: var(--ws-brand-700) !important; margin: 0 !important;
}
.walkin-sale-shell .catalog-rail { display: none; }
.walkin-sale-shell .pos-body.is-collapsed { grid-template-columns: 48px minmax(0, 1fr); }
.walkin-sale-shell .pos-body.is-collapsed .catalog-pane { display: none; }
.walkin-sale-shell .pos-body.is-collapsed .catalog-rail {
display: flex; flex-direction: column; align-items: center; gap: 16px;
background: #fff; border: 1px solid var(--ws-ink-200);
border-radius: var(--ws-radius-lg); box-shadow: var(--ws-shadow-card);
padding: 16px 0; cursor: pointer; color: var(--ws-brand-700);
height: fit-content; position: sticky; top: 16px;
transition: all .15s ease;
}
.walkin-sale-shell .catalog-rail:hover { border-color: var(--ws-brand-600); box-shadow: var(--ws-shadow-pop); }
.walkin-sale-shell .catalog-rail i { font-size: 19px; }
.walkin-sale-shell .catalog-rail .rail-label {
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 12px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--ws-ink-600);
}
.walkin-sale-shell .order-header {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; border-bottom: 1px solid var(--ws-ink-200);
}
.walkin-sale-shell .qa-flash {
width: 30px; height: 30px; border-radius: var(--ws-radius-sm);
background: var(--ws-amber-100); color: var(--ws-amber-700);
display: grid; place-items: center; font-size: 16px;
}
.walkin-sale-shell .order-header h2 {
margin: 0; font-size: 16px; font-weight: 700;
letter-spacing: -.01em; display: flex; align-items: center; gap: 8px;
}
.walkin-sale-shell .order-header h2 i { color: var(--ws-ink-400); font-size: 17px; }
.walkin-sale-shell .order-header-actions {
margin-left: auto; display: flex; align-items: center; gap: 5px;
flex-wrap: nowrap; justify-content: flex-end;
min-width: 0;
}
.walkin-sale-shell .order-header-actions .btn {
padding: 6px 9px; font-size: 11.5px;
flex: 0 0 auto;
}
.walkin-sale-shell .order-header-actions .btn i { font-size: 14px; }
.walkin-sale-shell .btn {
font-family: inherit; font-size: 12px; font-weight: 600;
padding: 7px 11px; border-radius: var(--ws-radius-sm);
border: 1px solid transparent;
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; transition: all .15s ease;
line-height: 1; white-space: nowrap; text-decoration: none;
}
.walkin-sale-shell .btn i { font-size: 15px; }
.walkin-sale-shell .btn:hover { transform: translateY(-1px); }
.walkin-sale-shell .btn-secondary { background: #fff; color: var(--ws-ink-800); border-color: var(--ws-ink-300); box-shadow: var(--ws-shadow-card); }
.walkin-sale-shell .btn-secondary:hover { background: var(--ws-ink-50); border-color: var(--ws-ink-400); color: var(--ws-ink-800); }
.walkin-sale-shell .btn-primary { background: var(--ws-brand-700); color: #fff; box-shadow: 0 1px 2px rgba(4,120,87,.3); }
.walkin-sale-shell .btn-primary:hover { background: var(--ws-brand-800); color: #fff; }
.walkin-sale-shell .btn-yellow { background: #fbbf24; color: #78350f; box-shadow: 0 1px 2px rgba(217,119,6,.3); }
.walkin-sale-shell .btn-yellow:hover { background: #f59e0b; color: #78350f; }
.walkin-sale-shell .btn-yellow i { color: #78350f; }
.walkin-sale-shell .btn-hold { background: #fff; color: var(--ws-amber-700); border: 1px solid var(--ws-amber-200); }
.walkin-sale-shell .btn-hold:hover { background: var(--ws-amber-50); border-color: var(--ws-amber-600); color: var(--ws-amber-700); }
.walkin-sale-shell .order-meta {
display: grid;
grid-template-columns: 1fr 0.9fr 1.2fr auto;
gap: 10px;
padding: 14px 16px; border-bottom: 1px solid var(--ws-ink-200);
}
.walkin-sale-shell .order-meta .fld { height: 38px; }
.walkin-sale-shell .order-meta .fld input.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.walkin-sale-shell .order-table-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px 10px;
}
.walkin-sale-shell .oth-toggle {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; border: 0; cursor: pointer; padding: 0;
font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ws-ink-800);
}
.walkin-sale-shell .oth-chev { font-size: 18px; color: var(--ws-ink-500); transition: transform .2s ease; }
.walkin-sale-shell .oth-count {
font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
color: var(--ws-brand-800); background: var(--ws-brand-50);
border: 1px solid var(--ws-brand-200); border-radius: 999px; padding: 1px 8px;
}
.walkin-sale-shell .oth-summary {
margin-left: auto; font-family: 'JetBrains Mono', monospace;
font-size: 13px; font-weight: 700; color: var(--ws-ink-700);
opacity: 0; transition: opacity .2s ease;
}
.walkin-sale-shell .order-table-card { padding: 0 16px; max-height: 1600px; overflow: hidden; transition: max-height .3s ease; }
.walkin-sale-shell .items-section.collapsed .order-table-card { max-height: 0; padding-bottom: 0; }
.walkin-sale-shell .items-section.collapsed .oth-chev { transform: rotate(-90deg); }
.walkin-sale-shell .items-section.collapsed .oth-summary { opacity: 1; }
.walkin-sale-shell .order-table { width: 100%; border-collapse: collapse; }
.walkin-sale-shell .order-table thead th {
background: #fbbf24; text-align: left;
font-size: 10.5px; font-weight: 700; color: #78350f;
letter-spacing: .04em; text-transform: uppercase;
padding: 9px 8px; white-space: nowrap;
}
.walkin-sale-shell .order-table thead th:first-child { border-top-left-radius: var(--ws-radius-sm); padding-left: 12px; }
.walkin-sale-shell .order-table thead th:last-child { border-top-right-radius: var(--ws-radius-sm); text-align: center; }
.walkin-sale-shell .order-table thead th.num { text-align: right; }
.walkin-sale-shell .order-table thead th.cen { text-align: center; }
.walkin-sale-shell .order-table tbody td {
padding: 10px 8px; font-size: 12.5px; color: var(--ws-ink-800);
border-bottom: 1px solid var(--ws-ink-200); vertical-align: middle;
}
.walkin-sale-shell .order-table tbody td:first-child { padding-left: 12px; }
.walkin-sale-shell .order-table tbody td.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.walkin-sale-shell .order-table tbody td.cen { text-align: center; }
.walkin-sale-shell .order-table tbody tr:hover td { background: var(--ws-ink-50); }
.walkin-sale-shell .order-table tbody tr:last-child td { border-bottom: 0; }
.walkin-sale-shell .order-table tbody td.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ws-ink-700); }
.walkin-sale-shell .oi-thumb {
width: 44px; height: 44px; border-radius: 8px;
display: grid; place-items: center; overflow: hidden;
background: var(--ws-brand-50);
}
.walkin-sale-shell .oi-thumb img { width: 44px; height: 44px; object-fit: cover; }
.walkin-sale-shell .oi-main { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.walkin-sale-shell .oi-generic { font-size: 13px; font-weight: 700; color: var(--ws-brand-800); }
.walkin-sale-shell .oi-sep { color: var(--ws-ink-300); }
.walkin-sale-shell .oi-brand { font-size: 12px; font-weight: 500; color: var(--ws-ink-600); }
.walkin-sale-shell .oi-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.walkin-sale-shell .oi-chip {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; color: var(--ws-ink-600);
background: #fff; border: 1px solid var(--ws-ink-200);
border-radius: 999px; padding: 1px 7px;
}
.walkin-sale-shell .oi-chip .l { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ws-ink-400); }
.walkin-sale-shell .oi-chip.avail { background: var(--ws-brand-50); border-color: var(--ws-brand-200); color: var(--ws-brand-800); }
.walkin-sale-shell .oi-chip.avail .l { color: var(--ws-brand-600); }
.walkin-sale-shell .unit-tag {
display: inline-block; font-size: 11px; font-weight: 600;
color: var(--ws-ink-700); background: var(--ws-ink-100);
border-radius: var(--ws-radius-sm); padding: 2px 8px;
}
.walkin-sale-shell .qty-input {
width: 60px; height: 30px; text-align: center;
border: 1px solid var(--ws-ink-200); border-radius: var(--ws-radius-sm);
background: #fff; font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700; color: var(--ws-ink-900); outline: 0;
transition: all .15s ease;
}
.walkin-sale-shell .qty-input:focus { border-color: var(--ws-brand-600); box-shadow: 0 0 0 3px var(--ws-brand-50); }
.walkin-sale-shell .qty-input::-webkit-outer-spin-button,
.walkin-sale-shell .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.walkin-sale-shell .qty-input { -moz-appearance: textfield; }
.walkin-sale-shell .disc-input {
width: 56px; height: 30px; text-align: center;
border: 1px solid var(--ws-ink-200); border-radius: var(--ws-radius-sm);
background: #fff; font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: var(--ws-ink-700); outline: 0;
transition: all .15s ease;
}
.walkin-sale-shell .disc-input:focus { border-color: var(--ws-brand-600); box-shadow: 0 0 0 3px var(--ws-brand-50); }
.walkin-sale-shell .subtotal { font-weight: 700; color: var(--ws-ink-900); }
.walkin-sale-shell .row-remove {
width: 28px; height: 28px; border: 0; background: transparent;
border-radius: var(--ws-radius-sm); color: var(--ws-ink-400); cursor: pointer;
display: grid; place-items: center; transition: all .15s ease;
}
.walkin-sale-shell .row-remove:hover { background: var(--ws-rose-50); color: var(--ws-rose-600); }
.walkin-sale-shell .row-remove i { font-size: 16px; }
.walkin-sale-shell .order-table .ws-product-thumb {
width: 100%; height: 100%;
object-fit: cover; border-radius: 8px;
cursor: zoom-in;
}
.ws-img-preview-pop {
position: fixed; z-index: 9999;
background: #fff;
border: 1px solid #d5d9e5;
border-radius: 8px; padding: 6px;
box-shadow: 0 20px 50px rgba(15,23,42,.25);
pointer-events: none; display: none;
}
.ws-img-preview-pop img {
display: block; max-width: 280px; max-height: 280px;
width: auto; height: auto; border-radius: 4px;
}
.walkin-sale-shell .order-table td.item-tax { white-space: nowrap; text-align: right; line-height: 1.15; }
.walkin-sale-shell .order-table td.item-tax .ws-tax-amt { font-weight: 700; color: var(--ws-amber-700); font-family: 'JetBrains Mono', monospace; }
.walkin-sale-shell .order-table td.item-tax .ws-tax-rate { display: block; font-size: 10px; font-weight: 500; color: var(--ws-amber-600); }
.walkin-sale-shell .order-table td.item-tax .ws-tax-none { color: var(--ws-ink-300); }
.walkin-sale-shell .open-pay-btn {
margin: 4px 16px 16px; width: calc(100% - 32px);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px; border: 0; border-radius: var(--ws-radius);
background: var(--ws-brand-700); color: #fff; cursor: pointer;
font-family: inherit; font-size: 14px; font-weight: 700;
box-shadow: 0 1px 2px rgba(4,120,87,.3); transition: background .15s ease;
}
.walkin-sale-shell .open-pay-btn:hover { background: var(--ws-brand-800); }
.walkin-sale-shell .open-pay-btn i { font-size: 18px; }
.walkin-sale-shell .open-pay-btn .amt {
font-family: 'JetBrains Mono', monospace; margin-left: 4px;
padding-left: 10px; border-left: 1px solid rgba(255,255,255,.3);
}
.walkin-sale-shell .pay-kpi-bar {
background: linear-gradient(135deg, var(--ws-brand-700) 0%, var(--ws-brand-900) 100%);
color: #fff; display: flex; align-items: center; gap: 14px;
flex-wrap: nowrap;
padding: 11px 18px;
margin: 0 16px 16px; border-radius: var(--ws-radius);
min-width: 0;
}
.walkin-sale-shell .pay-kpi-bar .aiw {
display: flex; flex-direction: column; gap: 1px;
flex: 0 1 280px; min-width: 0;
}
.walkin-sale-shell .aiw-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ws-brand-200); }
.walkin-sale-shell .aiw-value {
font-size: 13px; font-weight: 700; font-style: italic;
line-height: 1.3; word-break: break-word;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.walkin-sale-shell .pay-kpi-bar .kpi,
.walkin-sale-shell .pay-kpi-bar .kpi-shift { flex: 0 0 auto; }
.walkin-sale-shell .aiw-value::before { content: '\201C'; padding-right: 2px; opacity: .85; font-style: normal; }
.walkin-sale-shell .aiw-value::after { content: '\201D'; padding-left: 2px; opacity: .85; font-style: normal; }
.walkin-sale-shell .kpi-spacer { flex: 1; }
.walkin-sale-shell .pay-kpi-bar .kpi { display: flex; flex-direction: column; gap: 1px; text-align: center; }
.walkin-sale-shell .kpi-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ws-brand-200); }
.walkin-sale-shell .kpi-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; }
.walkin-sale-shell .kpi-val.amber { color: #fbbf24; }
.walkin-sale-shell .pay-kpi-bar .kpi.total .kpi-val { font-size: 16px; }
.walkin-sale-shell .kpi-shift {
display: flex; flex-direction: column; gap: 1px; text-align: center;
padding-left: 18px; border-left: 1px solid rgba(255,255,255,.2);
}
.walkin-sale-shell .kpi-shift-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ws-brand-200); }
.walkin-sale-shell .kpi-shift-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; }
.walkin-sale-shell .pay-backdrop {
position: fixed; inset: 0; background: rgba(28,25,23,.42);
opacity: 0; visibility: hidden; z-index: 1090;
transition: opacity .25s ease, visibility .25s ease;
}
.walkin-sale-shell .pay-backdrop.open { opacity: 1; visibility: visible; }
.walkin-sale-shell .pay-drawer {
position: fixed; top: 0; left: 0; height: 100vh;
width: 400px; max-width: 88vw;
background: #fff; border-right: 1px solid var(--ws-ink-200);
box-shadow: 16px 0 48px -16px rgba(6,78,59,.3);
z-index: 1100; display: flex; flex-direction: column; overflow: hidden;
transform: translateX(-100%);
transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.walkin-sale-shell .pay-drawer.open { transform: translateX(0); }
.walkin-sale-shell .pay-drawer-head {
flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; background: var(--ws-brand-900); color: #fff;
}
.walkin-sale-shell .pay-drawer-title { font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.walkin-sale-shell .pay-drawer-title i { font-size: 18px; color: var(--ws-brand-200); }
.walkin-sale-shell .pay-drawer-close {
width: 32px; height: 32px; border: 0; cursor: pointer;
background: rgba(255,255,255,.14); color: #fff; border-radius: var(--ws-radius-sm);
display: grid; place-items: center; transition: background .15s ease;
}
.walkin-sale-shell .pay-drawer-close:hover { background: rgba(255,255,255,.26); }
.walkin-sale-shell .pay-drawer-close i { font-size: 18px; }
.walkin-sale-shell .pay-drawer-body { flex: 1; overflow-y: auto; }
.walkin-sale-shell .pay-section { padding: 14px 16px; }
.walkin-sale-shell .pay-section + .pay-section { border-top: 1px solid var(--ws-ink-200); }
.walkin-sale-shell .pay-section-title {
font-size: 11px; font-weight: 700; color: var(--ws-ink-500);
letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px;
}
.walkin-sale-shell .preset-strip {
display: flex; align-items: center; gap: 5px;
margin-top: 4px;
}
.walkin-sale-shell .preset-chip {
flex: 1; background: #fff; border: 1px solid var(--ws-ink-200);
padding: 6px 0; font-family: inherit; font-size: 12px; font-weight: 700;
color: var(--ws-ink-700); border-radius: var(--ws-radius-sm); cursor: pointer;
transition: all .15s ease;
}
.walkin-sale-shell .preset-chip:hover { border-color: var(--ws-brand-600); color: var(--ws-brand-700); }
.walkin-sale-shell .preset-chip.active { background: var(--ws-brand-700); border-color: var(--ws-brand-700); color: #fff; }
.walkin-sale-shell .custom-disc-row { margin-top: 10px; }
.walkin-sale-shell .custom-disc-input {
height: 36px; border: 1px solid var(--ws-ink-200); border-radius: var(--ws-radius-sm);
background: #fff; display: flex; align-items: center; padding: 0 4px 0 10px; gap: 6px;
transition: all .15s ease;
}
.walkin-sale-shell .custom-disc-input:focus-within { border-color: var(--ws-brand-600); box-shadow: 0 0 0 3px var(--ws-brand-50); }
.walkin-sale-shell .custom-disc-input > i { color: var(--ws-ink-400); font-size: 14px; }
.walkin-sale-shell .custom-disc-input input {
border: 0; outline: 0; background: transparent; flex: 1; min-width: 0;
font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ws-ink-900);
}
.walkin-sale-shell .unit-toggle { display: inline-flex; background: var(--ws-ink-100); border-radius: 4px; padding: 2px; gap: 2px; }
.walkin-sale-shell .unit-toggle button {
border: 0; background: transparent; padding: 4px 10px;
font-family: inherit; font-size: 11px; font-weight: 700; color: var(--ws-ink-600);
border-radius: 3px; cursor: pointer; min-width: 28px; transition: all .15s ease;
}
.walkin-sale-shell .unit-toggle button.active { background: #fff; color: var(--ws-ink-900); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.walkin-sale-shell .segmented {
display: grid; grid-template-columns: repeat(4, 1fr);
background: var(--ws-ink-100); border-radius: var(--ws-radius-sm); padding: 3px; gap: 3px;
}
.walkin-sale-shell .segmented button {
border: 0; background: transparent; padding: 8px 4px;
font-size: 12px; font-weight: 600; color: var(--ws-ink-600);
border-radius: 5px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
transition: all .15s ease;
}
.walkin-sale-shell .segmented button i { font-size: 14px; }
.walkin-sale-shell .segmented button.active { background: #fff; color: var(--ws-ink-900); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.walkin-sale-shell .segmented button.active i { color: var(--ws-brand-700); }
.walkin-sale-shell .input-row {
display: grid; grid-template-columns: 1fr 130px; gap: 10px;
align-items: center; margin-bottom: 8px;
}
.walkin-sale-shell .input-row label { font-size: 12px; color: var(--ws-ink-600); font-weight: 500; }
.walkin-sale-shell .input-row .amount-input {
height: 36px; border: 1px solid var(--ws-ink-200); border-radius: var(--ws-radius-sm);
background: #fff; display: flex; align-items: center; padding: 0 10px; gap: 4px;
transition: all .15s ease;
}
.walkin-sale-shell .input-row .amount-input:focus-within { border-color: var(--ws-brand-600); box-shadow: 0 0 0 3px var(--ws-brand-50); }
.walkin-sale-shell .input-row .amount-input .cur { font-size: 12px; color: var(--ws-ink-500); font-family: 'JetBrains Mono', monospace; }
.walkin-sale-shell .input-row .amount-input input {
border: 0; outline: 0; background: transparent; width: 100%; text-align: right;
font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--ws-ink-900);
}
.walkin-sale-shell .amount-input.readonly-input { background: var(--ws-ink-50); }
.walkin-sale-shell .amount-input.change-input { background: var(--ws-brand-50); border-color: var(--ws-brand-200); }
.walkin-sale-shell .amount-input.change-input input { color: var(--ws-brand-800); font-weight: 700; }
.walkin-sale-shell .amount-input.change-input .cur { color: var(--ws-brand-700); }
.walkin-sale-shell .walkin-hold-wrap { position: relative; display: inline-block; }
.walkin-sale-shell .walkin-hold-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
background: rgba(255,255,255,.25); color: #fff;
border-radius: 9px; font-size: 11px; font-weight: 700;
}
.walkin-sale-shell .walkin-hold-dropdown {
position: absolute; top: calc(100% + 6px); right: 0;
width: 320px; max-height: 380px;
background: #fff; border: 1px solid var(--ws-ink-200);
border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,.15);
z-index: 60; display: none; flex-direction: column; overflow: hidden;
}
.walkin-sale-shell .walkin-hold-wrap.is-open .walkin-hold-dropdown { display: flex; }
.walkin-sale-shell .walkin-hold-head {
padding: 10px 14px; font-weight: 700; font-size: 0.85rem;
color: var(--ws-ink-800); border-bottom: 1px solid var(--ws-ink-200);
background: var(--ws-ink-50);
}
.walkin-sale-shell .walkin-hold-list { overflow-y: auto; max-height: 320px; }
.walkin-sale-shell .walkin-hold-empty {
padding: 18px; text-align: center; color: var(--ws-ink-500); font-size: 0.82rem;
}
.walkin-sale-shell .walkin-hold-item {
display: block; padding: 10px 14px; border-bottom: 1px solid var(--ws-ink-200);
text-decoration: none; color: var(--ws-ink-800); cursor: pointer;
transition: background .12s ease;
}
.walkin-sale-shell .walkin-hold-item:hover { background: var(--ws-brand-50); color: var(--ws-ink-900); }
.walkin-sale-shell .walkin-hold-item:last-child { border-bottom: 0; }
.walkin-sale-shell .walkin-hold-item-top {
display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.walkin-sale-shell .walkin-hold-item-inv {
font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
color: var(--ws-brand-800);
}
.walkin-sale-shell .walkin-hold-item-amt {
font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 800;
color: var(--ws-ink-900);
}
.walkin-sale-shell .walkin-hold-item-who { font-size: 13px; font-weight: 600; margin-top: 2px; }
.walkin-sale-shell .walkin-hold-item-meta { font-size: 11px; color: var(--ws-ink-500); margin-top: 2px; }
.walkin-sale-shell .ns-patient-card,
.walkin-sale-shell .ns-meta-strip {
--ws-ink-900: #1f3150;
--ws-ink-600: #6b7280;
--ws-ink-500: #6b7280;
--ws-ink-200: #e7e9f5;
}
.walkin-sale-shell .ns-patient-card {
margin: 10px 16px;
background: linear-gradient(180deg, #ecfdf5 0%, #f0fdfa 100%);
border: 1px solid #d1fae5;
border-radius: 12px;
padding: 14px 16px;
}
.walkin-sale-shell .ns-pc-body {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
gap: 16px; align-items: flex-start;
}
.walkin-sale-shell .ns-pc-avatar {
width: 64px; height: 64px; border-radius: 50%;
object-fit: cover; border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(15,23,42,.1);
background: #e2e8f0;
}
.walkin-sale-shell .ns-pc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.walkin-sale-shell .ns-pc-name { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--ws-ink-900); }
.walkin-sale-shell .ns-pc-meta-sep { color: var(--ws-ink-500); font-weight: 400; margin: 0 1px; }
.walkin-sale-shell .ns-pc-meta-text { font-size: 0.78rem; font-weight: 500; color: var(--ws-ink-600); }
.walkin-sale-shell .ns-pc-contact {
display: flex; flex-wrap: wrap; gap: 14px;
font-size: 0.76rem; color: var(--ws-ink-600);
margin-bottom: 8px;
}
.walkin-sale-shell .ns-pc-contact-item { display: inline-flex; align-items: center; gap: 5px; }
.walkin-sale-shell .ns-pc-contact-item i { font-size: 13px; color: var(--ws-ink-500); }
.walkin-sale-shell .ns-pc-chips-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.walkin-sale-shell .ns-pc-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 14px;
font-size: 0.72rem; font-weight: 500;
line-height: 1.3;
}
.walkin-sale-shell .ns-pc-chip i { font-size: 13px; }
.walkin-sale-shell .ns-pc-chip-label { font-weight: 600; }
.walkin-sale-shell .ns-pc-chip-items { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.walkin-sale-shell .ns-pc-chip-allergy { background: #fee2e2; color: #991b1b; }
.walkin-sale-shell .ns-pc-chip-allergy i { color: #b91c1c; }
.walkin-sale-shell .ns-pc-chip-rx { background: #dbeafe; color: #1e3a8a; }
.walkin-sale-shell .ns-pc-chip-rx i { color: #2563eb; }
.walkin-sale-shell .ns-pc-chip-cond { background: #fef3c7; color: #92400e; }
.walkin-sale-shell .ns-pc-chip-cond i { color: #d97706; }
.walkin-sale-shell .ns-pc-icd-tag {
display: inline-flex; align-items: center;
padding: 2px 6px; border-radius: 4px;
background: rgba(255,255,255,0.7); color: inherit;
font-size: 0.62rem; font-weight: 700;
letter-spacing: 0.02em; margin-left: 1px;
}
.walkin-sale-shell .ns-pc-cond-sep { color: inherit; opacity: .65; font-weight: 400; margin: 0 4px; }
.walkin-sale-shell .ns-pc-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.walkin-sale-shell .ns-pc-self-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 10px; border-radius: 12px;
background: #fff; color: var(--ws-ink-600);
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
border: 1px solid var(--ws-ink-200);
}
.walkin-sale-shell .ns-pc-self-pill i { font-size: 13px; }
.walkin-sale-shell .ns-meta-strip {
display: flex; align-items: stretch;
padding: 8px 16px;
background: #fff;
border-bottom: 1px solid var(--ws-ink-200);
border-top: 1px solid var(--ws-ink-200);
gap: 0; flex-wrap: wrap;
}
.walkin-sale-shell .ns-ms-cell {
display: flex; flex-direction: column; justify-content: center;
padding: 4px 16px; min-width: 0;
}
.walkin-sale-shell .ns-ms-cell:first-child { padding-left: 0; }
.walkin-sale-shell .ns-ms-label {
font-size: 0.62rem; font-weight: 700;
color: var(--ws-ink-500); letter-spacing: 0.07em;
text-transform: uppercase; margin-bottom: 2px;
}
.walkin-sale-shell .ns-ms-value { font-size: 0.82rem; font-weight: 600; color: var(--ws-ink-900); }
.walkin-sale-shell .ns-ms-sep { width: 1px; background: var(--ws-ink-200); margin: 4px 0; }
.walkin-sale-shell .ns-ms-billed { display: inline-flex; align-items: center; gap: 6px; }
.walkin-sale-shell .ns-ms-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--ws-brand-700); color: #fff;
font-size: 10px; font-weight: 700;
}
.walkin-sale-shell .ns-ms-last-visit-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 999px;
font-size: 0.7rem; font-weight: 600;
}
.walkin-sale-shell .ns-ms-paid-pill { background: #dcfce7; color: #166534; }
.walkin-sale-shell .ns-ms-unpaid-pill { background: #fee2e2; color: #991b1b; }
.walkin-sale-shell .ns-ms-trailing { display: inline-flex; align-items: center; gap: 8px; padding-left: 8px; }
.walkin-sale-shell .ns-ms-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--ws-brand-200);
background: var(--ws-brand-50); color: var(--ws-brand-800);
font-size: 0.78rem; font-weight: 700; cursor: pointer;
transition: background .12s ease, border-color .12s ease;
}
.walkin-sale-shell .ns-ms-btn i { font-size: 14px; }
.walkin-sale-shell .ns-ms-btn-outline { background: #fff; color: var(--ws-ink-900); border-color: var(--ws-ink-300); }
.walkin-sale-shell .ns-ms-btn-outline:hover { background: var(--ws-ink-50); }
.walkin-sale-shell .ns-ms-btn-outline i { color: var(--ws-ink-500); }
.walkin-sale-shell .ns-ms-btn-primary { background: var(--ws-brand-700); color: #fff; border-color: var(--ws-brand-700); }
.walkin-sale-shell .ns-ms-btn-primary:hover { filter: brightness(.94); }
.walkin-sale-shell .ns-ms-btn:disabled { opacity: .5; cursor: not-allowed; }
.walkin-sale-shell .ns-ms-btn-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 9px; font-size: 11px; font-weight: 700;
background: rgba(255,255,255,.25); color: inherit; margin-left: 3px;
}
.walkin-sale-shell .ns-ms-btn-outline .ns-ms-btn-count { background: rgba(15,23,42,.08); color: var(--ws-ink-900); }
.walkin-sale-shell .ns-ms-pop-wrap { position: relative; display: inline-block; }
.walkin-sale-shell .ns-ms-popover {
position: absolute; top: calc(100% + 6px); right: 0;
width: 340px; max-height: 380px; overflow: hidden;
background: #fff; border: 1px solid var(--ws-ink-200);
border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,.15);
z-index: 55; display: none;
}
.walkin-sale-shell .ns-ms-pop-wrap.is-open .ns-ms-popover { display: flex; flex-direction: column; }
.walkin-sale-shell .ns-ms-pop-head {
padding: 10px 14px; font-weight: 700; font-size: 0.82rem;
color: var(--ws-ink-900); border-bottom: 1px solid var(--ws-ink-200);
background: var(--ws-ink-50);
}
.walkin-sale-shell .ns-ms-pop-body { overflow-y: auto; max-height: 320px; padding: 4px 0; }
.walkin-sale-shell .ns-ms-pop-empty { padding: 18px; text-align: center; color: var(--ws-ink-500); font-size: 0.78rem; }
.walkin-sale-shell .ns-ms-pop-item {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 8px 14px;
border-bottom: 1px solid var(--ws-ink-200);
font-size: 0.82rem;
}
.walkin-sale-shell .ns-ms-pop-item:last-child { border-bottom: 0; }
.walkin-sale-shell .ns-ms-pop-item-name { color: var(--ws-ink-900); font-weight: 600; }
.walkin-sale-shell .ns-ms-pop-item-meta { font-size: 0.7rem; color: var(--ws-ink-500); font-weight: 500; margin-top: 2px; }
.walkin-sale-shell .ns-ms-pop-item-tag {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 5px;
background: var(--ws-ink-50); color: var(--ws-brand-700);
font-size: 0.68rem; font-weight: 700;
border: 1px solid var(--ws-ink-200);
}
.walkin-sale-shell .wsr-patient-card {
display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
gap: 16px; align-items: center;
padding: 14px 16px; border-bottom: 1px solid var(--ws-ink-200);
}
.walkin-sale-shell .wsr-pt-avatar {
width: 56px; height: 56px; border-radius: 12px;
background: linear-gradient(135deg, var(--ws-brand-600), var(--ws-brand-800));
color: #fff; display: grid; place-items: center;
font-size: 18px; font-weight: 800; letter-spacing: -.02em;
overflow: hidden;
}
.walkin-sale-shell .wsr-pt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.walkin-sale-shell .wsr-pt-name {
font-size: 16px; font-weight: 700; color: var(--ws-ink-900);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.walkin-sale-shell .wsr-pt-id {
font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
background: var(--ws-brand-50); color: var(--ws-brand-800);
border: 1px solid var(--ws-brand-200); border-radius: 999px;
padding: 2px 8px;
}
.walkin-sale-shell .wsr-pt-meta { font-size: 13px; color: var(--ws-ink-500); margin-top: 2px; }
.walkin-sale-shell .wsr-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.walkin-sale-shell .wsr-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px; border-radius: 999px;
font-size: 0.74rem; font-weight: 600; line-height: 1.2;
max-width: 100%;
}
.walkin-sale-shell .wsr-chip i { font-size: 13px; }
.walkin-sale-shell .wsr-chip-label { font-weight: 700; }
.walkin-sale-shell .wsr-chip-allergy { background: #fee2e2; color: #991b1b; }
.walkin-sale-shell .wsr-chip-allergy i { color: #b91c1c; }
.walkin-sale-shell .wsr-chip-rx { background: #dbeafe; color: #1e40af; }
.walkin-sale-shell .wsr-chip-rx i { color: #1d4ed8; }
.walkin-sale-shell .wsr-chip-cond { background: #fef3c7; color: #92400e; }
.walkin-sale-shell .wsr-chip-cond i { color: #b45309; }
.walkin-sale-shell .wsr-icd-tag {
display: inline-block; padding: 0 5px; margin-left: 3px;
background: rgba(0,0,0,.08); border-radius: 4px;
font-size: 0.66rem; font-weight: 700;
}
.walkin-sale-shell .wsr-pt-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.walkin-sale-shell .wsr-pt-tag {
display: inline-flex; align-items: center; gap: 6px;
background: var(--ws-brand-50); border: 1px solid var(--ws-brand-200);
color: var(--ws-brand-800); border-radius: 8px;
padding: 6px 12px; font-size: 0.78rem; font-weight: 700;
}
.walkin-sale-shell .wsr-qty-stepper {
display: inline-flex; align-items: center; gap: 4px;
background: var(--ws-ink-50); border: 1px solid var(--ws-ink-200);
border-radius: 8px; padding: 2px;
}
.walkin-sale-shell .wsr-qty-btn {
width: 28px; height: 28px;
background: transparent; border: 0; border-radius: 6px;
color: var(--ws-brand-700); cursor: pointer;
display: grid; place-items: center;
}
.walkin-sale-shell .wsr-qty-btn:hover { background: rgba(4,120,87,.10); }
.walkin-sale-shell .wsr-qty-btn:disabled { color: var(--ws-ink-400); cursor: not-allowed; }
.walkin-sale-shell .wsr-qty-input {
width: 56px; height: 28px; text-align: center;
border: 0; outline: 0; background: transparent;
font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
color: var(--ws-ink-900); padding: 0;
-moz-appearance: textfield;
}
.walkin-sale-shell .wsr-qty-input::-webkit-outer-spin-button,
.walkin-sale-shell .wsr-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.walkin-sale-shell .split-empty {
padding: 10px 12px; border: 1px dashed var(--ws-ink-300);
border-radius: var(--ws-radius-sm); color: var(--ws-ink-500);
font-size: 12px; font-style: italic; text-align: center;
}
.walkin-sale-shell .split-block { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ws-ink-200); }
.walkin-sale-shell .split-title { font-size: 10px; font-weight: 700; color: var(--ws-ink-500); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.walkin-sale-shell .split-row {
display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
padding: 7px 10px; background: var(--ws-ink-50); border-radius: var(--ws-radius-sm); margin-bottom: 4px;
}
.walkin-sale-shell .split-method { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ws-ink-700); }
.walkin-sale-shell .split-method i { font-size: 14px; color: var(--ws-brand-700); }
.walkin-sale-shell .split-amount { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--ws-ink-900); }
.walkin-sale-shell .split-remove { background: transparent; border: 0; cursor: pointer; color: var(--ws-ink-400); padding: 2px; border-radius: 4px; display: grid; place-items: center; }
.walkin-sale-shell .split-remove:hover { background: var(--ws-rose-50); color: var(--ws-rose-600); }
.walkin-sale-shell .split-remove i { font-size: 14px; }
.walkin-sale-shell .add-payment-btn {
width: 100%; margin-top: 6px; background: transparent; border: 1px dashed var(--ws-ink-300);
color: var(--ws-ink-600); padding: 8px; font-family: inherit; font-size: 12px; font-weight: 600;
border-radius: var(--ws-radius-sm); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
transition: all .15s ease;
}
.walkin-sale-shell .add-payment-btn:hover { border-color: var(--ws-brand-600); color: var(--ws-brand-700); background: var(--ws-brand-50); }
.walkin-sale-shell .pay-section textarea {
width: 100%; min-height: 56px; resize: vertical;
border: 1px solid var(--ws-ink-200); border-radius: var(--ws-radius-sm);
padding: 9px 11px; font-family: inherit; font-size: 13px; color: var(--ws-ink-800);
outline: 0; transition: all .15s ease;
}
.walkin-sale-shell .pay-section textarea:focus { border-color: var(--ws-brand-600); box-shadow: 0 0 0 3px var(--ws-brand-50); }
.walkin-sale-shell .pay-actions {
padding: 14px 16px; background: var(--ws-ink-50); border-top: 1px solid var(--ws-ink-200);
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0;
}
.walkin-sale-shell .pay-actions .btn-final { grid-column: 1 / -1; justify-content: center; padding: 12px; font-size: 14px; }
.walkin-sale-shell .pay-actions .btn-secondary,
.walkin-sale-shell .pay-actions .btn-hold { justify-content: center; padding: 9px; }
@media (max-width: 1080px) {
.walkin-sale-shell .pos-body { grid-template-columns: 1fr; }
.walkin-sale-shell .product-grid { max-height: none; }
.walkin-sale-shell .order-meta { grid-template-columns: 1fr; }
.walkin-sale-shell .pay-drawer { width: 100vw; }
}