/* ====================================
   CSS VARIABLES & ROOT ELEMENTS
   ==================================== */
/* 
 * CSS variables defined in :root allow for consistent theming
 * and easy modification of colors, spacing, and other design elements 
 */
 :root {
    /* Font - Using Inter Tight as the primary font with fallbacks */
    --font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Colors - Light Mode Default */
    /* Primary palette */
    --color-primary: #5354cb;
    --color-primary-light: #6c6dd7;
    --color-primary-dark: #4243a7;
    --color-primary-hover: #6466d8;
    --color-primary-active: #4849b9;
    --color-on-primary: #ffffff;
    
    /* Surface and background colors */
    --color-background: #f5f5ff; /* Subtle light purple background */
    --color-surface: #ffffff;
    --color-surface-variant: #f5f5ff;
    --color-surface-hover: #f8f8ff;
    
    /* Text colors */
    --color-on-surface: #212529;
    --color-on-surface-medium: #495057;
    --color-on-surface-light: #868e96;
    
    /* Border and divider colors */
    --color-border: #e9ecef;
    --color-border-focus: #c0c1e9;
    --color-divider: #dee2e6;
    
    /* Semantic colors - Status */
    --color-success: #37b24d;
    --color-success-hover: #40c057;
    --color-success-bg: #ebfbee;
    
    --color-warning: #f59f00;
    --color-warning-hover: #fab005;
    --color-warning-bg: #fff9db;
    
    --color-danger: #f03e3e;
    --color-danger-hover: #fa5252;
    --color-danger-bg: #fff5f5;
    
    --color-info: #228be6;
    --color-info-hover: #339af0;
    --color-info-bg: #e7f5ff;
    
    --color-idle: #868e96;
    --color-idle-hover: #adb5bd;
    --color-idle-bg: #f8f9fa;
    
    /* Form validation colors */
    --color-valid: #40c057;
    --color-valid-bg: #ebfbee;
    --color-invalid: #f03e3e;
    --color-invalid-bg: #fff5f5;
    
    /* Spacing */
    --space-xxs: 0.25rem;  /* 4px */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 0.75rem;   /* 12px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-xxl: 3rem;     /* 48px */
    
    /* Sizing */
    --size-max-width: 1200px;
    --size-sidebar-width: 250px;
    --size-header-height: 64px;
    --size-input-height: 40px;
    --size-button-height: 40px;
    
    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    /* Shadow */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.04);
    
    /* Animation */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    
    /* Overlay blur */
    --overlay-blur: 8px;
}

/* Dark mode styles will be applied when .dark-mode class is on html element */
html.dark-mode {
    /* Surface and background colors */
    --color-background: #121212;
    --color-surface: #1e1e1e;
    --color-surface-variant: #2d2d2d;
    --color-surface-hover: #333333;
    
    /* Text colors */
    --color-on-surface: #e9ecef;
    --color-on-surface-medium: #adb5bd;
    --color-on-surface-light: #868e96;
    
    /* Border and divider colors */
    --color-border: #444444;
    --color-border-focus: #7475c9;
    --color-divider: #333333;
    
    /* Semantic colors - Status (dark mode adjustments) */
    --color-success-bg: rgba(55, 178, 77, 0.15);
    --color-warning-bg: rgba(245, 159, 0, 0.15);
    --color-danger-bg: rgba(240, 62, 62, 0.15);
    --color-info-bg: rgba(34, 139, 230, 0.15);
    --color-idle-bg: rgba(134, 142, 150, 0.15);
    
    /* Form validation colors */
    --color-valid-bg: rgba(64, 192, 87, 0.15);
    --color-invalid-bg: rgba(240, 62, 62, 0.15);
    
    /* Adjust shadows for dark mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* ====================================
   GLOBAL RESET & BASE STYLES
   ==================================== */
/* Reset box-sizing, margins, and padding for all elements */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Base styling for the body */
body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-on-surface);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased; /* Improved text rendering on Webkit */
    -moz-osx-font-smoothing: grayscale; /* Improved text rendering on Firefox */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Base styles for headings */
h1, h2, h3, h4, h5 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--space-md);
    transition: color var(--transition-normal);
}

/* Base styles for paragraphs */
p {
    margin-bottom: var(--space-md);
    transition: color var(--transition-normal);
}

/* Base styles for links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-light);
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* ====================================
   UTILITY CLASSES
   ==================================== */
/* 
 * Utility classes provide reusable styling options 
 * that can be applied directly to HTML elements
 */

/* Display utilities */
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

/* Flex utilities for layout */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.align-items-stretch { align-items: stretch; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-md { gap: var(--space-md); }

/* Spacing utilities - Margin */
.m-0 { margin: 0; }
.m-xxs { margin: var(--space-xxs); }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-xxl { margin: var(--space-xxl); }

.mt-0 { margin-top: 0; }
.mt-xxs { margin-top: var(--space-xxs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-xxl { margin-top: var(--space-xxl); }

.mb-0 { margin-bottom: 0; }
.mb-xxs { margin-bottom: var(--space-xxs); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-xxl { margin-bottom: var(--space-xxl); }

.ml-0 { margin-left: 0; }
.ml-xxs { margin-left: var(--space-xxs); }
.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }
.ml-xl { margin-left: var(--space-xl); }
.ml-xxl { margin-left: var(--space-xxl); }

.mr-0 { margin-right: 0; }
.mr-xxs { margin-right: var(--space-xxs); }
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-xl { margin-right: var(--space-xl); }
.mr-xxl { margin-right: var(--space-xxl); }

/* Spacing utilities - Padding */
.p-0 { padding: 0; }
.p-xxs { padding: var(--space-xxs); }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-xxl { padding: var(--space-xxl); }

.pt-0 { padding-top: 0; }
.pt-xxs { padding-top: var(--space-xxs); }
.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-xxl { padding-top: var(--space-xxl); }

.pb-0 { padding-bottom: 0; }
.pb-xxs { padding-bottom: var(--space-xxs); }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-xxl { padding-bottom: var(--space-xxl); }

.pl-0 { padding-left: 0; }
.pl-xxs { padding-left: var(--space-xxs); }
.pl-xs { padding-left: var(--space-xs); }
.pl-sm { padding-left: var(--space-sm); }
.pl-md { padding-left: var(--space-md); }
.pl-lg { padding-left: var(--space-lg); }
.pl-xl { padding-left: var(--space-xl); }
.pl-xxl { padding-left: var(--space-xxl); }

.pr-0 { padding-right: 0; }
.pr-xxs { padding-right: var(--space-xxs); }
.pr-xs { padding-right: var(--space-xs); }
.pr-sm { padding-right: var(--space-sm); }
.pr-md { padding-right: var(--space-md); }
.pr-lg { padding-right: var(--space-lg); }
.pr-xl { padding-right: var(--space-xl); }
.pr-xxl { padding-right: var(--space-xxl); }

/* Text alignment utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Font weight utilities */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Text size utilities */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-md { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

/* Color utilities */
.text-primary { color: var(--color-primary); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-medium { color: var(--color-on-surface-medium); }
.text-on-surface-light { color: var(--color-on-surface-light); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-info { color: var(--color-info); }

.bg-surface { background-color: var(--color-surface); }
.bg-surface-variant { background-color: var(--color-surface-variant); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-danger { background-color: var(--color-danger); }
.bg-info { background-color: var(--color-info); }

/* Position utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }

/* Width/Height utilities */
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.min-h-100 { min-height: 100%; }

/* Border radius utilities */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ====================================
   COMPONENT STYLES
   ==================================== */
/* 
 * Component styles define reusable UI elements that
 * can be composed to create the application interface
 */

/* Page Container - Wraps the entire page content */
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 90px; /* Increased space for the fixed footer */
}

/* Content Area - Main content container */
.content-area {
    flex: 1;
    padding: 80px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 160px); /* Account for preview nav and footer */
}

/* Larger padding on desktop */
@media (min-width: 768px) {
    .content-area {
        padding: 80px;
    }
}

/* Adjust padding for smaller screens */
@media (max-width: 767px) {
    .content-area {
        padding: 40px; /* Reduce padding on smaller screens */
    }
}

/* Further reduce padding for very small screens */
@media (max-width: 480px) {
    .content-area {
        padding: 20px; /* Minimal padding for mobile */
    }
}

/* Preview Navigation - Controls for switching between UI views */
.preview-nav {
    background-color: var(--color-surface-variant);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.preview-nav-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--color-on-surface);
    transition: color var(--transition-normal);
}

.preview-nav-btn {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    border: 1px solid var(--color-border);
    padding: var(--space-xs) var(--space-sm);
    margin-right: var(--space-xs);
    margin-bottom: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
    font-size: 0.875rem;
}

.preview-nav-btn:hover {
    background-color: var(--color-primary-light);
    color: var(--color-on-primary);
    border-color: var(--color-primary-light);
}

.preview-nav-btn.active {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

/* Buttons - Various button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--size-button-height);
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    text-align: center;
    white-space: nowrap;
    margin-bottom: var(--space-sm); /* Ensure consistent vertical spacing */
}

/* Remove bottom margin for header buttons */
.page-header .btn {
    margin-bottom: 0;
}

/* Button container for groups of buttons */
.btn-container {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

/* Spacing for SVG icons in buttons */
.btn svg {
    margin-right: var(--space-xs);
}

/* Icon-only button */
.btn-icon {
    padding: 0;
    width: var(--size-button-height);
    border-radius: var(--radius-full);
}

/* Button with icon and text */
.btn-icon-text {
    padding: 0 var(--space-md) 0 var(--space-sm);
}

.btn-icon-text svg {
    margin-right: var(--space-xs);
}

/* Primary action button */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-light);
}

/* Outline button for secondary actions */
.btn-outline {
    background-color: transparent;
    color: var(--color-on-surface);
    border: 1px solid var(--color-border);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn-outline:hover {
    background-color: var(--color-surface-variant);
}

/* Subtle button for tertiary actions */
.btn-subtle {
    background-color: var(--color-surface-variant);
    color: var(--color-on-surface);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-subtle:hover {
    background-color: var(--color-divider);
}

/* Danger button for destructive actions */
.btn-danger {
    background-color: var(--color-danger);
    color: white;
}

.btn-danger:hover {
    background-color: var(--color-danger-hover);
}

/* Success button for confirming actions */
.btn-success {
    background-color: var(--color-success);
    color: white;
}

.btn-success:hover {
    background-color: var(--color-success-hover);
}

/* Form Elements - Input styling */
.form-group {
    margin-bottom: var(--space-md);
    position: relative;
}

.form-label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-xs);
    color: var(--color-on-surface);
    transition: color var(--transition-normal);
}

.form-control {
    width: 100%;
    height: var(--size-input-height);
    padding: 0 var(--space-sm);
    font-size: 0.875rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), background-color var(--transition-normal), 
                color var(--transition-normal), box-shadow var(--transition-fast);
    color: var(--color-on-surface);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(83, 84, 203, 0.2);
}

/* Form validation states */
.form-control.is-valid {
    border-color: var(--color-valid);
    background-color: var(--color-valid-bg);
}

.form-control.is-valid:focus {
    box-shadow: 0 0 0 2px rgba(64, 192, 87, 0.2);
}

.form-control.is-invalid {
    border-color: var(--color-invalid);
    background-color: var(--color-invalid-bg);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 2px rgba(240, 62, 62, 0.2);
}

/* Validation feedback messages */
.validation-feedback {
    font-size: 0.75rem;
    margin-top: var(--space-xxs);
    display: none;
    transition: opacity var(--transition-fast);
}

.valid-feedback {
    color: var(--color-valid);
    display: none;
}

.invalid-feedback {
    color: var(--color-invalid);
    display: none;
}

.form-control.is-valid ~ .valid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Textarea specific styling */
textarea.form-control {
    height: auto;
    min-height: 100px;
    padding: var(--space-sm);
    resize: vertical;
}

/* Select dropdown styling */
.form-select {
    width: 100%;
    height: var(--size-input-height);
    padding: 0 var(--space-sm);
    font-size: 0.875rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    appearance: none; /* Remove default browser styling */
    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    background-size: 16px;
    transition: border-color var(--transition-fast), background-color var(--transition-normal), color var(--transition-normal);
    color: var(--color-on-surface);
}

/* Fix: Maintain contrast for primary button hover */
.btn-primary:hover {
    background-color: var(--color-primary-light);
    color: var(--color-on-primary);
}

/* Form help text */
.form-text {
    font-size: 0.75rem;
    color: var(--color-on-surface-light);
    margin-top: var(--space-xxs);
    transition: color var(--transition-normal);
}

/* Two-column form grid for desktop */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

/* Full width form elements that span both columns */
.form-full-width {
    grid-column: 1 / -1;
}

/* Radio button group styling */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.radio-option {
    display: flex;
    align-items: center;
}

.radio-option input[type="radio"] {
    margin-right: var(--space-xs);
}

/* Card Component - Container for content sections */
.card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 0.5px solid var(--color-border);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), 
                background-color var(--transition-normal), border-color var(--transition-normal);
}

/* Subtle hover effect for cards */
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color var(--transition-normal);
}

.card-body {
    padding: var(--space-md);
}

.card-footer {
    padding: var(--space-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xs);
    transition: border-color var(--transition-normal);
}

/* Status Badge - Visual indicator for item states */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xxs) var(--space-xs);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

.status-badge .status-icon {
    margin-right: var(--space-xxs);
    font-size: 0.875rem;
}

/* Status colors */
.status-badge.active {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.status-badge.pending {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-badge.found {
    background-color: var(--color-info-bg);
    color: var(--color-info);
}

.status-badge.error {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
}

.status-badge.inactive {
    background-color: var(--color-idle-bg);
    color: var(--color-idle);
}

/* Product Card - Specialized card for product checks */
.product-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 0.5px solid var(--color-border);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), 
                background-color var(--transition-normal), border-color var(--transition-normal);
    margin-bottom: var(--space-md);
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.product-card-header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color var(--transition-normal);
}

/* Product image wrapper for product cards */
.product-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-color: var(--color-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-sm);
    color: var(--color-primary);
    font-size: 1.25rem;
    transition: background-color var(--transition-normal), color var(--transition-normal);
    overflow: hidden;
}

/* Product image styling */
.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-normal);
}

.product-image:hover {
    transform: scale(1.1);
}

.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface-variant);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1.5rem;
    border-radius: var(--radius-md);
}

.image-preview-placeholder {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface-variant);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1.25rem;
    border-radius: var(--radius-md);
}

.product-card-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-on-surface);
    margin-bottom: var(--space-xxs);
    transition: color var(--transition-normal);
}

.product-card-subtitle {
    font-size: 0.75rem;
    color: var(--color-on-surface-light);
    transition: color var(--transition-normal);
}

.product-card-body {
    padding: var(--space-md);
}

/* Product info layout */
.product-card-info-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.product-card-info-item:last-child {
    margin-bottom: 0;
}

.product-card-info-label {
    font-size: 0.75rem;
    color: var(--color-on-surface-light);
    width: 120px;
    flex-shrink: 0;
    transition: color var(--transition-normal);
}

.product-card-info-value {
    font-size: 0.875rem;
    color: var(--color-on-surface);
    font-weight: 500;
    transition: color var(--transition-normal);
}

.product-card-footer {
    padding: var(--space-md);
    padding-bottom: 0px;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xs);
    transition: border-color var(--transition-normal);
}

/* Modal Component - For dialogs and popups */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(var(--overlay-blur)); /* Blurred background effect */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

/* Active state for modal backdrop */
.modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px); /* Initial position for animation */
    transition: transform var(--transition-normal), background-color var(--transition-normal);
}

/* Animate modal into view when active */
.modal-backdrop.active .modal {
    transform: translateY(0);
}

.modal-header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color var(--transition-normal);
}

.modal-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-on-surface);
    transition: color var(--transition-normal);
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-on-surface-light);
    font-size: 1.25rem;
    padding: var(--space-xxs);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal-close:hover {
    background-color: var(--color-surface-variant);
    color: var(--color-on-surface);
}

.modal-body {
    padding: var(--space-md);
}

.modal-footer {
    padding: var(--space-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xs);
    transition: border-color var(--transition-normal);
}

/* Notification component */
.notification-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.notification {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--color-primary);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
    max-width: 350px;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.notification.active {
    transform: translateX(0);
    opacity: 1;
}

.notification.success {
    border-left-color: var(--color-success);
}

.notification.error {
    border-left-color: var(--color-danger);
}

.notification.info {
    border-left-color: var(--color-info);
}

.notification-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.notification.success .notification-icon {
    color: var(--color-success);
}

.notification.error .notification-icon {
    color: var(--color-danger);
}

.notification.info .notification-icon {
    color: var(--color-info);
}

.notification-content {
    flex-grow: 1;
}

.notification-title {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

.notification-message {
    font-size: 0.75rem;
    color: var(--color-on-surface-medium);
}

.notification-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-on-surface-light);
    font-size: 1rem;
    padding: 2px;
    line-height: 1;
}

.notification-close:hover {
    color: var(--color-on-surface);
}

/* Footer Component - For page footer */
.footer {
    text-align: center;
    padding: var(--space-md) var(--space-md) var(--space-lg);
    color: var(--color-on-surface-light);
    font-size: 0.75rem;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
    height: auto; /* Let the footer height be determined by its content */
    transition: color var(--transition-normal), border-color var(--transition-normal), 
                background-color var(--transition-normal);
}

.footer-product {
    font-weight: 600;
    margin-bottom: var(--space-xxs);
}

.footer-credit {
    opacity: 0.8;
}

/* Login Specific Styles */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface-variant);
    transition: background-color var(--transition-normal);
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: var(--space-xl);
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 0.5px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.login-logo {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.login-title {
    font-weight: 600;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--color-on-surface);
    transition: color var(--transition-normal);
}

/* View specific styling for page switching */
.view {
    display: none; /* Hide all views by default */
}

.view.active {
    display: block; /* Show only active view */
}


/* Responsive Grid - For layout structure */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

/* ====================================
   RESPONSIVE ADJUSTMENTS - Consolidated Media Queries
   ==================================== */

/* Small Devices - Mobile (576px and below) */
@media (max-width: 576px) {
    /* Typography adjustments */            
    h1 {
        font-size: 1.5rem;
    }
    
    /* Component layouts */
    .product-card-footer {
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .product-card-footer .btn {
        width: 100%;
    }
    
    .modal {
        width: 95%;
    }
    
    /* Form elements */
    .form-group {
        margin-bottom: var(--space-lg);
    }
    
    .form-label {
        margin-bottom: var(--space-xs);
        font-size: 0.9rem;
    }
    
    .form-control, .form-select {
        height: 48px; /* Larger touch target */
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    .radio-group {
        flex-direction: column;
        gap: var(--space-sm);
    }
}

/* Medium Devices - Tablet and Small Desktop (768px and below) */
@media (max-width: 768px) {
    /* Layout adjustments */
    .d-flex-mobile-column {
        flex-direction: column;
    }
    
    .w-100-mobile {
        width: 100%;
    }
    
    .content-area {
        padding: var(--space-sm);
    }
    
    .btn {
        white-space: nowrap;
    }
    
    /* Header area with title and actions */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    
    .page-header h1 {
        margin-bottom: var(--space-xs);
    }
    
    .page-header .btn {
        align-self: flex-start;
    }
    
    /* Card info adjustments */
    .product-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .product-card-header .status-badge {
        align-self: flex-start;
        margin-top: var(--space-xs);
        margin-left: 48px; /* Align with product title */
    }
    
    .product-card-info-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .product-card-info-label {
        width: 100%;
        margin-bottom: var(--space-xxs);
        color: var(--color-on-surface-medium);
    }
    
    .product-card-info-value {
        word-break: break-word;
    }
    
    /* Form layout for mobile */
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Mobile check history table */
    .history-table-mobile {
        display: block;
    }
    
    .history-table-mobile .history-row {
        background: var(--color-surface);
        border-radius: var(--radius-md);
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        border: 0.5px solid var(--color-border);
        box-shadow: var(--shadow-sm);
        transition: background-color var(--transition-normal), border-color var(--transition-normal);
    }
    
    .history-table-mobile .history-row-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-xs);
    }
    
    .history-table-mobile .history-date {
        font-weight: 500;
        color: var(--color-on-surface);
        transition: color var(--transition-normal);
    }
    
    .history-table-mobile .history-details {
        display: flex;
        flex-direction: column;
        gap: var(--space-xxs);
    }
    
    .history-table-mobile .history-detail-item {
        display: flex;
        justify-content: space-between;
        padding: var(--space-xxs) 0;
        border-bottom: 1px dashed var(--color-border);
        transition: border-color var(--transition-normal);
    }
    
    .history-table-mobile .history-detail-label {
        color: var(--color-on-surface-medium);
        font-size: 0.75rem;
        transition: color var(--transition-normal);
    }
    
    .history-table-mobile .history-detail-value {
        font-weight: 500;
        color: var(--color-on-surface);
        transition: color var(--transition-normal);
    }
    
    /* Hide standard table on mobile */
    .desktop-table {
        display: none;
    }
}

/* Desktop Devices (769px and above) */
@media (min-width: 769px) {
    .history-table-mobile {
        display: none;
    }
    
    .desktop-table {
        display: table;
    }
    
    .content-area {
        padding: var(--space-lg);
    }
    
    /* Responsive grid for larger screens */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large Desktop Devices (1024px and above) */
@media (min-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Component Library specific styles */
.color-swatch {
    width: 150px;
    height: 80px;
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

.color-swatch:hover {
    transform: translateY(-2px);
}

.color-swatch-label {
    font-weight: 600;
    font-size: 0.875rem;
}

.color-swatch-code {
    font-size: 0.75rem;
    opacity: 0.8;
}