/* ============================================================================
CSS VARIABLES - NKT Theme System (Refined Modern Minimalism)
============================================================================ */
:root {
/* NKT Brand Colors - Preserved with enhanced dark variant */
--color-primary: #1E2A56;
--color-primary-dark: #161F40;
--color-primary-light: #2D3C6E;
--color-primary-hover: #141B38;
--color-primary-muted: #3A4B7B;
/* Status Colors */
--color-success: #10b981;
--color-success-light: #d1fae5;
--color-danger: #dc2626;
--color-danger-light: #fee2e2;
--color-warning: #ffc107;
--color-warning-light: #fef3c7;
--color-info: #0284c7;
--color-info-light: #dbeafe;
/* Neutral Colors */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
/* Surface Colors - Layered backgrounds for depth */
--color-surface-0: #ffffff;
--color-surface-1: #fafbfc;
--color-surface-2: #f4f5f7;
--color-surface-3: #ebedf0;
/* Background Colors (legacy support) */
--color-bg-primary: #ffffff;
--color-bg-secondary: #f9fafb;
--color-bg-tertiary: #f3f4f6;
/* Refined Border Colors */
--color-border-subtle: #e8eaed;
--color-border-light: #dfe1e6;
--color-border-default: #c1c7d0;
--color-border-strong: #8993a4;
--color-border-dark: #9ca3af;
/* Text Colors */
--color-text-primary: #1f2937;
--color-text-secondary: #6b7280;
--color-text-tertiary: #9ca3af;
--color-text-inverse: #ffffff;
/* Spacing Scale */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* Font Sizes */
--font-xs: 0.75rem;
--font-sm: 0.875rem;
--font-base: 1rem;
--font-lg: 1.125rem;
--font-xl: 1.25rem;
--font-2xl: 1.5rem;
/* Font Weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* Typography Refinements */
--font-tracking-tight: -0.015em;
--font-tracking-normal: 0;
--font-tracking-wide: 0.01em;
--font-tracking-caps: 0.05em;
/* Line Heights */
--leading-none: 1;
--leading-tight: 1.2;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
/* Refined Border Radius - Slightly less rounded for professional look */
--radius-xs: 3px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 10px;
--radius-2xl: 12px;
--radius-full: 9999px;
/* Enhanced Shadow System - More sophisticated depth */
--shadow-xs: 0 1px 2px rgba(9, 30, 66, 0.04);
--shadow-sm: 0 1px 3px rgba(9, 30, 66, 0.08), 0 0 1px rgba(9, 30, 66, 0.12);
--shadow-md: 0 3px 8px rgba(9, 30, 66, 0.08), 0 0 1px rgba(9, 30, 66, 0.16);
--shadow-lg: 0 8px 24px rgba(9, 30, 66, 0.12), 0 0 1px rgba(9, 30, 66, 0.16);
--shadow-xl: 0 12px 40px rgba(9, 30, 66, 0.16), 0 0 1px rgba(9, 30, 66, 0.20);
/* Card-specific shadows with subtle brand color tint */
--shadow-card: 0 1px 3px rgba(30, 42, 86, 0.06), 0 0 0 1px rgba(30, 42, 86, 0.04);
--shadow-card-hover: 0 4px 12px rgba(30, 42, 86, 0.12), 0 0 0 1px rgba(30, 42, 86, 0.08);
/* Refined Transitions - Smoother easing */
--transition-micro: 100ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
}
/* =================================================================
UTILITY CLASSES
================================================================= */
.text-secondary {
color: var(--color-text-secondary);
}
.text-tertiary {
color: var(--color-text-tertiary);
}
.text-primary {
color: var(--color-text-primary);
}
/* Stat icon for error card */
.stat-icon-error {
background-color: var(--color-danger-light);
}
.stat-icon-error i {
color: var(--color-danger);
}
/* Section actions (button container in section header) */
.section-actions {
display: flex;
align-items: center;
gap: var(--space-md);
}
/* My items subtitle */
.my-items-subtitle {
margin: 0;
font-size: 0.9rem;
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: var(--leading-normal);
color: var(--color-text-primary);
background-color: var(--color-bg-secondary);
}
@media (max-width: 768px) {
body {
overflow-x: hidden;
}
}
/* Navigation */
.navbar {
background: linear-gradient(135deg, #2A3B6B 0%, #3A4B7B 100%);
padding: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 999998;
/* contain: layout style; */
/* Prevent layout shifts */
width: 100%;
height: 70px;
/* Allow dropdown to extend beyond navbar bounds */
overflow: visible;
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
height: 70px;
/* Ensure container doesn't clip dropdown */
position: relative;
overflow: visible;
}
.nav-brand {
display: flex;
align-items: center;
gap: 1rem;
font-weight: 700;
font-size: 1.5rem;
color: white;
text-decoration: none;
}
.nav-logo {
height: 40px;
width: auto;
/* Use a different approach to invert colors - filter can create stacking contexts */
filter: brightness(0) invert(1);
/* Ensure logo doesn't interfere with dropdown positioning */
position: relative;
z-index: auto;
}
.nav-menu {
display: flex;
align-items: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
/* transform: translateZ(0); */ /* Removed - creates stacking context */
/* contain: layout style paint; */
/* -webkit-overflow-scrolling: touch; */
/* overflow-scrolling: touch; */
}
.nav-link {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
text-decoration: none;
padding: 0.5625rem 0.75rem;
border-radius: 0.5rem;
font-weight: 500;
font-size: 0.875rem;
transition: all 0.2s ease;
}
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
.nav-link i {
font-size: 0.6875rem;
}
/* Dropdown Menu Styles */
.nav-dropdown {
position: relative;
display: inline-block;
/* Ensure this container creates a proper stacking context for the dropdown */
z-index: 999999;
}
.nav-dropdown-trigger {
cursor: pointer;
position: relative;
}
.dropdown-arrow {
margin-left: 0.25rem;
font-size: 0.625rem !important;
transition: transform 0.2s ease;
}
.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown.active .dropdown-arrow {
transform: rotate(180deg);
}
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: white;
border-radius: 0.5rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0.1);
min-width: 200px;
z-index: 1000000;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
overflow: hidden;
/* Ensure dropdown is clickable when visible */
pointer-events: auto;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.active .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
color: #374151;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.15s ease;
border-bottom: 1px solid #f3f4f6;
}
.nav-dropdown-item:last-child {
border-bottom: none;
}
.nav-dropdown-item:hover:not(.disabled) {
background: #f8f9fa;
color: #1E2A56;
}
.nav-dropdown-item i {
font-size: 0.6875rem;
color: #6b7280;
width: 14px;
text-align: center;
}
.nav-dropdown-item:hover:not(.disabled) i {
color: #1E2A56;
}
.nav-dropdown-item.disabled {
opacity: 0.5;
cursor: not-allowed;
position: relative;
}
.coming-soon {
margin-left: auto;
font-size: 0.625rem;
color: #6b7280;
background: #f3f4f6;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
font-weight: normal;
}
/* User Menu Styles */
.nav-user-menu {
display: flex;
align-items: center;
gap: 1rem;
margin-left: 1rem;
padding-left: 1rem;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.nav-user-info {
display: flex;
flex-direction: column;
align-items: flex-end;
color: white;
}
.user-name {
font-weight: 600;
font-size: 0.9rem;
}
.user-role {
font-size: 0.75rem;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nav-logout-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 0.375rem;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 1.875rem;
height: 1.875rem;
will-change: transform;
contain: layout style;
}
.nav-logout-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
.nav-logout-btn i {
font-size: 0.6875rem;
}
/* Mobile Navigation */
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
background: none;
border: none;
padding: 0.5rem;
gap: 3px;
}
.hamburger-line {
width: 25px;
height: 3px;
background: white;
transition: all 0.3s ease;
border-radius: 2px;
}
/* Mobile logo adjustments */
@media (max-width: 768px) {
.nav-logo {
height: 28px !important;
}
.nav-brand {
gap: 0.5rem !important;
}
}
/* Development State Warning */
.development-warning {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: white;
padding: 0;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
border-bottom: 3px solid #991b1b;
position: sticky;
top: 70px; /* Position below navbar */
z-index: 999997; /* Below navbar but above main content */
animation: slideDown 0.5s ease-out;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-100%);
opacity: 0;
}
}
.development-warning-content {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 1rem 2rem;
gap: 1rem;
}
.development-warning-icon {
font-size: 1.5rem;
color: #fbbf24;
min-width: 24px;
}
.development-warning-text {
flex: 1;
font-size: 0.95rem;
line-height: 1.4;
}
.development-warning-close {
background: none;
border: none;
color: white;
font-size: 1.2rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 0.375rem;
transition: all 0.2s ease;
opacity: 0.8;
}
.development-warning-close:hover {
background: rgba(255, 255, 255, 0.1);
opacity: 1;
}
/* Main Content */
.main-content {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
/* Prevent layout shifts */
min-height: calc(100vh - 70px - 100px); /* Account for navbar and footer */
width: 100%;
box-sizing: border-box;
/* Consistent top spacing for all pages */
padding-top: 2rem;
/* Ensure main content stays below navigation elements */
position: relative;
z-index: 1;
}
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
/* Consistent sizing to prevent shifts */
box-sizing: border-box;
}
/* Wide Container for tables that need more space */
.container-wide {
width: 100%;
max-width: 1400px; /* Consistent with other containers */
margin: 0 auto;
padding: 2rem;
/* Prevent layout shifts */
box-sizing: border-box;
min-height: calc(100vh - 70px - 100px); /* Account for navbar and footer */
/* Consistent top spacing for all pages */
padding-top: 2rem;
}
/* Page Headers - Refined Styling */
.page-header {
margin-bottom: 1.5rem;
margin-top: 0;
padding-top: 0;
}
.page-header h1 {
margin-top: 0;
margin-bottom: 0.5rem;
font-size: 1.875rem;
font-weight: 600;
color: var(--color-gray-900);
letter-spacing: var(--font-tracking-tight);
line-height: var(--leading-tight);
display: flex;
align-items: center;
gap: 0.75rem;
}
.page-header h1 i {
color: var(--color-primary);
font-size: 1.5rem;
opacity: 0.9;
}
.page-header p {
margin-top: 0;
margin-bottom: 0;
color: var(--color-gray-500);
font-size: 0.9375rem;
letter-spacing: var(--font-tracking-wide);
}
/* Statistics Grid - Refined Layout with Responsive Breakpoints */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
@media (max-width: 1400px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: 1fr;
}
}
/* Stat Card - Refined with subtle left accent on hover */
.stat-card {
background: var(--color-surface-0);
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
box-shadow: var(--shadow-card);
border: 1px solid transparent;
display: flex;
align-items: center;
gap: 1rem;
transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
cursor: pointer;
position: relative;
overflow: hidden;
}
/* Subtle left accent line */
.stat-card:hover {
box-shadow: var(--shadow-card-hover);
border-color: var(--color-border-subtle);
transform: translateY(-1px);
background: linear-gradient(135deg, rgba(30, 42, 86, 0.02) 0%, rgba(30, 42, 86, 0.04) 100%);
}
.stat-card.clickable {
cursor: pointer;
}
.stat-card.clickable:active {
transform: translateY(0);
box-shadow: var(--shadow-card);
}
/* Ensure anchor tag stat-cards behave like cards */
a.stat-card {
text-decoration: none;
color: inherit;
}
a.stat-card:hover {
text-decoration: none;
color: inherit;
}
/* Stat Icon - Refined with subtle gradients */
.stat-icon {
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
transition: transform var(--transition-fast);
}
.stat-card:hover .stat-icon {
transform: scale(1.05);
}
/* Icon backgrounds with subtle gradients */
.stat-icon.pending {
background: linear-gradient(135deg, #fef3cd 0%, #fde68a 100%);
color: #92400e;
}
.stat-icon.in-progress {
background: linear-gradient(135deg, #cce5ff 0%, #93c5fd 100%);
color: #1e40af;
}
.stat-icon.completed {
background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%);
color: #065f46;
}
.stat-icon.completion-rate {
background: linear-gradient(135deg, #e9d5ff 0%, #c4b5fd 100%);
color: #6b21a8;
}
.stat-icon.due-soon {
background: linear-gradient(135deg, #ffedd5 0%, #fdba74 100%);
color: #9a3412;
}
.stat-icon.high-priority {
background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%);
color: #991b1b;
}
.stat-icon.overdue {
background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%);
color: #991b1b;
}
.stat-content h3 {
font-size: 1.75rem;
font-weight: 600;
color: var(--color-gray-900);
letter-spacing: var(--font-tracking-tight);
line-height: var(--leading-none);
margin-bottom: 0.125rem;
}
.stat-content p {
color: var(--color-gray-500);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: var(--font-tracking-wide);
}
/* Charts Section - Refined Layout */
.charts-section {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
margin-bottom: var(--space-xl);
}
@media (max-width: 1024px) {
.charts-section {
grid-template-columns: 1fr;
}
}
.chart-container {
background: var(--color-surface-0);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-card);
border: 1px solid var(--color-border-subtle);
height: 400px;
max-height: 400px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
contain: layout style paint;
}
.chart-container canvas {
max-width: 100% !important;
max-height: 320px !important;
height: 320px !important;
flex: 0 0 auto;
image-rendering: auto;
}
.chart-header {
margin-bottom: 1.25rem;
padding-bottom: 0.875rem;
border-bottom: 1px solid var(--color-border-subtle);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.chart-header h3 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-gray-800);
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.chart-header h3 i {
color: var(--color-primary);
font-size: 0.875rem;
opacity: 0.8;
}
/* Buttons */
/* ============================================================================
BUTTONS - Refined Component System
============================================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5625rem 1rem;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-weight: 500;
font-size: 0.8125rem;
text-decoration: none;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-micro);
line-height: var(--leading-tight);
white-space: nowrap;
user-select: none;
}
.btn:disabled,
.btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Button Sizes */
.btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
gap: 0.375rem;
}
.btn-lg {
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
}
/* Primary Button - Strong presence */
.btn-primary {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
box-shadow: 0 1px 2px rgba(30, 42, 86, 0.2);
}
.btn-primary:hover:not(:disabled) {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
box-shadow: 0 2px 4px rgba(30, 42, 86, 0.25);
}
.btn-primary:active:not(:disabled) {
background: var(--color-primary-hover);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Secondary Button - Subtle, outline style */
.btn-secondary {
background: var(--color-surface-0);
color: var(--color-gray-700);
border-color: var(--color-border-default);
}
.btn-secondary:hover:not(:disabled) {
background: var(--color-surface-1);
border-color: var(--color-border-strong);
color: var(--color-gray-800);
}
/* Success Button */
.btn-success {
background: var(--color-success);
color: var(--color-text-inverse);
border-color: var(--color-success);
box-shadow: 0 1px 2px rgba(16, 185, 129, 0.2);
}
.btn-success:hover:not(:disabled) {
background: #059669;
border-color: #059669;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
}
/* Danger Button */
.btn-danger {
background: var(--color-danger);
color: var(--color-text-inverse);
border-color: var(--color-danger);
box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
}
.btn-danger:hover:not(:disabled) {
background: #b91c1c;
border-color: #b91c1c;
box-shadow: 0 2px 4px rgba(220, 38, 38, 0.25);
}
/* Warning Button */
.btn-warning {
background: var(--color-warning);
color: var(--color-gray-900);
border-color: var(--color-warning);
box-shadow: 0 1px 2px rgba(255, 193, 7, 0.2);
}
.btn-warning:hover:not(:disabled) {
background: #e0a800;
border-color: #e0a800;
box-shadow: 0 2px 4px rgba(255, 193, 7, 0.25);
}
/* Info Button */
.btn-info {
background: var(--color-info);
color: var(--color-text-inverse);
border-color: var(--color-info);
box-shadow: 0 1px 2px rgba(2, 132, 199, 0.2);
}
.btn-info:hover:not(:disabled) {
background: #0369a1;
border-color: #0369a1;
box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
}
/* Outline Variants */
.btn-outline {
background: transparent;
color: var(--color-text-primary);
border-color: var(--color-border-default);
}
.btn-outline:hover:not(:disabled) {
background: var(--color-surface-1);
border-color: var(--color-border-strong);
}
.btn-outline-primary {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-outline-primary:hover:not(:disabled) {
background: var(--color-primary);
color: var(--color-text-inverse);
}
/* Tables - Refined Styling */
.table-container {
position: relative;
background: var(--color-surface-0);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
border: 1px solid var(--color-border-subtle);
width: 100%;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
}
.table-container-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.orders-table {
contain: layout style;
flex: 1;
width: 100%;
max-width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.8125rem;
table-layout: auto;
min-width: 1200px;
}
.orders-table th {
background: linear-gradient(180deg, var(--color-surface-1) 0%, var(--color-surface-2) 100%);
padding: 0.75rem 1rem;
text-align: left;
font-weight: 600;
font-size: 0.75rem;
color: var(--color-gray-600);
letter-spacing: var(--font-tracking-caps);
text-transform: uppercase;
border-bottom: 2px solid var(--color-border-light);
white-space: nowrap;
position: sticky;
top: 0;
z-index: 10;
cursor: pointer;
user-select: none;
transition: background var(--transition-fast), color var(--transition-fast);
}
.orders-table th:first-child {
padding-left: 1.25rem;
}
.orders-table th:last-child {
padding-right: 1.25rem;
}
.orders-table th:hover {
background: linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-surface-3) 100%);
}
.orders-table th.sortable {
position: relative;
padding-right: 2rem;
cursor: pointer;
}
.orders-table th.sortable:hover {
color: var(--color-primary);
}
.orders-table th.sortable::after {
content: '↕';
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
font-size: 0.7rem;
transition: opacity var(--transition-fast);
}
.orders-table th.sortable:hover::after {
opacity: 0.7;
}
.orders-table th.sortable.sort-asc::after {
content: '↑';
opacity: 1;
color: var(--color-primary);
}
.orders-table th.sortable.sort-desc::after {
content: '↓';
opacity: 1;
color: var(--color-primary);
}
.orders-table td {
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--color-border-subtle);
vertical-align: middle;
color: var(--color-gray-700);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background-color var(--transition-fast);
}
.orders-table td:first-child {
padding-left: 1.25rem;
}
.orders-table td:last-child {
padding-right: 1.25rem;
}
/* Refined row hover */
.orders-table tbody tr:not(.expand-row):hover {
background-color: rgba(30, 42, 86, 0.02);
}
.orders-table tbody tr:not(.expand-row):hover td {
border-bottom-color: var(--color-border-light);
}
/* High priority row indicator */
.orders-table tbody tr.high-priority-row {
position: relative;
}
.orders-table tbody tr.high-priority-row td:first-child {
border-left: 3px solid var(--color-danger);
}
.orders-table tbody tr.high-priority-row:hover {
background-color: rgba(239, 68, 68, 0.03);
}
/* Set specific widths for each column - expandable row layout with 9 columns */
/* Expand button column */
.orders-table th.expand-column,
.orders-table td.expand-cell {
width: 40px;
min-width: 40px;
max-width: 40px;
text-align: center;
padding: 0.3rem;
}
/* Orders-only view: ID column (2nd column with expand button) */
.orders-table.orders-only-view th:nth-child(2),
.orders-table.orders-only-view td:nth-child(2) {
width: 70px;
min-width: 70px;
max-width: 85px;
white-space: nowrap;
}
/* Mixed view: Type is first column, ID is second */
.orders-table.mixed-view th:nth-child(1), /* Type column */
.orders-table.mixed-view td:nth-child(1) {
width: 90px;
min-width: 80px;
max-width: 100px;
}
.orders-table.mixed-view th:nth-child(2), /* ID column in mixed view */
.orders-table.mixed-view td:nth-child(2) {
width: 70px;
min-width: 70px;
max-width: 85px;
white-space: nowrap;
}
.orders-table th:nth-child(3), /* Project column */
.orders-table td:nth-child(3) {
width: 200px;
min-width: 180px;
}
.orders-table th:nth-child(4), /* Header column */
.orders-table td:nth-child(4) {
width: 200px;
min-width: 150px;
}
.orders-table th:nth-child(5), /* Assigned Staff column */
.orders-table td:nth-child(5) {
width: 120px;
min-width: 100px;
}
.orders-table th:nth-child(6), /* Requested Packing Date column */
.orders-table td:nth-child(6) {
width: 110px;
min-width: 100px;
}
.orders-table th:nth-child(7), /* Ship By column */
.orders-table td:nth-child(7) {
width: 100px;
min-width: 90px;
}
.orders-table th:nth-child(8), /* Deliveries column */
.orders-table td:nth-child(8) {
width: 110px;
min-width: 100px;
}
.orders-table th:nth-child(9), /* Status column - optimized for 6 icons */
.orders-table td:nth-child(9) {
width: 300px;
min-width: 280px;
}
/* New column-specific styling */
.header-cell {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.assigned-cell {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.requested-packing-cell {
text-align: center;
}
/* ==================== EXPANDABLE ROW STYLES ==================== */
/* Expand button styling */
.expand-btn {
background: none;
border: none;
color: #6b7280;
cursor: pointer;
padding: 0.25rem;
border-radius: 4px;
transition: color 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
}
.expand-btn:hover {
background-color: #f3f4f6;
color: #374151;
}
.expand-btn.expanded {
color: #3b82f6;
}
.expand-btn i {
font-size: 0.875rem;
transition: transform 0.2s ease;
}
/* Expandable row */
.expand-row {
background-color: #fafafa !important;
border-top: none;
}
.expand-row:hover {
background-color: #fafafa !important;
}
.expand-row td {
background-color: transparent !important;
}
.expand-row td:hover {
background-color: transparent !important;
}
.expand-content {
padding: 0.75rem 3rem !important;
border-bottom: 1px solid #e5e7eb !important;
background-color: #fafafa !important;
/* Chrome-specific fixes for subpixel rendering */
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
/* Create new stacking context and isolation layer */
isolation: isolate;
contain: layout style paint;
position: relative;
}
/* High priority expanded row indicator */
.high-priority-expand > td {
border-left: 3px solid var(--color-danger) !important;
}
.high-priority-expand .expand-content {
padding-left: 1.5rem;
}
.high-prio-indicator {
position: absolute;
left: 0.25rem;
top: 0;
bottom: 0;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.high-prio-indicator span {
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-danger);
white-space: nowrap;
}
.expand-content:hover {
background-color: #fafafa !important;
/* Prevent any transform on hover */
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
}
.expand-details {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem 2rem;
max-width: 100%;
/* Force GPU acceleration and prevent subpixel shifts */
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
/* Prevent layout shifts */
isolation: isolate;
will-change: contents;
}
.expand-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0;
contain: layout style paint;
will-change: auto;
/* Prevent Chrome subpixel rendering shifts */
position: relative;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.expand-item span {
color: #1f2937;
font-size: 0.8125rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
contain: layout style;
/* Prevent Chrome subpixel shifts */
-webkit-transform: translateZ(0);
transform: translateZ(0);
line-height: 1.5;
}
.expand-item span strong {
color: #4b5563;
font-weight: 600;
font-size: 0.8125rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Lock to pixel grid */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.expand-item .shipping-days-cell {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-left: 0.25rem;
}
/* Prevent any hover effects from causing layout shifts */
.expand-item *,
.expand-item *:hover {
transform: none !important;
}
.expand-content * {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Override all hover transforms in expand area */
.expand-content .btn-icon,
.expand-content .btn-icon:hover,
.expand-content .delivery-number-badge,
.expand-content .delivery-number-badge:hover,
.expand-content .edit-shipping-days-btn,
.expand-content .edit-shipping-days-btn:hover,
.expand-content .status-icon,
.expand-content .status-icon:hover {
transform: none !important;
will-change: auto;
}
/* Late order warning in expanded view */
.late-order-warning {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background-color: #fef3c7;
color: #92400e;
border-radius: 6px;
border-left: 4px solid #f59e0b;
font-weight: 500;
font-size: 0.875rem;
margin-top: 0.75rem;
grid-column: 1 / -1;
}
.late-order-warning i {
font-size: 1rem;
color: #f59e0b;
}
/* Delivery count badge in expanded view */
.delivery-count-badge {
display: inline-block;
background: #dbeafe;
color: #1e40af;
padding: 0.25rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.8rem;
font-weight: 500;
}
/* Removed old error column rule - now handled by status column above */
.orders-table th:nth-child(10), /* Actions column */
.orders-table td:nth-child(10) {
width: 100px;
text-align: center;
}
.orders-table th:nth-child(11), /* Priority column */
.orders-table td:nth-child(11) {
width: 10%; /* Same as before */
min-width: 70px;
}
.orders-table th:nth-child(12), /* Days Left column */
.orders-table td:nth-child(12) {
width: 11%; /* Increased from 9% to accommodate sort arrow */
min-width: 75px; /* Increased from 65px */
}
.orders-table th:nth-child(13), /* Age column */
.orders-table td:nth-child(13) {
width: 8%; /* Same as before */
min-width: 45px;
}
.orders-table th:nth-child(14), /* Errors column */
.orders-table td:nth-child(14) {
width: 5%; /* Reduced from 8% since no header text */
min-width: 35px; /* Reduced from 45px */
text-align: center;
}
/* Specific styling for projects table - 7 columns total */
body:has(#projects-table) .orders-table th:nth-child(7),
body:has(#projects-table) .orders-table td:nth-child(7) {
width: 140px !important;
min-width: 140px !important;
text-align: center;
}
/* Action buttons styling for projects table */
body:has(#projects-table) .orders-table td:nth-child(7) .btn {
margin: 0 2px;
padding: 0.25rem 0.5rem;
min-width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Alternative: If CSS :has() isn't supported, use a specific page class */
.admin-projects-page .orders-table th:nth-child(7),
.admin-projects-page .orders-table td:nth-child(7) {
width: 140px !important;
min-width: 140px !important;
text-align: center;
}
/* Specific column widths for admin projects page */
.admin-projects-page .orders-table th:nth-child(5), /* Status column */
.admin-projects-page .orders-table td:nth-child(5) {
width: 110px !important;
min-width: 110px !important;
}
.admin-projects-page .orders-table th:nth-child(6), /* Orders column */
.admin-projects-page .orders-table td:nth-child(6) {
width: 70px !important;
min-width: 70px !important;
text-align: center;
}
.admin-projects-page .orders-table td:nth-child(7) .btn {
margin: 0 2px;
padding: 0.25rem 0.5rem;
min-width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.orders-table tbody tr:not(.expand-row):hover {
background-color: #f8fafc;
}
/* Prevent hover effects on expand rows */
.orders-table tbody tr.expand-row:hover {
background-color: #ffffff;
}
.expand-row * {
pointer-events: auto;
}
.expand-content:hover {
background-color: #fafafa !important;
}
/* Status and Priority Badges - Refined Styling */
.status-badge, .priority-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
border-radius: var(--radius-sm);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--font-tracking-caps);
min-width: 60px;
text-align: center;
justify-content: center;
}
/* Status badges with refined colors */
.status-badge.pending {
background: #fef3c7;
color: #92400e;
}
.status-badge.in_progress {
background: #dbeafe;
color: #1e40af;
}
.status-badge.completed {
background: #d1fae5;
color: #065f46;
}
.status-badge.on_hold {
background: #fee2e2;
color: #991b1b;
}
/* Priority badges */
.priority-badge.normal {
background: var(--color-surface-2);
color: var(--color-gray-600);
padding: 0.1875rem 0.5rem;
font-size: 0.625rem;
}
.priority-badge.high {
background: #fed7aa;
color: #9a3412;
padding: 0.1875rem 0.5rem;
font-size: 0.625rem;
}
/* Filters Section - Refined Layout */
.filters-section {
background: var(--color-surface-0);
padding: 1.25rem 1.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
border: 1px solid var(--color-border-subtle);
margin-bottom: 1.25rem;
}
.filters-container {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
gap: 1.5rem;
flex-wrap: wrap;
}
.filters-left {
display: flex;
gap: 1.5rem;
align-items: flex-end;
flex-wrap: wrap;
flex: 1;
}
.filters-right {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* CSS Grid-based filter layout for proper alignment */
.filters {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem 1.5rem;
align-items: end;
width: 100%;
}
@media (max-width: 1024px) {
.filters {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.filters {
grid-template-columns: 1fr;
}
}
/* Filter groups with labels above inputs */
.filter-group {
display: flex;
flex-direction: column;
gap: 0.375rem;
min-width: 0;
}
.filter-group label {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-gray-500);
letter-spacing: var(--font-tracking-caps);
text-transform: uppercase;
white-space: nowrap;
}
/* ============================================================================
FORM CONTROLS - Standardized Input System
============================================================================ */
/* Refined filter controls */
.filter-select, .search-input {
width: 100%;
height: 36px;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.8125rem;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
background: var(--color-surface-0);
color: var(--color-text-primary);
}
.filter-select:hover:not(:disabled):not(:focus),
.search-input:hover:not(:disabled):not(:focus) {
border-color: var(--color-border-strong);
}
.filter-select:focus, .search-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(30, 42, 86, 0.08);
background: var(--color-surface-0);
}
.actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1rem;
}
/* Forms */
.form-container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
}
.order-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.form-row.two-cols {
grid-template-columns: 1fr 1fr;
}
.form-row.three-cols {
grid-template-columns: 1fr 1fr 1fr;
}
/* Country search container */
.country-search-container {
position: relative;
}
.country-search-container .search-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #d1d5db;
border-top: none;
border-radius: 0 0 0.375rem 0.375rem;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.country-search-container .search-suggestions .suggestion-item {
padding: 0.5rem 0.75rem;
cursor: pointer;
border-bottom: 1px solid #f3f4f6;
}
.country-search-container .search-suggestions .suggestion-item:hover {
background-color: #f9fafb;
}
.country-search-container .search-suggestions .suggestion-item:last-child {
border-bottom: none;
}
/* Previous Addresses Section - Create Order Form */
.previous-addresses-section {
background: var(--color-surface-1);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
padding: var(--space-md);
margin-bottom: var(--space-lg);
}
.previous-addresses-header {
font-size: var(--font-sm);
font-weight: 600;
color: var(--color-gray-600);
margin-bottom: var(--space-sm);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.previous-addresses-header i {
color: var(--color-primary);
}
.previous-addresses-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.previous-address-item {
background: var(--color-surface-0);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
cursor: pointer;
transition: all var(--transition-fast);
}
.previous-address-item:hover {
border-color: var(--color-primary);
background: rgba(30, 42, 86, 0.02);
}
.previous-address-item.selected {
border-color: var(--color-success);
background: rgba(16, 185, 129, 0.05);
}
.previous-address-main {
font-size: var(--font-sm);
color: var(--color-gray-800);
font-weight: 500;
}
.previous-address-details {
font-size: 0.75rem;
color: var(--color-gray-500);
margin-top: 0.25rem;
}
/* Delivery Type Selector - Create Order Form */
.delivery-type-selector {
display: flex;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.delivery-type-option {
flex: 1;
cursor: pointer;
}
.delivery-type-option input[type="radio"] {
display: none;
}
.delivery-type-card {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-lg);
border: 2px solid var(--color-gray-300, #d1d5db);
border-radius: var(--radius-md);
background: var(--color-surface-0, #fff);
transition: all 0.2s ease;
text-align: center;
}
.delivery-type-card i {
font-size: 2rem;
margin-bottom: var(--space-sm);
color: var(--color-gray-500);
}
.delivery-type-card strong {
display: block;
margin-bottom: var(--space-xs);
color: var(--color-gray-800);
}
.delivery-type-card small {
color: var(--color-gray-500);
font-size: 0.8rem;
}
.delivery-type-option input[type="radio"]:checked + .delivery-type-card {
border-color: var(--color-primary, #2A3B6B);
background: rgba(42, 59, 107, 0.05);
box-shadow: 0 0 0 2px rgba(42, 59, 107, 0.1);
}
.delivery-type-option input[type="radio"]:checked + .delivery-type-card i {
color: var(--color-primary, #2A3B6B);
}
.delivery-type-option:hover .delivery-type-card {
border-color: var(--color-gray-400, #9ca3af);
}
/* Loading Point Section */
.loading-point-section {
margin-top: var(--space-md);
padding: var(--space-lg);
background: var(--color-surface-1, #f9fafb);
border: 1px solid var(--color-border-light, #e5e7eb);
border-radius: var(--radius-md);
}
.loading-point-section .form-group {
margin-bottom: 0;
}
/* Delivery Type Required Notice */
.delivery-type-required-notice {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-lg);
background: #f0f4f8;
border: 2px dashed var(--color-gray-400, #9ca3af);
border-radius: var(--radius-md);
margin-bottom: var(--space-lg);
}
.delivery-type-required-notice .notice-icon {
font-size: 2rem;
color: var(--color-gray-500);
}
.delivery-type-required-notice .notice-content {
flex: 1;
}
.delivery-type-required-notice .notice-content strong {
display: block;
color: var(--color-gray-700);
margin-bottom: 0.25rem;
}
.delivery-type-required-notice .notice-content p {
margin: 0;
color: var(--color-gray-500);
font-size: 0.9rem;
}
/* Disabled state for address fields before delivery type selection */
.address-fields-disabled {
position: relative;
pointer-events: none;
opacity: 0.5;
}
.address-fields-disabled::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 10;
}
/* Disabled state for individual form fields */
.field-disabled {
opacity: 0.6;
}
.field-disabled input,
.field-disabled textarea,
.field-disabled select {
background-color: var(--color-gray-100, #f3f4f6) !important;
cursor: not-allowed;
}
/* Responsive adjustments */
@media (max-width: 576px) {
.delivery-type-selector {
flex-direction: column;
}
}
/* Address Info Card - Create Order Form */
.address-info-card {
display: flex;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
background: var(--color-gray-50, #f9fafb);
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: var(--radius-md);
margin-bottom: var(--space-lg);
align-items: flex-start;
}
.address-info-icon {
color: #dc2626;
font-size: 1.5rem;
flex-shrink: 0;
line-height: 1;
}
.address-info-content {
font-size: var(--font-sm);
color: var(--color-gray-600, #4b5563);
}
.address-info-content strong {
display: block;
margin-bottom: 0.25rem;
color: var(--color-gray-800, #1f2937);
font-weight: 600;
}
.address-info-content p {
margin: 0;
line-height: 1.5;
}
/* Address Warnings */
.address-warnings {
margin-top: var(--space-sm);
}
.address-warning {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: var(--radius-sm);
margin-bottom: var(--space-xs);
font-size: var(--font-sm);
color: #991b1b;
}
.address-warning i {
color: #dc2626;
flex-shrink: 0;
margin-top: 0.125rem;
}
.address-warning span {
flex: 1;
line-height: 1.4;
}
/* Address field warning state */
.form-control.address-warning-state {
border-color: #f59e0b;
background-color: #fffbeb;
}
/* Form Controls - Refined Styling */
.form-group {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.form-group label {
font-weight: 500;
color: var(--color-gray-700);
font-size: 0.8125rem;
letter-spacing: var(--font-tracking-wide);
}
.form-group label.required::after {
content: ' *';
color: var(--color-danger);
font-weight: 400;
}
.form-control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0.625rem 0.875rem;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-family: inherit;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
background: var(--color-surface-0);
color: var(--color-text-primary);
line-height: var(--leading-tight);
}
.form-control:hover:not(:disabled):not(:focus) {
border-color: var(--color-border-strong);
}
.form-control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(30, 42, 86, 0.08);
background: var(--color-surface-0);
}
.form-control:disabled {
background: var(--color-surface-2);
color: var(--color-gray-500);
cursor: not-allowed;
}
.form-control.error {
border-color: var(--color-danger);
background: #fef2f2;
}
.form-control::placeholder {
color: var(--color-gray-400);
}
/* Custom select styling for forms */
.form-control select,
select.form-control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: var(--color-surface-0) url('data:image/svg+xml;charset=US-ASCII,') no-repeat right 0.75rem center;
background-size: 12px;
cursor: pointer;
padding-right: 2.5rem;
}
/* Textarea */
textarea.form-control {
height: auto;
resize: vertical;
min-height: 80px;
line-height: var(--leading-normal);
font-family: inherit;
padding: 0.75rem 0.875rem;
}
.form-help {
font-size: 0.8125rem;
color: var(--color-gray-500);
margin-bottom: 1rem;
}
.field-error {
color: #ef4444;
font-size: 0.875rem;
margin: 0.5rem auto 0 auto;
text-align: center;
background: #fef2f2;
border: 1px solid #fca5a5;
border-radius: 0.375rem;
padding: 0.75rem 1rem;
display: block;
max-width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.form-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
}
/* Section Headers */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.section-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Recent Orders */
.recent-orders {
margin-top: 2rem;
}
.orders-summary {
min-height: 24px; /* Reserve space for summary text */
margin-top: 1.25rem;
margin-bottom: 1rem;
color: #6b7280;
font-size: 0.9rem;
}
/* Loading States */
.table-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.9);
z-index: 10;
}
.loading-text {
display: flex;
align-items: center;
gap: 1rem;
color: #6b7280;
font-size: 1.1rem;
}
.loading-spinner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.spinner {
width: 3rem;
height: 3rem;
border: 3px solid #f3f4f6;
border-top: 3px solid #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* No Orders State */
.no-orders {
display: flex;
justify-content: center;
align-items: center;
padding: 4rem;
background: white;
border-radius: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
}
.no-orders-content {
text-align: center;
color: #6b7280;
}
.no-orders-content i {
font-size: 4rem;
margin-bottom: 1rem;
color: #d1d5db;
}
.no-orders-content h3 {
font-size: 1.5rem;
color: #374151;
margin-bottom: 0.5rem;
}
/* Success Message */
.success-message {
display: none;
justify-content: center;
align-items: center;
min-height: 400px;
text-align: center;
}
.success-content {
background: white;
padding: 3rem;
border-radius: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
max-width: 500px;
}
.success-content i {
font-size: 4rem;
color: #1E2A56;
margin-bottom: 1rem;
}
.success-content h3 {
font-size: 1.5rem;
color: #1f2937;
margin-bottom: 1rem;
}
.success-content p {
color: #6b7280;
margin-bottom: 2rem;
}
.success-actions {
display: flex;
gap: 1rem;
justify-content: center;
}
/* Modal - Refined Styling */
.modal {
position: fixed;
inset: 0;
background: rgba(30, 41, 59, 0.5);
backdrop-filter: blur(2px);
display: none;
justify-content: center;
align-items: flex-start;
padding: 2rem;
padding-top: 90px;
z-index: 999999;
overflow-y: auto;
contain: layout style;
}
.modal.show {
display: flex;
animation: modalFadeIn var(--transition-base) ease-out;
}
@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
background: var(--color-surface-0);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
max-width: 560px;
width: 100%;
max-height: calc(100vh - 4rem);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
animation: modalSlideUp var(--transition-smooth) cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-content.large {
max-width: 900px;
}
@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(16px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-border-subtle);
flex-shrink: 0;
}
.modal-header h2,
.modal-header h3 {
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-gray-800);
margin: 0;
display: flex;
align-items: center;
gap: 0.625rem;
}
.modal-header h2 i,
.modal-header h3 i {
color: var(--color-primary);
font-size: 1rem;
}
.modal-close,
.close {
width: 2rem;
height: 2rem;
border: none;
background: transparent;
color: var(--color-gray-400);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
transition: background var(--transition-fast), color var(--transition-fast);
}
.modal-close:hover,
.close:hover {
background: var(--color-surface-2);
color: var(--color-gray-600);
}
.modal-body {
padding: 1.5rem;
overflow-y: auto;
flex: 1;
}
.modal-footer,
.modal-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.625rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-border-subtle);
background: var(--color-surface-1);
flex-shrink: 0;
}
/* Responsive modal footer for better button spacing */
@media (max-width: 768px) {
.modal-footer {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.modal-footer-left {
justify-content: center;
flex-wrap: wrap;
}
.modal-footer > button {
width: 100%;
justify-content: center;
}
}
.modal-footer-left {
display: flex;
align-items: center;
gap: 1rem;
}
/* Delivery Numbers Modal Styles */
.modal-large {
max-width: 800px;
width: 90%;
}
.delivery-numbers-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.order-info-banner {
background: #f3f4f6;
padding: 1rem;
border-radius: 0.5rem;
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.order-info-banner strong {
color: #374151;
}
.add-delivery-number-section {
border: 1px solid #e5e7eb;
padding: 1.5rem;
border-radius: 0.5rem;
background: #f9fafb;
}
.add-delivery-number-section h4 {
margin-top: 0;
margin-bottom: 1rem;
color: #1f2937;
font-size: 1.1rem;
}
.add-delivery-number-section .form-row {
display: flex;
gap: 1rem;
align-items: flex-end;
flex-wrap: wrap;
}
.add-delivery-number-section .form-group {
flex: 1;
min-width: 200px;
}
.add-delivery-number-section .form-group:last-child {
flex: 0;
min-width: auto;
}
.add-delivery-number-section label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #374151;
}
.add-delivery-number-section .form-control {
width: 100%;
padding: 0.5rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 0.95rem;
}
.add-delivery-number-section .form-control:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.delivery-numbers-list-section h4 {
margin-top: 0;
margin-bottom: 1rem;
color: #1f2937;
font-size: 1.1rem;
}
.delivery-numbers-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 400px;
overflow-y: auto;
padding: 0.5rem;
}
.delivery-number-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
transition: all 0.2s;
}
.delivery-number-item:hover {
border-color: #d1d5db;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.delivery-number-item.editing {
border-color: #3b82f6;
background: #eff6ff;
}
.dn-item-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.dn-item-number {
font-weight: 600;
color: #1f2937;
font-size: 1rem;
}
.dn-item-note {
color: #6b7280;
font-size: 0.875rem;
font-style: italic;
}
.dn-item-meta {
color: #9ca3af;
font-size: 0.8rem;
margin-top: 0.25rem;
}
.dn-item-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.dn-item-edit-form {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.dn-item-edit-form input {
padding: 0.5rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 0.95rem;
}
.dn-item-edit-form input:focus {
outline: none;
border-color: #3b82f6;
}
.dn-item-edit-actions {
display: flex;
gap: 0.5rem;
}
.btn-icon {
background: none;
border: 1px solid #d1d5db;
padding: 0.35rem 0.5rem; /* Reduced from 0.5rem 0.75rem */
border-radius: 0.3rem; /* Reduced from 0.375rem */
cursor: pointer;
transition: all 0.2s;
font-size: 0.75rem; /* Reduced from 0.875rem */
color: #6b7280;
}
.btn-icon:hover {
background: #f3f4f6;
border-color: #9ca3af;
color: #374151;
}
.btn-icon.danger:hover {
background: #fee2e2;
border-color: #fca5a5;
color: #dc2626;
}
.btn-icon.primary {
background: #3b82f6;
border-color: #3b82f6;
color: white;
}
.btn-icon.primary:hover {
background: #2563eb;
border-color: #2563eb;
}
.alert {
padding: 0.75rem 1rem;
border-radius: 0.375rem;
margin-top: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.alert-warning {
background: #fef3c7;
border: 1px solid #fbbf24;
color: #92400e;
}
.no-data {
text-align: center;
color: #9ca3af;
padding: 2rem;
font-style: italic;
}
#dn-count {
color: #3b82f6;
font-weight: 600;
}
/* Delivery Number Badge in Table */
.delivery-number-badge {
display: inline-block;
background: var(--color-surface-2);
color: var(--color-gray-700);
padding: 0.2rem 0.6rem;
border-radius: var(--radius-sm);
font-size: 0.6875rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
border: 1px solid var(--color-border-light);
letter-spacing: var(--font-tracking-caps);
}
.delivery-number-badge:hover {
background: var(--color-surface-3);
border-color: var(--color-border);
}
.delivery-number-badge.multiple {
background: rgba(30, 42, 86, 0.08);
color: var(--color-primary);
border: 1px solid rgba(30, 42, 86, 0.15);
}
.delivery-number-badge.multiple:hover {
background: rgba(30, 42, 86, 0.12);
}
.delivery-number-tooltip {
position: fixed;
background: #1f2937;
color: white;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
z-index: 10000;
pointer-events: none;
max-width: 300px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.delivery-number-tooltip-item {
padding: 0.25rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.delivery-number-tooltip-item:last-child {
border-bottom: none;
}
/* Toast Notifications */
.toast-container {
position: fixed;
top: 2rem;
right: 2rem;
z-index: 1000000;
display: flex;
flex-direction: column;
gap: 1rem;
}
.toast {
padding: 1rem 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-width: 400px;
animation: slideIn 0.3s ease-out;
}
.toast.success {
background: #1E2A56;
color: white;
}
.toast.error {
background: #ef4444;
color: white;
}
.toast.info {
background: #3b82f6;
color: white;
}
.toast.warning {
background: #f59e0b;
color: white;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.nav-container {
padding: 1rem;
position: relative;
/* overflow-x: hidden; */
}
body {
overflow-x: hidden;
}
/* Show hamburger button on mobile */
.nav-toggle {
display: flex;
z-index: 1000000; /* Above menu */
position: relative;
}
/* Hide navigation menu by default on mobile */
.nav-menu {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 280px;
background: linear-gradient(135deg, #1E2A56 0%, #2A3B6B 100%);
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: 80px 2rem 2rem 2rem;
transform: translateX(110%);
transition: transform 0.3s ease;
z-index: 999999; /* Higher than navbar */
overflow-y: auto;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
/* Ensure menu content is clickable */
pointer-events: auto;
visibility: hidden;
}
/* Show navigation menu when active */
.nav-menu.active {
transform: translateX(0);
visibility: visible;
}
/* Mobile navigation links - ensure they're clickable */
.nav-menu .nav-link {
padding: 0.75rem;
margin-bottom: 0.5rem;
border-radius: 0.5rem;
font-size: 0.825rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.2s ease;
/* Ensure links are clickable */
pointer-events: auto;
position: relative;
}
.nav-menu .nav-link:hover {
background-color: rgba(255, 255, 255, 0.15);
transform: translateX(5px);
}
.nav-menu .nav-link i {
width: 18px;
text-align: center;
}
/* Mobile dropdown styles */
.nav-menu .nav-dropdown {
display: flex;
flex-direction: column;
width: 100%;
}
.nav-menu .nav-dropdown-trigger {
justify-content: flex-start;
}
.nav-menu .nav-dropdown-trigger .dropdown-arrow {
margin-left: auto;
}
.nav-menu .nav-dropdown-menu {
position: static !important;
left: auto !important;
top: auto !important;
background: rgba(255, 255, 255, 0.1);
box-shadow: none;
border: none;
border-radius: 0.375rem;
margin-top: 0.5rem;
margin-left: 1rem;
overflow: hidden;
max-height: 0;
opacity: 0;
transform: none !important;
transition: all 0.3s ease;
z-index: auto !important;
}
.nav-menu .nav-dropdown.active .nav-dropdown-menu {
max-height: 300px;
opacity: 1;
}
.nav-menu .nav-dropdown-item {
color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.625rem 0.75rem;
font-size: 0.8125rem;
}
.nav-menu .nav-dropdown-item:hover:not(.disabled) {
background: rgba(255, 255, 255, 0.15);
color: white;
}
.nav-menu .nav-dropdown-item i {
color: rgba(255, 255, 255, 0.7);
width: 16px;
}
.nav-menu .nav-dropdown-item:hover:not(.disabled) i {
color: white;
}
.nav-menu .nav-dropdown-item.disabled {
opacity: 0.5;
}
.nav-menu .coming-soon {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
}
/* User menu in mobile navigation */
.nav-menu .nav-user-menu {
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 1rem;
padding-top: 1rem;
border-left: none;
margin-left: 0;
padding-left: 0;
/* Ensure user menu is clickable */
pointer-events: auto;
position: relative;
}
.nav-menu .nav-user-menu .nav-logout-btn {
/* Ensure logout button is clickable */
pointer-events: auto;
position: relative;
}
/* Remove overlay entirely - use document click detection instead */
.nav-overlay {
display: none !important;
}
.nav-overlay.active {
display: none !important;
}
/* When menu is active, ensure the menu area allows interaction */
.nav-menu.active {
/* Ensure menu area is fully interactive */
pointer-events: auto;
/* Create strong stacking context */
will-change: transform;
transform: translateX(0);
visibility: visible;
}
/* Ensure all interactive elements in the menu work properly */
.nav-menu.active .nav-link,
.nav-menu.active .nav-user-menu,
.nav-menu.active .nav-logout-btn {
pointer-events: auto;
/* Ensure they're above any potential overlay interference */
position: relative;
}
/* Prevent body scroll when menu is open */
body.nav-open {
overflow: hidden;
}
.main-content {
padding: 1rem;
max-width: 100vw;
}
.page-header h1 {
font-size: 2rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
}
/* Tablet breakpoint for stats grid */
@media (max-width: 1024px) and (min-width: 769px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.charts-section {
grid-template-columns: 1fr;
}
.filters-section {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.filters {
justify-content: stretch;
flex-direction: column;
gap: 1rem;
}
.filter-group {
width: 100%;
}
.actions {
justify-content: center;
flex-wrap: wrap;
}
.form-row.two-cols,
.form-row.three-cols {
grid-template-columns: 1fr;
}
.form-actions {
flex-direction: column;
}
.success-actions {
flex-direction: column;
}
.toast-container {
top: 1rem;
right: 1rem;
left: 1rem;
}
.toast {
max-width: none;
}
.container-wide {
padding: 0.5rem;
}
.orders-table {
min-width: 750px; /* Increased from 700px for wider ID column */
font-size: 0.8rem; /* Smaller text on mobile */
}
.orders-table th,
.orders-table td {
padding: 0.5rem 0.25rem; /* Tighter padding */
}
.admin-menu {
grid-template-columns: 1fr;
}
.admin-actions {
flex-direction: column;
align-items: stretch;
}
/* Hide desktop tabs, show mobile dropdown on mobile */
.desktop-tabs {
display: none !important;
}
/* Responsive admin quick navigation on mobile */
.admin-quick-nav {
gap: 0.5rem;
padding: 0.75rem;
}
.quick-nav-btn {
min-width: 0;
flex: 1;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.quick-nav-btn i {
margin-right: 0.25rem;
}
/* Fix dropdown and select overflow on mobile */
.filter-select,
.search-input,
.form-control,
.custom-select select {
min-width: 0; /* Allow shrinking */
width: 100%; /* Take full width of container */
max-width: 100%; /* Prevent overflow */
box-sizing: border-box; /* Include padding in width calculation */
}
/* Improve modal display on mobile */
.modal-content {
width: 95%;
max-width: 95vw;
margin: 1rem;
}
/* Fix filter group alignment on mobile */
.filter-group label {
margin-bottom: 0.25rem;
}
/* Ensure buttons don't overflow */
.btn {
min-width: 0;
flex-shrink: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* Remove obsolete mobile rules - now using dropdown solution */
/* Reports Page Styles */
.report-row {
cursor: pointer;
transition: background-color 0.2s;
}
.report-row:hover {
background-color: #f8fafc;
}
.badge-type {
font-size: 0.75rem;
font-weight: 600;
}
.badge-status {
font-size: 0.75rem;
}
.badge-priority {
font-size: 0.7rem;
}
.badge-priority-grey {
background-color: #e5e7eb;
color: #6b7280;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.7rem;
font-weight: 500;
}
.report-card-item {
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
transition: all 0.2s;
cursor: pointer;
background: white;
}
.report-card-item:hover {
border-color: #1E2A56;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
transform: translateY(-1px);
}
.report-card-item.selected {
border-color: #1E2A56;
background-color: rgba(16, 185, 129, 0.05);
}
.sort-active {
color: #1E2A56;
}
/* Priority badges - consistent with existing priority system */
.priority-critical {
background-color: #fee2e2;
color: #dc3545;
}
.priority-high {
background-color: #fed7aa;
color: #ea580c;
}
.priority-medium {
background-color: #fef3c7;
color: #d97706;
}
.priority-low {
background-color: #ecfdf5;
color: #059669;
}
/* Status badges - using existing color scheme */
.status-submitted {
background-color: #6b7280;
color: white;
}
.status-in_review {
background-color: #ffc107;
color: #212529;
}
.status-approved {
background-color: #ACF1AC;
color: white;
}
.status-rejected {
background-color: #dc3545;
color: white;
}
.status-in_progress {
background-color: #3b82f6;
color: white;
}
.status-completed {
background-color: #9AE89A;
color: white;
}
.status-wont_fix {
background-color: #374151;
color: white;
}
/* Type badges - consistent with existing badge colors */
.type-bug {
background-color: #dc3545;
color: white;
}
.type-improvement {
background-color: #3b82f6;
color: white;
}
.type-feature {
background-color: #ACF1AC;
color: white;
}
/* Feedback System Styles */
.progress-steps {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
gap: 2rem;
}
.step-indicator {
display: flex;
flex-direction: column;
align-items: center;
opacity: 0.5;
transition: all 0.3s ease;
}
.step-indicator.active {
opacity: 1;
}
.step-indicator.completed {
opacity: 1;
color: #1E2A56;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.step-indicator.active .step-number {
background: #1E2A56;
color: white;
}
.step-indicator.completed .step-number {
background: #1E2A56;
color: white;
}
.step-label {
font-size: 0.875rem;
font-weight: 500;
}
.step-content {
display: none;
}
.step-content.active {
display: block;
}
.report-type-fields {
margin-top: 1.5rem;
padding: 1rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
background: #f9fafb;
}
.button-group {
display: flex;
gap: 1rem;
justify-content: flex-end;
margin-top: 2rem;
}
.review-content {
background: #f9fafb;
padding: 1.5rem;
border-radius: 0.5rem;
border: 1px solid #e5e7eb;
}
.review-section {
margin-bottom: 1rem;
}
.review-section h5 {
font-weight: 600;
margin-bottom: 0.5rem;
color: #374151;
}
.reports-list {
display: grid;
gap: 1rem;
}
.report-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 1.5rem;
cursor: pointer;
transition: all 0.2s ease;
}
.report-card:hover {
border-color: #1E2A56;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
.report-header {
display: flex;
justify-content: between;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.report-title {
font-weight: 600;
margin-bottom: 0.5rem;
}
.report-description {
color: #6b7280;
margin-bottom: 1rem;
}
.report-meta {
display: flex;
gap: 1rem;
align-items: center;
color: #6b7280;
font-size: 0.875rem;
}
.vote-count, .comment-count {
display: flex;
align-items: center;
gap: 0.25rem;
}
/* Toggle Switch - Refined Styling */
.toggle-container {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--color-surface-1);
border-radius: var(--radius-md);
margin-bottom: 0.75rem;
margin-right: 0.75rem;
}
.toggle-switch {
position: relative;
width: 44px;
height: 24px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--color-gray-300);
border-radius: 12px;
transition: background var(--transition-base);
}
.slider:before {
content: "";
position: absolute;
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base);
}
input:checked + .slider {
background: var(--color-success);
}
input:checked + .slider:before {
transform: translateX(20px);
}
.toggle-label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-gray-600);
}
/* Request Type Filter - Refined Segmented Control */
.request-type-filter-container {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding: 0.75rem 1rem;
background: var(--color-surface-1);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-subtle);
}
.filter-label {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-gray-500);
letter-spacing: var(--font-tracking-caps);
text-transform: uppercase;
}
.request-type-buttons {
display: flex;
gap: 0.25rem;
background: var(--color-surface-2);
padding: 0.25rem;
border-radius: var(--radius-md);
}
.request-type-btn {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.4375rem 0.875rem;
border: none;
background: transparent;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-gray-600);
transition: all var(--transition-fast);
}
.request-type-btn:hover {
color: var(--color-gray-800);
background: var(--color-surface-0);
}
.request-type-btn.active {
background: var(--color-surface-0);
color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
.request-type-btn i {
font-size: 0.875rem;
opacity: 0.8;
}
/* Request Type Badges in Table */
.request-type-badge {
display: inline-block;
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
margin-left: 0.5rem;
vertical-align: middle;
}
.request-type-workshop {
background: #fef3c7;
color: #92400e;
}
.request-type-other {
background: #e0e7ff;
color: #3730a3;
}
/* Status Text Cell for Non-Orders */
.status-text-cell {
text-align: center;
padding: 0.5rem;
vertical-align: middle;
}
.status-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.85rem;
font-weight: 500;
text-transform: capitalize;
}
.status-pending {
background: #fef3c7;
color: #92400e;
}
.status-assigned {
background: #dbeafe;
color: #1e40af;
}
.status-in_progress {
background: #bfdbfe;
color: #1e3a8a;
}
.status-on_hold {
background: #fecaca;
color: #991b1b;
}
.status-completed {
background: #d1fae5;
color: #065f46;
}
.status-cancelled {
background: #f3f4f6;
color: #6b7280;
}
/* Inline Status Dropdown */
.status-dropdown {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
cursor: pointer;
font-size: 0.75rem;
min-width: 100px;
padding: 0.125rem 0.25rem;
font-family: inherit;
border-radius: 0.375rem;
transition: background-color 0.2s;
/* Contain style recalculations */
contain: style;
}
.status-dropdown:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.status-dropdown:focus {
outline: 2px solid #ACF1AC;
outline-offset: 2px;
}
/* Order Detail Modal */
.order-detail-modal .modal-content {
max-width: 800px;
width: 95%;
}
/* Workshop and Other Request Modals - match order modal width */
#workshop-request-modal .modal-content,
#other-request-modal .modal-content {
max-width: 800px;
width: 95%;
}
.order-detail-header {
display: flex;
justify-content: between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.order-detail-title {
flex: 1;
}
.order-detail-title h2 {
color: #1f2937;
margin-bottom: 0.5rem;
}
.order-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
background-color: #f9fafb;
border-radius: 0.5rem;
}
/* Two-column grid layout for order metadata */
.order-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 1.5rem;
padding: 1rem;
background-color: #f9fafb;
border-radius: 0.5rem;
}
.meta-column {
display: flex;
flex-direction: column;
gap: 1rem;
}
.meta-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.meta-label {
font-size: 0.75rem;
font-weight: 500;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.meta-value {
font-weight: 400;
color: #1f2937;
font-size: 0.9rem;
}
/* Responsive: Stack columns on small screens */
@media (max-width: 768px) {
.order-meta-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* Delivery Address Section */
.delivery-address-section {
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 1.5rem;
}
.delivery-address-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.delivery-column {
display: flex;
flex-direction: column;
gap: 1rem;
}
.delivery-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.delivery-label {
font-size: 0.75rem;
font-weight: 500;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.delivery-value {
font-weight: 400;
color: #1f2937;
font-size: 0.9rem;
background-color: #ffffff;
padding: 0.5rem;
border-radius: 0.25rem;
}
/* Shipping label format styles */
.shipping-label-format {
padding: 0.5rem 0;
}
.shipping-field {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.shipping-data {
font-size: 1rem;
font-weight: 500;
color: #111827;
line-height: 1.4;
}
.shipping-label-small {
font-size: 0.6875rem;
font-weight: 500;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* New Minimalistic Shipping Card Layout - matches order meta styling */
.shipping-card {
display: flex;
flex-direction: column;
}
.shipping-card .shipping-row {
padding: 0.375rem 0;
}
.shipping-card .shipping-row:first-child {
padding-top: 0;
}
.shipping-card .shipping-row.two-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.shipping-card .shipping-field {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.shipping-card .shipping-label {
font-size: 0.6875rem;
font-weight: 500;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.shipping-card .shipping-value {
font-size: 0.9375rem;
color: var(--color-text-primary);
line-height: 1.4;
}
/* Offshore and Export Badges */
.offshore-badge,
.export-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.625rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
margin-left: 0.5rem;
}
.offshore-badge {
background: #dbeafe;
color: #1e40af;
}
.export-badge {
background: #fef3c7;
color: #92400e;
}
/* Subscribe Button Styles */
.btn-subscribe {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--color-surface-1);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
color: var(--color-text-secondary);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-subscribe:hover:not(:disabled) {
background: var(--color-surface-2);
border-color: var(--color-border-strong);
color: var(--color-text-primary);
}
.btn-subscribe.subscribed {
background: #dbeafe;
border-color: #3b82f6;
color: #1d4ed8;
}
.btn-subscribe.subscribed:hover:not(:disabled) {
background: #bfdbfe;
border-color: #2563eb;
}
.btn-subscribe:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Subscribe Container with Info Icon */
.subscribe-container {
display: flex;
align-items: center;
gap: 0.5rem;
position: relative;
}
.subscribe-info-icon {
display: flex;
align-items: center;
justify-content: center;
color: #9ca3af;
cursor: help;
font-size: 0.875rem;
position: relative;
}
.subscribe-info-icon:hover {
color: #6b7280;
}
.subscribe-info-icon::after {
content: attr(data-tooltip);
position: absolute;
right: 0;
top: 100%;
margin-top: 0.5rem;
width: 280px;
padding: 0.75rem;
background: #1f2937;
color: #fff;
font-size: 0.75rem;
line-height: 1.4;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
z-index: 1000;
pointer-events: none;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.subscribe-info-icon:hover::after {
opacity: 1;
visibility: visible;
}
/* Modal Header Actions Layout */
.modal-header-actions {
display: flex;
align-items: center;
gap: 1rem;
}
/* Responsive: Stack delivery columns on small screens */
@media (max-width: 768px) {
.delivery-address-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.shipping-card .shipping-row.two-cols {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.btn-subscribe .subscribe-text {
display: none;
}
.modal-header-actions {
gap: 0.5rem;
}
}
.order-description {
margin-bottom: 2rem;
}
.order-description h3 {
margin-bottom: 0.75rem;
color: #1f2937;
}
.description-content {
background-color: #f9fafb;
padding: 1rem;
border-radius: 0.5rem;
white-space: pre-wrap;
line-height: 1.6;
word-break: break-word;
overflow-wrap: break-word;
}
.description-link {
color: #3b82f6;
text-decoration: underline;
word-break: break-all;
transition: color 0.2s;
}
.description-link:hover {
color: #1d4ed8;
}
.order-edit-form {
display: grid;
gap: 1rem;
}
.form-row-detail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
/* Footer */
.footer {
background-color: #ebebeb;
padding: 2rem 0;
margin-top: 4rem;
text-align: center;
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.footer-logos {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.footer-logo {
opacity: 0.8;
}
.footer-logo.orderbase-logo {
max-height: 40px;
}
.footer-logo.stormyran-logo {
max-height: 30px;
}
.powered-by-text {
font-size: 0.75rem;
color: #9ca3af;
}
.footer-text {
color: #9ca3af;
font-size: 0.75rem;
margin: 0;
}
.footer-links {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.75rem;
color: #9ca3af;
}
.footer-info {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.footer-separator {
color: #9ca3af;
}
.footer-link {
color: #9ca3af;
text-decoration: none;
transition: color 0.2s;
}
.footer-link:hover {
color: #6b7280;
text-decoration: underline;
}
/* Admin Styles */
.admin-quick-nav {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
background: white;
padding: 1rem;
border-radius: 1rem;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
flex-wrap: wrap;
}
.quick-nav-btn {
flex: 1;
min-width: 200px;
padding: 0.75rem 1rem;
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #374151;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border-radius: 0.5rem;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.quick-nav-btn:hover {
background: #1E2A56;
color: white;
border-color: #1E2A56;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.admin-content {
display: flex;
flex-direction: column;
gap: 3rem;
}
/* Admin Section - Refined Styling */
.admin-section-group {
scroll-margin-top: 2rem;
}
.section-group-header {
text-align: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border-light);
}
.section-group-header h2 {
font-size: 1.375rem;
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 0.25rem;
letter-spacing: var(--font-tracking-tight);
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
}
.section-group-header h2 i {
color: var(--color-primary);
opacity: 0.8;
}
.section-group-header p {
color: var(--color-gray-500);
font-size: 0.875rem;
margin: 0;
}
/* Admin Menu Grid - Fixed columns */
.admin-menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin: 0;
}
@media (max-width: 1200px) {
.admin-menu {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.admin-menu {
grid-template-columns: 1fr;
}
}
/* Admin Section Card - Refined */
.admin-section {
background: var(--color-surface-0);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-card);
border: 1px solid var(--color-border-subtle);
display: flex;
flex-direction: column;
transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.admin-section:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border-light);
}
.admin-section h3 {
font-size: 1rem;
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 0.375rem;
display: flex;
align-items: center;
gap: 0.625rem;
}
.admin-section h3 i {
color: var(--color-primary);
font-size: 0.9375rem;
opacity: 0.85;
}
.admin-section p {
color: var(--color-gray-500);
font-size: 0.8125rem;
line-height: 1.6;
margin-bottom: 0;
flex-grow: 1;
}
.admin-actions {
display: flex;
gap: 0.625rem;
align-items: center;
flex-wrap: wrap;
padding-top: 1rem;
border-top: 1px solid var(--color-border-subtle);
margin-top: 1rem;
}
/* Standardize admin button sizes */
.admin-actions .btn {
flex: 0 1 auto; /* Allow shrinking but not growing */
min-width: 180px; /* Increased to prevent text wrapping */
justify-content: center;
text-align: center;
height: 44px;
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap; /* Prevent text wrapping */
text-overflow: ellipsis;
overflow: hidden;
}
/* When there's only one button, don't let it fill the whole width */
.admin-actions .btn:only-child {
flex: 0 0 auto;
min-width: 200px;
}
/* Medium resolution fixes for admin buttons */
@media (min-width: 1000px) and (max-width: 1400px) {
.admin-actions {
justify-content: flex-start; /* Align buttons to start instead of stretching */
gap: 0.75rem; /* Slightly smaller gap for medium screens */
}
.admin-actions .btn {
min-width: 170px; /* Slightly smaller for medium screens */
max-width: 200px; /* Prevent buttons from getting too wide */
}
.admin-actions .btn:only-child {
min-width: 170px;
max-width: 200px;
}
}
.admin-stat {
color: #6b7280;
font-size: 0.9rem;
}
.recent-activity {
margin-top: 3rem;
}
.activity-list {
background: white;
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
}
.activity-item {
padding: 1rem;
border-bottom: 1px solid #f3f4f6;
display: flex;
align-items: center;
gap: 1rem;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: white;
flex-shrink: 0;
}
.activity-icon.project { background: #3b82f6; }
.activity-icon.order-type { background: #ACF1AC; }
.activity-icon.error { background: #ef4444; }
.activity-icon.order { background: #8b5cf6; }
.activity-content {
flex: 1;
}
.activity-title {
font-weight: 600;
color: #1f2937;
margin-bottom: 0.25rem;
}
.activity-description {
color: #6b7280;
font-size: 0.875rem;
}
.activity-time {
color: #9ca3af;
font-size: 0.75rem;
white-space: nowrap;
}
/* Project Badge Styles */
.project-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
background: #eff6ff;
color: #2563eb;
border: 1px solid #dbeafe;
}
/* Status badge updates for error reports */
.status-badge.needs_action {
background: #fef3c7;
color: #d97706;
}
.status-badge.in_progress {
background: #dbeafe;
color: #2563eb;
}
.status-badge.action_taken {
background: #d1fae5;
color: #065f46;
}
/* Error severity badges */
.severity-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.severity-badge.low {
background: #f3f4f6;
color: #6b7280;
}
.severity-badge.medium {
background: #fef3c7;
color: #d97706;
}
.severity-badge.high {
background: #fee2e2;
color: #dc2626;
}
/* Error type badges */
.error-type-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
background: #f9fafb;
color: #374151;
border: 1px solid #e5e7eb;
}
/* Responsive improvements */
@media (max-width: 1800px) { /* Changed from 1600px to 1800px */
.container-wide {
max-width: 100%;
padding: 1rem;
}
}
@media (max-width: 1200px) {
.container-wide {
padding: 1rem;
max-width: 100%;
}
/* Keep table within bounds */
.table-container {
width: 100%;
overflow-x: auto;
}
.orders-table {
min-width: 850px; /* Same as before */
}
/* Reduce column min-widths further on smaller screens - updated for 8 columns */
.orders-table th:nth-child(1), .orders-table td:nth-child(1) { min-width: 60px; }
.orders-table th:nth-child(2), .orders-table td:nth-child(2) { min-width: 140px; }
.orders-table th:nth-child(3), .orders-table td:nth-child(3) { min-width: 90px; }
.orders-table th:nth-child(4), .orders-table td:nth-child(4) { min-width: 55px; }
.orders-table th:nth-child(5), .orders-table td:nth-child(5) { min-width: 80px; }
.orders-table th:nth-child(6), .orders-table td:nth-child(6) { min-width: 60px; } /* Increased for sort arrow */
.orders-table th:nth-child(7), .orders-table td:nth-child(7) { min-width: 35px; }
.orders-table th:nth-child(8), .orders-table td:nth-child(8) { min-width: 30px; } /* Reduced for icon-only */
/* Fix dashboard charts and calendar scaling */
.chart-container {
height: auto !important;
min-height: 300px;
max-height: 450px;
overflow: visible;
width: 100%;
max-width: 100%;
}
.chart-container canvas {
max-height: 350px !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
/* Make warehouse visits calendar responsive */
.warehouse-visits-calendar {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.calendar-grid {
min-width: 250px;
width: 100%;
font-size: 0.75rem;
}
.calendar-day {
padding: 0.25rem;
font-size: 0.7rem;
min-height: 60px;
}
/* Completion trends chart specific */
.completion-trends-chart {
height: auto !important;
max-height: 350px;
}
/* Upcoming deadlines chart */
.upcoming-deadlines-section .chart-container {
height: auto !important;
min-height: 250px;
max-height: 350px;
}
}
@media (max-width: 768px) {
/* Fix form field overflow on mobile */
.form-control,
.form-group input,
.form-group select,
.form-group textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
/* Login form inputs should maintain their intended max-width on mobile */
.login-form input[type="email"],
.login-form .form-input {
max-width: 320px !important;
}
/* Prevent horizontal overflow in form sections */
.form-section,
.delivery-address-section,
.delivery-address-grid,
.order-meta-grid {
overflow-x: hidden;
max-width: 100%;
}
/* Ensure form groups don't overflow */
.form-group {
max-width: 100%;
overflow-x: hidden;
}
.container-wide {
padding: 0.5rem;
}
/* Fix charts section grid for mobile - force single column */
.charts-section {
grid-template-columns: 1fr !important;
gap: 1rem;
}
.orders-table {
min-width: 750px; /* Increased from 700px for wider ID column */
font-size: 0.8rem; /* Smaller text on mobile */
}
.orders-table th,
.orders-table td {
padding: 0.5rem 0.25rem; /* Tighter padding */
}
.admin-menu {
grid-template-columns: 1fr;
}
.admin-actions {
flex-direction: column;
align-items: stretch;
}
/* Reset button sizing on mobile for better touch targets */
.admin-actions .btn {
flex: none;
min-width: auto;
width: 100%;
height: 48px; /* Slightly taller for mobile touch */
}
.admin-actions .btn:only-child {
min-width: auto;
width: 100%;
}
.dropdown-truncate {
font-size: 0.875rem;
}
}
/* Ultra-narrow screens (phones < 480px) */
@media (max-width: 480px) {
.calendar-grid {
min-width: 240px;
font-size: 0.7rem;
}
.calendar-day {
padding: 0.125rem;
font-size: 0.65rem;
min-height: 50px;
}
.chart-container {
padding: 1rem;
}
.chart-header h3 {
font-size: 1rem;
}
}
/* Table improvements for better data display */
.orders-table {
font-size: 0.875rem; /* Slightly smaller text to fit more data */
}
.orders-table th {
white-space: nowrap;
padding: 0.75rem;
}
.orders-table td {
padding: 0.5rem;
border-bottom: 1px solid #f3f4f6;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Improve text display in specific columns */
.orders-table td:nth-child(2) { /* Title column - allow wrapping if needed */
white-space: normal;
word-wrap: break-word;
max-height: 3rem;
overflow: hidden;
}
.orders-table td:nth-child(3) { /* Order Type column */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.orders-table td:first-child { /* ID column */
min-width: 70px;
max-width: 85px;
white-space: nowrap;
}
.orders-table td:nth-child(2) { /* Title column */
max-width: 300px;
white-space: normal;
word-wrap: break-word;
max-height: 3rem;
overflow: hidden;
}
.orders-table td:nth-child(3) { /* Order Type column */
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Status dropdown in tables should be more compact */
.status-dropdown {
padding: 0.125rem 0.25rem;
font-size: 0.75rem;
min-width: 100px;
}
/* Clickable KPI card styles */
.stat-card.clickable.active {
background-color: #f0f9ff;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
border: 2px solid #3b82f6;
}
.stat-card.clickable:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.stat-card.clickable.active:hover {
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
}
/* Dropdown overflow handling */
.dropdown-truncate {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown-truncate option {
white-space: normal;
overflow: visible;
text-overflow: initial;
max-width: none;
}
/* Container width improvements */
.container-wide {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
/* Article management styles */
.article-item {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr auto;
gap: 1rem;
padding: 1rem;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
margin-bottom: 1rem;
align-items: end;
overflow: hidden; /* Prevent overflow */
min-width: 0; /* Allow grid items to shrink */
}
.article-item .form-group {
margin-bottom: 0;
min-width: 0; /* Allow form groups to shrink */
}
.article-item .form-group label {
font-size: 0.875rem;
font-weight: 500;
color: #6b7280;
}
.article-item .form-control {
min-width: 0; /* Allow inputs to shrink */
width: 100%;
box-sizing: border-box;
}
/* Materials container improvements */
#materials-container {
overflow: hidden; /* Prevent container overflow */
}
#materials-list {
overflow: hidden; /* Prevent list overflow */
}
/* Responsive design for article items */
@media (max-width: 1024px) {
.article-item {
grid-template-columns: 1fr 1fr 1fr auto;
gap: 0.75rem;
}
}
@media (max-width: 768px) {
.article-item {
grid-template-columns: 1fr;
gap: 0.75rem;
padding: 0.75rem;
}
.article-item .form-group {
margin-bottom: 0.75rem;
}
.article-item .form-group:last-child {
margin-bottom: 0;
}
.article-item > div:last-child {
align-self: center;
margin-top: 0.5rem;
}
}
@media (max-width: 640px) {
/* Additional mobile fixes */
.form-container {
max-width: 100% !important;
margin: 0 !important;
padding: 1rem;
}
.article-item {
padding: 0.5rem;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.article-item .form-group {
margin-bottom: 0.5rem;
}
.article-item .form-control {
font-size: 0.875rem;
padding: 0.5rem;
}
}
@media (max-width: 480px) {
.article-item {
padding: 0.5rem;
gap: 0.5rem;
}
.article-item .form-group {
margin-bottom: 0.5rem;
}
/* Ensure materials header is responsive */
.materials-header {
flex-direction: column !important;
align-items: stretch !important;
gap: 0.75rem !important;
}
.materials-header .btn {
width: 100%;
justify-content: center;
}
}
.article-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
background: white;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.2s;
}
.article-checkbox:hover {
background: #f9fafb;
}
.article-checkbox.completed {
background: #d1fae5;
border-color: #1E2A56;
text-decoration: line-through;
opacity: 0.7;
}
.article-checkbox input[type="checkbox"] {
margin: 0;
}
.remove-article-btn {
background: #ef4444;
color: white;
border: none;
border-radius: 0.375rem;
padding: 0.5rem;
cursor: pointer;
font-size: 0.75rem;
transition: background-color 0.2s;
}
.remove-article-btn:hover {
background: #dc2626;
}
/* Form container improvements */
.form-container {
background: white;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
}
/* Custom dropdown styling */
.custom-select {
position: relative;
display: inline-block;
width: 100%;
font-family: inherit;
}
.custom-select select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: white;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
padding: 0.5rem 2rem 0.5rem 0.75rem;
font-size: 0.9rem;
width: 100%;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.custom-select select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.custom-select::after {
content: '▼';
position: absolute;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
pointer-events: none;
color: #6b7280;
font-size: 0.75rem;
}
/* Dropdown-specific styling for select elements */
select.filter-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: white url('data:image/svg+xml;charset=US-ASCII,') no-repeat right 0.75rem center;
background-size: 12px;
padding-right: 2rem;
cursor: pointer;
}
/* Filter container for clear button positioning */
.filter-group {
position: relative;
}
.filter-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.search-input {
appearance: none;
background: white;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
min-width: 150px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Days left and age styling with negative values support */
.days-left {
/* Removed font-weight: 600; to remove bold formatting */
}
.days-left.overdue {
color: #dc2626;
/* Removed font-weight: 700; to remove bold formatting */
}
.days-left.due-soon {
color: #d97706;
}
.days-left.on-time {
color: #16a34a;
}
.age-badge {
font-size: 0.75rem;
color: #6b7280;
}
/* View Toggle Styles */
.view-toggle-group {
display: inline-flex;
background: #f3f4f6;
border-radius: 0.5rem;
padding: 0.25rem;
gap: 0.25rem;
}
.view-toggle-btn {
background: transparent;
border: none;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.2s;
color: #6b7280;
font-size: 1rem;
}
.view-toggle-btn:hover {
color: #374151;
}
.view-toggle-btn.active {
background: white;
color: #1f2937;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Card View Styles */
.cards-container {
background: transparent;
border-radius: 1rem;
position: relative;
width: 100%;
}
.orders-grid {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0.5rem;
max-width: 100%;
}
.order-card {
background: white;
border-radius: 0.75rem;
border: 1px solid #e5e7eb;
padding: 1.5rem;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 100%;
}
.order-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-color: #d1d5db;
}
.order-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.order-card-id {
font-size: 1.125rem;
font-weight: 600;
color: #1f2937;
}
.order-card-badges {
display: flex;
gap: 0.5rem;
align-items: center;
}
.order-card-title {
font-size: 1.125rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.order-card-description {
font-size: 0.875rem;
color: #6b7280;
margin-bottom: 1rem;
line-height: 1.5;
font-style: italic;
word-break: break-word;
overflow-wrap: break-word;
}
.order-card-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem 1.5rem;
margin-bottom: 1rem;
padding-top: 1rem;
border-top: 1px solid #f3f4f6;
}
.order-card-meta-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.875rem;
color: #374151;
line-height: 1.4;
}
.order-card-meta-item i {
font-size: 0.875rem;
color: #9ca3af;
margin-top: 0.125rem;
flex-shrink: 0;
}
.order-card-meta-label {
font-weight: 600;
color: #6b7280;
margin-right: 0.25rem;
}
.order-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
border-top: 1px solid #f3f4f6;
}
.order-card-time {
display: flex;
gap: 1rem;
font-size: 0.875rem;
}
.order-card-time-item {
display: flex;
align-items: center;
gap: 0.25rem;
}
.order-card-status {
display: flex;
align-items: center;
}
/* Cards loading overlay */
.cards-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
min-height: 300px;
}
/* Responsive adjustments for cards */
@media (max-width: 1200px) {
.orders-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
}
@media (max-width: 768px) {
.orders-grid {
grid-template-columns: 1fr;
gap: 1rem;
padding: 0.25rem;
}
.order-card {
padding: 1rem;
}
.view-toggle-group {
margin-bottom: 0.5rem;
}
}
/* Pagination Styles */
.pagination-container {
min-height: 60px; /* Reserve space even when hidden */
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: white;
border-top: 1px solid #e5e7eb;
border-radius: 0 0 1rem 1rem;
margin-top: -1px; /* Overlap with table border */
visibility: hidden; /* Use visibility instead of display to maintain space */
}
.pagination-container.visible {
visibility: visible;
}
.pagination-info {
color: #6b7280;
font-size: 0.875rem;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.page-numbers {
display: flex;
gap: 0.25rem;
}
.page-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
background: white;
color: #374151;
text-decoration: none;
font-size: 0.875rem;
transition: all 0.2s;
cursor: pointer;
}
.page-number:hover {
background: #f3f4f6;
border-color: #9ca3af;
}
.page-number.active {
background: #3b82f6;
border-color: #3b82f6;
color: white;
}
.page-number:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (max-width: 768px) {
.pagination-container {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.pagination-controls {
justify-content: center;
}
}
/* Dashboard table specific styles */
.recent-orders .orders-table th.priority-col,
.recent-orders .orders-table td.priority-col {
width: 80px;
min-width: 80px;
max-width: 80px;
}
.recent-orders .orders-table th:nth-child(1), /* ID */
.recent-orders .orders-table td:nth-child(1) {
width: 72px;
min-width: 72px;
}
.recent-orders .orders-table th:nth-child(3), /* Order Type */
.recent-orders .orders-table td:nth-child(3) {
width: 120px;
min-width: 120px;
}
.recent-orders .orders-table th:nth-child(6), /* Days Left */
.recent-orders .orders-table td:nth-child(6) {
width: 90px;
min-width: 90px;
text-align: center;
}
/* Error Report Modal Styles */
.error-report-modal .modal-content {
max-width: 600px;
width: 90%;
/* Prevent layout shifts during interaction */
contain: layout style;
}
.error-type-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.error-type-card {
border: 2px solid #e5e7eb;
border-radius: 0.75rem;
padding: 1.5rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: white;
position: relative;
/* Contain paint to prevent reflows */
contain: layout paint;
}
.error-type-card:hover {
border-color: #3b82f6;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
transform: translateY(-2px);
}
.error-type-card.selected {
border-color: #ef4444;
background: #fef2f2;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.error-type-card i {
font-size: 2rem;
color: #6b7280;
margin-bottom: 0.75rem;
display: block;
}
.error-type-card.selected i {
color: #ef4444;
}
.error-type-card h4 {
margin: 0 0 0.5rem 0;
font-size: 1rem;
font-weight: 600;
color: #1f2937;
}
.error-type-card p {
margin: 0;
font-size: 0.875rem;
color: #6b7280;
line-height: 1.4;
}
.error-severity {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.severity-option {
flex: 1;
min-width: 120px;
border: 2px solid #e5e7eb;
border-radius: 0.5rem;
padding: 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: white;
/* Contain layout calculations */
contain: layout paint;
}
.severity-option:hover {
border-color: #3b82f6;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}
.severity-option.selected {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.severity-option.severity-low.selected {
border-color: #1E2A56;
background: #f0fdf4;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.severity-option.severity-medium.selected {
border-color: #f59e0b;
background: #fffbeb;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
.severity-option.severity-high.selected {
border-color: #ef4444;
background: #fef2f2;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.severity-option h5 {
margin: 0 0 0.25rem 0;
font-size: 0.95rem;
font-weight: 600;
color: #1f2937;
}
.severity-option p {
margin: 0;
font-size: 0.8rem;
color: #6b7280;
}
.error-report-modal h4 {
margin: 0 0 1rem 0;
font-size: 1.1rem;
font-weight: 600;
color: #1f2937;
}
.error-report-modal .form-group {
margin-bottom: 1.5rem;
}
.error-report-modal .form-group:last-child {
margin-bottom: 0;
}
/* Order Type Category Badge */
.category-badge {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
text-transform: capitalize;
min-width: 60px;
text-align: center;
}
.category-badge.purchasing {
background-color: #3b82f6;
color: white;
}
.category-badge.transportation {
background-color: #ACF1AC;
color: white;
}
.category-badge.warehouse {
background-color: #f59e0b;
color: white;
}
.category-badge.other {
background-color: #6b7280;
color: white;
}
/* Dropdown indicator for status */
.dropdown-indicator {
font-size: 0.8em;
margin-left: 0.25em;
opacity: 0.6;
vertical-align: middle;
}
.category-badge-sm {
font-size: 0.75em;
padding: 0.15rem 0.4rem;
border-radius: 0.2rem;
}
.status-cell {
position: relative;
}
.status-cell .dropdown-indicator {
display: none;
position: absolute;
right: 0.5em;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.status-cell:hover .dropdown-indicator {
display: inline;
}
.mini-status-bar {
width: 100%;
height: 10px;
background: #f3f4f6;
border-radius: 2px;
overflow: hidden;
margin-top: 0.1em;
margin-bottom: 0.1em;
display: flex;
}
.category-badge-sm {
font-size: 0.75em;
padding: 0.15rem 0.4rem;
border-radius: 0.2rem;
display: inline-block;
font-weight: 600;
text-transform: capitalize;
margin-right: 0.2em;
}
/* Gantt Chart Styles */
.gantt-section {
background: white;
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
margin-bottom: 3rem;
}
.gantt-section .chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.gantt-controls {
display: flex;
gap: 0.5rem;
align-items: center;
}
.gantt-legend {
display: flex;
gap: 2rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 4px;
display: inline-block;
}
.legend-color.pending {
background-color: #fbbf24;
}
.legend-color.in-progress {
background-color: #3b82f6;
}
.legend-color.on-hold {
background-color: #ef4444;
}
.legend-color.completed {
background-color: #ACF1AC;
}
.gantt-container {
position: relative;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
background: #f9fafb;
}
.gantt-chart {
position: relative;
overflow-x: auto;
overflow-y: auto;
max-height: 700px; /* Increased from 500px */
}
.gantt-header {
position: sticky;
top: 0;
background: white;
border-bottom: 2px solid #e5e7eb;
z-index: 20;
display: flex;
min-width: 100%;
}
.gantt-project-header {
position: sticky;
left: 0;
background: white;
border-right: 1px solid #e5e7eb;
width: 280px;
min-width: 280px;
padding: 1rem;
font-weight: 600;
color: #374151;
z-index: 21;
}
.gantt-timeline-header {
flex: 1;
overflow: hidden;
position: relative;
z-index: 20;
}
.gantt-month-header {
display: flex;
background: #f8fafc;
border-bottom: 2px solid #e2e8f0;
min-width: max-content;
}
.gantt-month-column {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: #475569;
padding: 0.75rem 0.5rem;
border-right: 1px solid #cbd5e1;
background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
flex-shrink: 0;
}
.gantt-body {
position: relative;
max-height: 600px; /* Increased from 400px */
overflow-y: auto;
overflow-x: auto;
}
.gantt-timeline-background {
position: absolute;
top: 0;
left: 280px;
bottom: 0;
display: flex;
z-index: 1;
pointer-events: none;
}
.gantt-timeline-column {
min-width: 4px;
width: 4px;
border-right: 1px solid #f1f5f9;
position: relative;
height: 100%;
flex-shrink: 0;
}
.gantt-timeline-column.month-start {
border-right: 2px solid #cbd5e1;
}
.gantt-timeline-column.today {
background-color: rgba(220, 38, 38, 0.1);
}
.gantt-timeline-column.weekend {
background-color: #f8fafc;
}
.gantt-projects {
position: relative;
z-index: 5;
min-width: max-content;
}
.gantt-project-row {
display: flex;
border-bottom: 1px solid #e5e7eb;
min-height: 45px; /* Reduced from 60px */
align-items: center;
cursor: pointer;
transition: background-color 0.2s;
position: relative;
background: white;
}
.gantt-project-row:hover {
background-color: #f8fafc;
}
.gantt-project-row:hover .gantt-project-info {
background-color: #f8fafc;
}
.gantt-project-info {
position: sticky;
left: 0;
background: inherit;
border-right: 1px solid #e5e7eb;
width: 280px;
min-width: 280px;
padding: 0.75rem; /* Reduced from 1rem */
z-index: 15;
}
.gantt-project-name {
font-weight: 600;
color: #1f2937;
margin-bottom: 0.25rem;
font-size: 0.9rem;
}
.gantt-project-details {
font-size: 0.8rem;
color: #6b7280;
line-height: 1.4;
}
.gantt-project-timeline {
flex: 1;
position: relative;
min-width: 0;
align-items: center;
height: 45px; /* Reduced from 60px */
display: flex;
z-index: 5;
}
.gantt-project-bar {
position: absolute;
height: 28px; /* Reduced from 32px */
border-radius: 6px; /* Slightly reduced from 8px */
display: flex;
align-items: center;
color: white;
font-size: 0.7rem; /* Slightly reduced from 0.75rem */
font-weight: 500;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
transition: height 0.2s, box-shadow 0.2s;
border: none;
padding: 0;
gap: 0;
min-width: 40px;
z-index: 6;
overflow: hidden;
position: relative;
}
.gantt-project-bar:hover {
height: 32px; /* Reduced from 36px */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
transform: translateY(-1px);
z-index: 7;
}
.gantt-bar-segments {
display: flex;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 8px;
overflow: hidden;
}
.gantt-bar-segment {
height: 100%;
flex-shrink: 0;
position: relative;
transition: opacity 0.2s;
}
.gantt-bar-segment.completed {
background: linear-gradient(135deg, #ACF1AC, #9AE89A);
}
.gantt-bar-segment.in-progress {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.gantt-bar-segment.pending {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.gantt-bar-segment.on-hold {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.gantt-bar-segment.no-orders {
background: linear-gradient(135deg, #9ca3af, #6b7280);
}
.gantt-bar-segment.in-progress {
/* border: 1px solid rgba(0, 0, 0, 0.1); */
}
/* Remove old order box styles */
.gantt-order-count {
display: none;
}
.gantt-order-boxes {
display: none;
}
.gantt-order-box {
display: none;
}
.gantt-today-line.gantt-today-header {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.6));
z-index: 25;
pointer-events: none;
box-shadow: 0 0 3px rgba(59, 130, 246, 0.4);
border-radius: 1px;
}
.gantt-today-line::before {
display: none;
}
.gantt-today-line::after {
display: none;
}
.gantt-empty {
text-align: center;
padding: 3rem;
color: #6b7280;
}
.gantt-empty i {
font-size: 2rem;
margin-bottom: 1rem;
opacity: 0.5;
}
/* Responsive Design */
@media (max-width: 768px) {
.gantt-section {
padding: 1rem;
}
.gantt-section .chart-header {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.gantt-legend {
gap: 1rem;
}
.gantt-project-info {
width: 200px;
min-width: 200px;
padding: 0.75rem;
}
.gantt-project-header {
width: 200px;
min-width: 200px;
padding: 0.75rem;
}
.gantt-project-name {
font-size: 0.8rem;
}
.gantt-project-details {
font-size: 0.75rem;
}
}
/* File Upload Styles */
.file-upload-area {
margin-bottom: 1rem;
}
.file-upload-zone {
border: 2px dashed #d1d5db;
border-radius: 0.5rem;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
background: #fafafa;
}
.file-upload-zone:hover {
border-color: #3b82f6;
background: #f0f9ff;
}
.file-upload-zone.drag-over {
border-color: #3b82f6;
background: #eff6ff;
border-style: solid;
}
.file-upload-zone i {
font-size: 2rem;
color: #6b7280;
margin-bottom: 0.5rem;
display: block;
}
.file-upload-zone p {
margin: 0.5rem 0;
color: #374151;
font-weight: 500;
}
.file-upload-zone small {
color: #6b7280;
font-size: 0.875rem;
}
.selected-file-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
margin-bottom: 0.5rem;
}
.file-info {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
}
.file-icon {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background: #3b82f6;
color: white;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.file-details {
flex: 1;
}
.file-name {
font-weight: 500;
color: #1f2937;
margin-bottom: 0.25rem;
}
.file-size {
font-size: 0.75rem;
color: #6b7280;
}
.file-remove {
background: #ef4444;
color: white;
border: none;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
font-size: 0.75rem;
transition: background-color 0.2s;
}
.file-remove:hover {
background: #dc2626;
}
.attachment-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
margin-bottom: 0.5rem;
}
.attachment-info {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
}
.attachment-icon {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background: #1E2A56;
color: white;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.attachment-details {
flex: 1;
}
.attachment-name {
font-weight: 500;
color: #1f2937;
margin-bottom: 0.25rem;
}
.attachment-meta {
font-size: 0.75rem;
color: #6b7280;
}
.attachment-actions {
display: flex;
gap: 0.5rem;
}
.attachment-download {
background: #f3f4f6;
color: #6b7280;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
padding: 0.5rem;
cursor: pointer;
font-size: 0.875rem;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
min-width: 36px;
height: 36px;
}
.attachment-download:hover {
background: #e5e7eb;
color: #374151;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.attachment-view {
background: #f3f4f6;
color: #6b7280;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
padding: 0.5rem;
cursor: pointer;
font-size: 0.875rem;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
min-width: 36px;
height: 36px;
}
.attachment-view:hover {
background: #e5e7eb;
color: #374151;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.attachment-delete {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 0.375rem;
padding: 0.5rem;
cursor: pointer;
font-size: 0.875rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
min-width: 36px;
height: 36px;
}
.attachment-delete:hover {
background: #ef4444;
color: white;
border-color: #ef4444;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}
/* Additional CSS to ensure proper button visibility */
.admin-projects-page .orders-table .actions-column {
white-space: nowrap !important;
overflow: visible !important;
padding: 0.5rem !important;
}
.admin-projects-page .orders-table .actions-column .btn {
font-size: 0.875rem;
border-radius: 4px;
vertical-align: middle;
}
.admin-projects-page .orders-table .actions-column .btn i {
font-size: 0.875rem;
}
/* Upcoming Deadlines Chart Styles */
.upcoming-deadlines-section {
background: white;
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
margin-bottom: 2rem;
}
.upcoming-deadlines-section .chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.upcoming-deadlines-section .chart-legend {
display: flex;
gap: 2rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.legend-color-square {
width: 16px;
height: 16px;
border-radius: 4px;
display: inline-block;
}
.legend-color-square.purchasing {
background-color: #3b82f6;
}
.legend-color-square.warehouse {
background-color: #f59e0b;
}
.legend-color-square.transportation {
background-color: #ACF1AC;
}
.legend-color-square.other {
background-color: #6b7280;
}
.upcoming-deadlines-section .chart-container {
position: relative;
height: 400px;
width: 100%;
border: none;
}
.upcoming-deadlines-section canvas {
max-width: 100% !important;
height: auto !important;
image-rendering: auto;
}
/* Table Performance Optimizations */
.table-container {
/* Enable GPU-accelerated scrolling for tables */
will-change: scroll-position;
/* transform: translateZ(0); */ /* Removed - creates stacking context */
contain: layout style;
-webkit-overflow-scrolling: touch;
}
.orders-table thead th {
/* Optimize sticky header performance */
will-change: transform;
contain: layout style;
}
.orders-table tbody tr:hover {
/* Use transform for hover effects instead of heavy box-shadow */
/* transform: translateZ(0); */ /* Removed - creates stacking context */
will-change: transform;
}
/* Reduce expensive hover effects for Chrome */
.stat-card.clickable:hover {
/* Replace heavy box-shadow with subtle transform */
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Reduced from heavy shadow */
}
.btn:hover {
/* Optimize button hover performance */
transform: translateY(-1px);
will-change: transform;
}
/* Mobile-specific improvements */
@media (max-width: 480px) {
/* Extra small screens */
.container-wide {
padding: 0.25rem;
}
.page-header h1 {
font-size: 1.75rem;
}
.filters-section {
padding: 1rem;
}
.filter-select,
.search-input {
min-width: unset;
font-size: 16px; /* Prevent zoom on iOS */
}
/* Ensure dropdowns don't cause horizontal scroll */
.filter-group {
overflow: hidden;
}
/* Improve button spacing */
.actions {
gap: 0.5rem;
}
.btn {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
/* Fix modal on very small screens */
.modal-content {
width: 98%;
max-width: 98vw;
margin: 0.5rem;
border-radius: 0.5rem;
}
/* Reduce navigation menu width on small screens */
.nav-menu {
width: 260px;
}
}
/* Move Requests Overlay Styles */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
/* Remove expensive backdrop-filter that causes Chrome performance issues */
/* backdrop-filter: blur(2px); */
/* Add efficient compositing */
contain: layout style;
}
.overlay-content {
background: #fff;
border-radius: 1rem;
width: 95%;
max-width: 1200px;
max-height: 90vh;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
animation: modalSlideIn 0.2s ease-out;
will-change: auto;
/* Optimize scrolling */
contain: layout style;
}
.overlay-header {
padding: 1.5rem;
border-bottom: 1px solid #e5e7eb;
background: #f9fafb;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 1rem 1rem 0 0;
}
.overlay-header h2 {
margin: 0;
color: #1f2937;
font-size: 1.25rem;
font-weight: 600;
}
.overlay-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #6b7280;
padding: 0.25rem;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
transition: all 0.2s ease;
}
.overlay-close:hover {
color: #374151;
background: #e5e7eb;
}
.overlay-body {
padding: 1.5rem;
flex: 1;
overflow-y: auto;
}
.overlay-body .filter-section {
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.overlay-body .filter-section label {
font-weight: 500;
color: #374151;
min-width: 120px;
}
.overlay-body .filter-section .form-control {
width: 300px;
}
.overlay-body .table-container {
margin-top: 0;
}
/* Fix z-index for move request modal to appear above overlay */
#moveRequestModal {
z-index: 3000 !important;
}
/* Responsive overlay */
@media (max-width: 768px) {
.overlay-content {
width: 95%;
max-width: 95vw;
margin: 1rem;
max-height: 95vh;
}
.overlay-header {
padding: 1rem;
}
.overlay-header h2 {
font-size: 1.1rem;
}
.overlay-body {
padding: 1rem;
}
.overlay-body .filter-section {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.overlay-body .filter-section label {
min-width: auto;
}
.overlay-body .filter-section .form-control {
width: 100%;
}
}
/* Project Table Chart Styles */
.project-table-section {
background: white;
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
margin-bottom: 2rem;
}
.project-table-section .chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.project-table-legend {
display: flex;
gap: 2rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.project-table-legend .legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.project-table-legend .legend-color {
width: 16px;
height: 16px;
border-radius: 4px;
display: inline-block;
}
.project-table-legend .legend-color.unassigned-pending {
background-color: #fbbf24;
}
.project-table-legend .legend-color.assigned {
background-color: #f97316;
}
.project-table-legend .legend-color.picked {
background-color: #3b82f6;
}
.project-table-legend .legend-color.packed {
background-color: #8b5cf6;
}
.project-table-legend .legend-color.shipping-booked {
background-color: #06b6d4;
}
.project-table-legend .legend-color.shipped {
background-color: #ACF1AC;
}
.project-table-legend .legend-color.delivery-confirmed {
background-color: #9AE89A;
}
.project-table-container {
overflow-x: auto;
overflow-y: auto;
max-height: 900px; /* Increased from 650px to 900px */
border-radius: 0.5rem;
border: 1px solid #e5e7eb;
background: white;
}
.project-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* Fixed layout for better column control */
}
.project-table thead {
background-color: #f9fafb;
}
.project-table th {
padding: 0.6rem 1rem;
text-align: left;
font-weight: 600;
color: #374151;
border-bottom: 1px solid #e5e7eb;
font-size: 0.825rem;
}
.project-table th:first-child {
width: 25%; /* Project name - flexible width */
min-width: 250px; /* Minimum to prevent excessive shrinking */
}
.project-table th:nth-child(2) {
width: 120px; /* Start Date column - keep fixed */
}
.project-table th:nth-child(3) {
width: 35%; /* Progress Bar column - flexible width */
min-width: 300px; /* Minimum for progress bars */
}
.project-table th:nth-child(4) {
width: auto; /* Notes column - takes remaining space */
max-width: 300px; /* Limit notes column width */
}
.project-table th:last-child {
text-align: left;
}
.project-table tbody tr {
border-bottom: 1px solid #f3f4f6;
transition: background-color 0.2s;
}
.project-table tbody tr:hover {
background-color: #f9fafb;
}
.project-table td {
padding: 1rem 1rem;
vertical-align: middle;
font-size: 0.875rem;
overflow: hidden;
}
.project-table td:last-child {
text-align: left;
}
.project-data-cell {
width: 330px; /* Base width for standard screens */
}
.project-name {
font-weight: 600;
color: #111827;
margin-bottom: 0.375rem; /* Increased from 0.25rem for more spacing */
font-size: 0.875rem;
line-height: 1.2;
/* Responsive text truncation */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.project-client {
font-size: 0.75rem;
color: #6b7280;
margin-bottom: 0.375rem; /* Increased from 0.25rem for more spacing */
line-height: 1.1;
}
.project-orders-count {
font-size: 0.75rem;
color: #9ca3af;
line-height: 1.1;
}
.start-date-cell {
width: 120px; /* Fixed width to match header */
color: #6b7280;
font-size: 0.75rem;
font-weight: 500;
}
.project-bar-cell {
width: 400px; /* Fixed width to match header */
}
.project-bar-container {
position: relative;
width: 100%;
height: 40px; /* Increased by 25% from 32px */
background: #f3f4f6;
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
}
.project-bar-segments {
display: flex;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 8px;
overflow: hidden;
}
.project-bar-segment {
height: 100%;
flex-shrink: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
color: white;
font-size: 0.75rem;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
transition: opacity 0.2s, transform 0.15s;
min-width: 20px;
}
.project-bar-segment.unassigned-pending {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.project-bar-segment.assigned {
background: linear-gradient(135deg, #f97316, #ea580c);
}
.project-bar-segment.picked {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.project-bar-segment.packed {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.project-bar-segment.shipping-booked {
background: linear-gradient(135deg, #06b6d4, #0891b2);
}
.project-bar-segment.shipped {
background: linear-gradient(135deg, #ACF1AC, #9AE89A);
}
.project-bar-segment.delivery-confirmed {
background: linear-gradient(135deg, #9AE89A, #047857);
}
.project-bar-segment.no-orders {
background: linear-gradient(135deg, #9ca3af, #6b7280); /* Restored Gantt chart gradient */
}
.project-bar-segment:hover {
opacity: 0.9;
transform: scale(1.02);
z-index: 5;
}
.project-description-cell {
font-size: 0.8rem;
color: #6b7280;
line-height: 1.3;
word-wrap: break-word;
}
.project-table-empty {
text-align: center;
padding: 3rem;
color: #9ca3af;
}
.project-table-empty i {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
color: #d1d5db;
}
/* Responsive project table widths for different screen sizes */
@media (min-width: 1800px) {
.project-data-cell {
width: 450px; /* More space for project names on very large screens */
}
.project-bar-cell {
width: 500px; /* More space for progress bars too */
}
}
@media (min-width: 1400px) and (max-width: 1799px) {
.project-data-cell {
width: 380px; /* Moderate increase for large screens */
}
.project-bar-cell {
width: 420px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.project-data-cell {
width: 350px; /* Slightly more space */
}
}
@media (min-width: 769px) and (max-width: 1199px) {
.project-data-cell {
width: 300px; /* Slightly less space for medium screens */
}
.project-bar-cell {
width: 350px;
}
}
@media (max-width: 768px) {
.project-table-section {
padding: 1rem;
}
.project-table-legend {
gap: 1rem;
}
.project-data-cell {
width: 180px;
}
.project-bar-cell {
width: 150px;
}
.project-table th,
.project-table td {
padding: 0.5rem 0.75rem;
}
.project-name {
font-size: 0.8rem;
}
.project-client,
.project-orders-count {
font-size: 0.7rem;
}
}
.project-bar-container {
will-change: transform;
/* transform: translateZ(0); */ /* Removed - creates stacking context */
contain: layout style paint;
}
/* Large Screen Optimizations */
@media (min-width: 1600px) {
.nav-container,
.main-content,
.footer-content {
max-width: 1600px;
}
.container-wide {
max-width: 1800px;
}
/* Increase padding for better spacing on large screens */
.main-content {
padding: 2.5rem;
}
}
@media (min-width: 1920px) {
.nav-container,
.main-content,
.footer-content {
max-width: 1700px;
}
.container-wide {
max-width: 1900px;
}
/* Better spacing for ultra-wide screens */
.main-content {
padding: 3rem;
}
/* Dashboard stats grid improvements */
.stats-grid {
gap: 2rem;
}
/* Table improvements for large screens */
.orders-table th,
.orders-table td {
padding: 1rem 1.5rem;
}
}
@media (min-width: 2560px) {
.nav-container,
.main-content,
.footer-content {
max-width: 2000px;
}
.container-wide {
max-width: 2200px;
}
/* 4K display optimizations */
.main-content {
padding: 4rem;
}
/* Scale up fonts slightly for better readability on large displays */
body {
font-size: 1.1rem;
}
.page-header h1 {
font-size: 3rem;
}
.stats-grid {
gap: 2.5rem;
}
}
/* =============================================================================
Swedish Version Warehouse Status Icons and Delivery Number Styles
============================================================================= */
/* EU Export badges */
.eu-export-badge {
background-color: #dc3545;
color: white;
padding: 2px 6px; /* Reduced from 8px */
border-radius: 10px; /* Reduced from 12px */
font-size: 0.7rem; /* Reduced from 0.75rem */
font-weight: 500;
}
.eu-export-badge-no {
background-color: #6c757d;
color: white;
padding: 2px 6px; /* Reduced from 8px */
border-radius: 10px; /* Reduced from 12px */
font-size: 0.7rem; /* Reduced from 0.75rem */
font-weight: 500;
}
/* Status Icons Cell */
.status-icons-cell {
padding: 0.5rem 0.75rem; /* Match table cell padding */
text-align: center;
white-space: nowrap;
vertical-align: middle;
min-width: 300px;
width: 300px;
}
.status-icons-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.status-icons-header {
text-align: center;
min-width: 300px;
width: 300px;
}
/* Status Icon Buttons */
.status-icon {
background: none;
border: none;
padding: 6px;
margin: 0 2px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 13px; /* Slightly smaller for cleaner look */
min-width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.status-icon:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Active status icons (green) */
.status-icon-active {
background-color: #95DB95;
color: white;
}
.status-icon-active:hover {
background-color: #85CB85;
}
/* Inactive status icons (grey) */
.status-icon-inactive {
background-color: #6b7280;
color: white;
}
.status-icon-inactive:hover {
background-color: #4b5563;
}
/* Paused status icon (orange) */
.status-icon-paused {
background-color: #fb923c;
color: white;
}
.status-icon-paused:hover {
background-color: #f97316;
}
/* High priority status icon (red) */
.status-icon-high-priority {
background-color: #dc2626;
color: white;
}
.status-icon-high-priority:hover {
background-color: #b91c1c;
}
/* New comment status icon (blue) */
.status-icon-new-comment {
background-color: #3b82f6;
color: white;
cursor: default !important;
}
/* Shipping Days Cell */
.shipping-days-cell {
position: relative;
padding: 8px;
min-width: 100px;
text-align: center;
}
.shipping-days-display {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
min-width: 40px;
text-align: center;
color: #0369a1;
font-weight: 500;
}
/* Default state - border styling (unmodified by user) */
.shipping-days-display.unmodified {
background-color: transparent;
border: 1px solid #d1d5db;
}
/* Modified state - border styling (user has changed) */
.shipping-days-display.modified {
background-color: transparent;
border: 1px solid #d1d5db;
color: #374151;
}
.shipping-days-input {
width: 60px;
padding: 4px 8px;
text-align: center;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 0.875rem;
}
.edit-shipping-btn {
background: none;
border: none;
color: #6b7280;
cursor: pointer;
padding: 2px 3px; /* Reduced from 4px */
margin-left: 3px; /* Reduced from 4px */
border-radius: 3px;
font-size: 0.7rem; /* Reduced from 0.75rem */
transition: all 0.2s ease;
}
.edit-shipping-btn:hover {
color: #374151;
background-color: #f3f4f6;
}
/* Delivery Number Cell */
.delivery-number-cell {
position: relative;
padding: 8px;
min-width: 120px;
}
.delivery-number-display {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
background-color: #f8f9fa;
min-width: 60px;
max-width: 100px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
cursor: default;
}
/* Removed CSS hover - now handled by JavaScript to prevent layout changes */
.delivery-number-input {
width: 100px;
padding: 4px 8px;
border: 1px solid #4a90e2;
border-radius: 4px;
font-size: 0.875rem;
text-align: center;
}
.delivery-number-input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.edit-delivery-btn {
background: none;
border: none;
padding: 4px 6px;
margin-left: 4px;
color: #6b7280;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
font-size: 12px;
}
.edit-delivery-btn:hover {
background-color: #e5e7eb;
color: #4b5563;
}
/* EU Export Column */
.eu-export-header {
min-width: 80px;
max-width: 90px;
}
.eu-export-cell {
text-align: center;
padding: 8px 4px;
min-width: 80px;
max-width: 90px;
}
.eu-export-badge, .eu-export-badge-no {
padding: 2px 6px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
}
.eu-export-badge {
background-color: #fef3c7;
color: #92400e;
}
.eu-export-badge-no {
background-color: #f3f4f6;
color: #6b7280;
}
/* Warehouse staff specific permissions indicator */
.warehouse-only {
opacity: 0.6;
pointer-events: none;
}
/* Responsive adjustments for status icons */
@media (max-width: 1200px) {
.status-icon {
font-size: 12px;
min-width: 28px;
height: 28px;
margin: 0 2px;
padding: 5px;
}
.status-icons-header {
min-width: 260px;
width: 260px;
}
.status-icons-cell {
min-width: 260px;
width: 260px;
gap: 3px;
}
.eu-export-header,
.eu-export-cell {
min-width: 70px;
max-width: 80px;
}
}
@media (max-width: 768px) {
.status-icons-cell {
padding: 4px 3px;
gap: 2px;
min-width: 240px;
width: 240px;
}
.status-icon {
font-size: 11px;
min-width: 24px;
height: 24px;
padding: 4px;
margin: 0 1px;
}
.status-icons-header {
min-width: 240px;
width: 240px;
}
.eu-export-header,
.eu-export-cell {
min-width: 60px;
max-width: 70px;
}
.delivery-number-cell {
min-width: 100px;
}
.delivery-number-input {
width: 80px;
font-size: 0.75rem;
}
}
/* Warehouse Visits Card Styles */
.warehouse-visits-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.warehouse-visit-card {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
overflow: hidden;
}
.warehouse-visit-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, #f8fafc 0%, #f1f8ff 100%);
}
.visit-card-header {
display: flex;
justify-content: space-between;
align-items: start;
padding: 1.5rem 1.5rem 0.75rem;
border-bottom: 1px solid #e5e7eb;
}
.visit-card-title h4 {
margin: 0;
color: #1f2937;
font-size: 1.125rem;
font-weight: 600;
}
.visit-id {
color: #6b7280;
font-size: 0.875rem;
margin-top: 0.25rem;
display: block;
}
.visit-card-body {
padding: 1.5rem;
}
.visit-detail-row {
display: flex;
align-items: start;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: #4b5563;
font-size: 0.875rem;
}
.visit-detail-row:last-child {
margin-bottom: 0;
}
.visit-detail-row i {
color: #6b7280;
width: 16px;
margin-top: 2px;
}
.visit-approval-info {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
display: flex;
align-items: center;
gap: 0.5rem;
color: #1E2A56;
font-size: 0.813rem;
}
.visit-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
background: #f9fafb;
border-top: 1px solid #e5e7eb;
}
.visit-meta {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.visit-meta small {
color: #6b7280;
font-size: 0.75rem;
}
.visit-actions {
display: flex;
gap: 0.5rem;
}
.btn-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d1d5db;
border-radius: 6px;
background: white;
color: #6b7280;
cursor: pointer;
transition: all 0.2s;
}
.btn-icon:hover {
background: #f3f4f6;
color: #374151;
border-color: #9ca3af;
}
.btn-icon.btn-approve {
color: #1E2A56;
border-color: #1E2A56;
}
.btn-icon.btn-approve:hover {
background: #1E2A56;
color: white;
}
.btn-icon.btn-danger {
color: #dc2626;
border-color: #dc2626;
}
.btn-icon.btn-danger:hover {
background: #dc2626;
color: white;
transform: none; /* Prevent bobbing for icon buttons */
}
/* Loading Overlay Styles */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.loading-content {
text-align: center;
}
/* Tooltip Styles */
.info-tooltip {
color: #6b7280;
font-size: 0.875rem;
cursor: help;
position: relative;
margin-left: 0.25rem;
}
.info-tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #1f2937;
color: white;
padding: 0.5rem 0.75rem;
border-radius: 6px;
font-size: 0.75rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
max-width: 250px;
white-space: normal;
text-align: center;
line-height: 1.4;
}
.info-tooltip::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #1f2937;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.info-tooltip:hover::after,
.info-tooltip:hover::before {
opacity: 1;
}
/* Form Label Styles */
.form-label {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
font-weight: 500;
color: #374151;
}
.required-star {
color: #ef4444;
margin-left: 0.25rem;
}
/* Modern Form Control Styles */
.modern-form .form-control {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 0.875rem;
transition: all 0.2s;
}
.modern-form .form-control:focus {
outline: none;
border-color: #1E2A56;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.modern-form textarea.form-control {
min-height: 100px;
}
/* Filters Grid */
.filters-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr auto;
gap: 1rem;
align-items: end;
}
/* Responsive Grid */
@media (max-width: 1024px) {
.filters-grid {
grid-template-columns: repeat(2, 1fr) auto;
}
}
@media (max-width: 768px) {
.warehouse-visits-grid {
grid-template-columns: 1fr;
}
.filters-grid {
grid-template-columns: 1fr;
}
.form-section > div[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr \!important;
}
}
/* Enhanced Visit Details Modal - Using app design system */
.visit-details,
.workshop-details,
.other-request-details {
padding: var(--space-md);
}
.detail-section {
margin-bottom: var(--space-lg);
padding: var(--space-lg);
background: var(--color-surface-0);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-light);
}
.detail-section:last-child {
margin-bottom: 0;
}
.detail-section .section-header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--color-border-light);
}
.detail-section .section-header h4 {
margin: 0;
color: var(--color-gray-800);
font-size: var(--font-base);
font-weight: 600;
}
.detail-section .section-header h4 i {
color: var(--color-primary);
margin-right: var(--space-xs);
}
.section-icon {
color: var(--color-primary);
font-size: var(--font-lg);
}
.detail-grid {
display: flex;
flex-direction: column;
gap: 0;
}
.detail-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--color-border-subtle);
}
.detail-item:last-child {
border-bottom: none;
}
.detail-label {
display: flex;
align-items: center;
gap: var(--space-sm);
font-weight: 500;
color: var(--color-gray-600);
min-width: 140px;
font-size: var(--font-sm);
}
.detail-label i {
color: var(--color-gray-400);
width: 16px;
text-align: center;
}
.detail-value {
color: var(--color-gray-800);
text-align: right;
flex: 1;
font-size: var(--font-sm);
}
.contact-link {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.contact-link:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
.description-content {
background: var(--color-surface-1);
border-radius: var(--radius-md);
padding: var(--space-md);
border: 1px solid var(--color-border-subtle);
}
.description-content p {
margin: 0;
color: var(--color-gray-700);
line-height: 1.6;
white-space: pre-wrap;
}
.approval-section {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%);
border-radius: var(--radius-lg);
padding: var(--space-lg);
border: 1px solid rgba(34, 197, 94, 0.2);
}
.approval-section .section-header {
border-bottom-color: rgba(34, 197, 94, 0.2);
}
.approval-info {
margin-top: var(--space-sm);
}
.approval-badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
background: var(--color-primary);
color: white;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
font-weight: 500;
font-size: var(--font-sm);
}
.approval-badge i {
color: white;
}
/* Modal form controls inside detail sections */
.detail-section .form-control {
font-size: var(--font-sm);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border-medium);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.detail-section .form-control:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(30, 42, 86, 0.1);
outline: none;
}
.detail-section textarea.form-control {
min-height: 80px;
resize: vertical;
}
/* Modal action buttons */
.detail-section .btn {
font-size: var(--font-sm);
}
/* Attachments list in modals */
.detail-section .attachment-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-1);
border-radius: var(--radius-md);
margin-bottom: var(--space-xs);
transition: background var(--transition-fast);
}
.detail-section .attachment-item:hover {
background: var(--color-surface-2);
}
.detail-section .attachment-item a {
color: var(--color-primary);
text-decoration: none;
font-size: var(--font-sm);
}
.detail-section .attachment-item a:hover {
text-decoration: underline;
}
/* Comments list in modals */
.detail-section .comment-item {
padding: var(--space-md);
background: var(--color-surface-1);
border-radius: var(--radius-md);
margin-bottom: var(--space-sm);
border-left: 3px solid var(--color-primary);
}
.detail-section .comment-item.internal {
border-left-color: var(--color-info);
background: rgba(59, 130, 246, 0.05);
}
.detail-section .comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-xs);
font-size: var(--font-xs);
color: var(--color-gray-500);
}
.detail-section .comment-author {
font-weight: 600;
color: var(--color-gray-700);
}
.detail-section .comment-text {
color: var(--color-gray-700);
line-height: 1.5;
white-space: pre-wrap;
}
/* Attachments list styling */
.attachments-list {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.attachments-list .attachment-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md);
background: var(--color-surface-1);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-subtle);
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.attachments-list .attachment-item:hover {
background: var(--color-surface-2);
border-color: var(--color-border-light);
}
.attachments-list .attachment-info {
display: flex;
align-items: center;
gap: var(--space-md);
flex: 1;
}
.attachments-list .attachment-icon i {
color: var(--color-gray-500);
font-size: var(--font-lg);
}
.attachments-list .attachment-name {
font-weight: 500;
color: var(--color-gray-800);
font-size: var(--font-sm);
}
.attachments-list .attachment-meta {
font-size: var(--font-xs);
color: var(--color-gray-500);
margin-top: var(--space-2xs);
}
.attachments-list .attachment-actions {
display: flex;
gap: var(--space-sm);
}
.attachments-list .attachment-actions a {
color: var(--color-primary);
padding: var(--space-sm);
border-radius: var(--radius-sm);
transition: background var(--transition-fast), color var(--transition-fast);
}
.attachments-list .attachment-actions a:hover {
background: var(--color-surface-2);
color: var(--color-primary-dark);
}
/* Requested dates list styling */
.requested-date-item {
padding: var(--space-md);
background: var(--color-surface-1);
border-radius: var(--radius-md);
margin-bottom: var(--space-sm);
border: 1px solid var(--color-border-subtle);
}
.requested-date-item:last-child {
margin-bottom: 0;
}
.requested-date-item .date-header {
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--space-2xs);
}
.requested-date-item .date-header i {
color: var(--color-primary);
margin-right: var(--space-xs);
}
.requested-date-item .date-comment {
font-size: var(--font-sm);
color: var(--color-gray-600);
margin-top: var(--space-sm);
}
/* Modal body scrollable area */
.modal-body {
max-height: 70vh;
overflow-y: auto;
padding: var(--space-lg);
}
.modal-body::-webkit-scrollbar {
width: 8px;
}
.modal-body::-webkit-scrollbar-track {
background: var(--color-surface-1);
border-radius: var(--radius-sm);
}
.modal-body::-webkit-scrollbar-thumb {
background: var(--color-gray-300);
border-radius: var(--radius-sm);
}
.modal-body::-webkit-scrollbar-thumb:hover {
background: var(--color-gray-400);
}
/* No items message */
.no-items-message {
color: var(--color-gray-500);
font-style: italic;
padding: var(--space-md);
text-align: center;
}
/* Comments list styling */
.comments-list {
max-height: 300px;
overflow-y: auto;
margin-bottom: var(--space-md);
}
.comment-item {
padding: var(--space-md);
background: var(--color-surface-1);
border-radius: var(--radius-md);
margin-bottom: var(--space-sm);
border: 1px solid var(--color-border-subtle);
border-left: 3px solid var(--color-primary);
}
.comment-item.internal {
background: rgba(59, 130, 246, 0.05);
border-left-color: var(--color-info);
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-sm);
}
.comment-author-info {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.comment-author {
font-weight: 600;
color: var(--color-gray-800);
font-size: var(--font-sm);
}
.comment-date {
font-size: var(--font-xs);
color: var(--color-gray-500);
}
.internal-badge {
display: inline-flex;
align-items: center;
gap: 0.2rem;
background: var(--color-info);
color: white;
font-size: 0.65rem;
padding: 0.15rem 0.4rem;
border-radius: var(--radius-sm);
font-weight: 600;
text-transform: uppercase;
}
.comment-text {
color: var(--color-gray-700);
white-space: pre-wrap;
line-height: 1.5;
font-size: var(--font-sm);
}
/* Add comment section */
.add-comment-section {
margin-top: var(--space-md);
}
.add-comment-section .form-control {
margin-bottom: var(--space-sm);
}
/* Comment buttons */
.comment-buttons {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-sm);
flex-wrap: wrap;
}
/* Info button style */
.btn-info {
background: var(--color-info);
color: white;
border-color: var(--color-info);
}
.btn-info:hover {
background: #2563eb;
border-color: #2563eb;
}
/* Late Order Flag Styles */
.late-order-flag {
display: inline-block;
margin-left: 0.5rem;
color: #f59e0b;
font-size: 0.875rem;
animation: pulse 2s infinite;
}
.late-order-flag i {
color: #f59e0b;
}
.late-order-red-flag {
display: inline-block;
margin-left: 0.5rem;
color: #dc2626;
font-size: 0.75rem;
animation: pulse 2s infinite;
}
.late-order-red-flag i {
color: #dc2626;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
/* Ship By Date Color Coding - Subtle background with black text */
.ship-by-date.ship-by-overdue {
background-color: rgba(239, 68, 68, 0.12);
color: var(--color-gray-700);
padding: 0.2rem 0.5rem;
border-radius: var(--radius-sm);
border: 1px solid rgba(239, 68, 68, 0.25);
}
.ship-by-date.ship-by-urgent {
background-color: rgba(234, 88, 12, 0.1);
color: var(--color-gray-700);
padding: 0.2rem 0.5rem;
border-radius: var(--radius-sm);
border: 1px solid rgba(234, 88, 12, 0.2);
}
.ship-by-date.ship-by-warning {
background-color: rgba(245, 158, 11, 0.1);
color: var(--color-gray-700);
padding: 0.2rem 0.5rem;
border-radius: var(--radius-sm);
border: 1px solid rgba(245, 158, 11, 0.2);
}
/* Enhanced Order Detail View Styles */
.order-workflow-section {
background: #f8fafc;
border-radius: 8px;
padding: 1.5rem;
border: 1px solid #e2e8f0;
margin-bottom: 2rem;
}
.state-badge {
background: #e2e8f0;
color: #475569;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.state-badge.state-unassigned-pending {
background: #fef3c7;
color: #d97706;
}
.state-badge.state-assigned {
background: #fed7aa;
color: #ea580c;
}
.state-badge.state-picked {
background: #dbeafe;
color: #2563eb;
}
.state-badge.state-packed {
background: #e9d5ff;
color: #7c3aed;
}
.state-badge.state-shipping-booked {
background: #a7f3d0;
color: #1E2A56;
}
.state-badge.state-shipped {
background: #bbf7d0;
color: #047857;
}
.state-badge.state-delivery-confirmed {
background: #d1fae5;
color: #065f46;
}
.workflow-indicators {
display: flex;
flex-wrap: wrap;
gap: clamp(0.5rem, 3vw, 2.5rem);
margin-top: 1rem;
margin-bottom: 2.5rem;
align-items: flex-start;
justify-content: center;
row-gap: 3rem;
}
.workflow-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
padding: 0.4rem;
background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
background-origin: border-box;
background-clip: padding-box;
border: 2px solid #e5e7eb;
border-radius: 10px;
min-width: 42px;
flex: 0 0 auto;
width: clamp(42px, 10vw, 110px);
height: clamp(38px, 8vw, 90px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
text-align: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.workflow-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-color: #1E2A56;
}
.workflow-item.completed {
border-color: #1E2A56;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}
.workflow-item.completed:hover {
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}
.workflow-item i {
font-size: clamp(1rem, 2vw, 1.75rem);
color: #6b7280;
margin: 0;
padding: 0;
line-height: 1;
transition: all 0.3s ease;
}
.workflow-item:hover i {
transform: scale(1.1);
}
.workflow-item.completed i {
color: #1E2A56;
}
.workflow-label {
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
font-size: clamp(0.625rem, 0.75vw, 0.75rem);
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
white-space: nowrap;
transition: color 0.3s ease;
}
.workflow-item.completed .workflow-label {
color: #1E2A56;
}
/* Add chevron arrows between workflow items */
.workflow-item:not(:last-child)::after {
content: '\f054';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
right: -1.5rem;
top: 50%;
transform: translateY(-50%);
font-size: clamp(0.75rem, 1vw, 1rem);
color: #9ca3af;
z-index: 1;
transition: all 0.3s ease;
}
/* Hide labels and arrows on screens narrower than 770px */
@media (max-width: 770px) {
.workflow-label {
display: none;
}
.workflow-item:not(:last-child)::after {
display: none;
}
.workflow-indicators {
gap: 1rem;
row-gap: 1.5rem;
margin-bottom: 1rem;
}
}
.workflow-item.completed:not(:last-child)::after {
color: #1E2A56;
transform: translateY(-50%) scale(1.1);
}
/* Order section containers */
.order-section {
background: #f8fafc;
border-radius: 8px;
padding: 1.5rem;
border: 1px solid #e2e8f0;
}
.order-section h3 {
margin-bottom: 1rem;
}
.order-section:not(:last-child) {
margin-bottom: 2rem;
}
/* Smaller due date input field */
#order-due-date,
#order-requested-packing-date {
font-size: 0.875rem;
padding: 0.375rem 0.5rem;
height: auto;
max-width: 200px;
}
/* Project search suggestions */
.project-search-container {
position: relative;
}
#project_search {
min-width: 400px;
width: 100%;
max-width: 600px;
}
.search-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #e5e7eb;
border-top: none;
border-radius: 0 0 0.375rem 0.375rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
max-height: 300px;
overflow-y: auto;
z-index: 1000;
}
.suggestion-item {
padding: 0.75rem;
cursor: pointer;
border-bottom: 1px solid #f3f4f6;
transition: background-color 0.15s ease;
}
.suggestion-item:last-child {
border-bottom: none;
}
.suggestion-item:hover,
.suggestion-item.active {
background-color: #f9fafb;
}
.suggestion-item.no-results,
.suggestion-item.error {
padding: 0.75rem;
color: #6b7280;
font-style: italic;
cursor: default;
}
.suggestion-item.error {
color: #ef4444;
}
.suggestion-name {
font-weight: 500;
color: #1f2937;
margin-bottom: 0.25rem;
}
.suggestion-number {
font-size: 0.875rem;
color: #6b7280;
}
/* Filter-specific form control styling */
.filter-group .form-control {
min-width: 150px;
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
background: white;
transition: border-color 0.2s, box-shadow 0.2s;
}
.filter-group .form-control:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.filter-group .project-search-container .form-control {
min-width: 200px;
max-width: 300px;
}
/* Specific overrides for project search input to ensure styling is applied */
#project-search.filter-select,
#requestor-search.filter-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: white;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
font-size: 0.875rem;
min-width: 200px;
max-width: 300px;
}
.order-detailed-info {
background: #f9fafb;
border-radius: 8px;
padding: 1.5rem;
border: 1px solid #e5e7eb;
}
.detailed-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.info-section {
background: white;
padding: 1.5rem;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.info-section h4 {
margin: 0 0 1rem 0;
color: #374151;
font-size: 1rem;
font-weight: 600;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 0.5rem;
}
.info-item {
display: flex;
flex-direction: column;
margin-bottom: 0.75rem;
}
.info-label {
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.info-value {
color: #374151;
font-weight: 400;
font-size: 0.875rem;
}
.info-item small {
font-size: 0.75rem;
color: #9ca3af;
margin-top: 0.25rem;
}
.late-order-warning {
grid-column: 1 / -1;
background: #fef2f2 !important;
border: 2px solid #dc2626 !important;
box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.1), 0 2px 4px -1px rgba(220, 38, 38, 0.06) !important;
}
.late-order-warning h4 {
color: #dc2626;
border-color: #dc2626;
font-weight: 700;
font-size: 1.1rem;
}
.late-order-warning p {
color: #991b1b;
margin: 0;
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 768px) {
.detailed-info-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
/* Keep workflow indicators horizontal on mobile, just scale them down */
.workflow-indicators {
/* Remove flex-direction: column to keep horizontal layout */
gap: 0.75rem; /* Reduce gap between items */
justify-content: center; /* Center icons on mobile too */
overflow-x: auto; /* Allow horizontal scroll if needed */
-webkit-overflow-scrolling: touch;
}
.workflow-item {
width: 60px; /* Smaller width on mobile */
height: 50px; /* Smaller height on mobile */
min-width: 60px; /* Prevent shrinking below this */
flex-shrink: 0; /* Prevent items from shrinking */
}
.workflow-item i {
font-size: 1.1rem; /* Smaller icons on mobile */
}
.workflow-item:not(:last-child)::after {
font-size: 0.9rem; /* Smaller arrows on mobile */
right: -0.85rem; /* Adjust arrow position */
}
}
/* Add Items Modal Styles */
.add-item-row {
display: flex;
align-items: flex-end;
gap: 1rem;
margin-bottom: 1rem;
padding: 1rem;
background: #f9fafb;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.item-fields {
display: grid;
grid-template-columns: 2fr 1fr 80px 80px;
gap: 1rem;
flex: 1;
}
.item-fields .form-group {
margin-bottom: 0;
}
.item-fields label {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.25rem;
}
.item-fields .form-control {
width: 100%;
padding: 0.5rem;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 0.875rem;
}
.remove-item-btn {
flex-shrink: 0;
height: 38px;
width: 38px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.item-fields {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.add-item-row {
flex-direction: column;
align-items: stretch;
}
.remove-item-btn {
align-self: center;
margin-top: 0.5rem;
}
}
/* ============================================================================
CHECKBOXES - Standardized Component
============================================================================ */
.checkbox-container {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.checkbox-label {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
font-size: var(--font-sm);
color: var(--color-text-primary);
font-weight: var(--font-medium);
user-select: none;
}
.checkbox {
width: 18px;
height: 18px;
border: 2px solid var(--color-border-default);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-fast);
background: var(--color-bg-primary);
position: relative;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
flex-shrink: 0;
}
.checkbox:checked {
background: var(--color-primary);
border-color: var(--color-primary);
}
.checkbox:checked::before {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--color-text-inverse);
font-weight: var(--font-bold);
font-size: var(--font-xs);
}
.checkbox:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(30, 42, 86, 0.1);
}
.checkbox:hover:not(:disabled) {
border-color: var(--color-primary);
}
.checkbox:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Order Flags styling for dashboard pressing orders table */
.order-flags {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: center;
}
.order-flags i {
font-size: 1rem;
transition: color 0.2s ease;
}
.order-flags-cell {
text-align: center;
width: 40px;
}
.order-progress-cell {
width: auto;
min-width: 200px;
}
/* Custom Checkbox (with label wrapper) */
.custom-checkbox {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
user-select: none;
font-size: var(--font-sm);
color: var(--color-text-primary);
margin: 0;
position: relative;
}
.custom-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 18px;
width: 18px;
left: 0;
top: 0;
margin: 0;
z-index: 1;
}
.custom-checkbox .checkmark {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
background-color: var(--color-bg-primary);
border: 2px solid var(--color-border-default);
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
flex-shrink: 0;
}
.custom-checkbox:hover .checkmark {
border-color: var(--color-primary);
}
.custom-checkbox input:checked ~ .checkmark {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.custom-checkbox .checkmark:after {
content: "";
position: absolute;
display: none;
left: 0.25rem;
top: 0.125rem;
width: 0.25rem;
height: 0.5rem;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkbox-label {
margin: 0;
font-weight: 500;
}
/* =================================================================
STANDARDIZED ALERT SYSTEM
================================================================= */
.alert {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 12px 16px;
border-radius: var(--radius-md);
margin-top: 12px;
font-size: var(--font-sm);
border: 1px solid transparent;
transition: all var(--transition-base);
}
.alert i {
font-size: 1rem;
flex-shrink: 0;
}
.alert-success {
background: var(--color-success-light);
border-color: var(--color-success);
color: var(--color-success-dark);
}
.alert-success i {
color: var(--color-success);
}
.alert-warning {
background: var(--color-warning-light);
border-color: var(--color-warning);
color: var(--color-warning-dark);
}
.alert-warning i {
color: var(--color-warning);
}
.alert-danger {
background: var(--color-danger-light);
border-color: var(--color-danger);
color: var(--color-danger-dark);
}
.alert-danger i {
color: var(--color-danger);
}
.alert-info {
background: var(--color-info-light);
border-color: var(--color-info);
color: var(--color-info-dark);
}
.alert-info i {
color: var(--color-info);
}
/* =================================================================
STANDARDIZED BADGE SYSTEM
================================================================= */
/* Base badge styles */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: var(--font-xs);
font-weight: var(--font-medium);
line-height: 1;
white-space: nowrap;
transition: all var(--transition-fast);
}
/* Badge sizes */
.badge-sm {
padding: 2px 8px;
font-size: 0.7rem;
}
.badge-lg {
padding: 6px 12px;
font-size: var(--font-sm);
}
/* Color variants */
.badge-primary {
background: var(--color-primary-light);
color: var(--color-text-inverse);
}
.badge-success {
background: var(--color-success);
color: white;
}
.badge-warning {
background: var(--color-warning);
color: var(--color-warning-dark);
}
.badge-danger {
background: var(--color-danger);
color: white;
}
.badge-info {
background: var(--color-info);
color: white;
}
.badge-secondary {
background: var(--color-gray-200);
color: var(--color-text-secondary);
}
.badge-light {
background: var(--color-gray-100);
color: var(--color-text-secondary);
border: 1px solid var(--color-border-default);
}
/* Status-specific badges */
.badge-status {
font-size: var(--font-xs);
}
.badge-status.pending {
background: var(--color-warning-light);
color: var(--color-warning-dark);
}
.badge-status.in_progress {
background: var(--color-info-light);
color: var(--color-info-dark);
}
.badge-status.completed {
background: var(--color-success-light);
color: var(--color-success-dark);
}
.badge-status.on_hold {
background: var(--color-gray-200);
color: var(--color-text-secondary);
}
.badge-status.needs_action {
background: var(--color-danger-light);
color: var(--color-danger-dark);
}
.badge-status.action_taken {
background: var(--color-success-light);
color: var(--color-success-dark);
}
/* Priority badges */
.badge-priority {
font-size: 0.7rem;
}
.badge-priority.normal {
background: var(--color-gray-200);
color: var(--color-text-secondary);
}
.badge-priority.high {
background: var(--color-danger-light);
color: var(--color-danger-dark);
}
.badge-priority-grey {
background: var(--color-gray-200);
color: var(--color-text-secondary);
padding: 4px 8px;
border-radius: var(--radius-sm);
font-size: 0.7rem;
font-weight: var(--font-medium);
}
/* Severity badges */
.severity-badge {
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: var(--font-xs);
font-weight: var(--font-medium);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.severity-badge.low {
background: var(--color-success-light);
color: var(--color-success-dark);
}
.severity-badge.medium {
background: var(--color-warning-light);
color: var(--color-warning-dark);
}
.severity-badge.high {
background: var(--color-danger-light);
color: var(--color-danger-dark);
}
/* Type badges */
.badge-type {
font-size: var(--font-xs);
font-weight: 600;
}
/* Category badges */
.category-badge {
padding: 6px 12px;
border-radius: var(--radius-sm);
font-size: var(--font-xs);
font-weight: var(--font-medium);
border: 1px solid transparent;
}
.category-badge.purchasing {
background: #dbeafe;
color: #1e40af;
border-color: #93c5fd;
}
.category-badge.transportation {
background: #fef3c7;
color: #92400e;
border-color: #fcd34d;
}
.category-badge.warehouse {
background: #dcfce7;
color: #166534;
border-color: #86efac;
}
.category-badge.other {
background: var(--color-gray-100);
color: var(--color-text-secondary);
border-color: var(--color-border-default);
}
.category-badge-sm {
padding: 3px 8px;
font-size: 0.7rem;
}
/* Delivery number badges */
.delivery-number-badge {
display: inline-block;
background: var(--color-gray-50);
color: var(--color-text-primary);
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: var(--font-xs);
font-weight: var(--font-medium);
cursor: pointer;
transition: all var(--transition-fast);
border: 1px solid var(--color-border-default);
}
.delivery-number-badge:hover {
background: var(--color-gray-100);
}
.delivery-number-badge.multiple {
background: var(--color-gray-50);
color: var(--color-text-primary);
border: 1px solid var(--color-border-default);
}
.delivery-number-badge.multiple:hover {
background: var(--color-gray-100);
}
.delivery-count-badge {
background: var(--color-primary);
color: var(--color-text-inverse);
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: var(--font-xs);
font-weight: 600;
}
/* Project badge */
.project-badge {
background: var(--color-primary-light);
color: var(--color-text-inverse);
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: var(--font-xs);
font-weight: var(--font-medium);
}
/* Error type badges */
.error-type-badge {
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: var(--font-xs);
font-weight: var(--font-medium);
background: var(--color-gray-100);
color: var(--color-text-secondary);
}
/* Request type badge */
.request-type-badge {
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: var(--font-xs);
font-weight: var(--font-medium);
background: var(--color-info-light);
color: var(--color-info-dark);
}
/* Age badge */
.age-badge {
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: var(--font-xs);
font-weight: var(--font-medium);
}
/* EU Export badges */
.eu-export-badge {
background: var(--color-success-light);
color: var(--color-success-dark);
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: var(--font-xs);
font-weight: var(--font-medium);
}
.eu-export-badge-no {
background: var(--color-gray-100);
color: var(--color-text-secondary);
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: var(--font-xs);
font-weight: var(--font-medium);
}
/* =================================================================
STANDARDIZED CARD SYSTEM
================================================================= */
/* Base card */
.card {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
}
.card:hover {
box-shadow: var(--shadow-md);
}
/* Card header */
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-md);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-border-light);
}
.card-title {
font-size: var(--font-lg);
font-weight: var(--font-semibold);
color: var(--color-text-primary);
margin: 0;
}
/* Card body */
.card-body {
padding: 0;
}
/* Card footer */
.card-footer {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border-light);
}
/* Interactive card (clickable) */
.card-interactive {
cursor: pointer;
transition: all var(--transition-base);
}
.card-interactive:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: var(--color-border-hover);
}
/* Order card specific */
.order-card {
background: var(--color-bg-primary);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-default);
padding: var(--space-lg);
cursor: pointer;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
width: 100%;
max-width: 100%;
}
.order-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: var(--color-border-hover);
}
.order-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-md);
}
.order-card-id {
font-size: var(--font-lg);
font-weight: 600;
color: var(--color-text-primary);
}
.order-card-badges {
display: flex;
gap: var(--space-sm);
align-items: center;
}
.order-card-title {
font-size: var(--font-lg);
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
line-height: 1.4;
}
.order-card-description {
font-size: var(--font-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-md);
line-height: 1.5;
font-style: italic;
word-break: break-word;
overflow-wrap: break-word;
}
.order-card-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px var(--space-lg);
margin-bottom: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border-light);
}
/* Report card */
.report-card-item {
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
padding: var(--space-md);
margin-bottom: var(--space-md);
transition: all var(--transition-base);
cursor: pointer;
background: var(--color-bg-primary);
}
.report-card-item:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border-hover);
}
/* Cards container */
.cards-container {
background: transparent;
border-radius: var(--radius-xl);
position: relative;
width: 100%;
}
.orders-grid {
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: var(--space-sm);
max-width: 100%;
}
/* Card loading state */
.cards-loading {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-xl);
color: var(--color-text-tertiary);
}
/* No data state */
.no-data {
text-align: center;
color: var(--color-text-tertiary);
padding: var(--space-xl);
font-style: italic;
}
/* =================================================================
DASHBOARD PAGE STYLES
================================================================= */
/* My Items Widget */
.my-items-section {
margin-bottom: var(--space-xl);
}
.my-items-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.my-items-toggle {
background: none;
border: none;
color: var(--color-info);
cursor: pointer;
font-size: 1.2rem;
padding: var(--space-sm);
}
.my-items-container {
background: var(--color-bg-primary);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-sm);
}
.my-items-loading {
text-align: center;
padding: var(--space-xl);
color: var(--color-text-tertiary);
}
/* Request Lists */
.requests-list {
max-height: 600px;
overflow-y: auto;
}
.request-item {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-lg);
padding: var(--space-md);
margin-bottom: 12px;
cursor: pointer;
transition: all var(--transition-base);
box-shadow: var(--shadow-sm);
}
.request-item:hover {
background: var(--color-gray-50);
border-color: var(--color-info);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.request-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-sm);
}
.request-title {
font-weight: 600;
color: var(--color-text-primary);
}
.request-id {
color: var(--color-text-secondary);
font-size: var(--font-sm);
}
.request-meta {
display: flex;
gap: var(--space-md);
font-size: var(--font-sm);
color: var(--color-text-secondary);
}
/* Priority badges for requests */
.priority-badge {
padding: 4px 8px;
border-radius: var(--radius-sm);
font-size: var(--font-xs);
font-weight: var(--font-medium);
}
.priority-high {
background: var(--color-danger-light);
color: var(--color-danger-dark);
}
.priority-normal {
background: var(--color-gray-100);
color: var(--color-text-secondary);
}
/* Order Filter Tabs */
.order-filter-tabs {
margin-bottom: var(--space-lg);
}
.tab-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
padding: var(--space-sm);
background: var(--color-gray-50);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-default);
}
.tab-btn {
padding: var(--space-sm) var(--space-md);
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-secondary);
font-weight: var(--font-medium);
cursor: pointer;
transition: all var(--transition-fast);
font-size: var(--font-sm);
white-space: nowrap;
}
.tab-btn:hover {
background: var(--color-border-default);
color: var(--color-text-primary);
}
.tab-btn.active {
background: var(--color-primary);
color: var(--color-text-inverse);
box-shadow: var(--shadow-sm);
}
.tab-btn.active:hover {
background: var(--color-primary-dark);
}
/* Chart Shared Legend */
.shared-chart-legend {
background: var(--color-bg-primary);
border-radius: var(--radius-xl);
padding: var(--space-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border-default);
margin-bottom: var(--space-xl);
text-align: center;
}
.legend-header h4 {
font-size: var(--font-lg);
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: var(--space-md);
}
.chart-legend-items {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-lg);
align-items: center;
}
.chart-legend-items .legend-item {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.9rem;
font-weight: var(--font-medium);
color: var(--color-text-primary);
}
.chart-legend-items .legend-color {
width: 16px;
height: 16px;
border-radius: var(--radius-sm);
display: inline-block;
}
/* Status colors for chart legend */
.chart-legend-items .legend-color.unassigned-pending { background-color: #fbbf24; }
.chart-legend-items .legend-color.assigned { background-color: #f97316; }
.chart-legend-items .legend-color.picked { background-color: #3b82f6; }
.chart-legend-items .legend-color.packed { background-color: #8b5cf6; }
.chart-legend-items .legend-color.shipping-booked { background-color: #06b6d4; }
.chart-legend-items .legend-color.shipped { background-color: #10b981; }
/* Progress-based colors */
.chart-legend-items .legend-color.progress-0 { background-color: #ef4444; }
.chart-legend-items .legend-color.progress-20 { background-color: #f97316; }
.chart-legend-items .legend-color.progress-40 { background-color: #eab308; }
.chart-legend-items .legend-color.progress-60 { background-color: #3b82f6; }
.chart-legend-items .legend-color.progress-80 { background-color: #8b5cf6; }
.chart-legend-items .legend-color.progress-100 { background-color: #10b981; }
/* Chart Container */
.chart-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.chart-container #statusChart {
max-width: 400px;
max-height: 400px;
}
/* Pressing Orders Table */
.project-table {
width: 100%;
border-collapse: collapse;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.project-table th,
.project-table td {
padding: var(--space-md);
text-align: left;
border-bottom: 1px solid var(--color-border-default);
}
.project-table th {
background: var(--color-gray-50);
font-weight: 600;
color: var(--color-text-primary);
font-size: var(--font-sm);
}
.project-table tbody tr:hover {
background: var(--color-gray-50);
}
.order-data-cell {
padding: 16px var(--space-md);
vertical-align: middle;
max-width: 350px;
width: 350px;
}
.order-title {
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 4px;
font-size: var(--font-sm);
}
.order-project-network {
font-size: var(--font-xs);
color: var(--color-text-secondary);
font-weight: var(--font-medium);
}
.ship-by-date-cell {
padding: 12px var(--space-sm);
vertical-align: middle;
font-size: 0.75rem;
color: var(--color-text-primary);
font-weight: var(--font-medium);
width: 80px;
white-space: nowrap;
}
.ship-by-date-cell .ship-by-date {
font-size: 0.75rem;
padding: 2px 4px;
}
.ship-by-date-overdue {
color: var(--color-danger) !important;
font-weight: 600;
}
/* Order Progress */
.order-progress-cell {
padding: 28px var(--space-md) 12px var(--space-md);
vertical-align: middle;
width: 150px;
position: relative;
}
.order-progress-container {
display: flex;
align-items: center;
gap: var(--space-sm);
position: relative;
}
.order-progress-bar {
flex: 1;
height: 10px;
background: var(--color-border-default);
border-radius: var(--radius-sm);
overflow: hidden;
}
.order-progress-fill {
height: 100%;
transition: width 0.3s ease;
border-radius: var(--radius-sm);
}
.order-progress-text {
font-size: var(--font-xs);
font-weight: var(--font-medium);
color: var(--color-text-primary);
min-width: 32px;
text-align: right;
}
.order-status-label {
position: absolute;
top: -20px;
font-size: 0.625rem;
font-weight: var(--font-medium);
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
padding: 1px 5px;
white-space: nowrap;
z-index: 10;
transform: translateX(-50%);
box-shadow: var(--shadow-sm);
color: var(--color-text-primary);
}
/* Info Tooltip */
.info-tooltip {
position: relative;
display: inline-block;
margin-left: 4px;
color: var(--color-text-tertiary);
cursor: help;
}
.info-tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: var(--space-sm) 12px;
border-radius: var(--radius-sm);
font-size: var(--font-xs);
font-weight: normal;
white-space: nowrap;
z-index: 1000;
box-shadow: var(--shadow-lg);
}
.info-tooltip:hover::before {
content: '';
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: rgba(0, 0, 0, 0.9);
z-index: 1000;
}
/* Order Cells */
.order-errors-cell {
padding: var(--space-sm) 12px;
vertical-align: middle;
text-align: center;
font-size: var(--font-sm);
font-weight: 600;
color: var(--color-danger);
width: 70px;
}
.order-late-cell {
padding: var(--space-sm) 12px;
vertical-align: middle;
text-align: center;
width: 50px;
}
.project-table-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl) * 2;
color: var(--color-text-tertiary);
text-align: center;
}
.project-table-empty i {
font-size: 3rem;
margin-bottom: var(--space-md);
color: var(--color-border-default);
}
.project-table-empty div {
font-size: var(--font-lg);
font-weight: var(--font-medium);
}
/* Calendar Styles - 14 Day Timeline */
.calendar-container {
width: 100%;
}
.calendar-widget {
background: var(--color-bg-primary);
padding: var(--space-md);
border-radius: var(--radius-md);
overflow: hidden;
}
/* 14-day calendar - 2 rows of 7 days each */
.calendar-week-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
margin-bottom: 1rem;
}
.calendar-week-row:last-child {
margin-bottom: 0;
}
.calendar-day-cell {
display: flex;
flex-direction: column;
}
.calendar-day-header-cell {
text-align: center;
font-weight: 600;
color: var(--color-gray-600);
padding: 0.375rem 0.25rem;
font-size: 0.6875rem;
line-height: 1.2;
letter-spacing: var(--font-tracking-caps);
text-transform: uppercase;
}
.calendar-day-header-cell.today {
color: var(--color-primary);
font-weight: 700;
}
.calendar-day-header-cell .day-number {
display: block;
font-size: 1rem;
font-weight: 700;
color: var(--color-gray-800);
margin-top: 2px;
text-transform: none;
letter-spacing: normal;
}
.calendar-day-header-cell.today .day-number {
color: var(--color-primary);
}
.calendar-day-content {
min-height: 70px;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-sm);
padding: 0.5rem;
background: var(--color-surface-1);
display: flex;
flex-direction: column;
gap: 4px;
}
.calendar-day-content.today {
background: rgba(30, 42, 86, 0.04);
border-color: var(--color-primary);
border-width: 2px;
}
.no-visit-placeholder {
min-height: 24px;
}
/* Legacy 14-day grid styles - kept for backwards compatibility */
.calendar-header-14day {
display: none;
}
.calendar-grid-14day {
display: none;
}
.calendar-day-14 {
min-height: 60px;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-sm);
padding: 0.375rem;
position: relative;
background: var(--color-surface-1);
display: flex;
flex-direction: column;
gap: 2px;
}
.calendar-day-14.today {
background: rgba(30, 42, 86, 0.04);
border-color: var(--color-primary);
border-width: 2px;
}
/* Legacy 7-column grid (kept for compatibility) */
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-top: var(--space-md);
}
.calendar-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: var(--space-sm);
}
.calendar-day-header {
text-align: center;
font-weight: 600;
color: var(--color-text-secondary);
padding: var(--space-sm);
font-size: var(--font-sm);
}
.calendar-day {
min-height: 80px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
padding: var(--space-sm);
position: relative;
background: var(--color-gray-50);
}
.calendar-day.today {
background: var(--color-info-light);
border-color: var(--color-info);
}
.calendar-day-number {
font-size: var(--font-sm);
font-weight: var(--font-medium);
color: var(--color-text-primary);
margin-bottom: 4px;
}
.calendar-visit {
font-size: var(--font-xs);
padding: 4px var(--space-sm);
border-radius: var(--radius-sm);
margin-bottom: 4px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all var(--transition-fast);
will-change: transform, box-shadow;
}
.calendar-visit.pending {
background: var(--color-warning-light);
color: var(--color-warning-dark);
border: 1px solid var(--color-warning);
}
.calendar-visit.approved {
background: var(--color-success-light);
color: var(--color-success-dark);
border: 1px solid var(--color-success);
}
.calendar-visit:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.calendar-visit:active {
transform: translateY(0);
}
/* Visit Tooltip */
.visit-tooltip {
position: absolute;
z-index: 1000;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
padding: var(--space-md);
box-shadow: var(--shadow-xl);
min-width: 300px;
display: none;
}
.visit-tooltip.show {
display: block;
}
.visit-tooltip h4 {
margin: 0 0 var(--space-sm) 0;
font-size: var(--font-base);
color: var(--color-text-primary);
}
.visit-tooltip p {
margin: 4px 0;
font-size: var(--font-sm);
color: var(--color-text-secondary);
}
/* Active Errors Section */
.active-errors-section {
background: var(--color-bg-primary);
border-radius: var(--radius-xl);
padding: var(--space-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border-default);
margin-bottom: var(--space-xl);
}
.errors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--space-md);
margin-top: var(--space-md);
}
.error-card {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition-base);
display: flex;
flex-direction: column;
}
.error-content {
padding: var(--space-md);
flex: 1;
}
.error-footer {
background: var(--color-gray-50);
padding: 12px var(--space-md);
display: flex;
justify-content: space-between;
font-size: var(--font-sm);
color: var(--color-text-tertiary);
border-top: 1px solid var(--color-border-default);
margin-bottom: 12px;
}
.error-order-title {
font-weight: 600;
color: var(--color-text-primary);
font-size: var(--font-base);
margin-bottom: 4px;
}
.error-reporter {
font-size: var(--font-sm);
color: var(--color-text-tertiary);
margin-bottom: 4px;
}
.error-project {
font-size: var(--font-sm);
color: var(--color-text-secondary);
font-weight: var(--font-medium);
margin-bottom: var(--space-sm);
}
.error-description {
font-size: var(--font-sm);
color: var(--color-text-primary);
margin-bottom: 12px;
font-style: italic;
line-height: 1.4;
}
.error-type-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
/* Error type colors */
.error-type-packaging { background: var(--color-danger-light); color: var(--color-danger); }
.error-type-missing_items { background: var(--color-warning-light); color: var(--color-warning-dark); }
.error-type-damaged_goods { background: #fce7f3; color: #ec4899; }
.error-type-wrong_items { background: #e0e7ff; color: #4f46e5; }
.error-type-labeling { background: var(--color-info-light); color: var(--color-info); }
.error-type-other { background: var(--color-gray-100); color: var(--color-text-tertiary); }
.error-info {
flex: 1;
margin-left: 12px;
}
.error-meta {
display: flex;
gap: var(--space-md);
font-size: var(--font-xs);
color: var(--color-text-tertiary);
align-items: center;
flex-wrap: wrap;
}
.error-severity {
padding: 2px var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-xs);
font-weight: var(--font-medium);
align-self: flex-start;
margin-top: 1px;
}
/* Severity colors */
.severity-low { background: var(--color-success-light); color: var(--color-success-dark); }
.severity-medium { background: var(--color-warning-light); color: var(--color-warning-dark); }
.severity-high { background: var(--color-danger-light); color: var(--color-danger-dark); }
.error-days {
font-weight: var(--font-medium);
}
.no-errors {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-xl) * 2;
color: var(--color-text-tertiary);
grid-column: 1 / -1;
}
.no-errors i {
font-size: 3rem;
color: var(--color-primary);
margin-bottom: var(--space-md);
}
/* Mobile Shipment Cards */
.shipment-cards-container {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 600px;
overflow-y: auto;
padding: 4px;
}
.shipment-card {
background: var(--color-bg-primary);
border-radius: var(--radius-md);
padding: var(--space-md);
cursor: pointer;
transition: all var(--transition-base);
box-shadow: var(--shadow-sm);
}
.shipment-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.shipment-card-header {
margin-bottom: 12px;
}
.shipment-card-title {
font-weight: 600;
font-size: 0.95rem;
color: var(--color-text-primary);
margin-bottom: 4px;
}
.shipment-card-project {
font-size: var(--font-xs);
color: var(--color-text-tertiary);
}
.shipment-card-progress {
margin-bottom: 12px;
position: relative;
}
.shipment-progress-bar {
width: 100%;
height: 12px;
background: var(--color-border-default);
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: 4px;
}
.shipment-progress-fill {
height: 100%;
transition: width 0.3s ease;
border-radius: var(--radius-sm);
}
.shipment-progress-label {
font-size: 0.7rem;
color: var(--color-text-tertiary);
margin-bottom: 2px;
}
.shipment-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-sm);
border-top: 1px solid var(--color-border-light);
}
.shipment-ship-date {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--color-text-primary);
font-weight: var(--font-medium);
}
.shipment-ship-date i {
font-size: var(--font-xs);
color: var(--color-text-tertiary);
}
.shipment-ship-date .ship-by-date-overdue {
color: var(--color-danger) !important;
font-weight: 600;
}
.shipment-card-flags {
display: flex;
gap: 6px;
}
.shipment-card-flags .order-flags {
gap: 6px;
}
.shipment-card-flags .order-flags i {
font-size: var(--font-sm);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.project-table-container {
max-height: 600px;
overflow: visible;
}
.shipment-cards-container {
max-height: 500px;
}
}
/* Search Box for Admin Pages */
.search-box {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.search-box i {
position: absolute;
left: 0.75rem;
color: #6b7280;
pointer-events: none;
font-size: 0.875rem;
}
.search-box input {
padding: 0.5rem 0.75rem 0.5rem 2.25rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 0.875rem;
color: #374151;
background: white;
min-width: 250px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.search-box input:focus {
outline: none;
border-color: #1E2A56;
box-shadow: 0 0 0 3px rgba(30, 42, 86, 0.1);
}
.search-box input::placeholder {
color: #9ca3af;
}
/* My Items Dashboard Widget - Mobile Responsive */
@media (max-width: 768px) {
#my-items-container {
padding: 1rem !important;
overflow-x: hidden;
}
/* Compact view pills - stack vertically on mobile */
#my-items-compact > div {
flex-direction: column !important;
align-items: stretch !important;
}
#my-items-compact a {
justify-content: space-between !important;
width: 100% !important;
}
/* Expanded view items */
#my-items-expanded a {
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.5rem !important;
}
#my-items-expanded a > div:first-child {
width: 100% !important;
}
#my-items-expanded a > div:first-child > div:first-child {
white-space: normal !important;
word-break: break-word !important;
}
}
@media (max-width: 480px) {
.chart-header h3 {
font-size: 1.1rem !important;
}
.chart-header p {
font-size: 0.8rem !important;
}
}
/* ==================== Notification System Styles ==================== */
.nav-mobile-controls {
display: none;
align-items: center;
gap: 0.5rem;
}
.nav-notifications {
position: relative;
display: flex;
align-items: center;
}
.nav-notifications-mobile {
display: none;
}
@media (max-width: 1024px) {
.nav-mobile-controls {
display: flex;
}
.nav-notifications-mobile {
display: flex;
}
/* Hide desktop notification bell in mobile */
.nav-menu .nav-notifications:not(.nav-notifications-mobile) {
display: none !important;
}
}
.notification-btn {
background: none;
border: none;
color: white;
font-size: 1.2rem;
cursor: pointer;
padding: 0.5rem;
position: relative;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
}
.notification-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.notification-badge {
position: absolute;
top: 0.4rem;
right: 0.4rem;
background: #ef4444;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
box-shadow: 0 0 0 2px #2A3B6B;
}
.notification-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
background: white;
border-radius: 0.5rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
width: 380px;
max-height: 500px;
display: none;
flex-direction: column;
z-index: 1000001;
overflow: hidden;
}
.notification-dropdown.show {
display: flex;
}
.notification-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid #e5e7eb;
background: #f9fafb;
}
.notification-header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: #1f2937;
}
.notification-header-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.mark-all-read-btn,
.clear-all-btn {
background: none;
border: none;
color: #6b7280;
cursor: pointer;
padding: 0.25rem 0.5rem;
font-size: 0.9rem;
border-radius: 0.25rem;
transition: all 0.2s ease;
}
.mark-all-read-btn:hover {
background: #e5e7eb;
color: #374151;
}
.clear-all-btn:hover {
background: #fee2e2;
color: #dc2626;
}
.notification-list {
overflow-y: auto;
max-height: 420px;
flex: 1;
}
.notification-item {
display: grid;
grid-template-columns: 0.5rem 2rem 1fr auto;
gap: 0.625rem;
align-items: center;
padding: 0.5rem 1rem;
border-bottom: 1px solid #f3f4f6;
cursor: pointer;
transition: background-color 0.2s ease;
position: relative;
}
.notification-item:hover {
background: #f9fafb;
}
.notification-item.unread {
background: #eff6ff;
}
.notification-item.unread:hover {
background: #dbeafe;
}
.notification-icon {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #e8ecf4;
display: flex;
align-items: center;
justify-content: center;
color: #2A3B6B;
font-size: 0.875rem;
flex-shrink: 0;
}
.notification-content {
min-width: 0;
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
line-height: 1.3;
overflow: hidden;
}
.notification-title {
color: #374151;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
min-width: 0;
}
.notification-order {
font-weight: 600;
color: #2A3B6B;
white-space: nowrap;
flex-shrink: 0;
}
.notification-time {
color: #9ca3af;
font-size: 0.6875rem;
text-align: right;
white-space: nowrap;
flex-shrink: 0;
padding-left: 0.5rem;
}
.notification-unread-dot {
width: 0.5rem;
height: 0.5rem;
background: #3b82f6;
border-radius: 50%;
grid-column: 1;
justify-self: center;
}
/* Placeholder for read notifications to maintain grid alignment */
.notification-item:not(.unread) .notification-unread-dot {
visibility: hidden;
}
.notification-loading,
.notification-empty,
.notification-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
text-align: center;
color: #6b7280;
}
.notification-loading i,
.notification-empty i,
.notification-error i {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.notification-empty p,
.notification-error p {
margin: 0.5rem 0 0 0;
font-size: 0.875rem;
}
/* Mobile responsiveness */
@media (max-width: 1024px) {
/* Make mobile notification bell dropdown position from viewport */
.nav-notifications-mobile .notification-dropdown {
position: fixed;
top: 4.5rem;
right: 1rem;
width: calc(100vw - 2rem);
max-width: 380px;
}
}
@media (max-width: 768px) {
.notification-dropdown {
position: fixed !important;
top: 4.5rem !important;
left: 1rem !important;
right: 1rem !important;
width: auto !important;
max-width: none !important;
}
}
@media (max-width: 480px) {
.notification-dropdown {
left: 0.5rem !important;
right: 0.5rem !important;
}
}
/* ==========================================================================
Mobile Responsive Fixes - Dashboard, Orders, Planning
========================================================================== */
/* Dashboard - Chart Container & Calendar Mobile */
@media (max-width: 768px) {
/* Allow chart containers to have flexible height on mobile */
.chart-container {
height: auto;
max-height: none;
overflow: hidden;
padding: 1rem;
}
/* Calendar container clips for internal scroll */
.chart-container.calendar-container {
overflow: hidden;
}
/* Calendar widget scrolls horizontally - use negative margin to extend to edges */
.calendar-widget {
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
margin: 0 -1rem;
padding: 0 1rem 0.5rem 1rem;
}
.calendar-week-row {
min-width: 450px;
}
/* Ensure chart canvas respects container width */
.chart-container canvas {
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 480px) {
.charts-section {
gap: 0.75rem;
}
.chart-container {
padding: 0.75rem;
}
.chart-header {
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
}
.chart-header h3 {
font-size: 0.8125rem;
}
.calendar-widget {
margin: 0 -0.75rem;
padding: 0 0.75rem 0.5rem 0.75rem;
}
.calendar-week-row {
min-width: 380px;
gap: 3px;
}
.calendar-day-header-cell {
font-size: 0.6rem;
padding: 0.2rem 0.1rem;
}
.calendar-day-content {
min-height: 45px;
padding: 0.2rem;
}
.calendar-visit {
font-size: 0.6rem;
padding: 0.1rem 0.2rem;
}
/* Chart canvas on small screens */
.chart-container canvas {
max-height: 200px !important;
height: 200px !important;
}
}
/* Very narrow screens (350px and below) */
@media (max-width: 400px) {
.chart-container {
padding: 0.5rem;
}
.calendar-widget {
margin: 0 -0.5rem;
padding: 0 0.5rem 0.5rem 0.5rem;
}
.calendar-week-row {
min-width: 340px;
gap: 2px;
}
.calendar-day-header-cell {
font-size: 0.55rem;
}
.calendar-day-content {
min-height: 40px;
}
.calendar-visit {
font-size: 0.55rem;
}
.chart-container canvas {
max-height: 180px !important;
height: 180px !important;
}
}
/* Dashboard - Active Errors Grid Mobile */
@media (max-width: 480px) {
.errors-grid {
grid-template-columns: 1fr;
}
.error-card {
max-width: 100%;
}
.error-content {
padding: 0.75rem;
}
.error-footer {
padding: 0.5rem 0.75rem;
flex-wrap: wrap;
gap: 0.5rem;
}
}
/* Order List - Request Type Selector Mobile */
@media (max-width: 768px) {
.request-type-filter-container {
flex-direction: column;
align-items: stretch;
}
.request-type-buttons {
flex-wrap: wrap;
justify-content: center;
}
.request-type-btn {
flex: 1;
min-width: 80px;
text-align: center;
padding: 0.5rem 0.5rem;
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.request-type-buttons {
width: 100%;
}
.request-type-btn {
flex: 1 1 auto;
}
}