/* Cart Analyzer by Perfacuity - Brand Styles */
/* Normalized with webperformancetracker style guide */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Inter:wght@400;500;600&family=Raleway:ital,wght@1,500&display=swap');

/* Perfacuity Brand Color System - HSL Format (matches webperformancetracker) */
:root {
    /* Core Design Tokens */
    --background: 0 0% 100%;
    --foreground: 240 3% 17%;
    --muted: 210 40% 98%;
    --muted-foreground: 218 12% 66%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 3% 17%;
    --card: 0 0% 100%;
    --card-foreground: 240 3% 17%;
    --border: 218 12% 88%;
    --input: 218 12% 88%;
    --primary: 216 100% 34%; /* Perfacuity Blue #0046AD */
    --primary-foreground: 0 0% 100%;
    --secondary: 354 74% 49%; /* Acuity Red #D92332 */
    --secondary-foreground: 0 0% 100%;
    --accent: 158 49% 47%; /* Growth Green #3EB489 */
    --accent-foreground: 0 0% 100%;
    --destructive: 354 74% 49%;
    --destructive-foreground: 0 0% 100%;
    --ring: 216 100% 34%;
    --radius: 0.5rem;
    
    /* Perfacuity Brand Colors - HSL Format */
    --perfacuity-blue: 216 100% 34%; /* #0046AD - Primary */
    --perfacuity-blue-hover: 214 100% 52%; /* #0A6CFF - Hover state */
    --acuity-red: 354 74% 49%; /* #D92332 - Secondary/CTA */
    --acuity-red-hover: 354 76% 60%; /* #E94B57 - Hover state */
    --insight-white: 210 40% 98%; /* #F8FAFC - Background */
    --graphite-gray: 240 3% 17%; /* #2B2B2E - Typography */
    --value-silver: 218 12% 66%; /* #9FA6B2 - Neutral/Separator */
    --growth-green: 158 49% 47%; /* #3EB489 - Success/Positive */
    
    /* Semantic Colors (using HSL) */
    --primary-color: hsl(var(--perfacuity-blue));
    --primary-hover: hsl(var(--perfacuity-blue-hover));
    --accent-color: hsl(var(--acuity-red));
    --accent-hover: hsl(var(--acuity-red-hover));
    --success-color: hsl(var(--growth-green));
    --warning-color: #ffc107;
    --danger-color: hsl(var(--acuity-red));
    --info-color: hsl(var(--perfacuity-blue));
    
    /* Backgrounds & Text */
    --light-bg: hsl(var(--insight-white));
    --dark-text: hsl(var(--graphite-gray));
    --muted-text: hsl(var(--value-silver));
    
    /* Gradients */
    --perfacuity-gradient: linear-gradient(135deg, hsl(var(--perfacuity-blue)) 0%, hsl(var(--acuity-red)) 100%);
    --perfacuity-header-bg: hsl(var(--insight-white));
    
    /* Typography */
    --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-accent: 'Raleway', system-ui, -apple-system, sans-serif;
}

/* Dark Mode Support (matches webperformancetracker) */
.dark {
    --background: 240 3% 17%;
    --foreground: 0 0% 98%;
    --muted: 240 3% 25%;
    --muted-foreground: 218 12% 70%;
    --popover: 240 3% 17%;
    --popover-foreground: 0 0% 98%;
    --card: 240 3% 20%;
    --card-foreground: 0 0% 98%;
    --border: 240 3% 30%;
    --input: 240 3% 30%;
    --primary: 214 100% 52%;
    --primary-foreground: 0 0% 100%;
    --secondary: 354 76% 60%;
    --secondary-foreground: 0 0% 100%;
    --accent: 158 49% 55%;
    --accent-foreground: 0 0% 100%;
    --destructive: 354 76% 60%;
    --destructive-foreground: 0 0% 100%;
    --ring: 214 100% 52%;
    
    /* Perfacuity Brand Colors - Dark Mode */
    --perfacuity-blue: 214 100% 52%;
    --perfacuity-blue-hover: 214 100% 60%;
    --acuity-red: 354 76% 60%;
    --acuity-red-hover: 354 76% 70%;
    --insight-white: 240 3% 20%;
    --graphite-gray: 0 0% 90%;
    --value-silver: 218 12% 70%;
    --growth-green: 158 49% 55%;
}

/* Global Typography (matches webperformancetracker) */
body {
    font-family: var(--font-body);
    color: var(--dark-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

.font-heading {
    font-family: var(--font-heading);
}

.font-body {
    font-family: var(--font-body);
}

.font-accent {
    font-family: var(--font-accent);
}

.navbar-brand {
    font-family: var(--font-heading);
}

.accent-text {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
}

/* Navbar Styling */
.perfacuity-theme {
    background: var(--perfacuity-header-bg) !important;
    border-bottom: 1px solid hsl(var(--border));
}

/* Override navbar-dark for light background */
.perfacuity-theme.navbar-dark .navbar-brand,
.perfacuity-theme.navbar-dark .navbar-brand span {
    color: var(--dark-text) !important;
}

.perfacuity-theme.navbar-dark .nav-link {
    color: var(--dark-text) !important;
}

.perfacuity-theme.navbar-dark .nav-link:hover,
.perfacuity-theme.navbar-dark .nav-link:focus {
    color: var(--primary-color) !important;
}

/* Navbar button styling */
.navbar-nav .nav-item .btn {
    margin-top: 0;
    align-self: center;
}

.navbar-nav #signInItem {
    display: flex !important;
    align-items: center;
}

.perfacuity-theme .navbar-toggler {
    border-color: var(--dark-text);
}

.perfacuity-theme .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(43, 43, 46, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-brand img {
    height: 48px;
    object-fit: contain;
}

.navbar-brand a {
    color: inherit;
    text-decoration: none;
}

.navbar-brand a:hover {
    color: inherit;
    opacity: 0.9;
}

/* Button Styles */
.btn-primary {
    background-color: var(--perfacuity-blue);
    border-color: var(--perfacuity-blue);
    font-family: var(--font-body);
    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--perfacuity-blue-hover);
    border-color: var(--perfacuity-blue-hover);
}

.btn-success {
    background-color: var(--growth-green);
    border-color: var(--growth-green);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #35a077;
    border-color: #35a077;
}

.btn-danger {
    background-color: var(--acuity-red);
    border-color: var(--acuity-red);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--acuity-red-hover);
    border-color: var(--acuity-red-hover);
}

/* Card Styles */
.card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.15s ease-in-out;
    background-color: white;
}

/* Scrollable Results Container */
.results-scroll-container {
    max-height: 850px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
}

.results-scroll-container::-webkit-scrollbar {
    width: 12px;
}

.results-scroll-container::-webkit-scrollbar-track {
    background: hsl(var(--muted));
    border-radius: 0 0.375rem 0.375rem 0;
}

.results-scroll-container::-webkit-scrollbar-thumb {
    background: hsl(var(--value-silver));
    border-radius: 6px;
    border: 2px solid hsl(var(--muted));
}

.results-scroll-container::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--graphite-gray));
}

/* Fixed header for scrollable table */
.results-scroll-container .table thead th {
    position: sticky;
    top: 0;
    background-color: hsl(var(--insight-white));
    z-index: 10;
    border-bottom: 2px solid hsl(var(--border));
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card-header {
    background-color: var(--insight-white);
    border-bottom: 1px solid var(--value-silver);
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--graphite-gray);
}

/* Table Styles */
.table-responsive {
    border-radius: 0.375rem;
    overflow: hidden;
}

.results-table {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
}

.results-table th {
    background-color: var(--light-bg);
    border: none;
    font-weight: 600;
    color: var(--dark-text);
    font-family: var(--font-heading);
}

.results-table td {
    border: none;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

.results-table tbody tr:hover {
    background-color: rgba(0, 70, 173, 0.05);
}

/* Alert Styles */
.alert {
    border: none;
    border-radius: 0.5rem;
}

.alert-success {
    background-color: rgba(62, 180, 137, 0.1);
    color: var(--growth-green);
    border-left: 4px solid var(--growth-green);
}

.alert-danger {
    background-color: rgba(217, 35, 50, 0.1);
    color: var(--acuity-red);
    border-left: 4px solid var(--acuity-red);
}

.alert-info {
    background-color: rgba(0, 70, 173, 0.1);
    color: var(--perfacuity-blue);
    border-left: 4px solid var(--perfacuity-blue);
}

/* Form Styles */
.form-control:focus {
    border-color: var(--perfacuity-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 70, 173, 0.25);
}

.form-label {
    font-weight: 500;
    color: var(--graphite-gray);
}

/* Modal Styles */
.modal-content {
    border: none;
    border-radius: 0.75rem;
}

.modal-header {
    background-color: var(--insight-white);
    border-bottom: 1px solid var(--value-silver);
}

.modal-title {
    font-family: var(--font-heading);
    color: var(--perfacuity-blue);
}

/* Badge Styles */
.badge {
    font-size: 0.75em;
    font-weight: 500;
}

/* Status badges */
.status-detected {
    background-color: var(--success-color);
}

.status-not-detected {
    background-color: var(--danger-color);
}

.status-unknown {
    background-color: var(--warning-color);
}

/* Platform badges */
.platform-shopify {
    background-color: #96bf48;
}

.platform-woocommerce {
    background-color: #96588a;
}

.platform-magento {
    background-color: #ec6737;
}

.platform-bigcommerce {
    background-color: #121118;
}

.platform-unknown {
    background-color: #6c757d;
}

/* Progress Bar */
.progress {
    height: 1.5rem;
    border-radius: 0.75rem;
    background-color: var(--insight-white);
}

.progress-bar {
    background-color: var(--acuity-red);
}

/* Upload Area Styles */
.upload-area {
    border: 2px dashed var(--value-silver);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: var(--insight-white);
}

.upload-area.dragover {
    border-color: var(--perfacuity-blue);
    background-color: rgba(0, 70, 173, 0.1);
}

.upload-area:hover {
    border-color: var(--perfacuity-blue);
    background-color: rgba(0, 70, 173, 0.05);
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Admin Panel Styles */
.admin-panel {
    background: var(--light-bg);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.admin-nav {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1.5rem;
}

.admin-nav .nav-link {
    color: var(--dark-text);
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid transparent;
}

.admin-nav .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.nav-tabs .nav-link {
    color: var(--graphite-gray);
}

.nav-tabs .nav-link.active {
    color: var(--perfacuity-blue);
    border-bottom: 2px solid var(--perfacuity-blue);
}

/* Link Styles */
a {
    color: var(--perfacuity-blue);
    text-decoration: none;
}

a:hover {
    color: var(--perfacuity-blue-hover);
    text-decoration: underline;
}

/* Badge Styling - Perfacuity Design System */
.badge.platform-badge {
    background-color: hsl(var(--perfacuity-blue)) !important;
    color: white !important;
}

.badge.platform-badge.platform-unknown {
    background-color: #2B2B2E !important; /* Graphite Gray */
    color: white !important;
}

.badge.cart-status-detected {
    background-color: #D92332 !important; /* Acuity Red */
    color: white !important;
}

.badge.cart-status-not-detected {
    background-color: #2B2B2E !important; /* Graphite Gray */
    color: white !important;
}

/* Footer Styles */
.footer {
    background-color: var(--graphite-gray);
    color: var(--insight-white);
    padding: 2rem 0;
    margin-top: 4rem;
    border-top: 3px solid rgb(217, 35, 50);
}

.footer a {
    color: var(--insight-white);
    text-decoration: none;
}

.footer a:hover {
    color: var(--perfacuity-blue-hover);
    text-decoration: none;
}

/* Utility Classes */
.text-perfacuity {
    color: var(--perfacuity-blue);
}

.text-accent {
    color: var(--acuity-red);
}

.bg-perfacuity {
    background-color: var(--perfacuity-blue) !important;
}

.bg-gradient-perfacuity {
    background: var(--perfacuity-gradient) !important;
}

.border-perfacuity {
    border-color: var(--perfacuity-blue) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .navbar-brand img {
        height: 36px;
    }
    
    .navbar-brand span {
        font-size: 0.9rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .upload-area {
        padding: 1rem;
    }
}

/* Print Styles for API Guide */
@media print {
    body {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
    
    .no-print {
        display: none !important;
    }
    
    .page-break {
        page-break-before: always;
    }
    
    .no-break {
        page-break-inside: avoid;
    }
}