/* =====================================================================
HSMart interaction layer — motion, feedback, loading
Depends on hsmart-brand.css tokens. Loaded after it in _head.
Additive only; works with existing jQuery / Axios / SweetAlert2.
===================================================================== */
:root{
--motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms;
--ease-standard:cubic-bezier(.2,0,0,1);
--ease-exit:cubic-bezier(.4,0,1,1);
}
/* ---------- Top progress bar (Axios + page nav) ---------- */
#hs-progress{
position:fixed; top:0; left:0; height:3px; width:0;
background:var(--hs-grad-yellow-orange);
z-index:2000; opacity:0; pointer-events:none;
transition:width .2s var(--ease-standard), opacity .3s var(--ease-standard);
box-shadow:0 0 8px rgba(var(--hs-yellow-rgb),.5);
}
#hs-progress.active{ opacity:1; }
/* ---------- Button busy state (no layout shift) ---------- */
.btn.is-busy,.btn[data-busy="true"]{ color:transparent!important; pointer-events:none; position:relative; }
.btn.is-busy::after,.btn[data-busy="true"]::after{
content:""; position:absolute; inset:0; margin:auto;
width:1.05em; height:1.05em; border:2px solid currentColor; border-right-color:transparent;
border-radius:50%; color:var(--tblr-primary-fg,#fff); animation:hs-spin .7s linear infinite;
}
.btn-outline-primary.is-busy::after,.btn-outline-secondary.is-busy::after,.btn-ghost.is-busy::after{ color:var(--tblr-primary); }
.btn-cta.is-busy::after{ color:var(--hs-navy-900); }
@keyframes hs-spin{ to{ transform:rotate(360deg); } }
/* ---------- Skeleton loaders ---------- */
.hs-skel{
background:linear-gradient(90deg, var(--hs-surface-2) 25%, color-mix(in srgb, var(--hs-border) 65%, var(--hs-surface-2)) 37%, var(--hs-surface-2) 63%);
background-size:400% 100%; animation:hs-shimmer 1.4s ease infinite; border-radius:6px;
}
.hs-skel-line{ height:12px; margin:8px 0; }
.hs-skel-line.w-75{ width:75%; } .hs-skel-line.w-50{ width:50%; } .hs-skel-line.w-25{ width:25%; }
@keyframes hs-shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
/* ---------- Branded Bootstrap tooltip (form-info-tooltip "?") ---------- */
.tooltip{ --tblr-tooltip-bg:var(--hs-navy-900); }
.tooltip .tooltip-inner{
background:var(--hs-navy-900); color:#fff; font-family:var(--hs-font-body);
font-size:12.5px; line-height:1.45; padding:8px 11px; border-radius:8px;
box-shadow:0 6px 22px rgba(16,37,66,.18); max-width:260px; text-align:left;
}
.tooltip .tooltip-arrow::before{ border-top-color:var(--hs-navy-900); border-bottom-color:var(--hs-navy-900);
border-left-color:var(--hs-navy-900); border-right-color:var(--hs-navy-900); }
[data-bs-toggle="tooltip"]{ color:var(--hs-text-faint); cursor:help; transition:color var(--motion-fast) var(--ease-standard); }
[data-bs-toggle="tooltip"]:hover{ color:var(--tblr-primary); }
/* ---------- SweetAlert2 toast — brand restyle ---------- */
.swal2-popup.hsmart-toast{
border-radius:12px; padding:14px 16px; border:1px solid var(--hs-border); border-left-width:4px;
box-shadow:0 8px 26px rgba(16,37,66,.16); background:var(--hs-surface); color:var(--hs-text);
font-family:var(--hs-font-body);
}
.swal2-popup.hsmart-toast .swal2-title{ font-family:var(--hs-font-heading); font-size:14px; font-weight:600; color:var(--hs-text); padding:0; margin:0; }
.swal2-popup.hsmart-toast .swal2-html-container{ font-size:13px; color:var(--hs-text-muted); margin:.15rem 0 0; }
.swal2-popup.hsmart-toast.hs-success{ border-left-color:var(--tblr-success); }
.swal2-popup.hsmart-toast.hs-error{ border-left-color:var(--tblr-danger); }
.swal2-popup.hsmart-toast.hs-warning{ border-left-color:var(--hs-yellow); }
.swal2-popup.hsmart-toast.hs-info{ border-left-color:var(--hs-sky); }
.swal2-popup.hsmart-toast .swal2-timer-progress-bar{ background:rgba(var(--hs-navy-rgb),.25); }
/* confirm/cancel buttons in modal dialogs → brand */
.swal2-styled.swal2-confirm{ background:var(--tblr-primary)!important; border-radius:8px!important; font-family:var(--hs-font-heading); font-weight:600; }
.swal2-styled.swal2-cancel{ border-radius:8px!important; font-family:var(--hs-font-heading); font-weight:600; }
/* ---------- Motion: dropdowns, modals, cards, page ---------- */
.dropdown-menu.show{ animation:hs-pop var(--motion-base) var(--ease-standard); }
@keyframes hs-pop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.modal.fade .modal-dialog{ transition:transform var(--motion-slow) var(--ease-standard), opacity var(--motion-slow) var(--ease-standard); transform:scale(.98) translateY(6px); }
.modal.show .modal-dialog{ transform:none; }
.card{ transition:box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); }
/* nav hover/active feedback (shell brand colours come in Phase 2) */
.navbar-vertical .nav-link{ transition:background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
/* page fade-in (reads as a transition without an SPA) */
.page-body{ animation:hs-fade var(--motion-base) var(--ease-standard); }
@keyframes hs-fade{ from{ opacity:0; } to{ opacity:1; } }
/* smooth theme switch */
body{ transition:background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard); }
/* ---------- TomSelect (searchable dropdowns) — brand skin ---------- */
.ts-wrapper .ts-control{ border:1.5px solid var(--hs-border-strong); border-radius:8px; min-height:38px; }
.ts-wrapper.focus .ts-control{ border-color:var(--tblr-primary); box-shadow:0 0 0 .25rem rgba(var(--hs-navy-rgb),.15); }
.ts-dropdown{ border:1px solid var(--hs-border); border-radius:10px; box-shadow:0 8px 26px rgba(16,37,66,.14); overflow:hidden; margin-top:4px; }
.ts-dropdown .active{ background:var(--hs-navy-050); color:var(--tblr-primary); }
.ts-dropdown .option:hover{ background:var(--hs-surface-2); }
.ts-control .item{ background:var(--hs-navy-050); color:var(--tblr-primary); border:1px solid var(--hs-navy-100); border-radius:6px; }
/* ---------- Clickable DataTable rows (row → detail) ---------- */
table.dataTable tbody tr[data-detail-url]{ cursor:pointer; }
table.dataTable tbody tr[data-detail-url]:hover > td{ background:var(--hs-navy-050); }
/* ---------- DataTables processing indicator — branded ---------- */
div.dt-processing,.dataTables_processing{
border:0!important; background:var(--hs-surface)!important; color:var(--hs-text-muted)!important;
box-shadow:0 8px 26px rgba(16,37,66,.16); border-radius:10px; font-family:var(--hs-font-body);
}
.hs-dt-spin{
display:inline-block; width:1em; height:1em; vertical-align:-.15em; margin-right:.45em;
border:2px solid var(--tblr-primary); border-right-color:transparent; border-radius:50%;
animation:hs-spin .7s linear infinite;
}
/* ---------- Detail drawer (quick-view offcanvas) ---------- */
.hs-detail-drawer{ width:min(440px,94vw); }
/* =====================================================================
In-place control polish — CSS ONLY, no markup/layout change.
Just makes the existing filters / tabs / table controls look modern.
===================================================================== */
/* Tabs → clean underline with brand active (no box borders) */
.nav-tabs{ border-bottom:1px solid var(--hs-border); }
.nav-tabs .nav-item .nav-link{
border:0; color:var(--hs-text-muted); font-family:var(--hs-font-heading); font-weight:600;
border-radius:8px 8px 0 0; position:relative;
transition:color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}
.nav-tabs .nav-item .nav-link:hover{ color:var(--tblr-primary); background:var(--hs-navy-050); }
.nav-tabs .nav-item .nav-link.active{ color:var(--tblr-primary); background:transparent; border:0; }
.nav-tabs .nav-item .nav-link.active::after{
content:""; position:absolute; left:.75rem; right:.75rem; bottom:-1px; height:2.5px;
border-radius:3px 3px 0 0; background:var(--tblr-primary);
}
/* Softer inputs/selects everywhere (subtle, modern) */
.form-control, .form-select{ border-radius:8px; }
/* Filter controls inside card headers: consistent rounding + navy focus */
.card-actions .form-select, .card-actions .form-control{ border-radius:8px; border-color:var(--hs-border-strong); }
.card-actions .form-select:focus, .card-actions .form-control:focus{ border-color:var(--tblr-primary); box-shadow:0 0 0 3px rgba(var(--hs-navy-rgb),.14); }
.card-actions .btn{ border-radius:8px; }
/* DataTables controls: Columns/Export pills, search, page-length */
.dt-buttons .dt-button.btn{ border-radius:8px !important; }
.dt-buttons .dt-button.btn:hover{ background:var(--hs-navy-050) !important; border-color:var(--hs-navy-100) !important; color:var(--tblr-primary) !important; }
.dt-buttons .dt-button:hover i, .dt-buttons .dt-button:hover .ti{ color:var(--tblr-primary) !important; }
.dt-search input[type="search"]{ border-radius:8px; }
.dt-search input[type="search"]:focus{ border-color:var(--tblr-primary); box-shadow:0 0 0 3px rgba(var(--hs-navy-rgb),.14); }
.dt-length select.dt-input{ border-radius:8px; }
/* =====================================================================
COMPONENT SKIN — CSS only, global (Admin + Seller). No markup change.
Grouped 🔴 high · 🟡 medium · 🟢 low. Easy to tweak/remove as one block.
===================================================================== */
/* 🔴 Buttons — unify radius (keep pills), depth + press feedback */
.btn:not(.btn-pill):not(.rounded-pill){ border-radius:8px; }
.btn-primary{ box-shadow:0 1px 2px rgba(var(--hs-navy-rgb),.18); }
.btn-primary:hover{ box-shadow:0 3px 10px rgba(var(--hs-navy-rgb),.26); }
.btn:active{ transform:translateY(.5px); }
/* 🔴 Cards — softer corners, subtle shadow instead of hard line, airy header */
.card{ border-radius:14px; border-color:var(--hs-border); box-shadow:0 1px 2px rgba(16,37,66,.04), 0 3px 10px rgba(16,37,66,.045); }
.card .card{ box-shadow:none; }
.card-header{ padding-top:1rem; padding-bottom:1rem; border-bottom-color:var(--hs-border); }
.card-title{ font-weight:600; }
.card-sm{ border-radius:12px; }
/* 🔴 Modals — rounded, deeper float, clean dividers */
.modal-content{ border-radius:16px; border:0; box-shadow:0 24px 60px rgba(16,37,66,.22); overflow:hidden; }
.modal-header{ border-bottom-color:var(--hs-border); }
.modal-footer{ border-top-color:var(--hs-border); }
/* 🔴 Dropdown menus — rounded, padded, brand hover/active */
.dropdown-menu{ border-radius:10px; border-color:var(--hs-border); box-shadow:0 8px 26px rgba(16,37,66,.12); padding:.375rem; }
.dropdown-menu .dropdown-item{ border-radius:7px; padding:.5rem .75rem; }
.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus{ background:var(--hs-navy-050); color:var(--tblr-primary); }
.dropdown-menu .dropdown-item.active{ background:var(--tblr-primary); color:#fff; }
/* 🔴 Alerts / flash — soft tint feel via thicker left accent + radius (color stays per type, dark-safe) */
.alert{ border-radius:10px; border-left-width:4px; }
/* 🟡 Switch / checkbox / radio — brand checked + focus */
.form-check-input:checked{ background-color:var(--tblr-primary); border-color:var(--tblr-primary); }
.form-check-input:focus{ border-color:var(--tblr-primary); box-shadow:0 0 0 .2rem rgba(var(--hs-navy-rgb),.18); }
.form-switch .form-check-input{ height:1.2em; }
/* 🟡 Input groups — softer addon */
.input-group-text{ background:var(--hs-surface-2); color:var(--hs-text-muted); border-color:var(--hs-border-strong); }
/* 🟡 List groups — gentle hover + breathing room */
.list-group-item-action:hover,.list-group-hoverable .list-group-item:hover{ background:var(--hs-surface-2); }
.list-group-flush .list-group-item{ padding-top:.85rem; padding-bottom:.85rem; }
/* 🟡 Bootstrap pagination (non-DataTables) — pill + brand active */
.pagination .page-link{ border-radius:8px; margin:0 2px; color:var(--hs-text); }
.pagination .page-link:hover{ background:var(--hs-navy-050); color:var(--tblr-primary); }
.pagination .page-item.active .page-link{ background:var(--tblr-primary); border-color:var(--tblr-primary); color:#fff; }
/* 🟡 FilePond uploads — branded drop area */
.filepond--panel-root{ background:var(--hs-surface-2); border:1.5px dashed var(--hs-border-strong); border-radius:12px; }
.filepond--drop-label{ color:var(--hs-text-muted); }
.filepond--label-action{ color:var(--tblr-primary); text-decoration-color:var(--tblr-primary); }
.filepond--item-panel{ border-radius:10px; }
.filepond--drip-blob{ background:var(--tblr-primary); }
/* 🟢 Rich text editor (HugeRTE / TinyMCE skin) — brand frame */
.tox.tox-tinymce{ border-radius:10px !important; border-color:var(--hs-border-strong) !important; }
.tox .tox-toolbar,.tox .tox-toolbar__primary{ background:var(--hs-surface-2) !important; }
.tox .tox-statusbar{ border-top-color:var(--hs-border) !important; }
/* 🟢 Subscription / pricing — lift recommended (border-primary) card */
.card.border-primary{ box-shadow:0 10px 30px rgba(var(--hs-navy-rgb),.12); }
/* =====================================================================
MODAL PATTERN — pinned header/footer + scrollable body + capped height.
Applies to ALL create/update dialogs (Admin + Seller) with NO markup
change. Excludes modals that already opt into Bootstrap scrolling
(.modal-dialog-scrollable, e.g. POS) and full-screen modals.
===================================================================== */
.modal-dialog:not(.modal-fullscreen):not(.modal-dialog-scrollable) .modal-content{
max-height:calc(100vh - 3rem);
max-height:calc(100dvh - 3rem); /* dvh = correct on mobile (browser chrome) */
overflow:hidden;
}
/* CRITICAL: most create/update dialogs wrap their sections in a