/* ???????????????????????????????????????????????????????????????
chvhub — Global Design System | site.css
Loaded once in _Layout.cshtml — applies to ALL pages
Class naming: both chv-* (new) and qe-* (QuotationEdit
alias) are supported so no HTML changes needed on that page.
??????????????????????????????????????????????????????????????? */
/* ?? Font (add this to _Layout.cshtml once) ?????????????
??????????????????????????????????????????????????????????????? */
/* ?? Design Tokens ??????????????????????????????????????????? */
:root {
--brand: #2563eb;
--brand-hover: #1d4ed8;
--brand-soft: #eff6ff;
--brand-mid: #bfdbfe;
--success: #059669;
--success-soft: #ecfdf5;
--warning: #d97706;
--warning-soft: #fffbeb;
--danger: #dc2626;
--danger-soft: #fef2f2;
--purple: #7c3aed;
--purple-soft: #f5f3ff;
--teal: #0d9488;
--teal-soft: #f0fdfa;
--ink: #0f172a;
--ink-mid: #475569;
--ink-light: #94a3b8;
--border: #e2e8f0;
--surface: #f8fafc;
--white: #ffffff;
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
--shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--shadow: 0 4px 16px rgba(0,0,0,.08);
--shadow-lg: 0 8px 32px rgba(0,0,0,.12);
}
/* ?? Base ????????????????????????????????????????????????????? */
body {
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
background: var(--surface);
color: var(--ink);
font-size: 14px;
}
/* ??????????????????????????????????????????????????????????????
BUTTONS — chv-btn = qe-btn (both work)
?????????????????????????????????????????????????????????????? */
.chv-btn, .qe-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all .18s;
text-decoration: none;
white-space: nowrap;
}
.chv-btn-primary, .qe-btn-primary {
background: var(--brand);
color: #fff;
}
.chv-btn-primary:hover, .qe-btn-primary:hover {
background: var(--brand-hover);
color: #fff;
box-shadow: 0 4px 16px rgba(37,99,235,.35);
transform: translateY(-1px);
}
.chv-btn-outline, .qe-btn-outline {
background: var(--white);
color: var(--ink-mid);
border: 1.5px solid var(--border);
}
.chv-btn-outline:hover, .qe-btn-outline:hover {
border-color: var(--brand);
color: var(--brand);
background: var(--brand-soft);
}
.chv-btn-danger, .qe-btn-danger {
background: var(--danger-soft);
color: var(--danger);
border: 1.5px solid #fca5a5;
}
.chv-btn-danger:hover, .qe-btn-danger:hover {
background: var(--danger);
color: #fff;
}
.chv-btn-success {
background: var(--success);
color: #fff;
}
.chv-btn-success:hover {
background: #047857;
box-shadow: 0 4px 14px rgba(5,150,105,.3);
}
.chv-btn-sm {
padding: 6px 14px;
font-size: 12px;
}
/* ??????????????????????????????????????????????????????????????
SECTION CARDS — chv-card = qe-card
?????????????????????????????????????????????????????????????? */
.chv-card, .qe-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 20px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.chv-card-header, .qe-card-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
border-bottom: 1.5px solid var(--border);
background: var(--white);
}
.chv-card-body, .qe-card-body {
padding: 20px 24px;
}
/* Card icon + colour variants (shared names — no alias needed) */
.chv-card-icon, .qe-card-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
flex-shrink: 0;
}
.icon-blue {
background: var(--brand-soft);
color: var(--brand);
}
.icon-green {
background: var(--success-soft);
color: var(--success);
}
.icon-purple {
background: var(--purple-soft);
color: var(--purple);
}
.icon-teal {
background: var(--teal-soft);
color: var(--teal);
}
.icon-amber {
background: var(--warning-soft);
color: var(--warning);
}
.icon-red {
background: var(--danger-soft);
color: var(--danger);
}
.chv-card-title, .qe-card-title {
font-size: 14px;
font-weight: 700;
color: var(--ink);
margin: 0;
}
.chv-card-subtitle, .qe-card-subtitle {
font-size: 11px;
color: var(--ink-light);
margin-top: 1px;
}
/* ??????????????????????????????????????????????????????????????
TOOLBAR
?????????????????????????????????????????????????????????????? */
.chv-toolbar, .qe-toolbar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
flex-wrap: wrap;
}
/* ??????????????????????????????????????????????????????????????
FORM CONTROLS — chv-input = qe-input
?????????????????????????????????????????????????????????????? */
.chv-form-group, .qe-form-group {
margin-bottom: 18px;
}
.chv-form-group label, .qe-form-group label {
font-size: 12px;
font-weight: 600;
color: var(--ink-mid);
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 6px;
display: block;
}
.chv-input, .chv-select, .chv-textarea,
.qe-input, .qe-select, .qe-textarea {
width: 100%;
padding: 9px 14px;
border: 1.5px solid var(--border);
border-radius: 999px;
font-size: 13.5px;
font-family: inherit;
color: var(--ink);
background: var(--white);
transition: border-color .18s, box-shadow .18s;
outline: none;
-webkit-appearance: none;
}
.chv-textarea, .qe-textarea {
border-radius: var(--radius);
resize: vertical;
}
.chv-input:focus, .qe-input:focus,
.chv-select:focus, .qe-select:focus,
.chv-textarea:focus, .qe-textarea:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.chv-input:disabled, .qe-input:disabled,
.chv-select:disabled, .qe-select:disabled,
.chv-textarea:disabled, .qe-textarea:disabled {
background: var(--surface);
color: var(--ink-light);
cursor: not-allowed;
}
.chv-select, .qe-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
/* Grid — chv-grid = qe-grid */
.chv-grid, .qe-grid {
display: grid;
gap: 16px;
}
.chv-grid-2, .qe-grid-2 {
/*grid-template-columns: 1fr 1fr;*/
grid-template-columns: 1fr 1fr;
}
.chv-grid-3, .qe-grid-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.chv-grid-4, .qe-grid-4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.chv-grid-8, .qe-grid-8 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 992px) {
.chv-grid-3, .qe-grid-3,
.chv-grid-4, .qe-grid-4 {
grid-template-columns: 1fr 1fr;
}
}
.qe-page-title1 {
font-size: 1.03125rem;
}
@media (max-width: 576px) {
.chv-grid-2, .qe-grid-2, .chv-grid-3, .qe-grid-3, .chv-grid-4, .qe-grid-4 {
grid-template-columns: 1fr;
}
}
/* ??????????????????????????????????????????????????????????????
DIVIDER
?????????????????????????????????????????????????????????????? */
.chv-divider, .qe-divider {
border: none;
border-top: 1.5px solid var(--border);
margin: 28px 0;
}
/* ??????????????????????????????????????????????????????????????
ENQUIRY LINK BANNER (same class name on both pages)
?????????????????????????????????????????????????????????????? */
.enq-link-banner, .enq-banner {
display: none;
align-items: center;
gap: 10px;
background: var(--teal-soft);
border: 1.5px solid #99f6e4;
border-radius: var(--radius-sm);
padding: 8px 14px;
font-size: 13px;
margin-top: 8px;
}
.enq-link-banner.visible, .enq-banner.visible {
display: flex;
}
.enq-link-badge, .enq-badge {
background: var(--teal);
color: #fff;
border-radius: 999px;
padding: 2px 12px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
/* ??????????????????????????????????????????????????????????????
DOCUMENT UPLOAD — shared by Enquiry + Quotation + Order
Class names are already identical on both pages — no alias needed
?????????????????????????????????????????????????????????????? */
.doc-pill {
font-size: 12px;
padding: 5px 14px;
border-radius: 999px;
border: 1.5px solid var(--border);
background: var(--white);
color: var(--ink-mid);
cursor: pointer;
transition: all .15s;
font-weight: 500;
user-select: none;
}
.doc-pill:hover {
border-color: var(--brand-mid);
color: var(--brand);
}
.doc-pill.active {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.att-drop-zone {
border: 2px dashed var(--border);
border-radius: var(--radius);
padding: 32px 20px;
text-align: center;
cursor: pointer;
transition: all .18s;
background: var(--surface);
}
.att-drop-zone:hover, .att-drop-zone.over {
background: var(--brand-soft);
border-color: var(--brand);
}
.att-drop-icon {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--border);
background: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.att-file-list {
list-style: none;
padding: 0;
margin: 12px 0 0;
}
.att-file-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.att-file-item:last-child {
border-bottom: none;
}
.att-file-icon {
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
flex-shrink: 0;
letter-spacing: -.3px;
}
.att-icon-pdf {
background: #fee2e2;
color: #b91c1c;
}
.att-icon-doc {
background: #dbeafe;
color: #1d4ed8;
}
.att-icon-xls {
background: #dcfce7;
color: #15803d;
}
.att-icon-img {
background: #ede9fe;
color: #6d28d9;
}
.att-icon-dwg {
background: #fef3c7;
color: #b45309;
}
.att-icon-other {
background: var(--surface);
color: var(--ink-light);
}
.att-file-info {
flex: 1;
min-width: 0;
}
.att-file-name {
font-weight: 600;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.att-file-meta {
font-size: 11px;
color: var(--ink-light);
margin-top: 2px;
}
.att-badge {
font-size: 10px;
padding: 3px 10px;
border-radius: 999px;
font-weight: 700;
flex-shrink: 0;
}
.att-badge.uploaded {
background: var(--success-soft);
color: var(--success);
}
.att-badge.pending {
background: var(--warning-soft);
color: var(--warning);
}
.att-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.att-btn {
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
font-size: 14px;
border: 1.5px solid var(--border);
background: var(--white);
color: var(--ink-mid);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all .12s;
}
.att-btn:hover {
background: var(--surface);
color: var(--brand);
border-color: var(--brand-mid);
}
.att-btn.danger:hover {
background: var(--danger-soft);
color: var(--danger);
border-color: #fca5a5;
}
/* ??????????????????????????????????????????????????????????????
MISC — shared small components
?????????????????????????????????????????????????????????????? */
.stage-lock-msg {
font-size: 11px;
color: #92400e;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 6px;
padding: 4px 10px;
display: inline-block;
margin-top: 6px;
}
/* Add product button */
.add-product-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 999px;
background: var(--brand-soft);
color: var(--brand);
border: 1.5px solid var(--brand-mid);
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: all .18s;
text-decoration: none;
}
.add-product-btn:hover {
background: var(--brand);
color: #fff;
box-shadow: 0 4px 14px rgba(37,99,235,.3);
}
/* Table action icons */
.tbl-action {
display: flex;
gap: 4px;
}
.tbl-action a {
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
transition: background .12s;
}
.tbl-action a:hover {
background: var(--brand-soft);
}
/* TC listbox label */
#listbox-selection h4 {
font-size: 13px;
font-weight: 700;
color: var(--ink-mid);
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 10px;
}
/* Switch wrap */
.qe-switch-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
}
.qe-switch-wrap label {
font-size: 13px;
color: var(--ink-mid);
font-weight: 500;
cursor: pointer;
margin: 0;
text-transform: none;
letter-spacing: 0;
}
/* Fix Skote theme breadcrumb URL display bug */
.breadcrumb-item a::after,
.breadcrumb-item a::before {
content: none !important;
display: none !important;
}
/* Required field star */
.qe-form-group.required label::after {
content: " *";
color: var(--danger);
font-size: 14px;
font-weight: 700;
margin-left: 2px;
}
/* Auto show * when input has required attribute */
.qe-form-group:has(input[required]) label::after,
.qe-form-group:has(select[required]) label::after,
.qe-form-group:has(textarea[required]) label::after {
content: " *";
color: var(--danger);
font-size: 14px;
font-weight: 700;
}
.LoginPage {
background-image: url(../images/login_bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}