/* Casa CRM v2 - Shared Styles */

:root {
    --brand-primary: #000000;
    --brand-secondary: #00A86B;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    --light: #f8f9fa;
    --dark: #343a40;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
    color: #1a1a1a;
    background: #f5f5f5;
}

/* Utility classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: #666; }
.text-small { font-size: 0.85rem; }
.font-bold { font-weight: 600; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }

/* Form elements */
input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-secondary);
}

/* Cards */
.card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .sidebar {
        width: 100% !important;
        position: fixed;
        bottom: 0;
        z-index: 1000;
        height: auto;
    }
    
    .main-content {
        padding: 15px;
        margin-bottom: 60px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== Venue stock-by-brand matrix (shared/venue-products.js) ==========
   Re-added 2026-09-09: these rules were mirrored into shared/ui.css (rep)
   from styles.css but the originals were lost (Aug rollback). Manager and
   brand portal load styles.css, so the stock matrix rendered unstyled
   there. var() refs mapped to this bundle's palette (no --c-*/--sp-* vars
   exist here); --brand-color-stripe is set inline by the JS;
   --brand-secondary is defined in this file's :root. */
/* Mirror of shared/styles.css venue-brand-card rules, but tuned for
   the rep design system tokens (var(--sp-*), var(--c-*), etc.) and
   mobile-first. */
.venue-stock-by-brand { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eee; }
.venue-stock-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.venue-stock-header h4 { margin: 0; font-size: 14px; color: #1a1a1a; }
.venue-brand-card {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.venue-brand-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
    user-select: none;
    background: #f8f9fa;
    border-bottom: 1px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
    min-height: 52px;
}
.venue-brand-card-header:hover { background: #f1f3f5; }
.venue-brand-card-header:focus { outline: 2px solid var(--brand-secondary, #00A86B); outline-offset: -2px; }
.venue-brand-card-header[aria-expanded="true"] {
    background: #fff;
    border-bottom-color: #eee;
    box-shadow: inset 0 2px 0 var(--brand-color-stripe, #888);
}
.venue-brand-stripe {
    display: inline-block;
    width: 6px;
    height: 28px;
    border-radius: 3px;
    flex-shrink: 0;
}
.venue-brand-name {
    font-weight: 600;
    color: #1a1a1a;
    flex: 1;
    font-size: 14px;
    line-height: 1.2;
}
.venue-brand-count {
    font-size: 11px;
    color: #666;
    padding: 3px 10px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    font-weight: 500;
    white-space: nowrap;
}
.venue-brand-chevron {
    color: #666;
    font-size: 1rem;
    padding: 0 4px;
    transition: transform 0.12s ease;
    width: 20px;
    text-align: center;
    display: inline-block;
}
.venue-brand-card-header[aria-expanded="false"] .venue-brand-chevron { transform: rotate(-90deg); }
.venue-brand-card-header[aria-expanded="true"] .venue-brand-chevron { transform: rotate(0deg); }
.venue-brand-card-body { padding: 4px 8px 12px; }
.venue-brand-card-body[hidden] { display: none; }

/* Mobile-fit: wrap the 4-col stock table in a horizontal scroller so
   input boxes don't get squashed at small viewports. */
.venue-brand-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.35) rgba(0,0,0,0.08);
    margin: 0 -4px;
    padding: 0 4px;
}
.venue-brand-table-scroll::-webkit-scrollbar { height: 6px; }
.venue-brand-table-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 3px; }

.venue-brand-card-body .venue-products-table {
    font-size: 13px;
    min-width: 480px;
    width: 100%;
    border-collapse: collapse;
}
.venue-brand-card-body .venue-products-table th {
    font-size: 11px;
    padding: 8px 6px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #eee;
    text-align: left;
    background: #fafbfc;
}
.venue-brand-card-body .venue-products-table th.stock-cell,
.venue-brand-card-body .venue-products-table th.forecast-cell,
.venue-brand-card-body .venue-products-table th.weeks-cover { text-align: center; }
.venue-brand-card-body .venue-products-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #f1f1f1;
    vertical-align: middle;
}
.venue-brand-card-body .venue-products-table td.stock-cell,
.venue-brand-card-body .venue-products-table td.forecast-cell { text-align: center; }
.venue-brand-card-body .venue-products-table td.stock-cell input,
.venue-brand-card-body .venue-products-table td.forecast-cell input {
    width: 72px;
    padding: 6px 4px;
    font-size: 13px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
}
.venue-brand-card-body .venue-products-table td.weeks-cover-cell {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.venue-brand-card-body .venue-products-table td strong {
    font-size: 14px;
    color: #1a1a1a;
}

/* "not stocked here" indicators */
.venue-brand-not-stocked {
    font-size: 11px;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: 500;
}
.product-not-stocked {
    display: inline-block;
    font-size: 0.66rem;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 6px;
    font-weight: 500;
    vertical-align: middle;
}
.venue-brand-card-body tr.row-not-stocked td { color: #888; }
.venue-brand-card-body tr.row-not-stocked strong { color: #b45309; font-weight: 600; }