/* =====================================================================
Kalam Poultry Management System — "Silva" Theme
Clean, modern, mobile-first admin UI built on Bootstrap 4.
Colors are driven by CSS variables set per-theme in the layout ,
so admins can recolor the whole app from Settings > Appearance.
===================================================================== */
:root {
--kp-primary: #0d9488;
--kp-primary-dark: #0f766e;
--kp-primary-soft: #ccfbf1;
--kp-accent: #f59e0b;
--kp-bg: #f7f8fa;
--kp-card: #ffffff;
--kp-line: #eef1f4;
--kp-text: #1e293b;
--kp-muted: #94a3b8;
--kp-muted-2: #64748b;
--kp-sidebar-bg: #ffffff;
--kp-sidebar-text: #475569;
--kp-sidebar-muted: #94a3b8;
--kp-sidebar-hover: #f1f5f9;
--kp-sidebar-active-bg: var(--kp-primary-soft);
--kp-sidebar-active-text: var(--kp-primary-dark);
--kp-sidebar-w: 248px;
--kp-header-h: 62px;
--kp-radius: 14px;
--kp-radius-sm: 10px;
--kp-success: #16a34a;
--kp-warning: #f59e0b;
--kp-danger: #ef4444;
--kp-info: #3b82f6;
--kp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body.kp-sidebar-dark {
--kp-sidebar-bg: #0f172a;
--kp-sidebar-text: #cbd5e1;
--kp-sidebar-muted: #64748b;
--kp-sidebar-hover: #1e293b;
--kp-sidebar-active-bg: rgba(255,255,255,.08);
--kp-sidebar-active-text: #ffffff;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: var(--kp-font);
background: var(--kp-bg);
color: var(--kp-text);
font-size: 14px;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
a { color: var(--kp-primary-dark); }
a:hover { color: var(--kp-primary); }
/* ---------- App shell ---------- */
.kp-app { min-height: 100vh; }
/* ---------- Sidebar ---------- */
.kp-sidebar {
position: fixed; top: 0; left: 0; bottom: 0;
width: var(--kp-sidebar-w);
background: var(--kp-sidebar-bg);
border-right: 1px solid var(--kp-line);
z-index: 1050;
display: flex; flex-direction: column;
transform: translateX(0);
transition: transform .25s ease;
overflow: hidden;
}
body.kp-sidebar-dark .kp-sidebar { border-right-color: rgba(255,255,255,.06); }
.kp-brand {
display: flex; align-items: center; gap: 10px;
height: var(--kp-header-h); padding: 0 18px; flex-shrink: 0;
border-bottom: 1px solid var(--kp-line); text-decoration: none;
}
body.kp-sidebar-dark .kp-brand { border-bottom-color: rgba(255,255,255,.06); }
.kp-brand-icon {
width: 34px; height: 34px; border-radius: 9px;
background: var(--kp-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0;
}
.kp-brand-name { font-weight: 700; font-size: 17px; color: var(--kp-text); letter-spacing: .2px; white-space: nowrap; }
body.kp-sidebar-dark .kp-brand-name { color: #fff; }
.kp-nav { flex: 1; overflow-y: auto; padding: 10px 0 20px; -webkit-overflow-scrolling: touch; }
.kp-nav-group {
padding: 14px 20px 6px; font-size: 10.5px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase; color: var(--kp-sidebar-muted);
}
.kp-nav-link {
display: flex; align-items: center; gap: 12px;
margin: 1px 10px; padding: 10px 12px; border-radius: var(--kp-radius-sm);
color: var(--kp-sidebar-text); text-decoration: none;
font-weight: 500; font-size: 14px;
transition: background .12s ease, color .12s ease;
}
.kp-nav-link i { width: 20px; text-align: center; font-size: 15px; color: var(--kp-sidebar-muted); }
.kp-nav-link:hover { background: var(--kp-sidebar-hover); color: var(--kp-sidebar-text); }
.kp-nav-link.active { background: var(--kp-sidebar-active-bg); color: var(--kp-sidebar-active-text); font-weight: 600; }
.kp-nav-link.active i { color: var(--kp-sidebar-active-text); }
/* ---------- Backdrop ---------- */
.kp-backdrop {
position: fixed; inset: 0; background: rgba(15,23,42,.45);
z-index: 1040; opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.kp-backdrop.show { opacity: 1; visibility: visible; }
/* ---------- Main ---------- */
.kp-main {
margin-left: var(--kp-sidebar-w); min-height: 100vh;
display: flex; flex-direction: column; transition: margin .25s ease;
}
/* ---------- Header ---------- */
.kp-header {
height: var(--kp-header-h); background: var(--kp-card);
border-bottom: 1px solid var(--kp-line);
display: flex; align-items: center; gap: 12px; padding: 0 16px;
position: sticky; top: 0; z-index: 1020;
}
.kp-hamburger {
border: none; background: transparent; font-size: 20px; color: var(--kp-text);
width: 40px; height: 40px; border-radius: 8px; cursor: pointer;
}
.kp-hamburger:hover { background: var(--kp-bg); }
.kp-greeting { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-header-spacer { flex: 1; }
.kp-header-search { display: none; position: relative; }
.kp-header-search input {
border: 1px solid var(--kp-line); background: var(--kp-bg);
border-radius: 9px; padding: 8px 12px 8px 34px; font-size: 13px; width: 220px;
}
.kp-header-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--kp-muted); font-size: 13px; }
.kp-header-btn {
position: relative; border: none; background: transparent;
width: 40px; height: 40px; border-radius: 8px;
color: var(--kp-muted-2); font-size: 17px; cursor: pointer;
}
.kp-header-btn:hover { background: var(--kp-bg); }
.kp-header-btn .kp-dot {
position: absolute; top: 7px; right: 8px; width: 8px; height: 8px;
border-radius: 50%; background: var(--kp-danger); border: 2px solid var(--kp-card);
}
.kp-profile {
display: flex; align-items: center; gap: 8px;
padding: 4px 6px 4px 4px; border-radius: 30px; cursor: pointer;
background: transparent; border: none;
}
.kp-profile:hover { background: var(--kp-bg); }
.kp-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: var(--kp-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.kp-profile-name { font-weight: 600; font-size: 13px; line-height: 1.1; }
.kp-profile-role { font-size: 11px; color: var(--kp-muted); }
/* ---------- Content ---------- */
.kp-content { flex: 1; padding: 18px 16px 40px; }
.kp-page-head { margin-bottom: 16px; }
.kp-page-head h1 { font-size: 20px; font-weight: 700; margin: 0; }
.kp-breadcrumb { font-size: 12.5px; color: var(--kp-muted); margin-top: 2px; }
.kp-breadcrumb a { color: var(--kp-muted-2); }
.kp-footer { padding: 16px; text-align: center; font-size: 12px; color: var(--kp-muted); border-top: 1px solid var(--kp-line); }
/* ---------- Cards ---------- */
.card { border: 1px solid var(--kp-line); border-radius: var(--kp-radius); box-shadow: 0 1px 2px rgba(15,23,42,.04); background: var(--kp-card); }
.card-header {
background: transparent; border-bottom: 1px solid var(--kp-line);
border-radius: var(--kp-radius) var(--kp-radius) 0 0 !important;
font-weight: 700; padding: 14px 18px;
}
.card-title { font-weight: 700; font-size: 15px; margin: 0; }
.card-body { padding: 18px; }
.card-footer { background: transparent; border-top: 1px solid var(--kp-line); }
.card-outline { border-top: 3px solid var(--kp-primary); }
/* ---------- Stat cards ---------- */
.kp-stat-card {
background: var(--kp-card); border: 1px solid var(--kp-line); border-radius: var(--kp-radius);
padding: 16px 16px 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); height: 100%;
transition: box-shadow .15s ease, transform .15s ease;
}
.kp-stat-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.08); transform: translateY(-2px); }
.kp-stat-top { display: flex; align-items: flex-start; gap: 12px; }
.kp-stat-icon {
width: 42px; height: 42px; border-radius: 11px;
display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.kp-stat-body { min-width: 0; flex: 1; }
.kp-stat-label { font-size: 12.5px; color: var(--kp-muted-2); font-weight: 600; }
.kp-stat-value { font-size: 23px; font-weight: 800; line-height: 1.15; margin: 3px 0 2px; word-break: break-word; }
.kp-stat-sub { font-size: 12px; color: var(--kp-muted); }
.kp-trend { font-size: 12px; font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.kp-trend.up { color: var(--kp-success); }
.kp-trend.down { color: var(--kp-danger); }
.kp-i-primary { background: var(--kp-primary-soft); color: var(--kp-primary-dark); }
.kp-i-green { background: #dcfce7; color: #15803d; }
.kp-i-yellow { background: #fef3c7; color: #b45309; }
.kp-i-blue { background: #dbeafe; color: #1d4ed8; }
.kp-i-purple { background: #ede9fe; color: #6d28d9; }
.kp-i-orange { background: #ffedd5; color: #c2410c; }
.kp-i-teal { background: #ccfbf1; color: #0f766e; }
.kp-i-pink { background: #fce7f3; color: #be185d; }
.kp-i-red { background: #fee2e2; color: #b91c1c; }
/* Legacy color-card aliases (existing views keep working) */
.kp-card-green .kp-stat-icon, .kp-card-emerald .kp-stat-icon { background:#dcfce7; color:#15803d; }
.kp-card-yellow .kp-stat-icon { background:#fef3c7; color:#b45309; }
.kp-card-blue .kp-stat-icon { background:#dbeafe; color:#1d4ed8; }
.kp-card-purple .kp-stat-icon { background:#ede9fe; color:#6d28d9; }
.kp-card-orange .kp-stat-icon { background:#ffedd5; color:#c2410c; }
.kp-card-teal .kp-stat-icon { background:#ccfbf1; color:#0f766e; }
.kp-card-pink .kp-stat-icon { background:#fce7f3; color:#be185d; }
.kp-card-green, .kp-card-yellow, .kp-card-blue, .kp-card-purple,
.kp-card-orange, .kp-card-teal, .kp-card-pink, .kp-card-emerald { background: var(--kp-card); }
.kp-stat-card .inner { padding: 0; }
.kp-stat-card .stat-label { font-size: 12.5px; color: var(--kp-muted-2); font-weight: 600; }
.kp-stat-card .stat-value { font-size: 23px; font-weight: 800; line-height: 1.15; margin: 3px 0; }
.kp-stat-card .stat-sub { font-size: 12px; color: var(--kp-muted); }
/* ---------- Buttons ---------- */
.btn { border-radius: var(--kp-radius-sm); font-weight: 600; font-size: 14px; }
.btn-kp-green, .btn-primary { background: var(--kp-primary); border-color: var(--kp-primary); color: #fff; }
.btn-kp-green:hover, .btn-primary:hover { background: var(--kp-primary-dark); border-color: var(--kp-primary-dark); color: #fff; }
.btn-kp-yellow { background: var(--kp-accent); border-color: var(--kp-accent); color: #fff; }
.btn-kp-yellow:hover { filter: brightness(.94); color: #fff; }
.btn-outline-kp { border: 1px solid var(--kp-line); background: var(--kp-card); color: var(--kp-text); }
.btn-outline-kp:hover { background: var(--kp-bg); color: var(--kp-text); }
.btn-success { background: var(--kp-success); border-color: var(--kp-success); }
.btn-danger { background: var(--kp-danger); border-color: var(--kp-danger); }
.btn-block { display: block; width: 100%; }
.btn-sm { font-size: 12.5px; padding: .3rem .6rem; }
/* ---------- Tables ---------- */
.table { color: var(--kp-text); }
.table thead th {
border-top: none; border-bottom: 1px solid var(--kp-line);
color: var(--kp-muted-2); font-size: 11.5px; text-transform: uppercase;
letter-spacing: .4px; font-weight: 700; padding: 10px 12px;
}
.table td { vertical-align: middle; padding: 11px 12px; border-top: 1px solid var(--kp-line); }
.table-hover tbody tr:hover { background: var(--kp-bg); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--kp-line); }
.thead-light th { background: var(--kp-bg); }
tfoot td { font-weight: 700; background: var(--kp-bg); }
.badge { font-weight: 600; padding: .42em .7em; border-radius: 30px; font-size: 11.5px; }
.badge-success { background: #dcfce7; color: #15803d; }
.badge-warning { background: #fef3c7; color: #b45309; }
.badge-danger { background: #fee2e2; color: #b91c1c; }
.badge-info { background: #dbeafe; color: #1d4ed8; }
.badge-primary { background: var(--kp-primary-soft); color: var(--kp-primary-dark); }
.badge-secondary { background: #f1f5f9; color: #475569; }
.badge-light { background: #f1f5f9; color: #475569; }
/* ---------- Forms ---------- */
label { font-weight: 600; font-size: 13px; margin-bottom: 5px; color: var(--kp-text); }
.form-control, .custom-select {
border: 1px solid var(--kp-line); border-radius: var(--kp-radius-sm);
font-size: 14px; color: var(--kp-text); padding: .5rem .75rem; height: auto;
}
.form-control:focus, .custom-select:focus { border-color: var(--kp-primary); box-shadow: 0 0 0 3px var(--kp-primary-soft); }
.required:after { content: " *"; color: var(--kp-danger); }
.required { color: var(--kp-danger); }
/* ---------- Summary boxes ---------- */
.summary-box { background: var(--kp-card); border: 1px solid var(--kp-line); border-radius: var(--kp-radius); }
.summary-box .card-header { background: var(--kp-bg); }
/* ---------- Login ---------- */
.kp-login-wrap {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background: radial-gradient(1200px 500px at 100% 0%, var(--kp-primary-soft) 0%, transparent 60%), var(--kp-bg);
padding: 20px;
}
.kp-login-card {
width: 100%; max-width: 400px; background: var(--kp-card);
border: 1px solid var(--kp-line); border-radius: 18px;
box-shadow: 0 18px 50px rgba(15,23,42,.10); padding: 34px 30px;
}
.kp-login-logo { text-align: center; }
.kp-login-logo .logo-icon {
width: 60px; height: 60px; border-radius: 16px; background: var(--kp-primary); color: #fff;
display: inline-flex; align-items: center; justify-content: center; font-size: 30px;
}
.kp-login-brand { text-align: center; }
.kp-login-brand h2 { font-weight: 800; color: var(--kp-text); margin: 14px 0 0; letter-spacing: .3px; font-size: 22px; }
.kp-login-brand h2 span { color: var(--kp-primary); }
.kp-login-brand p { color: var(--kp-muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 22px; }
.kp-login-card .form-control { padding: .7rem .9rem; }
.kp-login-card .input-group-text { border-radius: var(--kp-radius-sm) 0 0 var(--kp-radius-sm); background: var(--kp-bg); border-color: var(--kp-line); color: var(--kp-muted-2); }
.kp-login-footer { text-align: center; margin-top: 18px; color: var(--kp-muted); font-size: 12px; }
/* ---------- Theme picker ---------- */
.kp-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kp-theme-opt {
border: 2px solid var(--kp-line); border-radius: var(--kp-radius-sm);
padding: 12px; cursor: pointer; position: relative; transition: border-color .12s ease;
}
.kp-theme-opt:hover { border-color: var(--kp-muted); }
.kp-theme-opt.selected { border-color: var(--kp-primary); }
.kp-theme-opt input { position: absolute; opacity: 0; }
.kp-swatches { display: flex; gap: 6px; margin-bottom: 8px; }
.kp-swatch { width: 26px; height: 26px; border-radius: 7px; }
.kp-theme-name { font-size: 13px; font-weight: 600; }
/* ---------- Helpers ---------- */
.text-kp-green, .text-primary { color: var(--kp-primary-dark) !important; }
.text-kp-yellow { color: var(--kp-accent) !important; }
.text-muted { color: var(--kp-muted) !important; }
.text-success { color: var(--kp-success) !important; }
.text-danger { color: var(--kp-danger) !important; }
.bg-soft { background: var(--kp-bg); }
.mini-chart { height: 38px; }
/* ---------- Responsive ---------- */
@media (min-width: 992px) {
.kp-header-search { display: block; }
.kp-hamburger.kp-only-mobile { display: none; }
}
@media (max-width: 991.98px) {
.kp-sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.2); }
body.kp-sidebar-open .kp-sidebar { transform: translateX(0); }
.kp-main { margin-left: 0; }
}
@media (max-width: 575.98px) {
.kp-content { padding: 14px 12px 36px; }
.kp-stat-value { font-size: 20px; }
.kp-greeting { font-size: 14px; }
.kp-profile-name, .kp-profile-role { display: none; }
.card-body { padding: 14px; }
.kp-page-head h1 { font-size: 18px; }
}
/* ---------- Print ---------- */
@media print {
.kp-sidebar, .kp-header, .kp-footer, .kp-backdrop, .no-print, .btn, .kp-breadcrumb { display: none !important; }
.kp-main { margin-left: 0 !important; }
.kp-content { padding: 0 !important; }
.card, .kp-print-area { box-shadow: none !important; border: none !important; }
body { background: #fff !important; }
a[href]:after { content: ""; }
}
/* ---------- Bootstrap component refinements (Silva) ---------- */
.nav-tabs { border-bottom: 1px solid var(--kp-line); }
.nav-tabs .nav-link {
border: none; color: var(--kp-muted-2); font-weight: 600;
border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 14px;
}
.nav-tabs .nav-link:hover { color: var(--kp-primary-dark); border-color: transparent; }
.nav-tabs .nav-link.active {
color: var(--kp-primary-dark); background: transparent;
border-bottom: 2px solid var(--kp-primary);
}
.nav-pills .nav-link { color: var(--kp-muted-2); font-weight: 600; border-radius: var(--kp-radius-sm); }
.nav-pills .nav-link.active { background: var(--kp-primary); color: #fff; }
.list-group-item { border-color: var(--kp-line); }
.list-group-flush .list-group-item { border-left: 0; border-right: 0; }
.dropdown-menu {
border: 1px solid var(--kp-line); border-radius: var(--kp-radius-sm);
box-shadow: 0 8px 30px rgba(15,23,42,.12); font-size: 14px;
}
.dropdown-item { padding: .5rem 1rem; }
.dropdown-item:active { background: var(--kp-primary); }
.alert { border-radius: var(--kp-radius-sm); border: none; }
.alert-danger { background: #fee2e2; color: #b91c1c; }
.alert-success { background: #dcfce7; color: #15803d; }
.input-group-text { font-size: 14px; }
/* Make DataTables controls match */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
border: 1px solid var(--kp-line); border-radius: 8px; padding: 4px 8px;
}
.page-item.active .page-link { background: var(--kp-primary); border-color: var(--kp-primary); }
.page-link { color: var(--kp-primary-dark); }
/* =====================================================================
SPA + Right Drawer + plugin theming (v3)
===================================================================== */
/* Content fade while AJAX-loading */
.kp-content.kp-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; }
.kp-fragment { animation: kpFadeIn .22s ease; }
@keyframes kpFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* ---------- Right drawer ---------- */
.kp-drawer-backdrop {
position: fixed; inset: 0; background: rgba(15,23,42,.45);
z-index: 1090; opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
body.kp-drawer-open .kp-drawer-backdrop { opacity: 1; visibility: visible; }
.kp-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: 460px; max-width: 92vw;
background: var(--kp-card);
z-index: 1100;
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
box-shadow: -12px 0 40px rgba(15,23,42,.18);
}
body.kp-drawer-open .kp-drawer { transform: translateX(0); }
.kp-drawer-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--kp-line); flex-shrink: 0;
}
.kp-drawer-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.kp-drawer-close {
border: none; background: var(--kp-bg); width: 34px; height: 34px; border-radius: 9px;
color: var(--kp-muted-2); cursor: pointer; font-size: 15px;
}
.kp-drawer-close:hover { background: #e2e8f0; color: var(--kp-text); }
.kp-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px 30px; }
/* In the drawer, forms shouldn't carry the page section chrome */
.kp-drawer-body section.content { padding: 0 !important; }
.kp-drawer-body .container-fluid { padding: 0 !important; }
.kp-drawer-body .kp-page-head { display: none; } /* hide duplicate page header inside drawer */
.kp-drawer-body .row > [class^="col-"] { flex: 0 0 100%; max-width: 100%; } /* single column in drawer */
.kp-drawer-body .card { border: none; box-shadow: none; }
.kp-drawer-body .card-header { padding: 0 0 12px; border: none; }
.kp-drawer-body .card-body { padding: 0; }
.kp-drawer-body .card-footer {
padding: 16px 0 0; border-top: 1px solid var(--kp-line); margin-top: 16px;
position: sticky; bottom: 0; background: var(--kp-card);
}
.kp-drawer-body .summary-box { margin-top: 14px; }
.kp-drawer-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }
.kp-spinner {
width: 34px; height: 34px; border-radius: 50%;
border: 3px solid var(--kp-line); border-top-color: var(--kp-primary);
animation: kpSpin .8s linear infinite;
}
@keyframes kpSpin { to { transform: rotate(360deg); } }
/* ---------- DataTables theming ---------- */
.dataTables_wrapper { font-size: 14px; }
.dataTables_wrapper .row { margin: 0; align-items: center; }
.dataTables_wrapper .dataTables_filter { text-align: right; margin-bottom: 10px; }
.dataTables_wrapper .dataTables_filter input {
border: 1px solid var(--kp-line); border-radius: 9px; padding: 7px 12px; margin-left: 6px;
min-width: 200px; background: var(--kp-bg);
}
.dataTables_wrapper .dataTables_length select {
border: 1px solid var(--kp-line); border-radius: 8px; padding: 5px 26px 5px 10px; margin: 0 4px;
}
.dataTables_wrapper .dataTables_info { color: var(--kp-muted); padding-top: 12px; font-size: 13px; }
.dataTables_wrapper .dataTables_paginate { padding-top: 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--kp-primary) !important; border-color: var(--kp-primary) !important;
color: #fff !important; border-radius: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: 8px !important; padding: 5px 11px; border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--kp-bg) !important; border-color: var(--kp-line) !important; color: var(--kp-primary-dark) !important;
}
table.dataTable { border-collapse: collapse !important; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { opacity: .4; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
background-color: var(--kp-primary); border: none;
}
/* ---------- daterangepicker theming ---------- */
.daterangepicker { border: 1px solid var(--kp-line); border-radius: 12px; box-shadow: 0 12px 40px rgba(15,23,42,.15); font-family: var(--kp-font); }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--kp-primary); }
.daterangepicker .ranges li.active { background: var(--kp-primary); }
.daterangepicker .drp-buttons .btn { border-radius: 8px; font-size: 13px; }
.daterangepicker .applyBtn { background: var(--kp-primary); border-color: var(--kp-primary); }
.kp-daterange { cursor: pointer; background: var(--kp-bg); }
/* ---------- Mobile drawer full-width ---------- */
@media (max-width: 575.98px) {
.dataTables_wrapper .dataTables_filter { text-align: left; }
.dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; margin: 6px 0 0; }
.dataTables_wrapper .dataTables_filter label { width: 100%; }
}
/* Page action header (list "Add" buttons) */
.kp-list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.kp-list-head .kp-list-title { font-weight: 700; font-size: 16px; margin: 0; }
.kp-list-head .ml-auto { margin-left: auto; }
/* =====================================================================
v4 — Modern refresh: drawer sizing, DataTables Buttons, flatpickr,
and overall polish (focused, modern, mobile-first)
===================================================================== */
:root {
--kp-radius: 16px;
--kp-radius-sm: 11px;
--kp-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
--kp-shadow-md: 0 4px 12px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);
--kp-shadow-lg: 0 18px 48px rgba(16,24,40,.14);
--kp-ring: 0 0 0 3px var(--kp-primary-soft);
}
body { font-size: 14px; letter-spacing: -0.005em; background:
linear-gradient(180deg, var(--kp-bg) 0%, var(--kp-bg) 100%); }
/* ---------- Sidebar polish ---------- */
.kp-sidebar { box-shadow: var(--kp-shadow-sm); }
.kp-brand-icon { box-shadow: 0 6px 16px -4px var(--kp-primary); }
.kp-nav-link { font-size: 14px; padding: 11px 13px; margin: 2px 12px; transition: all .15s ease; }
.kp-nav-link.active { box-shadow: inset 3px 0 0 var(--kp-primary); }
.kp-nav-group { font-size: 10px; opacity: .8; margin-top: 4px; }
/* ---------- Header polish ---------- */
.kp-header { backdrop-filter: saturate(1.4) blur(6px); background: rgba(255,255,255,.85); box-shadow: var(--kp-shadow-sm); }
body.kp-sidebar-dark .kp-header { background: rgba(255,255,255,.92); }
.kp-greeting { font-weight: 700; letter-spacing: -0.01em; }
.kp-avatar { box-shadow: 0 4px 12px -3px var(--kp-primary); font-weight: 800; }
.kp-header-search input { transition: box-shadow .15s ease, border-color .15s ease; }
.kp-header-search input:focus { border-color: var(--kp-primary); box-shadow: var(--kp-ring); outline: none; }
/* ---------- Cards ---------- */
.card { box-shadow: var(--kp-shadow-sm); transition: box-shadow .18s ease; }
.card:hover { box-shadow: var(--kp-shadow-md); }
.card-header { padding: 16px 20px; font-size: 15px; }
.card-body { padding: 20px; }
.card-title { letter-spacing: -0.01em; }
/* ---------- Stat cards — more depth + accent ---------- */
.kp-stat-card { border-radius: var(--kp-radius); padding: 18px; position: relative; overflow: hidden; }
.kp-stat-card::after {
content: ""; position: absolute; top: -40%; right: -10%;
width: 120px; height: 120px; border-radius: 50%;
background: radial-gradient(circle, var(--kp-primary-soft) 0%, transparent 70%);
opacity: .5; pointer-events: none;
}
.kp-stat-icon { box-shadow: var(--kp-shadow-sm); }
.kp-stat-value { letter-spacing: -0.02em; }
.kp-stat-label { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
/* ---------- Buttons — crisp, tactile ---------- */
.btn { transition: transform .08s ease, box-shadow .15s ease, background .15s ease; letter-spacing: -0.01em; }
.btn:active { transform: translateY(1px); }
.btn-kp-green, .btn-primary { box-shadow: 0 6px 16px -6px var(--kp-primary); }
.btn-kp-green:hover, .btn-primary:hover { box-shadow: 0 8px 20px -6px var(--kp-primary); }
.btn-sm { border-radius: 9px; }
.btn-outline-kp { transition: all .15s ease; }
.btn-outline-kp:hover { border-color: var(--kp-primary); color: var(--kp-primary-dark); }
/* ---------- Inputs ---------- */
.form-control, .custom-select { transition: border-color .15s ease, box-shadow .15s ease; }
.form-control:focus { box-shadow: var(--kp-ring); }
label { font-size: 12.5px; letter-spacing: .01em; color: var(--kp-muted-2); text-transform: none; }
/* ---------- Right drawer: 50% desktop, 99% mobile ---------- */
.kp-drawer {
width: 50vw; max-width: 50vw; min-width: 420px;
border-top-left-radius: 18px; border-bottom-left-radius: 18px;
box-shadow: var(--kp-shadow-lg);
}
.kp-drawer-head {
padding: 18px 26px; background: var(--kp-card);
border-bottom: 1px solid var(--kp-line);
}
.kp-drawer-head h3 { font-size: 18px; letter-spacing: -0.01em; }
.kp-drawer-body { padding: 24px 26px 40px; }
/* In the drawer, the page's outer layout columns go full width so the form
fills the panel; inner field grids (.form-row / nested .row) keep their columns. */
.kp-drawer-body .col-lg-8, .kp-drawer-body .col-lg-7, .kp-drawer-body .col-lg-6,
.kp-drawer-body .col-lg-5, .kp-drawer-body .col-lg-4 {
flex: 0 0 100%; max-width: 100%;
}
.kp-drawer-body .form-row > [class^="col-"] { flex: 1 1 0; }
@media (min-width: 992px) {
.kp-drawer-body .kp-drawer-2col > [class^="col-"] { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 991.98px) {
.kp-drawer { width: 99vw; max-width: 99vw; min-width: 0;
border-top-left-radius: 18px; border-bottom-left-radius: 0;
border-top-right-radius: 18px; }
}
/* ---------- DataTables: Buttons toolbar + layout ---------- */
.kp-dt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.kp-dt-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-dt-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kp-dt-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
div.dt-buttons { display: inline-flex; flex-wrap: wrap; gap: 6px; }
div.dt-buttons .btn { margin: 0; font-weight: 600; }
.dt-button-collection.dropdown-menu { border-radius: var(--kp-radius-sm); box-shadow: var(--kp-shadow-lg); border: 1px solid var(--kp-line); padding: 6px; }
.dt-button-collection .dt-button { border-radius: 8px; padding: 7px 12px; }
.dataTables_wrapper .dataTables_filter input { background: var(--kp-card); border-radius: 10px; }
.dataTables_wrapper .dataTables_length select { border-radius: 9px; }
table.dataTable thead th { white-space: nowrap; }
table.dataTable tbody tr { transition: background .12s ease; }
@media (max-width: 575.98px) {
.kp-dt-top { flex-direction: column; align-items: stretch; }
.kp-dt-right { margin-left: 0; }
.kp-dt-tools { justify-content: flex-start; }
div.dt-buttons .btn { flex: 1 1 auto; }
}
/* ---------- flatpickr theming ---------- */
.flatpickr-calendar { border-radius: 14px; box-shadow: var(--kp-shadow-lg); border: 1px solid var(--kp-line); font-family: var(--kp-font); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover { background: var(--kp-primary); border-color: var(--kp-primary); }
.flatpickr-day.inRange { background: var(--kp-primary-soft); border-color: var(--kp-primary-soft); box-shadow: -5px 0 0 var(--kp-primary-soft), 5px 0 0 var(--kp-primary-soft); }
.flatpickr-day.today { border-color: var(--kp-primary); }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday { color: var(--kp-text); fill: var(--kp-text); }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700; }
.kp-daterange, .kp-datepicker, input.form-control[readonly].flatpickr-input { background: var(--kp-card); cursor: pointer; }
/* ---------- Page header ---------- */
.kp-page-head h1 { letter-spacing: -0.02em; font-weight: 800; }
.kp-page-head { display: flex; flex-direction: column; gap: 2px; }
/* ---------- Badges: softer, modern ---------- */
.badge { border-radius: 8px; padding: .38em .65em; font-weight: 700; letter-spacing: .01em; }
/* ---------- Tables: cleaner rows ---------- */
.table thead th { font-size: 11px; color: var(--kp-muted); }
.table td, .table th { padding: 12px 14px; }
.table-hover tbody tr:hover { background: var(--kp-primary-soft); }
/* ---------- Smooth content transitions ---------- */
.kp-fragment { animation: kpFadeIn .26s cubic-bezier(.2,.7,.2,1); }
@keyframes kpFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ---------- Toastr modern ---------- */
#toast-container > div { border-radius: 12px; box-shadow: var(--kp-shadow-lg); opacity: 1; padding: 14px 18px 14px 50px; font-size: 14px; }
.toast-success { background-color: var(--kp-primary); }
/* ---------- Scrollbars ---------- */
.kp-nav::-webkit-scrollbar, .kp-drawer-body::-webkit-scrollbar { width: 8px; }
.kp-nav::-webkit-scrollbar-thumb, .kp-drawer-body::-webkit-scrollbar-thumb { background: #d8dee6; border-radius: 8px; }
.kp-nav::-webkit-scrollbar-track, .kp-drawer-body::-webkit-scrollbar-track { background: transparent; }
/* ---------- List head (Add buttons) ---------- */
.card-header .btn-sm { border-radius: 9px; }
/* ---------- Login: premium treatment (v4) ---------- */
.kp-login-wrap {
background:
radial-gradient(1100px 600px at 85% -10%, var(--kp-primary-soft) 0%, transparent 55%),
radial-gradient(900px 500px at -10% 110%, var(--kp-primary-soft) 0%, transparent 50%),
var(--kp-bg);
}
.kp-login-card {
border-radius: 22px; padding: 40px 36px;
box-shadow: 0 30px 70px -20px rgba(16,24,40,.25), 0 0 0 1px rgba(16,24,40,.04);
backdrop-filter: blur(8px);
}
.kp-login-logo .logo-icon {
width: 66px; height: 66px; border-radius: 20px; font-size: 34px;
box-shadow: 0 14px 30px -8px var(--kp-primary);
}
.kp-login-brand h2 { font-size: 24px; letter-spacing: -0.02em; }
.kp-login-card .btn-lg { padding: .8rem; border-radius: 12px; font-weight: 700; font-size: 15px; }
.kp-login-card .input-group { box-shadow: var(--kp-shadow-sm); border-radius: var(--kp-radius-sm); }
.kp-login-card .form-control { border-left: none; }
.kp-login-card .input-group-text { border-right: none; }
/* ---------- Focused content width on big screens ---------- */
@media (min-width: 1600px) { .kp-content { max-width: 1500px; margin: 0 auto; width: 100%; } }
/* ---------- Section spacing rhythm ---------- */
.kp-content > .container-fluid > .row { margin-bottom: 4px; }
.card.mb-3 { margin-bottom: 20px !important; }
/* ---------- Nicer select carets & readonly pickers ---------- */
select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; -webkit-appearance: none; appearance: none; padding-right: 34px; }
/* ---------- Drawer footer buttons stick & look balanced ---------- */
.kp-drawer-body .card-footer { display: flex; gap: 10px; flex-wrap: wrap; }
.kp-drawer-body .card-footer .btn { flex: 1 1 auto; }
/* =====================================================================
Order workflow step indicator (Lock -> Collect)
===================================================================== */
.kp-steps { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.kp-step { display: flex; align-items: center; gap: 12px; background: var(--kp-card);
border: 1px solid var(--kp-line); border-radius: var(--kp-radius); padding: 14px 18px;
flex: 1 1 0; min-width: 0; box-shadow: var(--kp-shadow-sm); }
.kp-step-no { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
background: var(--kp-bg); color: var(--kp-muted-2); border: 2px solid var(--kp-line); }
.kp-step-title { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; line-height: 1.2; }
.kp-step-sub { font-size: 11.5px; color: var(--kp-muted); margin-top: 2px; }
.kp-step.active .kp-step-no { background: var(--kp-primary); color: #fff; border-color: var(--kp-primary);
box-shadow: 0 6px 16px -5px var(--kp-primary); }
.kp-step.active { border-color: var(--kp-primary); }
.kp-step.done .kp-step-no { background: var(--kp-primary-soft); color: var(--kp-primary-dark); border-color: var(--kp-primary-soft); }
.kp-step-line { flex: 0 0 36px; height: 3px; background: var(--kp-line); margin: 0 -1px; }
.kp-step-line.done { background: var(--kp-primary); }
@media (max-width: 575.98px) {
.kp-steps { flex-direction: column; align-items: stretch; gap: 8px; }
.kp-step { width: 100%; }
.kp-step-line { display: none; }
}
/* =====================================================================
v5 — "Financial Transactions" style: page-header card, stat strip,
tabs, and per-row Action dropdown menus
===================================================================== */
/* ---------- Page header card (icon tile + title + subtitle + Back) ---------- */
.kp-headcard {
display: flex; align-items: center; gap: 16px;
background: var(--kp-card); border: 1px solid var(--kp-line);
border-radius: var(--kp-radius); padding: 18px 22px; margin-bottom: 18px;
box-shadow: var(--kp-shadow-sm);
}
.kp-headcard .kp-headcard-icon {
flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--kp-primary), var(--kp-primary-dark));
color: #fff; font-size: 22px; box-shadow: 0 8px 18px -6px var(--kp-primary);
}
.kp-headcard .kp-headcard-body { flex: 1 1 auto; min-width: 0; }
.kp-headcard .kp-headcard-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--kp-text); line-height: 1.2; }
.kp-headcard .kp-headcard-sub { font-size: 12.5px; color: var(--kp-muted-2); margin-top: 3px; }
.kp-headcard .kp-headcard-actions { flex-shrink: 0; margin-left: auto; }
@media (max-width: 575.98px) {
.kp-headcard { flex-wrap: wrap; }
.kp-headcard .kp-headcard-actions { margin-left: 0; width: 100%; }
.kp-headcard .kp-headcard-actions .btn { width: 100%; }
}
/* ---------- Tab strip ---------- */
.kp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--kp-line); margin-bottom: 18px; flex-wrap: wrap; }
.kp-tabs a {
padding: 11px 16px; font-size: 13.5px; font-weight: 600; color: var(--kp-muted-2);
border-bottom: 2px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
transition: color .15s ease, border-color .15s ease;
}
.kp-tabs a:hover { color: var(--kp-primary-dark); }
.kp-tabs a.active { color: var(--kp-primary-dark); border-bottom-color: var(--kp-primary); }
.kp-tabs a .kp-tab-badge {
background: var(--kp-accent); color: #fff; border-radius: 20px; font-size: 11px;
font-weight: 700; padding: 1px 8px; min-width: 20px; text-align: center;
}
/* ---------- Summary stat strip (5 boxes, last highlighted) ---------- */
.kp-stat-strip {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
background: var(--kp-card); border: 1px solid var(--kp-line);
border-radius: var(--kp-radius); overflow: hidden; margin-bottom: 18px;
box-shadow: var(--kp-shadow-sm);
}
.kp-stat-strip .kp-ss-cell { padding: 16px 18px; border-right: 1px solid var(--kp-line); }
.kp-stat-strip .kp-ss-cell:last-child { border-right: none; }
.kp-stat-strip .kp-ss-label { font-size: 11.5px; color: var(--kp-muted-2); margin-bottom: 6px; letter-spacing: .01em; }
.kp-stat-strip .kp-ss-value { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--kp-text); }
.kp-stat-strip .kp-ss-value.kp-pos { color: var(--kp-primary-dark); }
.kp-stat-strip .kp-ss-value.kp-neg { color: var(--kp-danger); }
.kp-stat-strip .kp-ss-cell.kp-ss-accent {
background: linear-gradient(135deg, var(--kp-primary), var(--kp-primary-dark)); border-right: none;
}
.kp-stat-strip .kp-ss-accent .kp-ss-label { color: rgba(255,255,255,.82); }
.kp-stat-strip .kp-ss-accent .kp-ss-value { color: #fff; }
@media (max-width: 991.98px) { .kp-stat-strip { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; }
.kp-stat-strip .kp-ss-cell:nth-child(2n) { border-right: none; }
.kp-stat-strip .kp-ss-cell { border-bottom: 1px solid var(--kp-line); } }
@media (max-width: 575.98px) { .kp-stat-strip { grid-auto-flow: row; grid-template-columns: 1fr; }
.kp-stat-strip .kp-ss-cell { border-right: none; } }
/* ---------- Per-row Action dropdown ---------- */
.kp-action-menu .btn {
font-weight: 600; font-size: 12.5px; border-radius: 9px; padding: 5px 12px;
display: inline-flex; align-items: center; gap: 6px;
}
.kp-action-menu .dropdown-menu {
border-radius: var(--kp-radius-sm); border: 1px solid var(--kp-line);
box-shadow: var(--kp-shadow-lg); padding: 6px; min-width: 180px; font-size: 13.5px;
}
.kp-action-menu .dropdown-item {
border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 10px;
font-weight: 500; color: var(--kp-text);
}
.kp-action-menu .dropdown-item:hover, .kp-action-menu .dropdown-item:focus {
background: var(--kp-primary-soft); color: var(--kp-primary-dark);
}
.kp-action-menu .dropdown-item i { width: 16px; text-align: center; color: var(--kp-muted-2); }
.kp-action-menu .dropdown-item:hover i { color: var(--kp-primary-dark); }
.kp-action-menu .dropdown-item.text-danger { color: var(--kp-danger); }
.kp-action-menu .dropdown-item.text-danger:hover { background: #fef2f2; color: #b91c1c; }
.kp-action-menu .dropdown-item.text-danger i { color: var(--kp-danger); }
.kp-action-menu .dropdown-divider { margin: 5px 2px; border-color: var(--kp-line); }
/* The button inside an action form submits via AJAX; keep inline forms tidy */
.kp-action-menu form { margin: 0; }
.kp-action-menu button.dropdown-item { width: 100%; border: none; background: none; text-align: left; cursor: pointer; }
/* =====================================================================
v6 — Mobile dashboard stat cards: stack icon over text so labels and
numbers fit cleanly on narrow screens (fixes cramped/wrapped tiles)
===================================================================== */
@media (max-width: 767.98px) {
/* Tighter outer gutters so two cards per row have more inner room */
.kp-content > .container-fluid > .row { margin-left: -6px; margin-right: -6px; }
.kp-content > .container-fluid > .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
.kp-stat-card { padding: 14px 13px; border-radius: 16px; }
/* Icon on top, text below — gives the label/value the full card width */
.kp-stat-top { flex-direction: column; align-items: flex-start; gap: 10px; }
.kp-stat-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
.kp-stat-body { width: 100%; }
/* Label: full width, no mid-word truncation, comfortable two lines max */
.kp-stat-label {
font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1.25;
text-transform: uppercase; color: var(--kp-muted-2);
display: block; white-space: normal; overflow-wrap: break-word;
}
/* Value: never split a number across lines. word-break:normal keeps the
digits/commas intact; it may wrap at the space before the number on a
very long amount, but will never break "44,700" into "44,7 / 00". */
.kp-stat-value {
font-size: 21px; line-height: 1.15; margin: 6px 0 2px;
word-break: normal; overflow-wrap: normal;
letter-spacing: -0.02em;
}
.kp-stat-sub { font-size: 11.5px; line-height: 1.3; }
/* The decorative corner glow is too heavy on tiny cards */
.kp-stat-card::after { width: 80px; height: 80px; opacity: .35; }
}
/* Very narrow phones (~≤360px): scale the number down a touch more so long
amounts like ৳1,23,456 still stay on one line instead of wrapping. */
@media (max-width: 380px) {
.kp-stat-value { font-size: 18.5px; }
.kp-stat-card { padding: 13px 11px; }
.kp-stat-label { font-size: 10.5px; }
}
/* =====================================================================
v7 — DataTables look: clean horizontal row borders (no vertical lines),
soft hover, and HORIZONTAL SCROLL on small screens (no column collapse)
===================================================================== */
/* Horizontal-only borders — kill vertical column lines even on .table-bordered */
table.dataTable.kp-datatable,
table.kp-datatable {
border-collapse: collapse;
}
table.kp-datatable,
table.kp-datatable td,
table.kp-datatable th {
border-left: 0 !important;
border-right: 0 !important;
}
table.kp-datatable thead th {
border-top: 0 !important;
border-bottom: 2px solid var(--kp-line) !important;
background: #fcfcfd;
}
table.kp-datatable tbody td {
border-top: 0 !important;
border-bottom: 1px solid var(--kp-line) !important;
}
table.kp-datatable tbody tr:last-child td { border-bottom: 0 !important; }
/* Soft row hover + striping like the reference (subtle warm/neutral tint) */
table.kp-datatable tbody tr { transition: background .12s ease; }
table.kp-datatable.table-hover tbody tr:hover,
table.kp-datatable tbody tr:hover {
background: #f6faf8 !important; /* gentle greenish tint, matches mockup */
}
table.kp-datatable tbody tr.selected,
table.kp-datatable tbody tr.kp-row-active {
background: #eef6f1 !important;
}
/* tfoot (totals) keeps a clear top divider */
table.kp-datatable tfoot td,
table.kp-datatable tfoot th {
border-top: 2px solid var(--kp-line) !important;
border-bottom: 0 !important;
}
/* ---------- Horizontal scroll instead of column collapsing ---------- */
/* The table sits in a .table-responsive wrapper from the DataTables dom layout.
Scroll sideways on narrow screens; keep dropdowns usable. */
.dataTables_wrapper .table-responsive {
overflow-x: auto;
overflow-y: visible; /* don't clip the Action dropdown vertically */
-webkit-overflow-scrolling: touch;
}
/* On wide screens there's usually room, so no scrollbar appears anyway. */
@media (min-width: 992px) {
.dataTables_wrapper .table-responsive { overflow-x: visible; }
}
/* Keep columns from squashing so the row stays readable while scrolling */
@media (max-width: 991.98px) {
table.kp-datatable { min-width: 760px; }
table.kp-datatable td, table.kp-datatable th { white-space: nowrap; }
}
/* The Action dropdown must escape the horizontal scroll container.
Boundary=viewport (set on the toggles) + body-level menu keeps it visible. */
.kp-action-menu .dropdown-menu { position: absolute; z-index: 1080; }
/* =====================================================================
v8 — Date-range preset shortcuts panel (Today, Last 7 Days, ...)
===================================================================== */
.flatpickr-calendar.kp-fp-has-presets {
display: flex !important;
flex-direction: row-reverse; /* calendar on right, presets on left */
width: auto !important;
padding-left: 0;
}
.flatpickr-calendar.kp-fp-has-presets .flatpickr-months,
.flatpickr-calendar.kp-fp-has-presets .flatpickr-innerContainer { }
.kp-fp-presets {
display: flex; flex-direction: column; gap: 2px;
padding: 8px; min-width: 140px;
border-right: 1px solid var(--kp-line);
background: #fcfcfd;
border-top-left-radius: 14px; border-bottom-left-radius: 14px;
}
.kp-fp-preset {
text-align: left; border: none; background: none; cursor: pointer;
padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--kp-text);
font-weight: 500; white-space: nowrap; transition: background .12s ease, color .12s ease;
}
.kp-fp-preset:hover { background: var(--kp-primary-soft); color: var(--kp-primary-dark); }
.kp-fp-preset.active { background: var(--kp-primary); color: #fff; }
/* On small screens, stack presets above the calendar so it fits */
@media (max-width: 575.98px) {
.flatpickr-calendar.kp-fp-has-presets { flex-direction: column; }
.kp-fp-presets {
flex-direction: row; flex-wrap: wrap; min-width: 0; gap: 4px;
border-right: none; border-bottom: 1px solid var(--kp-line);
border-radius: 14px 14px 0 0;
}
.kp-fp-preset { padding: 6px 10px; font-size: 12px; }
}
/* =====================================================================
v9 — Order shop-info card + nicer order forms (new + adjust)
===================================================================== */
.kp-shopcard {
display: flex; align-items: center; gap: 14px;
background: linear-gradient(135deg, var(--kp-primary-soft) 0%, #ffffff 65%);
border: 1px solid var(--kp-line); border-radius: var(--kp-radius);
padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--kp-shadow-sm);
}
.kp-shopcard .kp-shopcard-avatar {
flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--kp-primary), var(--kp-primary-dark));
color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 8px 18px -6px var(--kp-primary);
}
.kp-shopcard .kp-shopcard-main { flex: 1 1 auto; min-width: 0; }
.kp-shopcard .kp-shopcard-name { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--kp-text); line-height: 1.2; }
.kp-shopcard .kp-shopcard-meta { font-size: 12.5px; color: var(--kp-muted-2); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.kp-shopcard .kp-shopcard-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.kp-shopcard .kp-shopcard-meta i { color: var(--kp-primary); }
.kp-shopcard .kp-shopcard-due { flex-shrink: 0; text-align: right; }
.kp-shopcard .kp-shopcard-due .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--kp-muted-2); }
.kp-shopcard .kp-shopcard-due .val { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.kp-shopcard .kp-shopcard-due .val.kp-due { color: var(--kp-danger); }
@media (max-width: 575.98px) {
.kp-shopcard { flex-wrap: wrap; }
.kp-shopcard .kp-shopcard-due { width: 100%; text-align: left; border-top: 1px dashed var(--kp-line); padding-top: 8px; }
}
/* Order item table inside forms: roomier, modern inputs */
.kp-order-table thead th { font-size: 11px; }
.kp-order-table .item-qty, .kp-order-table .item-price { max-width: 130px; }
.kp-order-table tfoot td { border-top: 2px solid var(--kp-line); }
.kp-order-grand { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
/* Section heading row used in the order forms */
.kp-form-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--kp-muted-2); margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.kp-form-section-title i { color: var(--kp-primary); }
/* =====================================================================
v10 — Orders page: thin td borders on all DataTables, mobile filter
toggle, order-# link, summary cards spacing
===================================================================== */
/* Task 4: light thin border around every cell of the DataTables */
table.kp-datatable td,
table.kp-datatable th {
border: 1px solid var(--kp-line) !important;
}
table.kp-datatable thead th {
border-bottom: 2px solid #e2e8f0 !important;
background: #fcfcfd;
}
/* keep the soft hover from v7 */
table.kp-datatable tbody tr:hover { background: #f6faf8 !important; }
/* Order # link styling */
.kp-order-link { color: var(--kp-primary-dark); text-decoration: none; }
.kp-order-link:hover { color: var(--kp-primary); text-decoration: underline; }
/* Task 7: filter bar hidden on mobile until toggled */
@media (max-width: 991.98px) {
.kp-filter-bar { display: none; }
.kp-filter-bar.kp-show { display: flex; }
}
#kpFilterToggle.active { background: var(--kp-primary); color: #fff; border-color: var(--kp-primary); }
/* Summary cards: a touch tighter on the orders page */
.kp-order-summary { margin-bottom: 4px; }
/* =====================================================================
v11 — Mobile-friendly order item cards (new + adjust order forms)
Each product is a card with labeled inputs; works at every width.
===================================================================== */
.kp-items { display: flex; flex-direction: column; gap: 10px; }
.kp-item-card {
border: 1px solid var(--kp-line); border-radius: var(--kp-radius-sm);
background: var(--kp-card); padding: 12px 14px;
}
.kp-item-card .kp-item-name {
font-weight: 700; font-size: 14px; color: var(--kp-text); margin-bottom: 10px;
display: flex; align-items: center; gap: 8px;
}
.kp-item-card .kp-item-name .kp-item-dot {
width: 9px; height: 9px; border-radius: 50%; background: var(--kp-primary); flex-shrink: 0;
}
/* The field grid: 3 inputs + subtotal. Auto-fits, wraps cleanly on mobile. */
.kp-item-grid { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 10px; align-items: end; }
.kp-field { display: flex; flex-direction: column; min-width: 0; }
.kp-field label {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
color: var(--kp-muted-2); margin-bottom: 4px;
}
.kp-field .form-control { height: 44px; font-size: 15px; } /* big touch targets */
.kp-item-sub {
text-align: right; min-width: 96px;
}
.kp-item-sub .kp-item-sub-label {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
color: var(--kp-muted-2); margin-bottom: 4px; display: block;
}
.kp-item-sub .item-subtotal { font-size: 17px; font-weight: 800; color: var(--kp-primary-dark); letter-spacing: -0.02em; }
/* Mobile: stack into 2 columns of inputs, subtotal full-width below */
@media (max-width: 575.98px) {
.kp-item-grid { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.kp-field-pcs { grid-column: span 1; }
.kp-item-sub {
grid-column: 1 / -1; text-align: left;
border-top: 1px dashed var(--kp-line); padding-top: 8px;
display: flex; align-items: baseline; justify-content: space-between;
}
.kp-item-sub .kp-item-sub-label { margin-bottom: 0; }
.kp-field .form-control { height: 46px; font-size: 16px; } /* 16px prevents iOS zoom */
}
/* Grand total bar */
.kp-grand-bar {
display: flex; align-items: center; justify-content: space-between;
background: linear-gradient(135deg, var(--kp-primary-soft) 0%, #fff 70%);
border: 1px solid var(--kp-line); border-radius: var(--kp-radius-sm);
padding: 14px 16px; margin-top: 12px;
}
.kp-grand-bar .lbl { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--kp-muted-2); }
.kp-grand-bar .val { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--kp-primary-dark); }
/* Sticky action footer on mobile so Save is always reachable */
@media (max-width: 575.98px) {
.kp-form-actions { position: sticky; bottom: 0; background: var(--kp-card);
padding: 10px 0; border-top: 1px solid var(--kp-line); z-index: 5; }
.kp-form-actions .btn { flex: 1 1 auto; }
}
.kp-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* =====================================================================
v12 — Adjust order totals panel (discount + totals incl. total pcs)
===================================================================== */
.kp-totals-panel {
margin-top: 14px; border: 1px solid var(--kp-line); border-radius: var(--kp-radius-sm);
overflow: hidden;
}
.kp-discount-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 14px; background: #fcfcfd; border-bottom: 1px solid var(--kp-line);
}
.kp-discount-row label { margin: 0; font-weight: 700; font-size: 12.5px; color: var(--kp-muted-2); }
.kp-discount-input { max-width: 140px; }
.kp-discount-input .form-control { height: 42px; font-size: 15px; text-align: right; }
.kp-totals-lines { padding: 6px 14px 12px; }
.kp-total-line {
display: flex; align-items: baseline; justify-content: space-between;
padding: 6px 0; font-size: 14px; color: var(--kp-text); border-bottom: 1px dashed var(--kp-line);
}
.kp-total-line:last-child { border-bottom: none; }
.kp-total-line span { color: var(--kp-muted-2); font-weight: 600; }
.kp-total-line strong { font-weight: 700; }
.kp-total-line.kp-total-grand { padding-top: 10px; margin-top: 2px; border-top: 2px solid var(--kp-line); border-bottom: none; }
.kp-total-line.kp-total-grand span { color: var(--kp-text); font-weight: 800; font-size: 15px; }
.kp-total-line.kp-total-grand strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--kp-primary-dark); }
@media (max-width: 575.98px) {
.kp-discount-row { flex-wrap: wrap; }
.kp-discount-input { max-width: 100%; width: 100%; }
}
/* =====================================================================
v13 — Discount type toggle (% or amount) + alternating item cards
===================================================================== */
/* Discount control: type selector + value input side by side */
.kp-discount-controls { display: flex; gap: 8px; align-items: center; max-width: 220px; }
.kp-discount-controls .kp-discount-type { width: 78px; flex: 0 0 78px; height: 42px; font-size: 15px; }
.kp-discount-controls .kp-discount-value { flex: 1 1 auto; height: 42px; font-size: 15px; text-align: right; }
@media (max-width: 575.98px) {
.kp-discount-controls { max-width: 100%; width: 100%; }
}
/* Task 2: alternating backgrounds so each order item card is easy to tell apart */
.kp-items .kp-item-card:nth-child(odd) { background: var(--kp-card); }
.kp-items .kp-item-card:nth-child(even) { background: #f4f8f6; border-color: #e3ece8; }
.kp-items .kp-item-card:nth-child(even) .kp-item-dot { background: var(--kp-accent); }
/* =====================================================================
v14 — More prominent alternating item cards + mobile order-view items
===================================================================== */
/* Task 2: stronger alternating shading + a colored left accent bar so each
order item card is unmistakably separate. (Overrides v13.) */
.kp-items .kp-item-card { border-left: 4px solid transparent; }
.kp-items .kp-item-card:nth-child(odd) {
background: #ffffff; border-left-color: var(--kp-primary);
}
.kp-items .kp-item-card:nth-child(even) {
background: #eef4f1; border-color: #d9e6e0; border-left-color: var(--kp-accent);
}
.kp-items .kp-item-card:nth-child(odd) .kp-item-dot { background: var(--kp-primary); }
.kp-items .kp-item-card:nth-child(even) .kp-item-dot { background: var(--kp-accent); }
/* Task 1: mobile stacked cards for the read-only order-view items */
.kp-view-items-mobile { display: flex; flex-direction: column; gap: 10px; }
.kp-vi-card {
border: 1px solid var(--kp-line); border-left: 4px solid var(--kp-primary);
border-radius: var(--kp-radius-sm); background: #fff; padding: 12px 14px;
}
.kp-view-items-mobile .kp-vi-card:nth-child(even) {
background: #eef4f1; border-color: #d9e6e0; border-left-color: var(--kp-accent);
}
.kp-vi-name { font-weight: 700; font-size: 14px; color: var(--kp-text); margin-bottom: 10px; }
.kp-vi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.kp-vi-grid > div { display: flex; flex-direction: column; }
.kp-vi-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--kp-muted-2); }
.kp-vi-val { font-size: 15px; font-weight: 700; color: var(--kp-text); margin-top: 2px; }
.kp-vi-sub { grid-column: 1 / -1; border-top: 1px dashed var(--kp-line); padding-top: 8px; margin-top: 2px;
flex-direction: row !important; align-items: baseline; justify-content: space-between; }
.kp-vi-sub .kp-vi-val { color: var(--kp-primary-dark); font-size: 17px; font-weight: 800; }
.kp-vi-totals {
margin-top: 12px; border: 1px solid var(--kp-line); border-radius: var(--kp-radius-sm);
padding: 6px 14px 10px; background: #fcfcfd;
}
.kp-vi-tline { display: flex; align-items: baseline; justify-content: space-between; padding: 7px 0;
font-size: 14px; border-bottom: 1px dashed var(--kp-line); }
.kp-vi-tline:last-child { border-bottom: none; }
.kp-vi-tline span { color: var(--kp-muted-2); font-weight: 600; }
.kp-vi-tline strong { font-size: 16px; font-weight: 800; }
/* =====================================================================
v15 — Payment Collection: status cards, summary, advance highlight
===================================================================== */
.kp-coll-card {
border-radius: var(--kp-radius); padding: 16px 16px 14px; height: 100%;
border: 1px solid var(--kp-line); position: relative; overflow: hidden;
box-shadow: var(--kp-shadow-sm);
}
.kp-coll-card .kp-cc-ic {
width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center;
justify-content: center; font-size: 16px; margin-bottom: 10px; color: #fff;
}
.kp-coll-card .kp-cc-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--kp-muted-2); }
.kp-coll-card .kp-cc-val { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--kp-text); margin-top: 3px; line-height: 1.1; }
.kp-coll-card .kp-cc-sub { font-size: 11px; color: var(--kp-muted); margin-top: 2px; }
/* Distinct background per card */
.kp-cc-due { background: linear-gradient(135deg, #fff5f5 0%, #fff 70%); border-color: #fdd; }
.kp-cc-due .kp-cc-ic { background: linear-gradient(135deg,#ef4444,#dc2626); }
.kp-cc-due .kp-cc-val { color: #c0392b; }
.kp-cc-order { background: linear-gradient(135deg, #eef4ff 0%, #fff 70%); border-color: #dbe7ff; }
.kp-cc-order .kp-cc-ic { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.kp-cc-paid { background: linear-gradient(135deg, #effaf3 0%, #fff 70%); border-color: #cdeed8; }
.kp-cc-paid .kp-cc-ic { background: linear-gradient(135deg,#10b981,#059669); }
.kp-cc-paid .kp-cc-val { color: var(--kp-primary-dark); }
.kp-cc-orders { background: linear-gradient(135deg, #fff7ed 0%, #fff 70%); border-color: #ffe6c7; }
.kp-cc-orders .kp-cc-ic { background: linear-gradient(135deg,#f59e0b,#d97706); }
@media (max-width: 575.98px) {
.kp-coll-card { padding: 13px 12px; }
.kp-coll-card .kp-cc-val { font-size: 17px; }
.kp-coll-card .kp-cc-ic { width: 34px; height: 34px; font-size: 14px; }
}
/* Collection summary panel */
.kp-coll-summary .kp-cs-line {
display: flex; align-items: baseline; justify-content: space-between;
padding: 9px 0; border-bottom: 1px dashed var(--kp-line); font-size: 14px;
}
.kp-coll-summary .kp-cs-line:first-child { padding-top: 2px; }
.kp-coll-summary .kp-cs-line span { color: var(--kp-muted-2); font-weight: 600; }
.kp-coll-summary .kp-cs-line strong { font-size: 16px; font-weight: 800; }
.kp-coll-summary .kp-cs-remaining { border-bottom: none; }
/* Task 3: advance row in a distinct background color */
.kp-coll-summary .kp-cs-advance {
display: flex; align-items: center; justify-content: space-between;
margin-top: 8px; padding: 12px 14px; border-radius: var(--kp-radius-sm);
background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
border: 1px solid #ddd6fe;
}
.kp-coll-summary .kp-cs-advance span { color: #6d28d9; font-weight: 700; font-size: 13px; }
.kp-coll-summary .kp-cs-advance strong { color: #5b21b6; font-size: 18px; font-weight: 800; }
@media (max-width: 991.98px) {
.kp-coll-summary { position: static; }
}
/* =====================================================================
v16 — Highlight the "Amount Received" field on Payment Collection
===================================================================== */
.kp-amount-field label { font-weight: 800; color: var(--kp-primary-dark); }
.kp-amount-wrap { position: relative; }
.kp-amount-wrap .kp-amount-cur {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
font-weight: 800; font-size: 18px; color: var(--kp-primary-dark); pointer-events: none;
}
.kp-amount-input {
font-size: 22px !important; font-weight: 800; height: 56px !important;
padding-left: 38px !important; letter-spacing: -0.01em;
border: 2px solid var(--kp-primary) !important;
background: var(--kp-primary-soft);
border-radius: 12px !important;
box-shadow: 0 0 0 4px rgba(13,148,136,.10);
}
.kp-amount-input::placeholder { font-weight: 600; color: #5eada4; }
.kp-amount-input:focus {
background: #fff;
border-color: var(--kp-primary-dark) !important;
box-shadow: 0 0 0 4px rgba(13,148,136,.22) !important;
}
/* =====================================================================
v17 — Deposit status tabs
===================================================================== */
.kp-deposit-tabs { flex-wrap: wrap; gap: 6px; }
.kp-deposit-tabs .nav-link { display: inline-flex; align-items: center; padding: 7px 14px; }
.kp-deposit-tabs .nav-link .badge { font-weight: 700; }
.kp-deposit-tabs .nav-link.active .badge { background: rgba(255,255,255,.85); color: var(--kp-primary-dark); }
@media (max-width: 575.98px) {
.kp-deposit-tabs .nav-link { padding: 6px 11px; font-size: 13px; }
}
/* =====================================================================
v18 — Ledger statement drawer (wide) + statement table + print
===================================================================== */
/* Wide drawer for ledger statements: 50% desktop, 99% mobile */
.kp-drawer.kp-drawer-wide { width: 80vw; max-width: 80vw; }
@media (max-width: 991.98px) {
.kp-drawer.kp-drawer-wide { width: 99vw; max-width: 99vw; }
}
/* Ledger statement table */
.kp-ledger-table { font-size: 13.5px; }
.kp-ledger-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; background: #f6faf8; }
.kp-ledger-table td, .kp-ledger-table th { border: 1px solid var(--kp-line) !important; padding: 8px 10px; vertical-align: middle; }
.kp-ledger-opening td { background: #fff8ec; }
.kp-ledger-totals td { background: #f1f5f9; }
/* Print-only header (hidden on screen) */
.kp-print-only { display: none; }
.kp-ledger-printhead { text-align: center; margin-bottom: 14px; }
.kp-ledger-printhead h2 { margin: 0; font-size: 22px; font-weight: 800; }
.kp-ledger-printhead .kp-ph-sub { font-size: 13px; color: #555; margin-top: 2px; }
/* ---- Print: when printing a ledger from the drawer, show ONLY the statement ---- */
@media print {
body.kp-printing-ledger * { visibility: hidden !important; }
body.kp-printing-ledger #kpDrawer,
body.kp-printing-ledger #kpDrawer * { visibility: visible !important; }
body.kp-printing-ledger #kpDrawer {
position: absolute !important; left: 0 !important; top: 0 !important;
width: 100% !important; max-width: 100% !important; box-shadow: none !important;
transform: none !important; height: auto !important;
}
body.kp-printing-ledger .kp-drawer-head,
body.kp-printing-ledger .no-print { display: none !important; }
body.kp-printing-ledger .kp-drawer-body { overflow: visible !important; padding: 0 !important; }
body.kp-printing-ledger .kp-print-only { display: block !important; }
body.kp-printing-ledger .kp-drawer-backdrop { display: none !important; }
}
/* =====================================================================
v19 — Ledger statement stat cards: always 4-in-a-row, 2 on mobile
(container-based grid, independent of viewport breakpoints since the
drawer is narrower than the viewport)
===================================================================== */
.kp-ledger-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.kp-ledger-cards .kp-coll-card { height: 100%; }
@media (max-width: 575.98px) {
.kp-ledger-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* =====================================================================
v20 — Ledger statement top toolbar (period + print/export buttons)
===================================================================== */
.kp-ledger-toolbar {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.kp-ledger-toolbar .kp-ledger-period { flex: 1 1 280px; min-width: 220px; }
.kp-ledger-toolbar .kp-ledger-actions {
display: flex; gap: 8px; flex-shrink: 0;
}
@media (max-width: 575.98px) {
.kp-ledger-toolbar .kp-ledger-period { flex: 1 1 100%; }
.kp-ledger-toolbar .kp-ledger-actions { width: 100%; }
.kp-ledger-toolbar .kp-ledger-actions .btn { flex: 1 1 auto; }
}
/* =====================================================================
v21 — Company logo (sidebar brand + settings preview)
===================================================================== */
.kp-brand-logo {
max-height: 40px; max-width: 100%; width: auto; height: auto;
object-fit: contain; display: block;
}
/* When a logo image is shown, let it use the full brand row width */
.kp-brand-has-logo { gap: 0; min-width: 0; overflow: hidden; }
.kp-brand-has-logo .kp-brand-logo { margin: 0 auto; }
.kp-logo-preview {
display: flex; align-items: center; gap: 6px;
padding: 10px 12px; border: 1px solid var(--kp-line); border-radius: var(--kp-radius-sm);
background: #fafafa;
}
.kp-logo-preview img { max-height: 54px; max-width: 200px; object-fit: contain; }
.kp-logo-remove { font-size: 12.5px; color: var(--kp-muted-2); cursor: pointer; white-space: nowrap; }
/* =====================================================================
v22 — Reports two-column layout (left menu + right report)
===================================================================== */
.kp-report-menu .list-group-item {
border: none; border-left: 3px solid transparent; font-weight: 600;
color: var(--kp-text); padding: 12px 16px;
}
.kp-report-menu .list-group-item i { color: var(--kp-muted-2); width: 18px; text-align: center; }
.kp-report-menu .list-group-item:hover { background: var(--kp-primary-soft); }
.kp-report-menu .list-group-item.active {
background: var(--kp-primary-soft); color: var(--kp-primary-dark);
border-left-color: var(--kp-primary);
}
.kp-report-menu .list-group-item.active i { color: var(--kp-primary); }
@media (max-width: 991.98px) {
.kp-report-menu { display: flex; flex-wrap: wrap; }
.kp-report-menu .list-group-item { flex: 1 1 auto; border-left: none; border-bottom: 2px solid transparent; }
.kp-report-menu .list-group-item.active { border-left: none; border-bottom-color: var(--kp-primary); }
}
/* =====================================================================
v23 — Report empty-state row (cells match header; no colspan)
===================================================================== */
.kp-empty-row td { border-color: transparent !important; }
.kp-empty-row td:first-child { text-align: center; }
/* =====================================================================
v24 — Logo on printed ledger statement header
===================================================================== */
.kp-ledger-logo {
display: block; margin: 0 auto 6px; max-height: 70px; max-width: 240px;
width: auto; height: auto; object-fit: contain;
}
/* =====================================================================
v25 — User profile page + avatar in header
===================================================================== */
.kp-profile-pic {
width: 130px; height: 130px; border-radius: 50%;
margin: 0 auto 12px; overflow: hidden;
background: var(--kp-primary-soft); color: var(--kp-primary-dark);
display: flex; align-items: center; justify-content: center;
border: 3px solid var(--kp-line);
}
.kp-profile-pic img { width: 100%; height: 100%; object-fit: cover; }
.kp-profile-pic-initial { font-size: 52px; font-weight: 800; }
/* Header avatar shows an uploaded image instead of the initial */
.kp-avatar.kp-avatar-img { padding: 0; overflow: hidden; }
.kp-avatar.kp-avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* =====================================================================
v26 — Logo image on login / forgot-password screens
===================================================================== */
.kp-login-logo-img {
max-width: 100%; max-height: 72px; width: auto; height: auto;
object-fit: contain; display: inline-block;
}
/* =====================================================================
v27 — Access control checkboxes grid (Settings)
===================================================================== */
.kp-access-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.kp-access-item {
display: flex; align-items: center; gap: 10px; margin: 0;
padding: 12px 14px; border: 1px solid var(--kp-line); border-radius: var(--kp-radius-sm);
cursor: pointer; font-weight: 600; transition: background .15s, border-color .15s;
}
.kp-access-item:hover { background: var(--kp-primary-soft); }
.kp-access-item input { width: 17px; height: 17px; accent-color: var(--kp-primary); }
@media (max-width: 575.98px) { .kp-access-grid { grid-template-columns: 1fr; } }
/* =====================================================================
v28 — Ensure SweetAlert dialogs sit above the drawer/backdrops.
The app has overlays at z-index 1090 (drawer backdrop) and 1100 (drawer),
while SweetAlert2 defaults to 1060 — which makes its modal invisible if
any of those overlays exist on the page. Lift it well above.
===================================================================== */
.swal2-container { z-index: 2000 !important; }
/* =====================================================================
v29 — Desktop sidebar collapse (hamburger toggle on ≥992px)
On mobile the sidebar still slides in/out using .kp-sidebar-open.
===================================================================== */
@media (min-width: 992px) {
body.kp-sidebar-collapsed .kp-sidebar {
transform: translateX(-100%);
box-shadow: none;
}
body.kp-sidebar-collapsed .kp-main { margin-left: 0; }
/* Smooth transition for both sidebar and content */
.kp-sidebar { transition: transform .25s ease; }
.kp-main { transition: margin-left .25s ease; }
}
/* =====================================================================
v30 — Table tfoot totals row (orders/deliveries/shops/collections/deposits)
===================================================================== */
.kp-total-row td {
background: var(--kp-primary-soft);
border-top: 2px solid var(--kp-primary) !important;
font-weight: 600;
padding-top: 10px; padding-bottom: 10px;
}
.kp-total-row td strong {
font-size: 14px; color: var(--kp-primary-dark);
}
/* On a printed export the soft-tint background may look noisy; keep it clean */
@media print {
.kp-total-row td { background: transparent !important; }
}
/* =====================================================================
v31 — Product thumbnails (order form item card + products list)
===================================================================== */
/* Order form / edit_items: product thumb next to the name */
.kp-item-thumb {
width: 36px; height: 36px; border-radius: 8px; object-fit: cover;
margin-right: 10px; vertical-align: middle; box-shadow: 0 1px 4px rgba(0,0,0,.08);
background: #f3f4f6;
}
@media (max-width: 575.98px) {
.kp-item-thumb { width: 32px; height: 32px; }
}
/* Products list: thumb + name in one cell */
.kp-product-row { display: flex; align-items: center; gap: 12px; }
.kp-product-thumb {
width: 42px; height: 42px; border-radius: 8px; object-fit: cover;
background: #f3f4f6; box-shadow: 0 1px 4px rgba(0,0,0,.08); flex-shrink: 0;
}
.kp-product-thumb-empty {
display: inline-flex; align-items: center; justify-content: center;
color: var(--kp-muted-2); font-size: 18px;
}
/* =====================================================================
v32 — Progressive disclosure for new order / new collection / new deposit
Step 1 picks the primary entity (shop or manager). The rest of the form
is hidden until that selection is made, then revealed with a soft fade.
===================================================================== */
.kp-progressive-body { display: none; }
.kp-progressive-form.kp-form-ready .kp-progressive-body { display: block; }
/* Right-column summary (deposit/collection) — keep its column display */
.kp-progressive-form.kp-form-ready .col-lg-4.kp-progressive-body,
.kp-progressive-form.kp-form-ready .col-lg-8.kp-progressive-body { display: block; }
/* Step 1 card visual cue (so users notice the primary selector first) */
.kp-step-card { border: 1.5px solid var(--kp-primary); box-shadow: 0 1px 8px rgba(13,148,136,.07); }
.kp-step-card .card-body { padding: 18px 18px 16px; }
.kp-progressive-hint { display: block; margin-top: 8px; font-style: italic; }
.kp-progressive-form.kp-form-ready .kp-progressive-hint { display: none; }
/* Smooth reveal */
.kp-progressive-form.kp-form-ready .kp-progressive-body {
animation: kp-fade-in .25s ease;
}
@keyframes kp-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* =====================================================================
v33 — Order Items "add-to-cart" UI (picker, cart rows, empty state)
===================================================================== */
/* Header layout: title on left, picker on right */
.kp-item-picker select {
border-radius: 6px; border-color: var(--kp-primary);
color: var(--kp-primary-dark); font-weight: 600;
}
.kp-item-picker select:focus {
border-color: var(--kp-primary-dark);
box-shadow: 0 0 0 0.2rem rgba(13,148,136,.15);
}
/* Empty cart placeholder */
.kp-cart-empty {
text-align: center; padding: 32px 18px; border: 1.5px dashed var(--kp-line);
border-radius: var(--kp-radius); background: #fafbfc; color: var(--kp-muted-2);
}
.kp-cart-empty i {
font-size: 32px; color: var(--kp-muted-2); margin-bottom: 12px; display: block;
}
.kp-cart-empty p { margin: 0 0 4px; }
.kp-cart-empty p:last-child { margin-bottom: 0; }
/* Title row of a cart item — product name on the left, remove icon on the right.
Defensive: explicit flex layout overrides any cached/older rules so the
remove button can never end up below the row by mistake. */
.kp-item-title-row {
display: flex; align-items: center; gap: 10px; width: 100%;
margin-bottom: 8px;
}
.kp-item-title-row .kp-item-name {
flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
font-weight: 600; color: var(--kp-text);
}
/* Small icon-only remove button (red), sits at the right of the product name */
.kp-cart-remove {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; min-width: 28px; padding: 0; border-radius: 6px;
background: transparent; color: #dc3545;
border: 1px solid transparent;
font-size: 13px; line-height: 1; margin: 0;
cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.kp-cart-remove:hover, .kp-cart-remove:focus {
background: rgba(220,53,69,.10); border-color: rgba(220,53,69,.25);
color: #b02a37; outline: none;
}
.kp-cart-remove:active { background: rgba(220,53,69,.18); }
/* =====================================================================
v34 — Horizontally scrollable product thumbnail strip (Order Items)
===================================================================== */
.kp-product-strip {
display: flex; flex-wrap: nowrap; gap: 10px;
overflow-x: auto; overflow-y: hidden;
padding: 8px 2px 14px; margin: 0 -2px 14px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.kp-product-strip::-webkit-scrollbar { height: 8px; }
.kp-product-strip::-webkit-scrollbar-thumb { background: var(--kp-line); border-radius: 4px; }
.kp-product-strip::-webkit-scrollbar-thumb:hover { background: var(--kp-muted-2); }
.kp-product-chip {
flex: 0 0 auto; width: 118px;
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 10px 8px; border: 1.5px solid var(--kp-line); border-radius: 10px;
background: var(--kp-card); cursor: pointer;
text-align: center; scroll-snap-align: start;
transition: transform .12s ease, border-color .12s, box-shadow .12s, background .12s;
}
.kp-product-chip:hover, .kp-product-chip:focus {
border-color: var(--kp-primary); background: var(--kp-primary-soft);
box-shadow: 0 2px 10px rgba(13,148,136,.10);
transform: translateY(-1px); outline: none;
}
.kp-product-chip:active { transform: translateY(0); }
.kp-product-chip img {
width: 64px; height: 64px; border-radius: 8px; object-fit: cover;
background: #f3f4f6; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.kp-product-chip-init {
width: 64px; height: 64px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--kp-primary-soft); color: var(--kp-primary-dark);
font-weight: 800; font-size: 22px;
}
.kp-product-chip-name {
font-size: 12px; font-weight: 700; color: var(--kp-text);
line-height: 1.2; max-width: 100%;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.kp-product-chip-price {
font-size: 11px; font-weight: 600; color: var(--kp-muted-2);
}
@media (max-width: 575.98px) {
.kp-product-chip { width: 100px; }
.kp-product-chip img, .kp-product-chip-init { width: 56px; height: 56px; }
}
/* =====================================================================
v35 — Clickable stat cards on the dashboard (Pending Verification etc.)
===================================================================== */
.kp-stat-card-link {
display: block; color: inherit; text-decoration: none;
transition: transform .12s ease, box-shadow .12s ease;
}
.kp-stat-card-link:hover, .kp-stat-card-link:focus {
text-decoration: none; color: inherit; transform: translateY(-2px);
}
.kp-stat-card-link:hover .kp-stat-card,
.kp-stat-card-link:focus .kp-stat-card {
box-shadow: 0 4px 16px rgba(13,148,136,.15);
border-color: var(--kp-primary);
}
/* =====================================================================
v36 — Section-title sub-text (e.g. "optional — for mid-business…")
===================================================================== */
.kp-form-section-title .kp-section-sub {
font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0;
color: var(--kp-muted-2); margin-left: 4px;
}
/* =====================================================================
v37 — Shop & user list helpers: linked names, list thumbnails, and
shopcard-avatar image rendering for the modernized Edit Shop form.
===================================================================== */
/* "Open ledger" link styling on shop name + manager name in list views.
Looks like body text but with the primary colour and an underline on hover,
so it's discoverable as a link without screaming. */
.kp-link-strong {
color: var(--kp-primary-dark);
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: color .12s, border-color .12s;
}
.kp-link-strong:hover, .kp-link-strong:focus {
color: var(--kp-primary);
text-decoration: none;
border-bottom-color: var(--kp-primary);
}
/* Small avatar/thumbnail in the users list. Round, primary-tinted initial
for users without a photo; image fits cover for users with one. */
.kp-user-thumb {
width: 32px; height: 32px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--kp-primary), var(--kp-primary-dark));
color: #fff; font-size: 13px; font-weight: 800; flex-shrink: 0;
object-fit: cover;
}
.kp-user-thumb-init { line-height: 1; }
/* When the shopcard avatar holds an ![]()
, fill the square frame. */
.kp-shopcard .kp-shopcard-avatar img {
width: 100%; height: 100%; border-radius: 14px; object-fit: cover;
}
/* =====================================================================
v38 — Header: live search dropdown, digital clock, notification badge
===================================================================== */
/* Search dropdown that appears below the header search input as the user types.
Keyboard-navigable; the active item gets the primary tint. */
.kp-header-search { position: relative; }
.kp-search-menu {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: #fff; border: 1px solid var(--kp-border, #e5e7eb);
border-radius: 10px; box-shadow: 0 12px 28px -10px rgba(0,0,0,.18);
z-index: 1080; max-height: 60vh; overflow-y: auto; padding: 6px 0;
}
.kp-search-menu[hidden] { display: none; }
.kp-search-item {
display: flex; align-items: center; gap: 10px; padding: 8px 12px;
color: var(--kp-text); cursor: pointer; text-decoration: none;
font-size: 13px; line-height: 1.3;
}
.kp-search-item:hover, .kp-search-item.is-active {
background: var(--kp-primary-soft); color: var(--kp-primary-dark); text-decoration: none;
}
.kp-search-item i.fa-fixed { width: 18px; text-align: center; color: var(--kp-primary); flex-shrink: 0; }
.kp-search-item .kp-search-label { font-weight: 600; }
.kp-search-empty { padding: 14px 16px; color: var(--kp-muted-2); text-align: center; font-size: 12.5px; }
/* Digital clock — compact two-line block to the right of search.
Hides at narrow widths to avoid crowding the bell + profile. */
.kp-header-clock {
display: none; align-items: center; gap: 8px; padding: 4px 10px;
border-radius: 10px; background: var(--kp-primary-soft); color: var(--kp-primary-dark);
font-variant-numeric: tabular-nums; line-height: 1.15; user-select: none;
}
.kp-header-clock i { font-size: 14px; color: var(--kp-primary); }
.kp-header-clock .kp-clock-time { font-weight: 800; font-size: 14px; letter-spacing: 0.02em; }
.kp-header-clock .kp-clock-date { display: block; font-size: 10.5px; color: var(--kp-muted-2); font-weight: 600; }
.kp-header-clock > div, .kp-header-clock .kp-clock-stack { display: flex; flex-direction: column; }
@media (min-width: 768px) { .kp-header-clock { display: inline-flex; } }
/* Notification bell badge: small number bubble + tighter dot. */
.kp-notif-wrap { position: relative; }
.kp-header-btn .kp-notif-count {
position: absolute; top: 0; right: 0;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px;
background: #dc2626; color: #fff; font-size: 10px; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1; transform: translate(20%, -20%);
box-shadow: 0 0 0 2px #fff;
}
.kp-header-btn .kp-notif-count[hidden] { display: none; }
.kp-header-btn .kp-dot[hidden] { display: none; }
/* Notification dropdown panel */
.kp-notif-menu { min-width: 320px; max-width: 92vw; padding: 0; }
.kp-notif-menu .dropdown-header { padding: 10px 14px; font-weight: 700; }
.kp-notif-list { max-height: 60vh; overflow-y: auto; }
.kp-notif-item {
display: block; padding: 10px 14px; border-bottom: 1px solid var(--kp-border, #f1f5f9);
text-decoration: none; color: var(--kp-text); position: relative;
}
.kp-notif-item:last-child { border-bottom: 0; }
.kp-notif-item:hover, .kp-notif-item:focus {
background: var(--kp-primary-soft); text-decoration: none; color: var(--kp-text);
}
.kp-notif-item.is-new::before {
content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
width: 6px; height: 6px; border-radius: 50%; background: #dc2626;
}
.kp-notif-item .kp-notif-title { font-weight: 700; font-size: 13px; line-height: 1.25; }
.kp-notif-item .kp-notif-body { font-size: 12px; color: var(--kp-muted-2); margin-top: 2px; line-height: 1.3; }
.kp-notif-item .kp-notif-time { font-size: 10.5px; color: var(--kp-muted-2); margin-top: 3px; display: block; }
.kp-notif-empty { padding: 22px 12px; }
/* =====================================================================
v39 — Ledger statement: kg-click drilldown + items panel
===================================================================== */
.kp-ledger-kg-toggle {
cursor: pointer;
border-bottom: 1px dashed var(--kp-primary);
text-decoration: none;
}
.kp-ledger-kg-toggle:hover { color: var(--kp-primary-dark); text-decoration: none; }
.kp-ledger-items-row td { background: var(--kp-primary-soft); padding: 0; border-top: 0; }
.kp-ledger-items-panel { padding: 8px 12px 12px; }
.kp-ledger-items-table {
background: #fff; border-radius: 6px; overflow: hidden;
border: 1px solid var(--kp-border, #e5e7eb);
}
.kp-ledger-items-table thead th { background: var(--kp-bg, #f8fafc); font-size: 12px; }
.kp-ledger-items-table td, .kp-ledger-items-table th { padding: 6px 10px; vertical-align: middle; }
.kp-ledger-items-table .kp-ledger-items-total { background: var(--kp-bg, #f8fafc); }
.kp-items-loading { padding: 14px; }
/* Print: hide the inline items panel by default — the statement should not
bleed expanded items into the printout unless explicitly expanded. */
@media print {
.kp-ledger-items-row { display: none !important; }
}
/* =====================================================================
v40 — Order Verifications: per-(shop, day) group card layout
===================================================================== */
.kp-verify-group {
border: 1px solid var(--kp-border, #e5e7eb);
border-radius: 10px; overflow: hidden; background: #fff;
}
.kp-verify-group-head {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 10px 14px; background: var(--kp-bg, #f8fafc);
border-bottom: 1px solid var(--kp-border, #e5e7eb);
}
.kp-verify-group-title { font-size: 14px; flex: 1 1 auto; }
.kp-verify-group-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--kp-muted-2); }
.kp-verify-group-stats strong { color: var(--kp-text); }
.kp-verify-group-actions { display: flex; gap: 6px; }
@media (max-width: 575.98px) {
.kp-verify-group-head { padding: 8px 10px; }
.kp-verify-group-stats { gap: 8px; font-size: 11.5px; }
}
/* =====================================================================
v41 — Order Verifications: verifier name + timestamp beside badge
===================================================================== */
.kp-verify-stamp {
display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.kp-verify-by {
font-size: 11.5px; color: var(--kp-muted-2); line-height: 1.2;
}
.kp-verify-by strong { color: var(--kp-text); font-weight: 700; }
@media (max-width: 575.98px) {
.kp-verify-by { width: 100%; padding-left: 2px; }
}
/* =====================================================================
v42 — Language toggle pill in header (EN / বাং)
===================================================================== */
.kp-lang-toggle {
display: inline-flex !important; /* never accidentally hidden by upstream rules */
align-items: center; padding: 2px;
background: var(--kp-bg, #f1f5f9); border-radius: 999px;
border: 1px solid var(--kp-border, #e5e7eb);
gap: 0; user-select: none;
flex-shrink: 0; /* don't let header flex squash this */
position: relative; z-index: 1;
}
.kp-lang-opt {
display: inline-flex; align-items: center; justify-content: center;
padding: 4px 12px; min-width: 38px; height: 26px;
border-radius: 999px; font-size: 12px; font-weight: 700;
color: var(--kp-muted, #64748b); text-decoration: none; line-height: 1;
transition: background-color .15s ease, color .15s ease;
}
.kp-lang-opt:hover, .kp-lang-opt:focus { color: var(--kp-text); text-decoration: none; }
.kp-lang-opt.is-active {
background: var(--kp-primary, #0d9488); color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.kp-lang-opt.is-active:hover, .kp-lang-opt.is-active:focus { color: #fff; }
@media (max-width: 575.98px) {
.kp-lang-opt { padding: 4px 8px; min-width: 32px; font-size: 11px; }
}
/* =====================================================================
v43 — Delivery stats compound value + tinted filter panel
===================================================================== */
/* Compound headline: "45.50 kg · 120 pcs" rendered as one tight line.
Slightly smaller than the default kp-cc-val so two metrics + unit
labels fit within typical card widths without wrapping. */
.kp-coll-card .kp-cc-val-compound {
font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
line-height: 1.15; margin-top: 3px;
display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
}
.kp-coll-card .kp-cc-val-compound .kp-cc-num { color: inherit; }
.kp-coll-card .kp-cc-val-compound .kp-cc-unit {
font-size: 11px; font-weight: 600; text-transform: uppercase;
color: var(--kp-muted-2); margin-left: -2px; letter-spacing: .04em;
}
.kp-coll-card .kp-cc-val-compound .kp-cc-dot {
color: var(--kp-muted-2); font-weight: 400; margin: 0 2px;
}
@media (max-width: 575.98px) {
.kp-coll-card .kp-cc-val-compound { font-size: 15px; }
.kp-coll-card .kp-cc-val-compound .kp-cc-unit { font-size: 10px; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
.kp-coll-card .kp-cc-val-compound { font-size: 16px; }
}
/* Filter panel — light tinted background that separates filters from the
data table beneath. Subtle so it doesn't compete with the stats cards above. */
.kp-filter-panel {
background: var(--kp-primary-soft, #f0fdfa);
border: 1px solid var(--kp-border, #e5e7eb);
border-radius: 10px;
padding: 12px 14px 4px;
}
.kp-filter-panel .form-control { background: #fff; }
.kp-filter-panel label.small { color: var(--kp-text); font-weight: 600; }
@media (max-width: 575.98px) {
.kp-filter-panel { padding: 10px 10px 2px; }
}
/* =====================================================================
v44 — Deliveries: clickable card values + totals-row column highlights
===================================================================== */
/* Clickable compound value: hover affordance + underline reveal. The
element renders inline-flex from kp-cc-val-compound so its color
defaults to link blue — override to inherit card's own value color and
keep the typographic intent of a "card metric". */
.kp-coll-card .kp-cc-clickable {
color: inherit; text-decoration: none; cursor: pointer;
border-bottom: 1px dashed transparent;
transition: border-color .15s ease, opacity .15s ease;
}
.kp-coll-card .kp-cc-clickable:hover,
.kp-coll-card .kp-cc-clickable:focus {
color: inherit; text-decoration: none;
border-bottom-color: currentColor; opacity: .85; outline: none;
}
/* Totals-row column highlights: tint the kg and pcs cells so the totals
read at a glance. Each tint matches the card-color family used elsewhere
(kg = primary/teal, pcs = blue) so the colors carry meaning consistently
between the cards above and the totals below. */
.kp-tot-pcs {
background: rgba(59, 130, 246, .10); /* blue-50 */
border-left: 2px solid rgba(59, 130, 246, .45);
border-right: 1px solid rgba(59, 130, 246, .18);
}
.kp-tot-pcs strong { color: #1d4ed8; } /* blue-700 */
.kp-tot-kg {
background: rgba(20, 184, 166, .10); /* teal-50 */
border-left: 2px solid rgba(20, 184, 166, .45);
border-right: 1px solid rgba(20, 184, 166, .18);
}
.kp-tot-kg strong { color: var(--kp-primary-dark, #0f766e); }
.kp-tot-unit {
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; margin-left: 2px; opacity: .75;
}
/* Breakdown modal — table polish and meta bar */
.kp-breakdown-modal .modal-body { padding: 0; }
.kp-breakdown-table thead th { font-size: 12px; letter-spacing: .02em; }
.kp-breakdown-table td, .kp-breakdown-table th { padding: 10px 14px; }
.kp-breakdown-table tbody tr:hover { background: var(--kp-bg, #f8fafc); }
/* v45 — Yesterday card tint (slate/indigo: distinct from the four existing
card colors and visually "look-back" compared to today's vivid green). */
.kp-cc-history { background: linear-gradient(135deg, #f3f1ff 0%, #fff 70%); border-color: #ddd6fe; }
.kp-cc-history .kp-cc-ic { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.kp-cc-history .kp-cc-val { color: #5b21b6; }