/**
* PIMAura Component Library
* =========================
* Reusable UI components built on top of theme.css design tokens.
* All components use CSS variables for easy theming.
*/
/* ==========================================
BUTTONS
========================================== */
/* Base Button */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-base);
text-decoration: none;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
box-shadow: var(--shadow-xs);
}
.btn:focus {
outline: none;
box-shadow: var(--shadow-focus);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Primary Button (Dark) - Main CTAs */
.btn-primary {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
}
.btn-primary:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
color: var(--color-text-inverse);
box-shadow: var(--shadow-md);
}
.btn-primary:active {
background: var(--color-primary-active);
}
/* Secondary Button (Outline) - Secondary actions */
.btn-secondary {
background: var(--color-bg-primary);
color: var(--color-text-primary);
border-color: var(--color-border-secondary);
}
.btn-secondary:hover {
background: var(--color-bg-secondary);
border-color: var(--color-border-primary);
color: var(--color-text-primary);
}
.btn-secondary:active {
background: var(--color-bg-tertiary);
}
/* Accent Button (Brand Blue) - Special emphasis */
.btn-accent {
background: var(--color-brand-blue);
color: var(--color-text-inverse);
border-color: var(--color-brand-blue);
}
.btn-accent:hover {
background: var(--color-brand-blue-hover);
border-color: var(--color-brand-blue-hover);
color: var(--color-text-inverse);
box-shadow: var(--shadow-md);
}
/* Success Button */
.btn-success {
background: var(--color-success);
color: var(--color-text-inverse);
border-color: var(--color-success);
}
.btn-success:hover {
background: var(--color-success-hover);
border-color: var(--color-success-hover);
color: var(--color-text-inverse);
}
/* Danger Button */
.btn-danger {
background: var(--color-bg-primary);
color: var(--color-error);
border-color: var(--color-border-secondary);
}
.btn-danger:hover {
background: var(--color-error-light);
border-color: var(--color-error);
color: var(--color-error);
}
.btn-danger-solid {
background: var(--color-error);
color: var(--color-text-inverse);
border-color: var(--color-error);
}
.btn-danger-solid:hover {
background: var(--color-error-hover);
border-color: var(--color-error-hover);
}
/* Ghost Button (Minimal) */
.btn-ghost {
background: transparent;
color: var(--color-text-secondary);
border-color: transparent;
box-shadow: none;
}
.btn-ghost:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
/* Link Button (Text only) */
.btn-link {
background: transparent;
color: var(--color-brand-blue);
border-color: transparent;
box-shadow: none;
padding: var(--space-1) var(--space-2);
}
.btn-link:hover {
color: var(--color-brand-blue-hover);
text-decoration: underline;
}
/* Button Sizes */
.btn-xs {
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
}
.btn-sm {
padding: 6px var(--space-3);
font-size: var(--font-size-sm);
}
.btn-lg {
padding: var(--space-3) var(--space-5);
font-size: var(--font-size-md);
}
/* Button with Icon */
.btn-icon {
padding: var(--space-2);
min-width: 36px;
}
.btn-icon.btn-sm {
padding: 6px;
min-width: 28px;
}
/* Outline Button Variants (Bootstrap-compatible) */
.btn-outline-primary {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-outline-primary:hover {
background: var(--color-primary);
color: var(--color-text-inverse);
}
.btn-outline-secondary {
background: transparent;
color: var(--color-text-secondary);
border-color: var(--color-border-secondary);
}
.btn-outline-secondary:hover {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
border-color: var(--color-border-primary);
}
.btn-outline-success {
background: transparent;
color: var(--color-success);
border-color: var(--color-success);
}
.btn-outline-success:hover {
background: var(--color-success);
color: var(--color-text-inverse);
}
.btn-outline-danger {
background: transparent;
color: var(--color-error);
border-color: var(--color-error);
}
.btn-outline-danger:hover {
background: var(--color-error);
color: var(--color-text-inverse);
}
.btn-outline-warning {
background: transparent;
color: var(--color-warning);
border-color: var(--color-warning);
}
.btn-outline-warning:hover {
background: var(--color-warning);
color: var(--color-text-inverse);
}
.btn-outline-info {
background: transparent;
color: var(--color-brand-blue);
border-color: var(--color-brand-blue);
}
.btn-outline-info:hover {
background: var(--color-brand-blue);
color: var(--color-text-inverse);
}
/* Warning Button (Solid) */
.btn-warning {
background: var(--color-warning);
color: var(--color-text-primary);
border-color: var(--color-warning);
}
.btn-warning:hover {
background: #d97706;
border-color: #d97706;
}
/* ==========================================
SOFT UI / NEUMORPHISM BUTTONS
==========================================
Tactile button style with soft shadows creating 3D depth.
Uses neumorphic design principles for a modern, tactile feel.
Usage:
- Neutral:
- Accent:
- With icon: Include inline SVG (20×20px, stroke-based) before text
========================================== */
/* Base Soft UI Button */
.btn-soft-ui {
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--soft-ui-icon-gap);
/* Sizing */
padding: var(--soft-ui-padding-y) var(--soft-ui-padding-x);
/* Typography */
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: var(--soft-ui-font-weight);
line-height: var(--line-height-base);
text-decoration: none;
white-space: nowrap;
/* Colors */
background: var(--soft-ui-bg);
color: var(--soft-ui-text);
/* Borders & Shape */
border: none;
border-radius: var(--soft-ui-radius);
/* Neumorphic Shadow - Creates 3D raised effect */
box-shadow:
var(--soft-ui-shadow-dark),
var(--soft-ui-shadow-light);
/* Interaction */
cursor: pointer;
transition: all var(--soft-ui-transition);
/* Prevent text selection on double-click */
user-select: none;
}
/* Hover State - Elevated feel */
.btn-soft-ui:hover {
/* Stronger shadows for "lifted" effect */
box-shadow:
var(--soft-ui-shadow-dark-hover),
var(--soft-ui-shadow-light-hover);
/* Slight upward movement */
transform: translateY(-2px);
}
/* Active/Pressed State - Inset feel */
.btn-soft-ui:active {
/* Inset shadows create "pressed" effect */
box-shadow:
var(--soft-ui-shadow-inset-dark),
var(--soft-ui-shadow-inset-light);
/* Return to original position */
transform: translateY(0);
}
/* Focus State - Accessibility */
.btn-soft-ui:focus {
outline: none;
/* Focus ring using brand color */
box-shadow:
var(--soft-ui-shadow-dark),
var(--soft-ui-shadow-light),
0 0 0 3px rgba(0, 51, 117, 0.2);
}
.btn-soft-ui:focus:active {
/* Maintain pressed state while focused */
box-shadow:
var(--soft-ui-shadow-inset-dark),
var(--soft-ui-shadow-inset-light),
0 0 0 3px rgba(0, 51, 117, 0.2);
}
/* Disabled State */
.btn-soft-ui:disabled,
.btn-soft-ui.disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
/* Keep normal shadow, just dimmed via opacity */
}
.btn-soft-ui:disabled:hover,
.btn-soft-ui.disabled:hover {
transform: none;
box-shadow:
var(--soft-ui-shadow-dark),
var(--soft-ui-shadow-light);
}
/* SVG Icon Styling - Neutral Variant */
.btn-soft-ui svg {
/* Fixed size for consistency */
width: var(--soft-ui-icon-size);
height: var(--soft-ui-icon-size);
/* Stroke-based icons inherit button text color */
stroke: var(--soft-ui-text);
color: var(--soft-ui-text);
/* Ensure no fill for stroke-based icons */
fill: none;
/* Smooth color transitions */
transition: stroke var(--soft-ui-transition), color var(--soft-ui-transition);
/* Prevent icon shrinking in flex container */
flex-shrink: 0;
}
/* ----------------------------------------
Accent Variant - Primary Color Tint
----------------------------------------
Use for primary actions within soft UI context.
Combines neumorphic depth with brand color hint.
---------------------------------------- */
.btn-soft-ui.btn-soft-ui-accent {
/* Light tint of primary color */
background: var(--soft-ui-accent-bg);
/* Primary brand color for text */
color: var(--soft-ui-accent-color);
}
.btn-soft-ui.btn-soft-ui-accent:hover {
/* Deeper tint on hover */
background: var(--soft-ui-accent-bg-hover);
/* Shadows remain the same for consistent depth */
box-shadow:
var(--soft-ui-shadow-dark-hover),
var(--soft-ui-shadow-light-hover);
}
.btn-soft-ui.btn-soft-ui-accent:active {
/* Pressed state with accent background */
background: var(--soft-ui-accent-bg-hover);
}
/* SVG Icon Styling - Accent Variant */
.btn-soft-ui.btn-soft-ui-accent svg {
/* Primary color for stroke-based icons */
stroke: var(--soft-ui-accent-color);
color: var(--soft-ui-accent-color);
}
/* ----------------------------------------
Size Variants (30% smaller than original)
---------------------------------------- */
/* Extra Small - For tiny inline actions */
.btn-soft-ui.btn-soft-ui-xs {
padding: 3px 7px;
font-size: var(--font-size-xs);
border-radius: 6px;
gap: 3px;
}
.btn-soft-ui.btn-soft-ui-xs svg {
width: 12px;
height: 12px;
}
/* Small - For compact areas */
.btn-soft-ui.btn-soft-ui-sm {
padding: 4px 10px;
font-size: var(--font-size-sm);
border-radius: 7px;
gap: 4px;
}
.btn-soft-ui.btn-soft-ui-sm svg {
width: 14px;
height: 14px;
}
/* Large - For prominent actions */
.btn-soft-ui.btn-soft-ui-lg {
padding: 10px 20px;
font-size: var(--font-size-md);
border-radius: 10px;
gap: 7px;
}
.btn-soft-ui.btn-soft-ui-lg svg {
width: 18px;
height: 18px;
}
/* Icon-only button (square) */
.btn-soft-ui.btn-soft-ui-icon {
padding: 7px;
gap: 0;
}
.btn-soft-ui.btn-soft-ui-icon.btn-soft-ui-xs {
padding: 4px;
}
.btn-soft-ui.btn-soft-ui-icon.btn-soft-ui-sm {
padding: 6px;
}
.btn-soft-ui.btn-soft-ui-icon.btn-soft-ui-lg {
padding: 10px;
}
/* ----------------------------------------
Additional Color Variants
---------------------------------------- */
/* Primary - Solid dark (main CTAs) */
.btn-soft-ui.btn-soft-ui-primary {
background: var(--color-primary);
color: var(--color-text-inverse);
}
.btn-soft-ui.btn-soft-ui-primary:hover {
background: var(--color-primary-hover);
}
.btn-soft-ui.btn-soft-ui-primary svg {
stroke: var(--color-text-inverse);
color: var(--color-text-inverse);
}
/* Success - Green */
.btn-soft-ui.btn-soft-ui-success {
background: rgba(16, 185, 129, 0.1);
color: var(--color-success);
}
.btn-soft-ui.btn-soft-ui-success:hover {
background: rgba(16, 185, 129, 0.18);
}
.btn-soft-ui.btn-soft-ui-success svg {
stroke: var(--color-success);
color: var(--color-success);
}
/* Danger - Red */
.btn-soft-ui.btn-soft-ui-danger {
background: rgba(239, 68, 68, 0.1);
color: var(--color-error);
}
.btn-soft-ui.btn-soft-ui-danger:hover {
background: rgba(239, 68, 68, 0.18);
}
.btn-soft-ui.btn-soft-ui-danger svg {
stroke: var(--color-error);
color: var(--color-error);
}
/* Warning - Yellow/Orange */
.btn-soft-ui.btn-soft-ui-warning {
background: rgba(245, 158, 11, 0.1);
color: var(--color-warning-text);
}
.btn-soft-ui.btn-soft-ui-warning:hover {
background: rgba(245, 158, 11, 0.18);
}
.btn-soft-ui.btn-soft-ui-warning svg {
stroke: var(--color-warning-text);
color: var(--color-warning-text);
}
/* Ghost - Transparent */
.btn-soft-ui.btn-soft-ui-ghost {
background: transparent;
box-shadow: none;
color: var(--color-text-secondary);
}
.btn-soft-ui.btn-soft-ui-ghost:hover {
background: var(--color-bg-hover);
box-shadow: none;
transform: none;
}
.btn-soft-ui.btn-soft-ui-ghost:active {
background: var(--color-bg-active);
box-shadow: none;
}
.btn-soft-ui.btn-soft-ui-ghost svg {
stroke: var(--color-text-secondary);
color: var(--color-text-secondary);
}
/* ----------------------------------------
Button Group
---------------------------------------- */
.btn-group {
display: inline-flex;
gap: var(--space-2);
}
.btn-group .btn-soft-ui {
border-radius: var(--soft-ui-radius);
}
/* ==========================================
UI BADGES (From Macro System)
==========================================
Status badges, counts, and labels.
========================================== */
.ui-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
line-height: 1.4;
border-radius: var(--radius-full);
white-space: nowrap;
}
.ui-badge.badge-sm {
padding: 1px 6px;
font-size: 10px;
}
/* Badge Variants */
.ui-badge.badge-neutral {
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
}
.ui-badge.badge-draft {
background: #f3f4f6;
color: #6b7280;
}
.ui-badge.badge-sent {
background: var(--color-info-light);
color: var(--color-info-text);
}
.ui-badge.badge-success {
background: var(--color-success-light);
color: var(--color-success-text);
}
.ui-badge.badge-danger {
background: var(--color-error-light);
color: var(--color-error-text);
}
.ui-badge.badge-warning {
background: var(--color-warning-light);
color: var(--color-warning-text);
}
.ui-badge.badge-info {
background: var(--color-info-light);
color: var(--color-info-text);
}
.ui-badge.badge-primary {
background: var(--soft-ui-accent-bg);
color: var(--soft-ui-accent-color);
}
.ui-badge.badge-count {
background: var(--color-error);
color: white;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 11px;
font-weight: var(--font-weight-semibold);
justify-content: center;
}
/* ==========================================
UI ALERTS (From Macro System)
==========================================
Feedback messages for user actions.
========================================== */
.ui-alert {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
.ui-alert .alert-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ui-alert .alert-icon svg {
width: 20px;
height: 20px;
}
.ui-alert .alert-message {
flex: 1;
}
.ui-alert .alert-dismiss {
flex-shrink: 0;
background: transparent;
border: none;
cursor: pointer;
padding: 2px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
transition: opacity var(--transition-fast);
}
.ui-alert .alert-dismiss:hover {
opacity: 1;
}
.ui-alert .alert-dismiss svg {
width: 16px;
height: 16px;
}
/* Alert Variants */
.ui-alert.alert-success {
background: var(--color-success-light);
border: 1px solid var(--color-success-border);
color: var(--color-success-text);
}
.ui-alert.alert-success .alert-icon svg {
stroke: var(--color-success);
}
.ui-alert.alert-error {
background: var(--color-error-light);
border: 1px solid var(--color-error-border);
color: var(--color-error-text);
}
.ui-alert.alert-error .alert-icon svg {
stroke: var(--color-error);
}
.ui-alert.alert-warning {
background: var(--color-warning-light);
border: 1px solid var(--color-warning-border);
color: var(--color-warning-text);
}
.ui-alert.alert-warning .alert-icon svg {
stroke: var(--color-warning);
}
.ui-alert.alert-info {
background: var(--color-info-light);
border: 1px solid var(--color-info-border);
color: var(--color-info-text);
}
.ui-alert.alert-info .alert-icon svg {
stroke: var(--color-info);
}
/* ==========================================
UI DROPDOWN (From Macro System)
==========================================
Dropdown button with menu.
========================================== */
.ui-dropdown {
position: relative;
display: inline-block;
}
.ui-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
min-width: 180px;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: var(--z-dropdown);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all var(--transition-base);
}
.ui-dropdown-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ui-dropdown-item {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-base);
color: var(--color-text-primary);
background: transparent;
border: none;
text-align: left;
cursor: pointer;
transition: background var(--transition-fast);
text-decoration: none;
}
.ui-dropdown-item:hover {
background: var(--color-bg-hover);
}
.ui-dropdown-item:first-child {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ui-dropdown-item:last-child {
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.ui-dropdown-item:only-child {
border-radius: var(--radius-lg);
}
.ui-dropdown-item svg {
width: 16px;
height: 16px;
stroke: var(--color-text-secondary);
flex-shrink: 0;
}
.ui-dropdown-divider {
height: 1px;
background: var(--color-border-tertiary);
margin: var(--space-1) 0;
}
/* ==========================================
CARDS
========================================== */
.card {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.card-header {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border-tertiary);
}
.card-header-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin: 0;
}
.card-header-subtitle {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
margin: var(--space-1) 0 0 0;
}
.card-body {
padding: var(--space-5);
}
.card-footer {
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--color-border-tertiary);
background: var(--color-bg-secondary);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Card Variants */
.card-compact .card-body {
padding: var(--space-4);
}
.card-flat {
box-shadow: none;
}
/* ==========================================
FORMS
========================================== */
.form-group {
margin-bottom: var(--space-4);
}
.form-label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-label-required::after,
.form-label.required::after {
content: ' *';
color: var(--color-error);
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: var(--space-2) var(--space-3);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
color: var(--color-text-primary);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
transition: all var(--transition-base);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-border-focus);
box-shadow: var(--shadow-focus);
}
.form-input::placeholder {
color: var(--color-text-placeholder);
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
background: var(--color-bg-tertiary);
cursor: not-allowed;
}
/* Input Sizes */
.form-input-sm {
padding: 6px var(--space-2);
font-size: var(--font-size-sm);
}
.form-input-lg {
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-md);
}
/* Input States */
.form-input-error {
border-color: var(--color-error);
}
.form-input-error:focus {
box-shadow: var(--shadow-focus-error);
}
.form-error-message {
margin-top: var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-error);
}
.form-help-text {
margin-top: var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
/* ==========================================
TABLES
========================================== */
.table-container {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-base);
}
.table th {
background: var(--color-bg-secondary);
padding: var(--space-3) var(--space-4);
text-align: left;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--color-border-primary);
}
.table td {
padding: var(--space-3) var(--space-4);
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border-tertiary);
vertical-align: middle;
}
.table tbody tr:hover {
background: var(--color-bg-hover);
}
.table tbody tr:last-child td {
border-bottom: none;
}
/* Table Variants */
.table-compact th,
.table-compact td {
padding: var(--space-2) var(--space-3);
}
.table-striped tbody tr:nth-child(even) {
background: var(--color-bg-secondary);
}
/* ==========================================
BADGES & STATUS
========================================== */
.badge {
display: inline-flex;
align-items: center;
padding: 3px var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.3px;
border-radius: var(--radius-sm);
}
/* Status Badges */
.badge-draft {
background: var(--color-status-draft);
color: var(--color-text-inverse);
}
.badge-sent {
background: var(--color-status-sent);
color: var(--color-text-inverse);
}
.badge-accepted,
.badge-success {
background: var(--color-status-accepted);
color: var(--color-text-inverse);
}
.badge-declined,
.badge-error {
background: var(--color-status-declined);
color: var(--color-text-inverse);
}
.badge-expired,
.badge-warning {
background: var(--color-status-expired);
color: var(--color-text-inverse);
}
.badge-inactive {
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
}
/* Void status badge */
.badge-void {
background-color: #dc2626;
color: #ffffff;
border: 1px solid #b91c1c;
}
/* Sales Order linked indicator badge */
.badge-so {
display: inline-flex;
align-items: center;
background: #dbeafe;
color: #1e40af;
border: 1px solid #93c5fd;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
margin-left: 6px;
}
/* P2.5b: Partial conversion badge (yellow/amber) */
.badge-so-partial {
background: #fef3c7;
color: #92400e;
border-color: #fbbf24;
}
/* Outline Badges */
.badge-outline {
background: transparent;
border: 1px solid currentColor;
}
.badge-outline.badge-success {
background: var(--color-success-light);
color: var(--color-success);
border-color: var(--color-success);
}
.badge-outline.badge-error {
background: var(--color-error-light);
color: var(--color-error);
border-color: var(--color-error);
}
/* ==========================================
STATS CARDS
========================================== */
.stats-row {
display: flex;
gap: 1px;
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-border-primary);
}
.stat-card {
flex: 1;
padding: var(--space-3) var(--space-4);
background: var(--color-bg-secondary);
}
.stat-card:not(:last-child) {
border-right: 1px solid var(--color-border-primary);
}
.stat-label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-1);
}
.stat-value {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
/* ==========================================
ALERTS & MESSAGES
========================================== */
.alert {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
border: 1px solid;
}
.alert-success {
background: var(--color-success-light);
color: var(--color-success-text);
border-color: var(--color-success-border);
}
.alert-error {
background: var(--color-error-light);
color: var(--color-error-text);
border-color: var(--color-error-border);
}
.alert-warning {
background: var(--color-warning-light);
color: var(--color-warning-text);
border-color: var(--color-warning-border);
}
.alert-info {
background: var(--color-info-light);
color: var(--color-info-text);
border-color: var(--color-info-border);
}
/* ==========================================
MODALS
========================================== */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: var(--z-modal-backdrop);
opacity: 0;
visibility: hidden;
transition: all var(--transition-base);
}
.modal-backdrop.active {
opacity: 1;
visibility: visible;
}
/* When backdrop is active, show the modal inside it */
.modal-backdrop.active .modal {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
width: 90%;
max-width: 500px;
max-height: 90vh;
background: var(--color-bg-primary);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
z-index: var(--z-modal);
opacity: 0;
visibility: hidden;
transition: all var(--transition-base);
display: flex;
flex-direction: column;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
/* Bootstrap 5 modal compatibility - override custom modal styles */
.modal.fade {
opacity: 1;
visibility: visible;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
transform: none;
background: transparent;
display: none;
z-index: 1055;
}
.modal.fade.show {
display: block;
}
.modal-header {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border-tertiary);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin: 0;
}
.modal-close {
background: none;
border: none;
font-size: var(--font-size-xl);
color: var(--color-text-muted);
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--transition-fast);
}
.modal-close:hover {
color: var(--color-text-primary);
}
.modal-body {
padding: var(--space-5);
overflow-y: auto;
flex: 1;
}
.modal-footer {
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--color-border-tertiary);
display: flex;
gap: var(--space-3);
justify-content: flex-end;
}
/* Modal Sizes */
.modal-sm {
max-width: 350px;
}
.modal-lg {
max-width: 700px;
}
.modal-xl {
max-width: 900px;
}
/* ==========================================
PILLS & CHIPS
========================================== */
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
background: var(--color-bg-tertiary);
border-radius: var(--radius-full);
}
.pill-removable {
padding-right: var(--space-1);
}
.pill-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
background: transparent;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition-fast);
}
.pill-remove:hover {
background: var(--color-bg-active);
color: var(--color-text-primary);
}
/* Selectable pill variant for toggles */
.pill-selectable {
cursor: pointer;
transition: all var(--transition-fast);
border: 1px solid transparent;
}
.pill-selectable:hover {
background: var(--color-bg-active);
}
.pill-selectable input[type="checkbox"] {
margin-right: var(--space-1);
cursor: pointer;
}
.pill-selectable.selected {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
}
/* ==========================================
TAGS (Colored Labels)
========================================== */
.tag {
display: inline-flex;
align-items: center;
padding: 2px var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-sm);
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
}
/* Tag with custom color - use inline style for background */
.tag[style*="background"] {
color: var(--color-text-inverse);
}
/* ==========================================
EMPTY STATES
========================================== */
.empty-state {
text-align: center;
padding: var(--space-12) var(--space-6);
color: var(--color-text-secondary);
}
.empty-state-icon {
font-size: 48px;
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
.empty-state-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin-bottom: var(--space-2);
}
.empty-state-description {
font-size: var(--font-size-base);
margin-bottom: var(--space-5);
}
/* ==========================================
ROW ACTIONS (Table hover actions)
========================================== */
.row-actions {
display: inline-flex;
gap: var(--space-1);
opacity: 0;
transition: opacity var(--transition-fast);
}
tr:hover .row-actions {
opacity: 1;
}
/* Always visible on touch devices */
@media (hover: none) {
.row-actions {
opacity: 1;
}
}
/* ==========================================
PAGE HEADER
========================================== */
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-5);
}
.page-header-content {
flex: 1;
}
.page-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin: 0 0 var(--space-1) 0;
}
.page-subtitle {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
margin: 0;
}
.page-actions {
display: flex;
gap: var(--space-3);
align-items: center;
}
/* ==========================================
SECTION CARDS (Two-column layout)
========================================== */
.section-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
@media (max-width: 768px) {
.section-grid {
grid-template-columns: 1fr;
}
}
.section-card {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
padding: var(--space-5);
}
.section-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-4);
}
.section-card-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin: 0 0 var(--space-1) 0;
}
.section-card-description {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
margin: 0;
}
.section-card-actions {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
/* ==========================================
UTILITY CLASSES
========================================== */
/* Text */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.strong { font-weight: var(--font-weight-semibold, 600); }
/* Spacing */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mr-2 { margin-right: var(--space-2); }
.ml-2 { margin-left: var(--space-2); }
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.flex-1 { flex: 1; }
/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
/* Width */
.w-full { width: 100%; }
.w-auto { width: auto; }
/* Cursor */
.cursor-pointer { cursor: pointer; }
/* Visibility based on feature flags - use with Jinja */
.feature-hidden { display: none !important; }
/* ==========================================
FILTER PANEL
==========================================
Collapsible filter container for list pages.
Use on: Products, Customers, Quotations, etc.
Structure:
========================================== */
.filter-panel {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
margin-bottom: var(--space-4);
}
.filter-panel-header {
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border-primary);
padding: var(--space-3) var(--space-4);
display: flex;
justify-content: space-between;
align-items: center;
}
.filter-panel-title {
display: flex;
align-items: center;
flex: 1;
}
.filter-panel-toggle {
background: none;
border: none;
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: var(--space-2);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
cursor: pointer;
padding: 0;
transition: color var(--transition-fast);
width: 100%;
text-align: left;
}
.filter-panel-toggle:hover {
color: var(--color-text-secondary);
}
.filter-panel-toggle i {
font-size: var(--font-size-base);
}
.filter-panel-toggle .toggle-icon {
margin-left: auto;
transition: transform var(--transition-base);
}
.filter-panel-toggle[aria-expanded="false"] .toggle-icon {
transform: rotate(180deg);
}
.filter-panel-actions {
display: flex;
gap: var(--space-2);
align-items: center;
}
.filter-panel-content {
padding: 12px 16px;
overflow: hidden;
transition: max-height var(--transition-base), padding var(--transition-base);
max-height: 1000px;
}
.filter-panel-content.collapsed {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Filter Search Row */
.filter-panel-search {
margin-bottom: var(--space-4);
display: flex;
justify-content: center;
}
.filter-panel-search .search-input-wrapper {
width: 100%;
max-width: 400px;
}
/* Clear Filters Button */
.btn-clear-filters {
background: var(--color-text-secondary);
color: var(--color-text-inverse);
border: none;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all var(--transition-fast);
display: flex;
align-items: center;
gap: var(--space-1);
box-shadow: var(--shadow-xs);
}
.btn-clear-filters:hover {
background: var(--color-text-primary);
box-shadow: var(--shadow-sm);
}
/* Column Visibility Button */
.btn-column-visibility {
background: var(--color-bg-primary);
color: var(--color-text-secondary);
border: 1px solid var(--color-border-primary);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all var(--transition-fast);
display: flex;
align-items: center;
gap: var(--space-1);
}
.btn-column-visibility:hover {
background: var(--color-bg-secondary);
border-color: var(--color-border-secondary);
color: var(--color-text-primary);
}
/* ==========================================
FILTER GRID
==========================================
Responsive grid layout for filter inputs.
Structure:
========================================== */
.filter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin-top: 10px;
}
.filter-grid-item {
display: flex;
flex-direction: column;
}
.filter-label {
display: block;
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
margin-bottom: var(--space-1);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-input,
.filter-select {
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
transition: all var(--transition-fast);
background: var(--color-bg-primary);
color: var(--color-text-primary);
width: 100%;
}
.filter-input:focus,
.filter-select:focus {
border-color: var(--color-text-secondary);
box-shadow: 0 0 0 1px rgba(107, 114, 128, 0.2);
outline: none;
}
.filter-input::placeholder {
color: var(--color-text-muted);
}
/* ==========================================
DATA TABLE
==========================================
Professional table with sorting, resizing,
and sticky headers.
Structure:
========================================== */
.data-table-wrapper {
width: 100%;
flex: 1;
min-height: 0; /* Critical for flex shrinking */
overflow-x: auto;
overflow-y: auto;
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
background: var(--color-bg-primary);
position: relative;
scrollbar-width: auto;
scrollbar-color: var(--color-text-secondary) var(--color-border-primary);
scrollbar-gutter: stable both-edges;
-webkit-overflow-scrolling: touch;
}
/* Scrollbar styling */
.data-table-wrapper::-webkit-scrollbar {
height: 16px;
width: 16px;
background: var(--color-border-primary);
}
.data-table-wrapper::-webkit-scrollbar-track {
background: var(--color-border-primary);
border-radius: 0;
}
.data-table-wrapper::-webkit-scrollbar-thumb {
background: var(--color-text-secondary);
border-radius: var(--radius-lg);
border: 2px solid var(--color-border-primary);
min-height: 40px;
}
.data-table-wrapper::-webkit-scrollbar-thumb:hover {
background: var(--color-text-primary);
}
.data-table-wrapper::-webkit-scrollbar-corner {
background: var(--color-border-primary);
}
/* Table container for natural sizing */
.data-table-container {
display: block;
width: max-content;
min-width: 100%;
-webkit-overflow-scrolling: touch;
}
/* Main table styles */
.data-table {
width: auto !important;
min-width: max-content !important;
margin-bottom: 0;
border-collapse: separate;
border-spacing: 0;
white-space: nowrap;
table-layout: auto !important;
}
.data-table thead th {
position: sticky;
top: 0;
z-index: 4;
background: var(--color-bg-primary);
padding: var(--space-3) var(--space-4);
text-align: left;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
white-space: nowrap;
border-bottom: 1px solid var(--color-border-primary);
min-width: 150px !important;
}
.data-table tbody tr:nth-child(even) {
background: var(--color-bg-secondary);
}
.data-table tbody tr:hover {
background: var(--color-bg-hover);
}
.data-table tbody td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-tertiary);
color: var(--color-text-primary);
font-size: var(--font-size-sm);
min-width: 150px !important;
white-space: nowrap;
}
/* Checkbox column */
.data-table .checkbox-column {
width: 40px;
min-width: 40px !important;
text-align: center;
}
/* Actions column */
.data-table .actions-column {
min-width: 220px !important;
text-align: left;
}
/* Resizable columns */
.data-table .resizable-column {
position: relative;
}
.data-table .column-resizer {
position: absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: transparent;
cursor: col-resize;
user-select: none;
z-index: 15;
}
.data-table .column-resizer:hover {
background: rgba(107, 114, 128, 0.3);
}
.data-table .column-resizer.resizing {
background: var(--color-text-secondary);
}
/* Sortable columns */
.data-table .sortable {
cursor: pointer;
user-select: none;
position: relative;
transition: background-color var(--transition-fast);
}
.data-table .sortable:hover {
background-color: var(--color-bg-secondary);
}
.data-table .sortable.sorted {
background-color: var(--color-info-light);
}
.data-table .sort-indicator {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-left: var(--space-1);
}
/* Column header structure */
.data-table .column-header {
display: flex;
align-items: center;
gap: var(--space-1);
width: 100%;
position: relative;
}
.data-table .column-title {
flex: 1;
min-width: 0;
}
/* Hidden column utility */
.data-table .hidden-column {
display: none !important;
}
/* Responsive landscape mode */
@media screen and (max-height: 600px) and (orientation: landscape) {
.data-table-wrapper {
max-height: calc(100vh - 120px) !important;
height: calc(100vh - 120px) !important;
}
}
/* ==========================================
TAB BAR
==========================================
Horizontal navigation tabs.
Structure:
========================================== */
.tab-bar-container {
margin-bottom: var(--space-5);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.tab-bar {
border-bottom: 2px solid var(--color-border-primary);
margin-bottom: 0;
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
list-style: none;
padding: 0;
margin: 0;
}
.tab-bar-item {
margin-bottom: -2px;
flex-shrink: 0;
}
.tab-bar-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
border: none;
border-bottom: 3px solid transparent;
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
padding: var(--space-3) var(--space-5);
transition: all var(--transition-fast);
background: transparent;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.tab-bar-link:hover {
color: var(--color-text-primary);
background-color: var(--color-bg-secondary);
border-bottom-color: var(--color-border-secondary);
}
.tab-bar-link.active {
color: var(--color-brand-blue);
border-bottom-color: var(--color-brand-blue);
background-color: var(--color-info-light);
}
.tab-bar-link i {
margin-right: var(--space-1);
}
.tab-bar-link .badge {
margin-left: var(--space-2);
}
/* ==========================================
SELECTION TOOLBAR
==========================================
Floating toolbar for bulk actions.
Structure:
========================================== */
.selection-toolbar {
position: fixed;
bottom: var(--space-5);
left: 50%;
transform: translateX(-50%);
background: var(--color-primary);
color: var(--color-text-inverse);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
z-index: var(--z-sticky);
display: none;
}
.selection-toolbar.active {
display: block;
}
.selection-toolbar-content {
display: flex;
align-items: center;
gap: var(--space-4);
}
.selection-count {
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
}
.selection-toolbar-actions {
display: flex;
gap: var(--space-2);
}
/* ==========================================
LOADING SPINNER
==========================================
Apple-style loading spinner.
Structure:
========================================== */
.loading-spinner-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 100;
}
.loading-spinner {
width: 40px;
height: 40px;
position: relative;
}
.spinner-blade {
position: absolute;
left: 50%;
top: 50%;
width: 4px;
height: 12px;
margin-left: -2px;
margin-top: -6px;
border-radius: 3px;
background-color: var(--color-text-muted);
transform-origin: center -8px;
animation: spinner-fade 1s infinite linear;
}
.spinner-blade:nth-child(1) { transform: rotate(0deg); animation-delay: -1.0833s; }
.spinner-blade:nth-child(2) { transform: rotate(30deg); animation-delay: -1.0000s; }
.spinner-blade:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9167s; }
.spinner-blade:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8333s; }
.spinner-blade:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7500s; }
.spinner-blade:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6667s; }
.spinner-blade:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5833s; }
.spinner-blade:nth-child(8) { transform: rotate(210deg); animation-delay: -0.5000s; }
.spinner-blade:nth-child(9) { transform: rotate(240deg); animation-delay: -0.4167s; }
.spinner-blade:nth-child(10) { transform: rotate(270deg); animation-delay: -0.3333s; }
.spinner-blade:nth-child(11) { transform: rotate(300deg); animation-delay: -0.2500s; }
.spinner-blade:nth-child(12) { transform: rotate(330deg); animation-delay: -0.1667s; }
@keyframes spinner-fade {
0% { background-color: var(--color-text-primary); }
100% { background-color: transparent; }
}
.loading-text {
margin-top: var(--space-4);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
}
/* ==========================================
COLUMN VISIBILITY MODAL
==========================================
Modal for showing/hiding table columns.
Structure:
========================================== */
.column-visibility-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
opacity: 0;
visibility: hidden;
transition: all var(--transition-base);
}
.column-visibility-modal.active {
opacity: 1;
visibility: visible;
}
.column-visibility-modal .modal-content {
background: var(--color-bg-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
width: 90%;
max-width: 400px;
max-height: 80vh;
display: flex;
flex-direction: column;
}
.column-visibility-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
transition: background var(--transition-fast);
}
.column-visibility-item:hover {
background: var(--color-bg-hover);
}
.column-visibility-item input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
.column-visibility-item label {
flex: 1;
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
}
/* ==========================================
TOOLTIP
==========================================
Generic tooltip component.
========================================== */
.tooltip {
position: fixed;
background: var(--color-primary);
color: var(--color-text-inverse);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
pointer-events: none;
z-index: 10000;
white-space: nowrap;
box-shadow: var(--shadow-lg);
transform: translate(-50%, -120%);
}
.tooltip::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--color-primary);
}
/* ==========================================
IMAGE THUMBNAIL
==========================================
Product/item thumbnail with hover preview.
========================================== */
.thumbnail-container {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
max-width: 50px;
max-height: 50px;
cursor: pointer;
overflow: hidden;
}
.thumbnail {
max-width: 50px;
max-height: 50px;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border-primary);
transition: all var(--transition-fast);
display: block;
background-color: var(--color-bg-secondary);
}
.thumbnail:hover {
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
/* Thumbnail preview tooltip */
.thumbnail-tooltip {
position: fixed;
width: 300px;
height: 300px;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: var(--space-2);
z-index: 10000;
display: none;
pointer-events: none;
}
.thumbnail-tooltip img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* ==========================================
ACTION BUTTONS GROUP
==========================================
Grouped action buttons for table rows.
========================================== */
.action-buttons {
display: flex;
gap: var(--space-2);
align-items: center;
white-space: nowrap;
}
.action-buttons .btn {
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
}
/* ==========================================
DROPDOWN PANEL
==========================================
Generic dropdown panel (for quotation picker, etc.)
========================================== */
.dropdown-panel {
position: absolute;
top: 100%;
right: 0;
margin-top: var(--space-1);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
min-width: 320px;
max-width: 400px;
z-index: var(--z-dropdown);
}
.dropdown-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
font-size: var(--font-size-sm);
}
.dropdown-panel-header .close-btn {
background: none;
border: none;
font-size: var(--font-size-xl);
line-height: 1;
color: var(--color-text-muted);
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast);
}
.dropdown-panel-header .close-btn:hover {
background-color: var(--color-bg-hover);
color: var(--color-text-primary);
}
.dropdown-panel-body {
max-height: 400px;
overflow-y: auto;
}
.dropdown-panel-loading {
padding: var(--space-6);
text-align: center;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.dropdown-panel-list {
padding: var(--space-2);
}
.dropdown-panel-item {
padding: var(--space-3);
border-radius: var(--radius-md);
cursor: pointer;
transition: background-color var(--transition-fast);
margin-bottom: var(--space-1);
}
.dropdown-panel-item:hover {
background-color: var(--color-bg-hover);
}
.dropdown-panel-empty {
padding: var(--space-6);
text-align: center;
}
.dropdown-panel-empty p {
color: var(--color-text-secondary);
margin-bottom: var(--space-3);
font-size: var(--font-size-sm);
}
/* ==========================================
DATA TABLE - MODERN SORT INDICATORS
==========================================
Clean, CSS-only sort indicators.
No text/Unicode - pure CSS triangles.
========================================== */
/* Sort indicator container */
.data-table .sort-indicator {
display: inline-flex;
align-items: center;
margin-left: 4px;
opacity: 0;
transition: opacity 0.15s ease;
}
/* Default arrow (up) using CSS triangle */
.data-table .sort-indicator::after {
content: '';
display: block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 5px solid currentColor;
}
/* Show subtle indicator on hover */
.data-table .sortable:hover .sort-indicator {
opacity: 0.4;
}
/* Active sorted state - full opacity */
.data-table .sortable.sorted .sort-indicator {
opacity: 1;
}
/* Ascending sort - arrow pointing up */
.data-table .sortable.sorted.sort-asc .sort-indicator::after {
border-bottom: 5px solid var(--color-brand-blue);
border-top: none;
}
/* Descending sort - arrow pointing down */
.data-table .sortable.sorted.sort-desc .sort-indicator::after {
border-bottom: none;
border-top: 5px solid var(--color-brand-blue);
}
/* Sorted column header highlight */
.data-table .sortable.sorted {
background: var(--color-bg-secondary);
}
.data-table .sortable.sorted .column-title {
color: var(--color-brand-blue);
font-weight: var(--font-weight-semibold);
}
/* ==========================================
DATA TABLE - COLUMN REORDER CONTROLS
==========================================
Modern, subtle column move buttons.
Hidden by default, appear on header hover.
========================================== */
/* Container for move buttons */
.data-table .column-move-controls {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
display: flex;
flex-direction: row;
gap: 2px;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
z-index: 10;
}
/* Show on header hover */
.data-table th.moveable-column:hover .column-move-controls {
opacity: 1;
visibility: visible;
}
/* Individual move buttons */
.data-table .move-left-btn,
.data-table .move-right-btn {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s ease;
}
.data-table .move-left-btn:hover,
.data-table .move-right-btn:hover {
background: var(--color-primary);
color: var(--color-text-inverse);
}
.data-table .move-left-btn:active,
.data-table .move-right-btn:active {
transform: scale(0.9);
}
/* Icon sizing */
.data-table .move-left-btn i,
.data-table .move-right-btn i {
font-size: 10px;
}
/* Adjust column header to make room for controls */
.data-table th.moveable-column {
padding-right: 50px;
}
/* Hide controls when column is being sorted (avoid clutter) */
.data-table th.moveable-column.sorted .column-move-controls {
display: none;
}
/* Ensure moveable columns have relative positioning for controls */
.data-table th.moveable-column {
position: relative;
}
/* ==========================================
FULL-HEIGHT PAGE LAYOUT
==========================================
Flexbox layout for pages with data tables.
Table fills available space, pagination at bottom.
========================================== */
.products-page-wrapper {
display: flex;
flex-direction: column;
height: calc(100vh - 60px); /* Viewport minus navbar */
min-height: 0; /* Critical for nested flex */
gap: var(--space-3);
}
/* Ensure filter panel doesn't flex-grow */
.products-page-wrapper .filter-panel {
flex-shrink: 0;
}
/* Ensure tabs don't flex-grow */
.products-page-wrapper .tab-bar-container {
flex-shrink: 0;
}
/* Ensure page header doesn't flex-grow */
.products-page-wrapper .page-header {
flex-shrink: 0;
}
/* Pagination bar at bottom */
.pagination-bar {
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) 0;
border-top: 1px solid var(--color-border-tertiary);
background: var(--color-bg-primary);
margin-top: auto;
}
.pagination-bar .pagination-info {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.pagination-bar .pagination {
margin: 0;
gap: 2px;
}
.pagination-bar .pagination .page-link {
padding: 6px 12px;
font-size: var(--font-size-sm);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-primary);
color: var(--color-text-primary);
background: var(--color-bg-primary);
transition: all var(--transition-fast);
}
.pagination-bar .pagination .page-link:hover {
background: var(--color-bg-secondary);
border-color: var(--color-border-secondary);
}
.pagination-bar .pagination .page-item.active .page-link {
background: var(--color-brand-blue);
border-color: var(--color-brand-blue);
color: var(--color-text-inverse);
}
.pagination-bar .pagination .page-item.disabled .page-link {
opacity: 0.5;
cursor: not-allowed;
}
/* ==========================================
ACTIVE FILTER PILLS
==========================================
Shows active filters as removable pills.
Visible in filter header, especially when collapsed.
========================================== */
.active-filters-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-left: var(--space-3);
flex: 1;
min-width: 0;
overflow: hidden;
min-height: 24px; /* Ensure container has height even when empty */
}
/* Individual filter pill */
.filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 10px;
background: var(--color-info-light);
border: 1px solid var(--color-info-border);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
color: var(--color-info-text);
max-width: 200px;
animation: pillFadeIn 0.2s ease;
}
@keyframes pillFadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.filter-pill-label {
font-weight: var(--font-weight-medium);
white-space: nowrap;
}
.filter-pill-value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}
.filter-pill-remove {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--color-info-text);
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.filter-pill-remove:hover {
background: var(--color-info);
color: var(--color-text-inverse);
}
.filter-pill-remove i {
font-size: 10px;
}
/* "+N more" indicator */
.filter-pills-more {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
padding: 4px 8px;
background: var(--color-bg-tertiary);
border-radius: var(--radius-full);
white-space: nowrap;
}
/* Hide pills when filter panel is expanded (optional - can show always) */
/* Uncomment below if you want pills only when collapsed */
/*
.filter-panel-content:not(.collapsed) ~ .filter-panel-header .active-filters-pills {
display: none;
}
*/
/* Ensure pills are always visible in header */
.filter-panel-header {
flex-wrap: wrap;
gap: var(--space-2);
}
/* Adjust filter panel title for pills */
.filter-panel-title {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
gap: var(--space-2);
}
/* ==========================================
TABS COMPONENT
==========================================
Reusable tab navigation component.
Usage:
========================================== */
.tabs {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
overflow: hidden;
}
.tabs-nav {
display: flex;
gap: 0;
border-bottom: 1px solid var(--color-border-primary);
background: var(--color-bg-secondary);
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tabs-nav::-webkit-scrollbar {
display: none;
}
.tab-btn {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border: none;
background: transparent;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all var(--transition-fast);
white-space: nowrap;
}
.tab-btn:hover {
color: var(--color-brand-blue);
background: var(--color-bg-hover);
}
.tab-btn.active {
color: var(--color-brand-blue);
border-bottom-color: var(--color-brand-blue);
background: var(--color-bg-primary);
}
.tab-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.tab-btn .tab-badge {
font-size: var(--font-size-xs);
padding: 2px 6px;
border-radius: var(--radius-full);
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
}
.tab-btn.active .tab-badge {
background: var(--color-brand-blue-light);
color: var(--color-brand-blue);
}
.tabs-content {
padding: var(--space-5);
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
animation: tabFadeIn 0.2s ease;
}
@keyframes tabFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Tab panel grid layouts */
.tab-grid {
display: grid;
gap: var(--space-4);
}
.tab-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.tab-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
.tab-btn {
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-xs);
}
.tabs-content {
padding: var(--space-4);
}
.tab-grid-2,
.tab-grid-3 {
grid-template-columns: 1fr;
}
}
/* Tab section cards - for content blocks within tabs */
.tab-section {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.tab-section-header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.tab-section-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--color-bg-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tab-section-icon svg {
width: 20px;
height: 20px;
color: var(--color-text-secondary);
}
.tab-section-icon.icon-primary {
background: var(--color-brand-blue-light);
}
.tab-section-icon.icon-primary svg {
color: var(--color-brand-blue);
}
.tab-section-icon.icon-success {
background: var(--color-success-light);
}
.tab-section-icon.icon-success svg {
color: var(--color-success);
}
.tab-section-icon.icon-warning {
background: var(--color-warning-light);
}
.tab-section-icon.icon-warning svg {
color: var(--color-warning);
}
.tab-section-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin: 0;
}
.tab-section-subtitle {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin: 0;
}
.tab-section-body {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.tab-section-footer {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-primary);
}
/* Featured/highlighted section variant */
.tab-section-featured {
background: linear-gradient(135deg, var(--color-brand-blue-light) 0%, var(--color-bg-primary) 100%);
border-color: var(--color-brand-blue);
}
/* Status indicators within tabs */
.tab-status {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
padding: 4px 8px;
border-radius: var(--radius-full);
}
.tab-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.tab-status-active {
background: var(--color-success-light);
color: var(--color-success-text);
}
.tab-status-active .tab-status-dot {
background: var(--color-success);
}
.tab-status-inactive {
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
}
.tab-status-inactive .tab-status-dot {
background: var(--color-text-muted);
}
.tab-status-error {
background: var(--color-error-light);
color: var(--color-error-text);
}
.tab-status-error .tab-status-dot {
background: var(--color-error);
}
/* ==========================================
ADMIN SIDEBAR LAYOUT
==========================================
Two-column layout with collapsible sidebar for admin interfaces.
Usage:
...
========================================== */
/* Layout Container */
.admin-layout {
display: flex;
min-height: calc(100vh - 42px); /* Account for navbar */
background: var(--color-bg-page);
}
/* Sidebar */
.admin-sidebar {
width: 240px;
background: var(--color-bg-primary);
border-right: 1px solid var(--color-border-primary);
display: flex;
flex-direction: column;
flex-shrink: 0;
position: sticky;
top: 42px; /* Below navbar */
height: calc(100vh - 42px);
overflow-y: auto;
overflow-x: hidden;
transition: width var(--transition-slow);
z-index: var(--z-sticky);
}
/* Sidebar Header */
.sidebar-header {
padding: var(--space-4) var(--space-4);
border-bottom: 1px solid var(--color-border-tertiary);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-shrink: 0;
}
.sidebar-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
white-space: nowrap;
overflow: hidden;
}
.sidebar-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--radius-md);
color: var(--color-text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.sidebar-toggle:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.sidebar-toggle svg {
width: 16px;
height: 16px;
}
/* Navigation */
.sidebar-nav {
flex: 1;
padding: var(--space-3) 0;
overflow-y: auto;
}
/* Navigation Group */
.sidebar-nav-group {
margin-bottom: var(--space-2);
}
.sidebar-nav-group-header {
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
overflow: hidden;
}
/* Navigation Item */
.sidebar-nav-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
margin: 0 var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
white-space: nowrap;
overflow: hidden;
}
.sidebar-nav-item:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.sidebar-nav-item.active {
background: var(--color-brand-blue-light);
color: var(--color-brand-blue);
}
.sidebar-nav-item.active:hover {
background: var(--color-brand-blue-light);
}
.sidebar-nav-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
stroke-width: 1.75;
}
.sidebar-nav-item .nav-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-nav-item .nav-badge {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
padding: 2px 6px;
border-radius: var(--radius-full);
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
flex-shrink: 0;
}
.sidebar-nav-item.active .nav-badge {
background: var(--color-brand-blue);
color: var(--color-text-inverse);
}
/* Divider */
.sidebar-divider {
height: 1px;
background: var(--color-border-tertiary);
margin: var(--space-3) var(--space-4);
}
/* Sidebar Footer */
.sidebar-footer {
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--color-border-tertiary);
flex-shrink: 0;
}
/* Main Content Area */
.admin-content {
flex: 1;
min-width: 0; /* Prevent flex overflow */
padding: var(--space-6);
overflow-x: hidden;
}
/* Content Header */
.admin-content-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.admin-content-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin: 0;
}
.admin-content-subtitle {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin: var(--space-1) 0 0 0;
}
.admin-content-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
/* Collapsed State */
.admin-sidebar.collapsed {
width: 56px;
}
.admin-sidebar.collapsed .sidebar-title,
.admin-sidebar.collapsed .sidebar-nav-group-header,
.admin-sidebar.collapsed .nav-label,
.admin-sidebar.collapsed .nav-badge {
opacity: 0;
visibility: hidden;
width: 0;
}
.admin-sidebar.collapsed .sidebar-nav-item {
justify-content: center;
padding: var(--space-2);
margin: 0 var(--space-1);
}
.admin-sidebar.collapsed .sidebar-nav-item svg {
margin: 0;
}
.admin-sidebar.collapsed .sidebar-header {
justify-content: center;
padding: var(--space-3);
}
.admin-sidebar.collapsed .sidebar-divider {
margin: var(--space-3) var(--space-2);
}
/* Tooltip for collapsed state */
.admin-sidebar.collapsed .sidebar-nav-item {
position: relative;
}
.admin-sidebar.collapsed .sidebar-nav-item::after {
content: attr(data-tooltip);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: var(--space-2);
padding: var(--space-1) var(--space-2);
background: var(--color-text-primary);
color: var(--color-text-inverse);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-sm);
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all var(--transition-fast);
z-index: var(--z-tooltip);
}
.admin-sidebar.collapsed .sidebar-nav-item:hover::after {
opacity: 1;
visibility: visible;
}
/* Responsive */
@media (max-width: 1024px) {
.admin-sidebar {
width: 56px;
}
.admin-sidebar .sidebar-title,
.admin-sidebar .sidebar-nav-group-header,
.admin-sidebar .nav-label,
.admin-sidebar .nav-badge {
opacity: 0;
visibility: hidden;
width: 0;
}
.admin-sidebar .sidebar-nav-item {
justify-content: center;
padding: var(--space-2);
margin: 0 var(--space-1);
}
.admin-sidebar .sidebar-header {
justify-content: center;
padding: var(--space-3);
}
.admin-sidebar .sidebar-divider {
margin: var(--space-3) var(--space-2);
}
.admin-sidebar .sidebar-nav-item::after {
content: attr(data-tooltip);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: var(--space-2);
padding: var(--space-1) var(--space-2);
background: var(--color-text-primary);
color: var(--color-text-inverse);
font-size: var(--font-size-xs);
border-radius: var(--radius-sm);
white-space: nowrap;
opacity: 0;
visibility: hidden;
z-index: var(--z-tooltip);
}
.admin-sidebar .sidebar-nav-item:hover::after {
opacity: 1;
visibility: visible;
}
.admin-content {
padding: var(--space-4);
}
}
@media (max-width: 768px) {
.admin-layout {
flex-direction: column;
}
.admin-sidebar {
width: 100%;
height: auto;
position: relative;
top: 0;
flex-direction: row;
border-right: none;
border-bottom: 1px solid var(--color-border-primary);
overflow-x: auto;
overflow-y: hidden;
}
.admin-sidebar .sidebar-header {
display: none;
}
.admin-sidebar .sidebar-nav {
display: flex;
padding: var(--space-2);
gap: var(--space-1);
}
.admin-sidebar .sidebar-nav-group {
display: flex;
margin: 0;
}
.admin-sidebar .sidebar-nav-group-header {
display: none;
}
.admin-sidebar .sidebar-nav-item {
margin: 0;
padding: var(--space-2) var(--space-3);
}
.admin-sidebar .sidebar-nav-item .nav-label {
opacity: 1;
visibility: visible;
width: auto;
}
.admin-sidebar .sidebar-divider {
width: 1px;
height: auto;
margin: 0 var(--space-2);
}
.admin-sidebar .sidebar-nav-item::after {
display: none;
}
}
/* =============================================================================
FILE UPLOAD
=============================================================================
Reusable file upload dropzone component.
Usage:
============================================================================= */
.file-upload-area {
border: 2px dashed var(--color-border-secondary);
border-radius: var(--radius-md);
padding: var(--space-4);
text-align: center;
transition: all var(--transition-fast);
background: var(--color-bg-secondary);
}
.file-upload-area:hover {
border-color: var(--color-brand-blue);
background: var(--color-brand-blue-light);
}
.file-upload-area.file-upload-compact {
padding: var(--space-3);
}
.file-upload-area.file-upload-inline {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-3);
}
.file-upload-area.file-upload-inline .file-upload-label {
flex-direction: row;
gap: var(--space-2);
}
.file-upload-area.file-upload-inline .upload-icon svg {
width: 20px;
height: 20px;
}
.file-input {
display: none;
}
.file-upload-label {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
cursor: pointer;
color: var(--color-text-secondary);
}
.file-upload-label .upload-icon svg {
width: 32px;
height: 32px;
color: var(--color-text-muted);
}
.file-upload-label .upload-text {
font-weight: var(--font-weight-medium);
}
/* =============================================================================
DATA LIST
=============================================================================
Table-like list for data rows with module badges and inline actions.
Usage:
Label
TitleDescription
...
============================================================================= */
.data-list {
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-bg-primary);
}
.data-list-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-tertiary);
transition: background var(--transition-fast);
}
.data-list-row:last-child {
border-bottom: none;
}
.data-list-row:hover {
background: var(--color-bg-hover);
}
.data-list-module {
width: 100px;
flex-shrink: 0;
}
.data-list-badge {
display: inline-block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-bg-tertiary);
color: var(--color-text-primary);
border: 1px solid var(--color-border-primary);
}
.data-list-badge-accent {
background: var(--color-success-light);
border-color: var(--color-success);
color: var(--color-success);
}
.data-list-info {
flex: 1;
min-width: 0;
}
.data-list-info strong {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin-bottom: 2px;
}
.data-list-info span {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}
.data-list-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.data-list-filter-form {
display: flex;
align-items: center;
gap: var(--space-2);
}
.data-list-filter-form .form-control,
.data-list-filter-form .form-select {
font-size: var(--font-size-xs);
padding: var(--space-1) var(--space-2);
height: auto;
}
.data-list-filter-form .form-control {
width: 110px;
}
.data-list-filter-form .form-select {
width: 100px;
}
@media (max-width: 768px) {
.data-list-row {
flex-wrap: wrap;
gap: var(--space-2);
}
.data-list-module {
width: auto;
}
.data-list-info {
width: 100%;
order: 1;
}
.data-list-actions {
width: 100%;
order: 2;
flex-wrap: wrap;
}
.data-list-filter-form {
width: 100%;
flex-wrap: wrap;
}
.data-list-filter-form .form-control,
.data-list-filter-form .form-select {
flex: 1;
min-width: 80px;
}
}
/* =============================================================================
FORMAT BUTTON
=============================================================================
Small button for file format selection (XLSX, CSV, JSON, etc.)
============================================================================= */
.btn-format {
min-width: 50px;
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
font-family: var(--font-family-mono);
letter-spacing: 0.5px;
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border-primary);
color: var(--color-text-primary);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-fast);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-format:hover {
background: var(--color-brand-blue);
border-color: var(--color-brand-blue);
color: var(--color-text-inverse);
}
/* =============================================================================
INFO GRID
=============================================================================
Grid of label-value pairs for displaying metadata.
Usage:
============================================================================= */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--space-3);
}
.info-grid-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.info-grid-label {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-grid-value {
font-size: var(--font-size-sm);
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =============================================================================
LINK GROUP
=============================================================================
Group of inline text links.
============================================================================= */
.link-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
}
.link-group a {
color: var(--color-brand-blue);
text-decoration: none;
}
.link-group a:hover {
text-decoration: underline;
}
/* =============================================================================
ACTION CARD GRID
=============================================================================
Grid of action cards for primary actions like backup/restore.
Usage:
============================================================================= */
.action-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
@media (max-width: 768px) {
.action-card-grid {
grid-template-columns: 1fr;
}
}
.action-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
text-align: center;
transition: all var(--transition-fast);
}
.action-card:hover {
border-color: var(--color-border-secondary);
box-shadow: var(--shadow-sm);
}
.action-card-primary {
background: linear-gradient(135deg, var(--color-brand-blue-light) 0%, var(--color-bg-primary) 100%);
border-color: var(--color-brand-blue);
}
.action-card-disabled {
opacity: 0.7;
background: var(--color-bg-secondary);
}
.action-card-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: var(--color-bg-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.action-card-primary .action-card-icon {
background: var(--color-brand-blue);
}
.action-card-icon svg {
width: 24px;
height: 24px;
color: var(--color-text-secondary);
}
.action-card-primary .action-card-icon svg {
color: white;
}
.action-card-content {
flex: 1;
}
.action-card-content h4 {
margin: 0 0 4px 0;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.action-card-content p {
margin: 0;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}
/* =============================================================================
SCHEDULE BAR
=============================================================================
Horizontal bar showing schedule/settings info.
============================================================================= */
.schedule-bar {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--color-bg-secondary);
border-radius: var(--radius-md);
}
.schedule-item {
display: flex;
align-items: center;
gap: var(--space-2);
}
.schedule-label {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.schedule-value {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.schedule-select {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-sm);
padding: var(--space-1) var(--space-2);
cursor: pointer;
min-width: 140px;
}
.schedule-select:hover {
border-color: var(--color-border-hover);
}
.schedule-select:focus {
outline: none;
border-color: var(--color-brand-blue);
box-shadow: 0 0 0 2px var(--color-brand-blue-light);
}
.schedule-divider {
width: 1px;
height: 20px;
background: var(--color-border-primary);
}
@media (max-width: 768px) {
.schedule-bar {
flex-wrap: wrap;
}
.schedule-divider {
display: none;
}
}
/* =============================================================================
PLACEHOLDER & EMPTY STATES
=============================================================================
Loading placeholders and empty state displays.
============================================================================= */
.placeholder-state {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-6);
color: var(--color-text-secondary);
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-6);
color: var(--color-text-muted);
text-align: center;
}
.empty-state svg {
width: 48px;
height: 48px;
opacity: 0.5;
}
.empty-state p {
margin: 0;
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
.empty-state span {
font-size: var(--font-size-sm);
}
/* =============================================================================
HISTORY TABLE
=============================================================================
Table for displaying history/log entries.
============================================================================= */
.history-table {
width: 100%;
border-collapse: collapse;
}
.history-table th {
padding: var(--space-3) var(--space-4);
text-align: left;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border-primary);
}
.history-table td {
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
border-bottom: 1px solid var(--color-border-tertiary);
}
.history-table tbody tr:hover {
background: var(--color-bg-hover);
}
.history-table tbody tr:last-child td {
border-bottom: none;
}
/* =============================================================================
STATUS BADGE (inline)
=============================================================================
Inline status badges with dot indicator.
============================================================================= */
.status-badge-inline {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
text-transform: capitalize;
}
.status-badge-inline::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
}
.status-badge-inline.status-success {
background: var(--color-success-light);
color: var(--color-success-text);
}
.status-badge-inline.status-success::before {
background: var(--color-success);
}
.status-badge-inline.status-failed {
background: var(--color-error-light);
color: var(--color-error-text);
}
.status-badge-inline.status-failed::before {
background: var(--color-error);
}
.status-badge-inline.status-pending {
background: var(--color-warning-light);
color: var(--color-warning-text);
}
.status-badge-inline.status-pending::before {
background: var(--color-warning);
}
/* =============================================================================
TYPE BADGE
=============================================================================
Small badge for categorization.
============================================================================= */
.type-badge {
font-size: var(--font-size-xs);
padding: 2px 6px;
border-radius: var(--radius-sm);
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
}
/* =============================================================================
COMING SOON BADGE
=============================================================================
Badge indicating feature is coming soon.
============================================================================= */
.coming-soon-badge {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
padding: 4px 10px;
border-radius: var(--radius-full);
background: var(--color-bg-tertiary);
color: var(--color-text-muted);
}
/* =============================================================================
DETAILS PANEL
=============================================================================
Collapsible details/accordion component.
============================================================================= */
.details-panel {
background: var(--color-bg-secondary);
border-radius: var(--radius-md);
overflow: hidden;
}
.details-summary {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
cursor: pointer;
list-style: none;
transition: all var(--transition-fast);
}
.details-summary::-webkit-details-marker {
display: none;
}
.details-summary:hover {
color: var(--color-text-primary);
background: var(--color-bg-tertiary);
}
.details-summary svg {
width: 16px;
height: 16px;
}
.details-summary .chevron {
margin-left: auto;
transition: transform var(--transition-fast);
}
.details-panel[open] .chevron {
transform: rotate(180deg);
}
.details-content {
padding: var(--space-4);
border-top: 1px solid var(--color-border-primary);
}
.details-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
.details-grid-item h4 {
margin: 0 0 var(--space-2) 0;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.details-grid-item p {
margin: 0;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
line-height: 1.5;
}
@media (max-width: 768px) {
.details-grid {
grid-template-columns: 1fr;
}
}
/* =============================================================================
ANALYZE/META DISPLAY
=============================================================================
Display for analysis results or metadata.
============================================================================= */
.meta-display {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-bottom: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border-primary);
}
.meta-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.meta-item .label {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.meta-item .value {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: var(--space-3);
}
.stat-card {
text-align: center;
padding: var(--space-3);
background: var(--color-bg-secondary);
border-radius: var(--radius-md);
}
.stat-card .number {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-brand-blue);
}
.stat-card .label {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin-top: 2px;
}
/* =============================================================================
PAGE ICON
=============================================================================
Icon displayed in page headers.
============================================================================= */
.page-icon {
width: 24px;
height: 24px;
margin-right: 0.75rem;
vertical-align: -4px;
color: var(--color-text-secondary);
}
/* =============================================================================
DOWNLOAD BUTTON (small)
=============================================================================
Small download action button.
============================================================================= */
.btn-download-sm {
padding: 4px 10px;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-brand-blue);
background: transparent;
border: 1px solid var(--color-brand-blue);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-fast);
}
.btn-download-sm:hover {
background: var(--color-brand-blue);
color: white;
}
/* =============================================================================
CUSTOM DASHBOARD WIDGETS
Dynamic widget system for organization dashboards
============================================================================= */
/* Section Container */
.custom-widgets-section {
margin: 2rem 0;
}
/* Card Container - holds multiple widget cards */
.custom-cards-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Individual Dashboard Card */
.custom-dashboard-card {
background: var(--color-bg-primary, #ffffff);
border: 1px solid var(--color-border-primary, #e2e8f0);
border-radius: var(--radius-lg, 8px);
overflow: hidden;
}
/* Card Header */
.custom-dashboard-card__header {
padding: 0.875rem 1.25rem;
background: var(--color-bg-secondary, #f8fafc);
border-bottom: 1px solid var(--color-border-primary, #e2e8f0);
display: flex;
align-items: center;
gap: 0.75rem;
}
.custom-dashboard-card__header--accent {
border-left: 4px solid var(--card-accent-color, #667eea);
}
.custom-dashboard-card__icon {
width: 20px;
height: 20px;
color: var(--color-text-secondary, #64748b);
flex-shrink: 0;
}
.custom-dashboard-card__icon svg {
width: 100%;
height: 100%;
}
.custom-dashboard-card__title {
margin: 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-primary, #1e293b);
}
.custom-dashboard-card__description {
margin: 0.25rem 0 0 0;
font-size: 0.75rem;
color: var(--color-text-secondary, #64748b);
}
/* Card Body - Widget Grid */
.custom-dashboard-card__body {
padding: 1.25rem;
}
/* Widgets Grid Layout */
.custom-widgets-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
}
/* Individual Widget */
.dashboard-widget {
background: var(--color-bg-tertiary, #f8fafc);
border: 1px solid var(--color-border-secondary, #e2e8f0);
border-radius: var(--radius-md, 6px);
padding: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dashboard-widget:hover {
border-color: var(--color-border-hover, #cbd5e1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* Widget Header */
.dashboard-widget__header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.dashboard-widget__icon {
width: 16px;
height: 16px;
color: var(--color-text-muted, #94a3b8);
flex-shrink: 0;
}
.dashboard-widget__icon svg {
width: 100%;
height: 100%;
}
.dashboard-widget__name {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-text-secondary, #64748b);
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-widget__description {
font-size: 0.6875rem;
color: var(--color-text-muted, #94a3b8);
margin-top: 0.125rem;
line-height: 1.3;
}
/* KPI Single Widget */
.dashboard-widget--kpi .kpi-display {
text-align: left;
}
.dashboard-widget--kpi .kpi-value {
font-size: 1.75rem;
font-weight: 700;
color: var(--color-text-primary, #1e293b);
line-height: 1.2;
word-break: break-word;
overflow-wrap: break-word;
}
.dashboard-widget--kpi .kpi-suffix {
font-size: 0.75rem;
color: var(--color-text-secondary, #64748b);
margin-top: 0.25rem;
}
/* List Widget (Top 5 Customers, Recent Activity) */
.dashboard-widget--list {
min-width: 220px;
}
.dashboard-widget--list .widget-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.dashboard-widget--list .list-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0;
border-bottom: 1px solid var(--color-border-tertiary, #f1f5f9);
}
.dashboard-widget--list .list-item:last-child {
border-bottom: none;
}
.dashboard-widget--list .list-rank {
width: 20px;
height: 20px;
background: var(--color-bg-quaternary, #e2e8f0);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.625rem;
font-weight: 600;
color: var(--color-text-secondary, #64748b);
flex-shrink: 0;
}
.dashboard-widget--list .list-label {
flex: 1;
font-size: 0.8125rem;
color: var(--color-text-primary, #374151);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.dashboard-widget--list .list-value {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-primary, #1f2937);
white-space: nowrap;
flex-shrink: 0;
}
/* Bar Chart Widget */
.dashboard-widget--bar-chart {
min-width: 280px;
}
.dashboard-widget--bar-chart .chart-container {
margin-top: 0.5rem;
}
.dashboard-widget--bar-chart .bar-item {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.dashboard-widget--bar-chart .bar-label {
font-size: 0.75rem;
color: var(--color-text-secondary, #64748b);
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
}
.dashboard-widget--bar-chart .bar-track {
flex: 1;
height: 20px;
background: var(--color-bg-quaternary, #e2e8f0);
border-radius: var(--radius-sm, 4px);
overflow: hidden;
}
.dashboard-widget--bar-chart .bar-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: var(--radius-sm, 4px);
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 0.5rem;
min-width: 30px;
}
.dashboard-widget--bar-chart .bar-value {
font-size: 0.6875rem;
font-weight: 600;
color: #ffffff;
}
/* Donut/Pie Chart Widget */
.dashboard-widget--donut-chart,
.dashboard-widget--pie-chart {
min-width: 260px;
}
.dashboard-widget--donut-chart .chart-wrapper,
.dashboard-widget--pie-chart .chart-wrapper {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
}
.dashboard-widget--donut-chart .chart-canvas,
.dashboard-widget--pie-chart .chart-canvas {
width: 100px;
height: 100px;
flex-shrink: 0;
}
.dashboard-widget--donut-chart .chart-legend,
.dashboard-widget--pie-chart .chart-legend {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.dashboard-widget--donut-chart .legend-item,
.dashboard-widget--pie-chart .legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
}
.dashboard-widget--donut-chart .legend-color,
.dashboard-widget--pie-chart .legend-color {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
.dashboard-widget--donut-chart .legend-label,
.dashboard-widget--pie-chart .legend-label {
flex: 1;
color: var(--color-text-secondary, #64748b);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-widget--donut-chart .legend-value,
.dashboard-widget--pie-chart .legend-value {
font-weight: 600;
color: var(--color-text-primary, #1f2937);
}
/* Progress Bar Widget */
.dashboard-widget--progress .progress-display {
margin-top: 0.5rem;
}
.dashboard-widget--progress .progress-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary, #1e293b);
}
.dashboard-widget--progress .progress-bar-container {
width: 100%;
height: 8px;
background: var(--color-bg-quaternary, #e2e8f0);
border-radius: var(--radius-full, 9999px);
margin: 0.5rem 0;
overflow: hidden;
}
.dashboard-widget--progress .progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: var(--radius-full, 9999px);
transition: width 0.5s ease;
}
.dashboard-widget--progress .progress-target {
font-size: 0.75rem;
color: var(--color-text-muted, #94a3b8);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.custom-widgets-grid {
grid-template-columns: 1fr;
}
.dashboard-widget--list,
.dashboard-widget--bar-chart,
.dashboard-widget--donut-chart,
.dashboard-widget--pie-chart {
min-width: 100%;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.custom-widgets-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (min-width: 1025px) {
.custom-widgets-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
/* Wider widgets for charts and lists */
.dashboard-widget--list {
grid-column: span 1;
min-width: 220px;
}
.dashboard-widget--bar-chart {
grid-column: span 2;
}
.dashboard-widget--donut-chart,
.dashboard-widget--pie-chart {
grid-column: span 1;
}
}
/* ============================================
MODULE HEADER COMPONENT - Visual Wayfinding
Add this section to your components.css file
============================================ */
/* Base Module Page Header */
.module-page-header {
position: relative;
background: var(--module-bg, #ffffff);
border: 1px solid var(--color-border-primary, #e2e8f0);
border-radius: 8px;
padding: 1.5rem 2rem;
margin-bottom: 1.5rem;
overflow: hidden;
}
/* Accent bar at top */
.module-page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--module-accent, #3B82F6);
}
/* Subtle background tint */
.module-page-header::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--module-light, transparent);
opacity: 0.3;
pointer-events: none;
z-index: 0;
}
.module-page-header > * {
position: relative;
z-index: 1;
}
.module-header-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.module-header-left {
flex: 1;
}
.module-header-right {
display: flex;
gap: 0.5rem;
align-items: center;
}
.module-title {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-primary, #1e293b);
}
.module-title-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--module-accent, #3B82F6);
color: white;
}
.module-title-icon svg {
width: 20px;
height: 20px;
}
.module-subtitle {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-secondary, #64748b);
}
/* Module-specific themes */
/* Quotation Module */
.module-page-header.module-quotation {
--module-accent: var(--module-quotation-accent);
--module-light: var(--module-quotation-light);
--module-bg: #ffffff;
}
.module-page-header.module-quotation .module-title-icon {
background: var(--module-quotation-accent);
}
.module-page-header.module-quotation .btn-soft-ui-primary {
background: var(--module-quotation-accent);
}
.module-page-header.module-quotation .btn-soft-ui-primary:hover {
background: var(--module-quotation-dark);
}
/* Sales Order Module */
.module-page-header.module-sales-order {
--module-accent: var(--module-sales-order-accent);
--module-light: var(--module-sales-order-light);
--module-bg: #ffffff;
}
.module-page-header.module-sales-order .module-title-icon {
background: var(--module-sales-order-accent);
}
.module-page-header.module-sales-order .btn-soft-ui-primary {
background: var(--module-sales-order-accent);
}
.module-page-header.module-sales-order .btn-soft-ui-primary:hover {
background: var(--module-sales-order-dark);
}
/* Delivery Order Module */
.module-page-header.module-delivery-order {
--module-accent: var(--module-delivery-order-accent);
--module-light: var(--module-delivery-order-light);
--module-bg: #ffffff;
}
.module-page-header.module-delivery-order .module-title-icon {
background: var(--module-delivery-order-accent);
}
.module-page-header.module-delivery-order .btn-soft-ui-primary {
background: var(--module-delivery-order-accent);
}
.module-page-header.module-delivery-order .btn-soft-ui-primary:hover {
background: var(--module-delivery-order-dark);
}
/* Invoice Module */
.module-page-header.module-invoice {
--module-accent: var(--module-invoice-accent);
--module-light: var(--module-invoice-light);
--module-bg: #ffffff;
}
.module-page-header.module-invoice .module-title-icon {
background: var(--module-invoice-accent);
}
.module-page-header.module-invoice .btn-soft-ui-primary {
background: var(--module-invoice-accent);
}
.module-page-header.module-invoice .btn-soft-ui-primary:hover {
background: var(--module-invoice-dark);
}
/* ============================================
Document Header Component (Option C - Split Header with Action Bar)
============================================
Centralized component for document detail page headers.
Used by: Quotation, Sales Order, Delivery Order, Invoice
Structure:
.document-header (Compact Inline Design)
.document-header__top (Row 1: icon + title | back link)
.document-header__bottom (Row 2: status + metadata | Actions dropdown + primary button)
This compact design saves ~70px vertical space compared to the previous split header.
Usage: {% from "components/document_header.html" import document_header %}
============================================ */
/* Main container - Compact inline design */
.document-header {
background: #ffffff;
border: 1px solid var(--pim-border, #e2e8f0);
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 1rem;
/* No overflow:hidden - allows dropdown menus to extend outside */
}
/* Compact variant modifier (applied by default in new design) */
.document-header--compact {
padding: 0;
}
/* Row 1: Top - Document Identity + Back Link */
.document-header__top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px 8px 20px;
border-top: 3px solid var(--module-accent, #7c3aed);
border-radius: 8px 8px 0 0;
}
/* Document type color variants for accent line */
.document-header.module-quotation .document-header__top {
border-top-color: var(--module-quotation-accent, #7c3aed);
}
.document-header.module-sales-order .document-header__top {
border-top-color: var(--module-sales-order-accent, #14b8a6);
}
.document-header.module-delivery-order .document-header__top {
border-top-color: var(--module-delivery-order-accent, #f97316);
}
.document-header.module-invoice .document-header__top {
border-top-color: var(--module-invoice-accent, #0ea5e9);
}
/* Identity section (icon + title on same line) */
.document-header__identity {
display: flex;
align-items: center;
gap: 12px;
}
/* Document icon */
.document-header__icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--module-accent, #7c3aed);
color: #ffffff;
flex-shrink: 0;
}
.document-header__icon svg {
width: 18px;
height: 18px;
}
/* Icon color variants */
.document-header.module-quotation .document-header__icon {
background: var(--module-quotation-accent, #7c3aed);
}
.document-header.module-sales-order .document-header__icon {
background: var(--module-sales-order-accent, #14b8a6);
}
.document-header.module-delivery-order .document-header__icon {
background: var(--module-delivery-order-accent, #f97316);
}
.document-header.module-invoice .document-header__icon {
background: var(--module-invoice-accent, #0ea5e9);
}
/* Document title/number - inline with icon */
.document-header__title {
font-size: 1.125rem;
font-weight: 600;
color: #1e293b;
margin: 0;
line-height: 1.3;
}
/* Back link - text style in top-right */
.document-header__back-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #64748b;
text-decoration: none;
font-size: 0.875rem;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.15s ease;
}
.document-header__back-link:hover {
color: #1e293b;
background: #f1f5f9;
}
.document-header__back-link svg {
flex-shrink: 0;
}
/* Row 2: Bottom - Metadata + Actions */
.document-header__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px 16px 20px;
gap: 16px;
}
/* Meta row (status + metadata) */
.document-header__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
font-size: 0.8125rem;
color: #64748b;
}
/* Status badge */
.document-header__status {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
text-transform: capitalize;
}
/* Meta separator */
.document-header__meta-separator {
margin: 0 0.5rem;
color: #cbd5e1;
}
/* Meta item */
.document-header__meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.document-header__meta-label {
color: #64748b;
}
.document-header__meta-value {
color: #334155;
}
/* Edit button for editable meta */
.document-header__meta-edit {
margin-left: 6px;
padding: 2px 8px;
font-size: 11px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 4px;
color: #64748b;
cursor: pointer;
transition: all 0.15s ease;
}
.document-header__meta-edit:hover {
background: #e2e8f0;
color: #334155;
}
/* Source document link */
.document-header__source-link {
color: var(--module-accent, #7c3aed);
text-decoration: none;
margin-left: 4px;
}
.document-header__source-link:hover {
text-decoration: underline;
}
.document-header.module-delivery-order .document-header__source-link {
color: var(--module-delivery-order-accent, #f97316);
}
/* Actions area - right side of bottom row */
.document-header__actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Form wrapper */
.document-header__form {
display: inline;
}
/* Action buttons base - compact sizing */
.document-header__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
border: 1px solid transparent;
white-space: nowrap;
}
.document-header__btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Primary button (solid brand color) */
.document-header__btn--primary {
background: var(--module-accent, #7c3aed);
color: #ffffff;
border-color: var(--module-accent, #7c3aed);
}
.document-header__btn--primary:hover {
background: var(--module-dark, #6d28d9);
border-color: var(--module-dark, #6d28d9);
}
.document-header__btn--primary svg {
stroke: #ffffff;
}
/* Primary button color variants by document type */
.document-header.module-quotation .document-header__btn--primary {
background: var(--module-quotation-accent, #7c3aed);
border-color: var(--module-quotation-accent, #7c3aed);
}
.document-header.module-quotation .document-header__btn--primary:hover {
background: var(--module-quotation-dark, #6d28d9);
}
.document-header.module-sales-order .document-header__btn--primary {
background: var(--module-sales-order-accent, #14b8a6);
border-color: var(--module-sales-order-accent, #14b8a6);
}
.document-header.module-sales-order .document-header__btn--primary:hover {
background: var(--module-sales-order-dark, #0d9488);
}
.document-header.module-delivery-order .document-header__btn--primary {
background: var(--module-delivery-order-accent, #f97316);
border-color: var(--module-delivery-order-accent, #f97316);
}
.document-header.module-delivery-order .document-header__btn--primary:hover {
background: var(--module-delivery-order-dark, #ea580c);
}
.document-header.module-invoice .document-header__btn--primary {
background: var(--module-invoice-accent, #0ea5e9);
border-color: var(--module-invoice-accent, #0ea5e9);
}
.document-header.module-invoice .document-header__btn--primary:hover {
background: var(--module-invoice-dark, #0284c7);
}
/* Secondary button (white with gray border - DEFAULT for most actions) */
.document-header__btn--secondary,
.document-header__btn--neutral {
background: #ffffff;
color: #374151;
border: 1px solid #dee2e6;
}
.document-header__btn--secondary:hover,
.document-header__btn--neutral:hover {
background: #f9fafb;
border-color: #9ca3af;
}
.document-header__btn--secondary svg,
.document-header__btn--neutral svg {
stroke: #6b7280;
}
/* Accent button - SAME as secondary (outline style) */
.document-header__btn--accent {
background: #ffffff;
color: #374151;
border: 1px solid #dee2e6;
}
.document-header__btn--accent:hover {
background: #f9fafb;
border-color: #9ca3af;
}
.document-header__btn--accent svg {
stroke: #6b7280;
}
/* Success button - solid green for primary actions */
.document-header__btn--success {
background: #16a34a;
color: #ffffff;
border: 1px solid #16a34a;
}
.document-header__btn--success:hover {
background: #15803d;
border-color: #15803d;
}
.document-header__btn--success svg {
stroke: #ffffff;
}
/* Danger button (red outline) */
.document-header__btn--danger {
background: #ffffff;
color: #dc2626;
border-color: #fecaca;
}
.document-header__btn--danger:hover {
background: #fef2f2;
border-color: #fca5a5;
}
.document-header__btn--danger svg {
stroke: #dc2626;
}
/* Warning button - outline orange */
.document-header__btn--warning {
background: #ffffff;
color: #d97706;
border: 1px solid #fcd34d;
}
.document-header__btn--warning:hover {
background: #fffbeb;
border-color: #fbbf24;
}
.document-header__btn--warning svg {
stroke: #d97706;
}
/* Dropdown */
.document-header__dropdown {
position: relative;
display: inline-block;
}
.document-header__dropdown-arrow {
margin-left: 2px;
}
.document-header__dropdown-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
min-width: 200px;
background: #ffffff;
border: 1px solid var(--pim-border, #e2e8f0);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 100;
padding: 8px 0;
}
/* Dropdown menu visible state */
.document-header__dropdown-menu.show {
display: block;
}
/* Dropdown items */
.document-header__dropdown-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 16px;
font-size: 14px;
color: #334155;
text-decoration: none;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: background 0.15s ease;
}
.document-header__dropdown-item:hover {
background: var(--pim-light-bg, #f8fafc);
}
.document-header__dropdown-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
stroke: #64748b;
}
.document-header__dropdown-item span {
flex: 1;
}
/* Danger items in dropdown */
.document-header__dropdown-item--danger {
color: var(--pim-danger, #dc2626);
}
.document-header__dropdown-item--danger svg {
stroke: var(--pim-danger, #dc2626);
}
.document-header__dropdown-item--danger:hover {
background: #fef2f2;
}
/* Dropdown divider */
.document-header__dropdown-divider {
height: 1px;
margin: 8px 0;
background: var(--pim-border, #e2e8f0);
}
/* Form inside dropdown */
.document-header__dropdown-form {
display: contents;
}
/* Legacy support for old structure (can be removed after migration) */
.document-header__main {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 16px 20px;
background: #ffffff;
border-top: 3px solid var(--module-accent, #7c3aed);
border-radius: 8px 8px 0 0;
}
.document-header__info {
display: flex;
flex-direction: column;
gap: 4px;
}
.document-header__back {
display: inline-flex;
align-items: center;
gap: 6px;
color: #64748b;
text-decoration: none;
font-size: 0.875rem;
padding: 6px 12px;
border-radius: 6px;
transition: all 0.15s ease;
}
.document-header__back:hover {
color: #334155;
background: #f1f5f9;
}
.document-header__back svg {
flex-shrink: 0;
}
.document-header__action-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
background-color: #f8f9fa;
border-top: 1px solid #dee2e6;
border-radius: 0 0 8px 8px;
gap: 8px;
position: relative;
}
.document-header__actions-left {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.document-header__actions-right {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
/* Responsive */
@media (max-width: 768px) {
.document-header__top {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 12px 16px 8px 16px;
}
.document-header__back-link {
align-self: flex-start;
}
.document-header__bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 8px 16px 12px 16px;
}
.document-header__actions {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
.document-header__meta {
flex-wrap: wrap;
gap: 4px;
}
/* Legacy responsive */
.document-header__main {
flex-direction: column;
gap: 12px;
}
.document-header__back {
align-self: flex-start;
}
.document-header__action-bar {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.document-header__actions-left,
.document-header__actions-right {
flex-wrap: wrap;
justify-content: flex-start;
}
.document-header__actions-right {
margin-left: 0;
}
}
/* Module Status Badges */
.module-status-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
text-transform: capitalize;
}
/* Quotation Status Badges */
.quotation-status-draft {
background: #f1f5f9;
color: #475569;
}
.quotation-status-sent {
background: var(--module-quotation-muted, #f3e8ff);
color: var(--module-quotation-dark, #7c3aed);
}
.quotation-status-accepted {
background: #dcfce7;
color: #16a34a;
}
.quotation-status-declined,
.quotation-status-rejected {
background: #fee2e2;
color: #dc2626;
}
.quotation-status-expired {
background: #fef3c7;
color: #d97706;
}
.quotation-status-void {
background: #f1f5f9;
color: #64748b;
}
/* Sales Order Status Badges */
.so-status-draft {
background: #f1f5f9;
color: #475569;
}
.so-status-confirmed {
background: var(--module-sales-order-muted);
color: var(--module-sales-order-dark);
}
.so-status-partial {
background: var(--module-delivery-order-muted);
color: var(--module-delivery-order-dark);
}
.so-status-fulfilled {
background: #dcfce7;
color: #166534;
}
.so-status-cancelled {
background: #fee2e2;
color: #991b1b;
}
.so-status-closed {
background: var(--module-invoice-muted);
color: var(--module-invoice-dark);
}
/* ===========================================
SALES ORDER LINEAR LAYOUT
Used for SO View and Create pages
=========================================== */
.so-linear-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 1.5rem 0;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 1rem;
}
.so-linear-title-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.so-linear-icon {
color: var(--module-sales-order-accent, #14B8A6);
}
.so-linear-title {
font-size: 1.5rem;
font-weight: 600;
margin: 0;
color: #1e293b;
}
.so-linear-subtitle {
margin-top: 0.5rem;
font-size: 0.875rem;
color: #64748b;
}
.so-linear-sep {
margin: 0 0.5rem;
color: #cbd5e1;
}
.so-linear-header-right {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
.so-linear-details {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
padding: 1rem 0;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 1rem;
}
.so-linear-detail-item {
min-width: 140px;
}
.so-linear-detail-label {
display: block;
font-size: 0.75rem;
color: #64748b;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.025em;
font-weight: 500;
}
.so-linear-detail-value {
font-size: 0.875rem;
color: #1e293b;
font-weight: 500;
}
/* Editable detail fields for create/edit */
.so-linear-detail-item .form-control,
.so-linear-detail-item .form-select {
margin-top: 0;
font-size: 0.875rem;
}
.so-linear-notes {
background: #f8fafc;
padding: 0.75rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
color: #475569;
margin-bottom: 1rem;
}
.so-linear-section {
margin-bottom: 1.5rem;
}
.so-linear-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.so-linear-section-header h2 {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.so-linear-section-actions {
display: flex;
gap: 0.5rem;
}
/* Customer Information Section */
.so-customer-section {
background: #f8fafc;
padding: 1rem;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.so-customer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
@media (max-width: 640px) {
.so-customer-grid {
grid-template-columns: 1fr;
}
}
.so-customer-block-title {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
margin-bottom: 0.5rem;
font-weight: 600;
}
.so-customer-block-content {
font-size: 0.875rem;
color: #1e293b;
}
.so-customer-name {
font-weight: 600;
margin-bottom: 0.25rem;
}
.so-customer-detail {
color: #64748b;
}
.so-customer-address {
margin-top: 0.5rem;
line-height: 1.4;
}
.so-text-muted {
color: #94a3b8;
font-style: italic;
}
/* SO Items Table */
.so-items-table {
width: 100%;
border-collapse: collapse;
}
.so-items-table th {
text-align: left;
padding: 0.75rem;
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid #e2e8f0;
background: #f8fafc;
}
.so-items-table td {
padding: 0.75rem;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
font-size: 0.875rem;
}
.so-items-table tbody tr:hover {
background: #f8fafc;
}
.so-items-table .text-right {
text-align: right;
}
/* SO Summary (inline, not sidebar) */
.so-summary-inline {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 1rem 0;
border-top: 2px solid #e2e8f0;
margin-top: 0.5rem;
}
.so-summary-row {
display: flex;
justify-content: space-between;
min-width: 200px;
padding: 0.375rem 0;
font-size: 0.875rem;
}
.so-summary-row.total {
font-weight: 600;
font-size: 1rem;
border-top: 1px solid #e2e8f0;
margin-top: 0.5rem;
padding-top: 0.75rem;
}
.so-summary-label {
color: #64748b;
}
.so-summary-value {
font-weight: 500;
min-width: 100px;
text-align: right;
}
/* SO Form Actions (bottom of page) */
.so-form-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.5rem 0;
border-top: 1px solid #e2e8f0;
margin-top: 1rem;
}
/* Product/Quotation Search Results */
.product-result-item,
.quotation-result-item {
padding: 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 6px;
margin-bottom: 0.5rem;
cursor: pointer;
transition: all 0.15s ease;
}
.product-result-item:hover,
.quotation-result-item:hover {
border-color: var(--module-sales-order-accent);
background: var(--module-sales-order-light);
}
/* Module Stats Cards */
.module-stats {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.module-stat-card {
background: white;
border: 1px solid var(--color-border-primary, #e2e8f0);
border-radius: 6px;
padding: 0.75rem 1rem;
min-width: 100px;
}
.module-stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--module-accent, #3B82F6);
line-height: 1;
}
.module-stat-label {
font-size: 0.7rem;
color: var(--color-text-secondary, #64748b);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.25rem;
}
/* Sales Order List Table */
.so-list-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.so-list-table th {
background: #f8fafc;
padding: 0.75rem 1rem;
text-align: left;
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid #e2e8f0;
}
.so-list-table td {
padding: 0.875rem 1rem;
border-bottom: 1px solid #f1f5f9;
font-size: 0.875rem;
color: #334155;
}
.so-list-table tr:hover {
background: #f8fafc;
}
.so-list-table tr:last-child td {
border-bottom: none;
}
.so-number-link {
font-weight: 600;
color: var(--module-sales-order-accent);
text-decoration: none;
}
.so-number-link:hover {
color: var(--module-sales-order-dark);
text-decoration: underline;
}
.so-customer-name {
font-weight: 500;
color: #1e293b;
}
.so-customer-company {
font-size: 0.75rem;
color: #64748b;
}
.so-amount {
font-weight: 600;
font-family: 'SF Mono', 'Roboto Mono', monospace;
}
.so-date {
color: #64748b;
font-size: 0.8125rem;
}
/* Empty State */
.so-empty-state {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 8px;
border: 1px dashed #e2e8f0;
}
.so-empty-icon {
width: 64px;
height: 64px;
margin: 0 auto 1rem;
color: #cbd5e1;
}
.so-empty-title {
font-size: 1.125rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.5rem;
}
.so-empty-text {
color: #64748b;
margin-bottom: 1.5rem;
}
/* Filter Bar */
.so-filter-bar {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
align-items: center;
}
.so-search-input {
flex: 1;
min-width: 200px;
max-width: 300px;
padding: 0.5rem 0.75rem 0.5rem 2.25rem;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 0.875rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 0.75rem center;
}
.so-search-input:focus {
outline: none;
border-color: var(--module-sales-order-accent);
box-shadow: 0 0 0 3px var(--module-sales-order-light);
}
.so-filter-select {
padding: 0.5rem 2rem 0.5rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 0.875rem;
background: white;
cursor: pointer;
}
.so-filter-select:focus {
outline: none;
border-color: var(--module-sales-order-accent);
}
/*
* ADD THESE STYLES TO static/css/components.css
* These are reusable components for Sales Order and Quotation import functionality
*/
/* ============================================================================
SALES ORDER VIEW LAYOUT
Reusable 2-column layout with main content and sidebar
============================================================================ */
.so-view-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 1.5rem;
align-items: start;
}
@media (max-width: 1024px) {
.so-view-layout {
grid-template-columns: 1fr;
}
}
/* SO Info Grid - 2-column info display */
.so-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.so-info-item {
padding: 0.5rem 0;
}
.so-info-label {
font-size: 0.75rem;
color: var(--color-text-muted, #64748b);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.so-info-value {
font-weight: 500;
color: var(--color-text-primary, #1e293b);
}
/* ============================================================================
SALES ORDER VIEW TABLE
Table for displaying line items
============================================================================ */
.so-view-table {
width: 100%;
border-collapse: collapse;
}
.so-view-table th {
text-align: left;
padding: 0.75rem 1rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted, #64748b);
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--color-bg-subtle, #f8fafc);
border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.so-view-table td {
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--color-border-light, #f1f5f9);
vertical-align: middle;
}
.so-view-table tr:last-child td {
border-bottom: none;
}
/* ============================================================================
SALES ORDER SUMMARY
Summary section in sidebar
============================================================================ */
.so-summary-card {
position: sticky;
top: 80px;
}
.so-summary-row {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
font-size: 0.875rem;
}
.so-summary-total {
font-weight: 600;
font-size: 1rem;
border-top: 2px solid var(--color-border, #e2e8f0);
margin-top: 0.5rem;
padding-top: 0.75rem;
}
/* ============================================================================
QUOTATION SEARCH RESULTS
Clickable quotation items in search modal
============================================================================ */
.quotation-search-result {
padding: 0.75rem;
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 6px;
margin-bottom: 0.5rem;
cursor: pointer;
transition: all 0.15s ease;
}
.quotation-search-result:hover {
border-color: var(--module-quotation-accent, #6366f1);
background: var(--module-quotation-light, #f0f0ff);
}
/* ============================================================================
QUOTATION ITEM ROW
Selectable item row with checkbox
============================================================================ */
.quotation-item-row {
display: flex;
align-items: center;
padding: 0.75rem;
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 6px;
margin-bottom: 0.5rem;
}
.quotation-item-row:hover {
background: var(--color-bg-subtle, #f8fafc);
}
.quotation-item-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
}
/* ============================================================================
SOURCE QUOTATION BADGE
Badge showing linked quotation
============================================================================ */
.source-quotation-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: var(--module-quotation-light, #f0f0ff);
border: 1px solid var(--module-quotation-muted, #c7c7ff);
border-radius: 6px;
color: var(--module-quotation-dark, #4338ca);
font-size: 0.8125rem;
font-weight: 500;
text-decoration: none;
transition: all 0.15s ease;
}
.source-quotation-badge:hover {
background: var(--module-quotation-muted, #c7c7ff);
border-color: var(--module-quotation-accent, #6366f1);
}
/* ============================================================================
BADGE OUTLINE
Generic outline badge style
============================================================================ */
.badge-outline {
display: inline-block;
padding: 0.25rem 0.5rem;
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-text-muted, #64748b);
}
/* ============================================================================
UTILITY CLASSES FOR TEXT COLORS
============================================================================ */
.text-success { color: var(--color-success, #10b981); }
.text-warning { color: var(--color-warning, #f59e0b); }
.text-error { color: var(--color-error, #ef4444); }
/* ============================================================================
ALERT WARNING (if not already in components.css)
============================================================================ */
.alert-warning {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
background: var(--color-warning-light, #fffbeb);
border: 1px solid var(--color-warning-border, #fcd34d);
border-radius: 6px;
color: var(--color-warning-text, #92400e);
font-size: 0.875rem;
}
/* ============================================================================
QUOTATION DETAILS COMPONENTS
Styles for quotation details page: compact tables, summary bar, modals, etc.
Migrated from quotation_details.html embedded styles for centralized CSS
============================================================================ */
/* -----------------------------------------------------------------------------
Compact Header
----------------------------------------------------------------------------- */
.compact-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 16px;
}
.quotation-title {
font-size: 18px;
font-weight: 600;
margin: 0 0 2px 0;
color: #111827;
}
.quotation-meta {
font-size: 12px;
color: #6b7280;
margin: 0;
}
.header-actions-compact {
display: flex;
gap: 6px;
}
.status-badge-compact {
display: inline-block;
padding: 1px 6px;
font-size: 11px;
font-weight: 500;
border-radius: 3px;
background: #f3f4f6;
color: #6b7280;
border: 1px solid #e5e7eb;
}
/* -----------------------------------------------------------------------------
Summary Bar
----------------------------------------------------------------------------- */
.summary-bar {
display: flex;
gap: 24px;
padding: 10px 12px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 4px;
margin-bottom: 16px;
}
.summary-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.summary-item.total {
margin-left: auto;
}
.summary-label {
font-size: 11px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.summary-value {
font-size: 14px;
font-weight: 600;
color: #111827;
}
/* -----------------------------------------------------------------------------
Compact Sections
----------------------------------------------------------------------------- */
.section-compact {
background: white;
border: 1px solid #e5e7eb;
border-radius: 4px;
margin-bottom: 12px;
}
.section-title-compact {
font-size: 14px;
font-weight: 600;
color: #111827;
padding: 10px 12px;
border-bottom: 1px solid #e5e7eb;
background: #fafafa;
display: flex;
justify-content: space-between;
align-items: center;
}
/* -----------------------------------------------------------------------------
Info Table
----------------------------------------------------------------------------- */
.info-table {
padding: 12px;
}
.info-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 8px;
}
.info-row:last-child {
margin-bottom: 0;
}
.info-cell {
font-size: 13px;
color: #111827;
}
.info-cell.full-width {
grid-column: 1 / -1;
}
.info-label {
font-weight: 500;
color: #6b7280;
}
/* -----------------------------------------------------------------------------
Compact Table
----------------------------------------------------------------------------- */
.compact-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.compact-table thead {
background: #fafafa;
border-bottom: 1px solid #e5e7eb;
}
.compact-table th {
padding: 8px 12px;
text-align: left;
font-size: 11px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.compact-table tbody tr {
border-bottom: 1px solid #f3f4f6;
}
.compact-table tbody tr:hover {
background: #fafafa;
}
.compact-table td {
padding: 8px 12px;
color: #111827;
}
/* Compact Table - Numeric Column Alignment Fix
Consistent width and padding for better visual alignment */
.compact-table th.text-right,
.compact-table td.text-right {
min-width: 100px;
max-width: 140px;
padding: 8px 16px 8px 12px;
text-align: right;
}
/* Stock column specific */
.compact-table .stock-column-q {
text-align: center;
min-width: 70px;
max-width: 90px;
width: 80px;
}
/* -----------------------------------------------------------------------------
Zero Price Highlighting
----------------------------------------------------------------------------- */
.zero-price {
color: #d97706 !important;
font-weight: 500;
}
/* -----------------------------------------------------------------------------
Product Info (Compact)
----------------------------------------------------------------------------- */
.product-compact {
display: flex;
flex-direction: column;
gap: 2px;
}
.product-name-compact {
font-weight: 500;
color: #111827;
}
.product-meta-compact {
font-size: 11px;
color: #6b7280;
}
.item-note-compact {
font-size: 11px;
color: #6b7280;
font-style: italic;
}
/* -----------------------------------------------------------------------------
Totals
----------------------------------------------------------------------------- */
.totals-compact {
padding: 12px;
border-top: 1px solid #e5e7eb;
background: #fafafa;
}
.totals-row-compact {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 13px;
color: #111827;
}
.totals-row-compact.total-row {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid #d1d5db;
font-weight: 600;
font-size: 14px;
}
/* -----------------------------------------------------------------------------
Text Content
----------------------------------------------------------------------------- */
.text-content-compact {
padding: 12px;
font-size: 13px;
color: #374151;
line-height: 1.5;
}
/* -----------------------------------------------------------------------------
Empty State
----------------------------------------------------------------------------- */
.empty-compact {
padding: 24px 12px;
text-align: center;
}
.empty-text {
font-size: 13px;
color: #6b7280;
}
/* -----------------------------------------------------------------------------
Compact Buttons
----------------------------------------------------------------------------- */
.btn-compact {
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
border: 1px solid #d1d5db;
border-radius: 4px;
background: white;
color: #374151;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.btn-compact:hover {
background: #f9fafb;
border-color: #9ca3af;
}
.btn-primary-compact {
background: #111827;
color: white;
border-color: #111827;
}
.btn-primary-compact:hover {
background: #1f2937;
}
.btn-danger-compact {
background: #dc2626;
color: white;
border-color: #dc2626;
}
.btn-danger-compact:hover {
background: #b91c1c;
}
.btn-inline {
padding: 4px 8px;
font-size: 11px;
font-weight: 500;
border: 1px solid #d1d5db;
border-radius: 3px;
background: white;
color: #374151;
cursor: pointer;
}
.btn-inline:hover {
background: #f3f4f6;
}
.btn-mini {
padding: 3px 8px;
font-size: 11px;
border: 1px solid #d1d5db;
border-radius: 3px;
background: white;
color: #374151;
cursor: pointer;
margin: 0 2px;
}
.btn-mini:hover {
background: #f3f4f6;
}
.btn-mini-danger {
color: #dc2626;
}
.btn-mini-danger:hover {
background: #fef2f2;
}
/* -----------------------------------------------------------------------------
Compact Modal
----------------------------------------------------------------------------- */
.modal-compact {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
align-items: center;
justify-content: center;
}
.modal-content-compact {
background-color: white;
border-radius: 6px;
width: 90%;
max-width: 480px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.modal-wide {
max-width: 640px;
}
.modal-header-compact {
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: 600;
color: #111827;
}
.modal-close-compact {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #9ca3af;
padding: 0;
width: 20px;
height: 20px;
}
.modal-close-compact:hover {
color: #111827;
}
.modal-body-compact {
padding: 16px;
}
.modal-text {
margin: 0 0 12px 0;
font-size: 13px;
color: #374151;
}
.modal-actions-compact {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 16px;
}
/* -----------------------------------------------------------------------------
Compact Form Elements
----------------------------------------------------------------------------- */
.form-row-compact {
margin-bottom: 12px;
}
.form-row-compact:last-child {
margin-bottom: 0;
}
.form-row-compact label {
display: block;
margin-bottom: 4px;
font-size: 12px;
font-weight: 500;
color: #374151;
}
.form-grid-compact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.input-compact {
width: 100%;
padding: 6px 8px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 13px;
}
.input-compact:focus {
outline: none;
border-color: #6b7280;
}
textarea.input-compact {
font-family: inherit;
resize: vertical;
}
/* -----------------------------------------------------------------------------
Search Results (Product Search in Modal)
----------------------------------------------------------------------------- */
.search-results-compact {
margin-top: 6px;
border: 1px solid #e5e7eb;
border-radius: 4px;
max-height: 240px;
overflow-y: auto;
background: white;
}
.search-result-compact {
padding: 8px;
cursor: pointer;
border-bottom: 1px solid #f3f4f6;
}
.search-result-compact:last-child {
border-bottom: none;
}
.search-result-compact:hover {
background: #f9fafb;
}
.result-name-compact {
font-size: 13px;
font-weight: 500;
color: #111827;
}
.result-meta-compact {
font-size: 11px;
color: #6b7280;
margin-top: 2px;
}
.result-stock-compact {
font-size: 11px;
white-space: nowrap;
margin-left: 12px;
flex-shrink: 0;
}
/* PIM-ID display in quotation items table */
.product-pim-id {
font-size: 0.75rem;
font-family: 'SF Mono', Monaco, 'Courier New', monospace;
letter-spacing: 0.02em;
}
.no-results-compact {
padding: 12px;
text-align: center;
color: #9ca3af;
font-size: 12px;
}
/* -----------------------------------------------------------------------------
Selected Product
----------------------------------------------------------------------------- */
.selected-product-compact {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.selected-name {
font-size: 13px;
font-weight: 600;
color: #111827;
}
.selected-meta {
font-size: 11px;
color: #6b7280;
margin-top: 2px;
}
/* -----------------------------------------------------------------------------
Currency Badge
----------------------------------------------------------------------------- */
.currency-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 6px 12px;
font-size: 13px;
font-weight: 600;
color: #374151;
white-space: nowrap;
min-width: 50px;
}
/* -----------------------------------------------------------------------------
Sales Order Conversion Banner
----------------------------------------------------------------------------- */
.so-conversion-banner {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border: 1px solid #6ee7b7;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
}
.so-conversion-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
background: #10b981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.so-conversion-content {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.so-conversion-label {
font-weight: 600;
color: #065f46;
font-size: 14px;
}
.so-conversion-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #047857;
font-weight: 600;
text-decoration: none;
font-size: 14px;
}
.so-conversion-link:hover {
text-decoration: underline;
}
.so-conversion-status {
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
font-weight: 500;
}
.so-conversion-status.so-status-draft {
background: #fef3c7;
color: #92400e;
}
.so-conversion-status.so-status-confirmed {
background: #d1fae5;
color: #065f46;
}
.so-conversion-status.so-status-processing {
background: #dbeafe;
color: #1e40af;
}
.so-conversion-status.so-status-completed {
background: #d1fae5;
color: #065f46;
}
.so-conversion-sep {
color: #6b7280;
}
.so-conversion-btn {
flex-shrink: 0;
background: #10b981 !important;
border-color: #10b981 !important;
color: white !important;
}
.so-conversion-btn:hover {
background: #059669 !important;
border-color: #059669 !important;
}
/* P2.5b: Partial conversion banner styling */
.so-conversion-banner.so-conversion-partial {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-color: #fbbf24;
}
.so-conversion-banner.so-conversion-partial .so-conversion-icon {
background: #f59e0b;
}
.so-conversion-banner.so-conversion-partial .so-conversion-label {
color: #92400e;
}
.so-conversion-banner.so-conversion-partial .so-conversion-link {
color: #b45309;
}
.so-conversion-partial-label {
display: block;
width: 100%;
margin-bottom: 4px;
}
.so-conversion-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
/* P2.5b: Conversion tracking columns in quotation items table */
.so-conversion-col {
width: 80px;
}
.qty-ordered {
display: inline-block;
padding: 2px 8px;
background: #dcfce7;
color: #166534;
border-radius: 4px;
font-weight: 600;
font-size: 12px;
}
.qty-remaining {
display: inline-block;
padding: 2px 8px;
background: #fef3c7;
color: #92400e;
border-radius: 4px;
font-weight: 600;
font-size: 12px;
}
.qty-complete {
display: inline-block;
padding: 2px 8px;
background: #d1fae5;
color: #065f46;
border-radius: 4px;
font-weight: 500;
font-size: 12px;
text-decoration: line-through;
opacity: 0.7;
}
.qty-zero {
color: #9ca3af;
font-size: 12px;
}
.qty-na {
color: #9ca3af;
font-size: 12px;
}
/* -----------------------------------------------------------------------------
Stock Column Styles for Quotation
----------------------------------------------------------------------------- */
.stock-column-q {
width: 70px;
}
.stock-info-tip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
background: #6b7280;
color: white;
border-radius: 50%;
font-size: 10px;
font-weight: 600;
font-style: italic;
margin-left: 4px;
cursor: help;
vertical-align: middle;
}
.stock-info-tip:hover {
background: #374151;
}
.stock-badge-q {
display: inline-block;
padding: 2px 8px;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
}
.stock-ok-q {
background: #dcfce7;
color: #166534;
}
.stock-low-q {
background: #fef9c3;
color: #854d0e;
}
.stock-out-q {
background: #fee2e2;
color: #991b1b;
}
.stock-na-q {
background: #f1f5f9;
color: #64748b;
}
/* ============================================
DOCUMENT FLOW PROGRESS BAR (v2 - Compact)
Order-to-cash lifecycle visualization
============================================ */
.doc-flow {
background: #fff;
border: 1px solid #e1e4e8;
border-radius: 6px;
margin-bottom: 16px;
overflow: hidden;
}
/* Header */
.doc-flow__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: #f6f8fa;
border-bottom: 1px solid #e1e4e8;
cursor: pointer;
user-select: none;
}
.doc-flow__header:hover {
background: #f0f3f6;
}
.doc-flow__title {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: #24292e;
}
.doc-flow__icon {
color: #f59e0b;
width: 14px;
height: 14px;
}
.doc-flow__source {
font-weight: 400;
color: #586069;
padding-left: 6px;
border-left: 1px solid #d1d5da;
margin-left: 2px;
}
.doc-flow__toggle {
display: flex;
align-items: center;
padding: 2px;
}
.doc-flow__chevron {
color: #586069;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Progress Row */
.doc-flow__progress {
display: flex;
padding: 10px 12px;
gap: 0;
border-bottom: 1px solid transparent;
}
.doc-flow[data-expanded="true"] .doc-flow__progress {
border-bottom-color: #e1e4e8;
}
.doc-flow__stage {
flex: 1;
padding: 0 8px;
border-right: 1px solid #e1e4e8;
}
.doc-flow__stage:first-child {
padding-left: 0;
}
.doc-flow__stage:last-child {
padding-right: 0;
border-right: none;
}
.doc-flow__stage-label {
font-size: 9px;
font-weight: 700;
color: #8b949e;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.doc-flow__stage-bar {
height: 6px;
background: #e1e4e8;
border-radius: 3px;
overflow: visible;
margin-bottom: 4px;
position: relative;
}
.doc-flow__stage-fill {
height: 100%;
border-radius: 3px;
transition: width 0.4s ease;
}
.doc-flow__stage-fill--quoted {
background: #6f42c1;
}
.doc-flow__stage-fill--ordered {
background: #14b8a6;
}
.doc-flow__stage-fill--delivered {
background: #f59e0b;
}
.doc-flow__stage-fill--invoiced {
background: #8b5cf6;
}
.doc-flow__stage-info {
font-size: 11px;
color: #57606a;
white-space: nowrap;
}
/* Stage info with tooltip support */
.doc-flow__stage-info--with-tooltip {
position: relative;
display: inline-flex;
align-items: center;
gap: 2px;
cursor: help;
}
.doc-flow__stage-count {
color: #57606a;
}
.doc-flow__ordered-display {
color: #57606a;
}
.doc-flow__ordered-display--exceeded {
color: #d97706;
font-weight: 600;
}
/* Over-ordered/exceeded state styling */
.doc-flow__stage--exceeded .doc-flow__stage-label {
color: #d97706;
}
.doc-flow__stage-fill--exceeded {
background: linear-gradient(90deg, #14b8a6 0%, #f59e0b 100%) !important;
}
.doc-flow__overflow-indicator {
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
font-size: 9px;
font-weight: 600;
color: #d97706;
background: #fef3c7;
padding: 1px 4px;
border-radius: 2px;
border: 1px solid #fcd34d;
}
/* Tooltip styling */
.doc-flow__tooltip {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 8px;
background: #1f2937;
color: #f9fafb;
padding: 10px 12px;
border-radius: 6px;
font-size: 11px;
min-width: 160px;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
white-space: nowrap;
}
.doc-flow__tooltip::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: transparent transparent #1f2937 transparent;
}
.doc-flow__stage-info--with-tooltip:hover .doc-flow__tooltip {
display: block;
}
.doc-flow__tooltip-title {
font-weight: 600;
margin-bottom: 6px;
color: #f3f4f6;
}
.doc-flow__tooltip-divider {
height: 1px;
background: #374151;
margin: 6px 0;
}
.doc-flow__tooltip-section {
font-size: 10px;
color: #9ca3af;
margin: 8px 0 4px 0;
font-style: italic;
}
.doc-flow__tooltip-row {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 0;
}
.doc-flow__tooltip-row--counted {
color: #34d399;
}
.doc-flow__tooltip-row--excluded {
color: #9ca3af;
}
.doc-flow__tooltip-icon {
width: 14px;
text-align: center;
flex-shrink: 0;
}
.doc-flow__tooltip-label {
flex: 1;
}
.doc-flow__tooltip-value {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Expanded Section */
.doc-flow__expanded {
display: none;
background: #fafbfc;
}
/* Cards Row - 4 equal columns with gaps for elbow arrows */
.doc-flow__cards-row {
display: flex;
position: relative;
min-height: 60px;
gap: 48px;
padding: 0 12px;
}
.doc-flow__cards-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 0;
min-width: 0;
position: relative;
}
/* Cards - Compact horizontal style to allow room for elbow arrows */
.doc-flow__card {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 7px;
background: #fff;
border: 1px solid #e1e4e8;
border-radius: 4px;
text-decoration: none;
color: inherit;
font-size: 10.5px;
transition: all 0.15s ease;
min-height: 28px;
}
.doc-flow__card:hover {
border-color: #0366d6;
box-shadow: 0 1px 4px rgba(3, 102, 214, 0.1);
}
.doc-flow__card--current {
border-color: #0366d6;
border-width: 2px;
background: #f0f7ff;
}
.doc-flow__card--pending {
border-style: dashed;
background: #fafbfc;
pointer-events: none;
}
/* Card Badge */
.doc-flow__card-badge {
width: 18px;
height: 18px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 700;
flex-shrink: 0;
}
.doc-flow__card-badge--quotation {
background: #f3e8ff;
color: #6f42c1;
border: 1px solid #6f42c1;
}
.doc-flow__card-badge--sales-order {
background: #d1fae5;
color: #059669;
border: 1px solid #059669;
}
.doc-flow__card-badge--delivery {
background: #fef3c7;
color: #d97706;
border: 1px solid #d97706;
}
.doc-flow__card-badge--invoice {
background: #ede9fe;
color: #7c3aed;
border: 1px solid #7c3aed;
}
.doc-flow__card-badge--pending {
background: #f6f8fa;
color: #8b949e;
border: 1px dashed #d1d5da;
}
/* Card Content */
.doc-flow__card-content {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
min-width: 0;
overflow: hidden;
}
.doc-flow__card-number {
font-weight: 600;
color: #24292e;
white-space: nowrap;
}
.doc-flow__card-sep {
color: #d1d5da;
}
.doc-flow__card-status {
white-space: nowrap;
}
.doc-flow__card-status--sent,
.doc-flow__card-status--accepted,
.doc-flow__card-status--confirmed,
.doc-flow__card-status--fulfilled {
color: #22863a;
}
.doc-flow__card-status--draft {
color: #6a737d;
}
.doc-flow__card-status--cancelled {
color: #cb2431;
}
.doc-flow__card-units {
color: #57606a;
white-space: nowrap;
}
.doc-flow__card-here {
font-size: 8px;
padding: 2px 4px;
background: #0366d6;
color: #fff;
border-radius: 2px;
font-weight: 600;
white-space: nowrap;
margin-left: auto;
}
/* Pending card text */
.doc-flow__card-pending-text {
font-weight: 500;
color: #8b949e;
}
.doc-flow__card-pending-hint {
font-size: 10px;
color: #c9d1d9;
}
/* SVG Arrows */
.doc-flow__arrows {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
}
/* Legend */
.doc-flow__legend {
display: flex;
justify-content: center;
gap: 16px;
padding: 8px 12px;
border-top: 1px solid #e1e4e8;
background: #fff;
}
.doc-flow__legend-item {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: #57606a;
}
.doc-flow__legend-dot {
width: 8px;
height: 8px;
border-radius: 2px;
}
.doc-flow__legend-dot--confirmed {
background: #22863a;
}
.doc-flow__legend-dot--draft {
background: #6a737d;
}
.doc-flow__legend-dot--pending {
background: #f6f8fa;
border: 1px dashed #d1d5da;
}
/* Standalone SO - hide quotation column */
.doc-flow--standalone .doc-flow__cards-col[data-stage="quoted"] {
display: none;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.doc-flow__progress {
flex-wrap: wrap;
gap: 8px;
}
.doc-flow__stage {
flex-basis: calc(50% - 4px);
min-width: calc(50% - 4px);
border-right: none;
padding: 0;
margin-bottom: 8px;
}
.doc-flow__cards-row {
flex-wrap: wrap;
}
.doc-flow__cards-col {
flex-basis: 50%;
min-width: 50%;
border-right: none;
border-bottom: 1px solid #e1e4e8;
}
.doc-flow__cards-col:last-child,
.doc-flow__cards-col:nth-last-child(2) {
border-bottom: none;
}
.doc-flow__legend {
flex-wrap: wrap;
gap: 8px 16px;
}
}
/* ==========================================
STATUS BANNER (Readiness Indicators)
========================================== */
.status-banner {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
}
.status-banner-icon {
flex-shrink: 0;
margin-top: 2px;
}
.status-banner-content {
flex: 1;
}
.status-banner-content strong {
display: block;
margin-bottom: 4px;
}
.status-banner-content p {
margin: 0;
font-size: 14px;
opacity: 0.9;
}
.status-banner-content .btn-link-subtle {
font-size: 13px;
padding: 0;
margin-top: 8px;
background: none;
border: none;
text-decoration: underline;
cursor: pointer;
display: inline-block;
}
.status-banner-actions {
flex-shrink: 0;
}
/* Banner Variants */
.status-banner-success {
background-color: #ecfdf5;
border: 1px solid #10b981;
color: #065f46;
}
.status-banner-success .status-banner-icon {
color: #10b981;
}
.status-banner-warning {
background-color: #fffbeb;
border: 1px solid #f59e0b;
color: #92400e;
}
.status-banner-warning .status-banner-icon {
color: #f59e0b;
}
.status-banner-warning .btn-link-subtle {
color: #92400e;
}
.status-banner-info {
background-color: #eff6ff;
border: 1px solid #3b82f6;
color: #1e40af;
}
.status-banner-info .status-banner-icon {
color: #3b82f6;
}
.status-banner-muted {
background-color: #f3f4f6;
border: 1px solid #9ca3af;
color: #4b5563;
}
.status-banner-muted .status-banner-icon {
color: #9ca3af;
}
/* Stock Details Panel (Collapsible) */
.stock-details-panel {
background-color: #fefce8;
border: 1px solid #fde047;
border-radius: 0 0 8px 8px;
margin-top: -17px;
margin-bottom: 16px;
padding: 12px 16px;
}
.stock-details-panel .table {
margin-bottom: 0;
font-size: 14px;
}
/* Item Stock Status Badges */
.badge-stock-ok {
display: inline-flex;
align-items: center;
gap: 4px;
background-color: #ecfdf5;
color: #065f46;
border: 1px solid #10b981;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.badge-stock-partial {
display: inline-flex;
align-items: center;
gap: 4px;
background-color: #fffbeb;
color: #92400e;
border: 1px solid #f59e0b;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.badge-stock-none {
display: inline-flex;
align-items: center;
gap: 4px;
background-color: #fef2f2;
color: #991b1b;
border: 1px solid #ef4444;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
/* Status Dots */
.status-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
}
.status-dot-success {
background-color: #10b981;
}
.status-dot-warning {
background-color: #f59e0b;
}
.status-dot-danger {
background-color: #ef4444;
}
/* Stock column text colors */
.do-stock-ok {
color: #065f46;
}
.do-stock-warning {
color: #92400e;
}
.do-stock-danger {
color: #991b1b;
}
/* Responsive for status banner */
@media (max-width: 768px) {
.status-banner {
flex-wrap: wrap;
}
.status-banner-actions {
width: 100%;
margin-top: 12px;
}
.status-banner-actions .btn {
width: 100%;
}
}
/* ============================================
Delivery Checklist Styles
============================================ */
.checklist {
list-style: none;
margin: 0;
padding: 0;
}
.checklist-item {
display: flex;
align-items: flex-start;
padding: 10px 16px;
border-bottom: 1px solid #f3f4f6;
gap: 10px;
}
.checklist-item:last-child {
border-bottom: none;
}
.checklist-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.checklist-text {
flex: 1;
font-size: 13px;
line-height: 1.4;
color: #374151;
}
.checklist-note {
color: #6b7280;
font-size: 12px;
}
.checklist-link {
color: #2563eb;
text-decoration: none;
font-weight: 500;
}
.checklist-link:hover {
text-decoration: underline;
}
.checklist-action {
display: inline-block;
margin-left: 8px;
font-size: 12px;
color: #2563eb;
text-decoration: none;
}
.checklist-action:hover {
text-decoration: underline;
}
.checklist-timestamp {
display: block;
font-size: 11px;
color: #9ca3af;
margin-top: 2px;
}
/* Checklist Divider */
.checklist-divider {
height: 1px;
background: #e5e7eb;
margin: 8px 16px;
padding: 0;
border-bottom: none;
}
/* Checklist Dots (for pending/current steps) */
.checklist-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #d1d5db;
background: #fff;
}
.checklist-dot-current {
border-color: #3b82f6;
background: #3b82f6;
}
/* Status Variants */
.checklist-complete .checklist-icon {
color: #10b981;
}
.checklist-complete .checklist-text {
color: #065f46;
}
.checklist-warning .checklist-icon {
color: #f59e0b;
}
.checklist-warning .checklist-text {
color: #92400e;
}
.checklist-warning .checklist-note {
color: #b45309;
}
.checklist-error .checklist-icon {
color: #ef4444;
}
.checklist-error .checklist-text {
color: #991b1b;
}
.checklist-info .checklist-icon {
color: #6b7280;
}
.checklist-info .checklist-text {
color: #6b7280;
}
.checklist-current .checklist-text {
color: #1e40af;
font-weight: 500;
}
.checklist-pending .checklist-text {
color: #9ca3af;
}
/* Collapsible Card Header */
.card-header-collapsible {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-header-collapsible:hover {
background-color: #f9fafb;
}
.card-header-collapsible .chevron {
transition: transform 0.2s ease;
color: #9ca3af;
}
.card-header-collapsible.expanded .chevron {
transform: rotate(180deg);
}
/* Text color helpers */
.text-warning {
color: #f59e0b !important;
}
/* Padding utility */
.p-0 {
padding: 0 !important;
}
/* ============================================
P3: Info Box Styles
============================================ */
.info-box {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border-radius: 6px;
font-size: 14px;
line-height: 1.5;
}
.info-box .info-icon {
flex-shrink: 0;
margin-top: 2px;
}
.info-box-success {
background-color: #ecfdf5;
border: 1px solid #a7f3d0;
color: #065f46;
}
.info-box-success .info-icon {
color: #10b981;
}
.info-box-warning {
background-color: #fffbeb;
border: 1px solid #fde68a;
color: #92400e;
}
.info-box-warning .info-icon {
color: #f59e0b;
}
.info-box-info {
background-color: #eff6ff;
border: 1px solid #bfdbfe;
color: #1e40af;
}
.info-box-info .info-icon {
color: #3b82f6;
}
/* ============================================
P3: Badge Subtle Variants
============================================ */
.badge-subtle {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.badge-success-subtle {
background-color: #ecfdf5;
color: #065f46;
border: 1px solid #a7f3d0;
}
.badge-warning-subtle {
background-color: #fffbeb;
color: #92400e;
border: 1px solid #fde68a;
}
.badge-info-subtle {
background-color: #eff6ff;
color: #1e40af;
border: 1px solid #bfdbfe;
}
.badge-secondary-subtle {
background-color: #f3f4f6;
color: #4b5563;
border: 1px solid #d1d5db;
}
.badge-danger-subtle {
background-color: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
/* ============================================
P3: Reservation Summary Section
============================================ */
.reservation-summary {
padding: 12px 16px;
border-top: 1px solid #e5e7eb;
}
.reservation-table {
font-size: 13px;
}
.reservation-table th {
font-size: 10px;
}
/* ============================================
P3: Disabled Button Styling
============================================ */
.btn-disabled,
.btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: auto; /* Allow hover for tooltip */
}
.btn-disabled:hover,
.btn[disabled]:hover {
opacity: 0.6;
}
/* Document header disabled button */
.document-header__btn--disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: auto;
}
.document-header__btn--disabled:hover {
opacity: 0.6;
background-color: inherit;
}
/* ============================================
P3: Contextual Secondary Action
============================================ */
.contextual-secondary-action {
display: flex;
justify-content: flex-end;
padding: 0 0 8px 0;
margin-top: -8px;
}
.contextual-secondary-action .btn {
font-size: 13px;
}
/* ============================================
P3: Dropdown Item Disabled State
============================================ */
.dropdown-item.disabled,
.document-header__dropdown-item.disabled {
color: #9ca3af;
cursor: not-allowed;
pointer-events: auto;
}
.dropdown-item.disabled:hover,
.document-header__dropdown-item.disabled:hover {
background-color: transparent;
color: #9ca3af;
}
/* Danger dropdown item */
.dropdown-item-danger {
color: #dc2626;
}
.dropdown-item-danger:hover {
background-color: #fef2f2;
color: #b91c1c;
}
/* ============================================
TIERED PRICING SUMMARY
============================================ */
.tiered-pricing-card {
background: #ffffff;
border: 1px solid #e1e4e8;
border-radius: 6px;
margin-top: 16px;
overflow: hidden;
}
.tiered-pricing-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f6f8fa;
border-bottom: 1px solid #e1e4e8;
}
.tiered-pricing-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: #24292e;
}
.tiered-pricing-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 12px;
font-weight: 500;
}
.tiered-pricing-badge.frozen {
background: #ddf4ff;
color: #0550ae;
}
.tiered-pricing-badge.live {
background: #dcfce7;
color: #166534;
}
.tiered-pricing-body {
padding: 0;
}
.pricing-summary-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.pricing-summary-table td {
padding: 8px 16px;
border: none;
vertical-align: top;
}
/* Tier Header (Products) */
.pricing-summary-table .tier-header td {
padding-top: 12px;
padding-bottom: 8px;
}
.pricing-summary-table .tier-label {
font-weight: 600;
color: #24292e;
}
.pricing-summary-table .tier-value {
text-align: right;
font-weight: 600;
color: #24292e;
}
/* Adjustment rows (discounts, surcharges, duties) */
.pricing-summary-table .adjustment-row td {
padding-top: 6px;
padding-bottom: 6px;
}
.pricing-summary-table .adjustment-label {
color: #57606a;
}
.pricing-summary-table .adjustment-desc {
color: #57606a;
}
.pricing-summary-table .adjustment-detail {
font-size: 12px;
color: #8b949e;
display: inline-block;
padding-left: 12px;
}
.pricing-summary-table .adjustment-value {
text-align: right;
color: #57606a;
}
.pricing-summary-table .adjustment-value.text-danger {
color: #cf222e !important;
}
/* Subtotal rows */
.pricing-summary-table .subtotal-row td {
padding-top: 4px;
padding-bottom: 4px;
}
.pricing-summary-table .tier-divider {
border: none;
border-top: 1px solid #e1e4e8;
margin: 0;
}
.pricing-summary-table .subtotal-label {
font-weight: 600;
color: #24292e;
}
.pricing-summary-table .subtotal-value {
text-align: right;
font-weight: 600;
color: #24292e;
}
/* Spacer */
.pricing-summary-table .tier-spacer {
padding: 8px 16px;
}
/* Tax category badge */
.tax-category-badge {
font-size: 10px;
padding: 1px 6px;
border-radius: 4px;
background: #eef1f5;
color: #57606a;
margin-left: 6px;
text-transform: lowercase;
}
/* VAT row */
.pricing-summary-table .vat-row .adjustment-desc {
color: #24292e;
}
/* Total row */
.pricing-summary-table .total-row td {
padding-top: 4px;
padding-bottom: 4px;
}
.pricing-summary-table .total-divider {
border: none;
border-top: 2px solid #24292e;
margin: 0;
}
.pricing-summary-table .grand-total td {
background: #f6f8fa;
padding-top: 12px;
padding-bottom: 12px;
}
.pricing-summary-table .total-label {
font-size: 16px;
font-weight: 700;
color: #24292e;
}
.pricing-summary-table .total-value {
text-align: right;
font-size: 16px;
font-weight: 700;
color: #24292e;
}