# CSS Quick Reference Card

Quick cheat sheet for using the CSS framework in your multi-tenant platform.

## 📦 Files to Include

### Every Page Needs:
```html
<link rel="stylesheet" href="/static/css/shared/base.css">
```

### Authentication Pages (Login/Register):
```html
<link rel="stylesheet" href="/static/css/shared/base.css">
<link rel="stylesheet" href="/static/css/shared/auth.css">
```

### Admin Pages:
```html
<link rel="stylesheet" href="/static/css/shared/base.css">
<link rel="stylesheet" href="/static/css/admin/admin.css">
```

### Vendor Pages:
```html
<link rel="stylesheet" href="/static/css/shared/base.css">
<link rel="stylesheet" href="/static/css/vendor/vendor.css">
```

---

## 🎨 Common Patterns

### Login Page Layout
```html
<div class="auth-page">
    <div class="login-container">
        <div class="login-header">
            <div class="auth-logo">🔐</div>
            <h1>Welcome Back</h1>
            <p>Sign in to continue</p>
        </div>
        
        <form id="loginForm">
            <div class="form-group">
                <label>Username</label>
                <input type="text" class="form-control" required>
            </div>
            
            <button type="submit" class="btn-login">Sign In</button>
        </form>
    </div>
</div>
```

### Dashboard Stats Grid
```html
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-header">
            <div class="stat-title">Total Users</div>
            <div class="stat-icon">👥</div>
        </div>
        <div class="stat-value">1,234</div>
        <div class="stat-subtitle">52 active</div>
    </div>
</div>
```

### Data Table
```html
<div class="content-section">
    <div class="section-header">
        <h2 class="section-title">Vendors</h2>
        <button class="btn btn-primary">Add New</button>
    </div>
    
    <table class="data-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tech Store</td>
                <td><span class="badge badge-success">Active</span></td>
                <td>
                    <button class="btn btn-sm">Edit</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
```

### Form with Validation
```html
<div class="form-group">
    <label>Email <span class="text-danger">*</span></label>
    <input 
        type="email" 
        class="form-control" 
        id="email"
        required
    >
    <div class="form-help">We'll never share your email</div>
    <div class="error-message" id="emailError">
        Invalid email address
    </div>
</div>
```

### Alert Messages
```html
<div id="alert" class="alert alert-success show">
    Operation completed successfully!
</div>
```

### Loading State
```html
<button class="btn btn-primary" disabled>
    <span class="loading-spinner"></span>
    Processing...
</button>
```

---

## 🎯 Class Combinations

### Primary Action Button
```html
<button class="btn btn-primary btn-lg">Get Started</button>
```

### Danger Button Small
```html
<button class="btn btn-danger btn-sm">Delete</button>
```

### Centered Card
```html
<div class="card text-center p-3 mb-3">
    <h3>Welcome!</h3>
</div>
```

### Flex Container
```html
<div class="d-flex justify-between align-center gap-2">
    <span>Label</span>
    <button class="btn btn-sm">Action</button>
</div>
```

---

## 🎨 Color Classes

### Text Colors
- `text-primary` - Primary brand color
- `text-success` - Green (success)
- `text-danger` - Red (error/delete)
- `text-warning` - Yellow (warning)
- `text-muted` - Gray (less important)

### Background Badges
- `badge-success` - Green badge
- `badge-danger` - Red badge
- `badge-warning` - Yellow badge
- `badge-info` - Blue badge
- `badge-secondary` - Gray badge

---

## 📏 Spacing Utilities

### Margin
- `mt-{0-4}` - Margin top
- `mb-{0-4}` - Margin bottom
- `ml-{0-4}` - Margin left
- `mr-{0-4}` - Margin right

### Padding
- `p-{0-4}` - Padding all sides
- `pt-{0-4}` - Padding top
- `pb-{0-4}` - Padding bottom

Example:
```html
<div class="mt-3 mb-2 p-3">
    <!-- margin-top: 24px, margin-bottom: 16px, padding: 24px -->
</div>
```

---

## 🔤 Typography

### Headings
```html
<h1>Largest Heading</h1>  <!-- 32px -->
<h2>Large Heading</h2>    <!-- 24px -->
<h3>Medium Heading</h3>   <!-- 20px -->
<h4>Small Heading</h4>    <!-- 18px -->
```

### Font Weights
- `font-bold` - 700 weight
- `font-semibold` - 600 weight
- `font-normal` - 400 weight

---

## 📱 Responsive Classes

### Display
- `d-none` - Hide element
- `d-block` - Display as block
- `d-flex` - Display as flexbox

### Flexbox
- `justify-start` - Align left
- `justify-end` - Align right
- `justify-center` - Center
- `justify-between` - Space between
- `align-center` - Vertical center
- `gap-{1-3}` - Gap between items

---

## 🎭 States

### Show/Hide
```javascript
// Show element
element.classList.add('show');

// Hide element
element.classList.remove('show');
```

### Enable/Disable Button
```javascript
// Disable
button.disabled = true;
button.innerHTML = '<span class="loading-spinner"></span>Loading...';

// Enable
button.disabled = false;
button.innerHTML = 'Submit';
```

### Show Error
```javascript
// Add error to input
input.classList.add('error');
errorMessage.classList.add('show');
errorMessage.textContent = 'This field is required';

// Clear error
input.classList.remove('error');
errorMessage.classList.remove('show');
```

---

## 🔧 CSS Variables Usage

### In CSS
```css
.custom-button {
    background: var(--primary-color);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    color: white;
}
```

### In JavaScript
```javascript
// Get value
const primaryColor = getComputedStyle(document.documentElement)
    .getPropertyValue('--primary-color');

// Set value
document.documentElement.style
    .setProperty('--primary-color', '#ff0000');
```

---

## 🎨 Brand Customization

### Quick Brand Color Change
Edit `static/css/shared/base.css`:
```css
:root {
    --primary-color: #YOUR_COLOR;
    --primary-dark: #DARKER_SHADE;
}
```

### Per-Vendor Theming
Create `static/css/vendor/themes/VENDOR_CODE.css`:
```css
:root {
    --primary-color: #VENDOR_COLOR;
}
```

Load in HTML:
```html
<link rel="stylesheet" href="/static/css/vendor/themes/techstore.css">
```

---

## ⚡ Performance Tips

### CSS Loading
```html
<!-- Preload critical CSS -->
<link rel="preload" href="/static/css/shared/base.css" as="style">
<link rel="stylesheet" href="/static/css/shared/base.css">
```

### Minimize Repaints
```css
/* Use transform instead of position changes */
.animate {
    transform: translateY(-4px);
    transition: transform 0.2s;
}
```

---

## 🐛 Common Issues

### Issue: Styles not applying
**Solution**: Check CSS is loaded in correct order (base.css first)

### Issue: Button not clickable
**Solution**: Check z-index and pointer-events

### Issue: Layout breaks on mobile
**Solution**: Add viewport meta tag:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

### Issue: Colors look wrong
**Solution**: Ensure base.css is loaded (contains CSS variables)

---

## 📋 Copy-Paste Snippets

### Complete Login Form
```html
<form id="loginForm">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" required>
        <div class="error-message" id="usernameError"></div>
    </div>
    
    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" required>
        <div class="error-message" id="passwordError"></div>
    </div>
    
    <button type="submit" class="btn-login">Sign In</button>
</form>
```

### Stats Card
```html
<div class="stat-card">
    <div class="stat-header">
        <div class="stat-title">Total Sales</div>
        <div class="stat-icon">💰</div>
    </div>
    <div class="stat-value">$12,345</div>
    <div class="stat-subtitle">+15% from last month</div>
</div>
```

### Modal Dialog
```html
<div class="modal-overlay">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Confirm Action</h3>
            <button class="modal-close">×</button>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to continue?</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary">Cancel</button>
            <button class="btn btn-primary">Confirm</button>
        </div>
    </div>
</div>
```

---

## ✅ Quick Checklist

Before going live:
- [ ] All CSS files copied to correct directories
- [ ] HTML files have correct `<link>` tags
- [ ] Test in Chrome, Firefox, Safari
- [ ] Test on mobile device
- [ ] Customize brand colors
- [ ] Test print preview
- [ ] Check page load speed
- [ ] Validate CSS (no errors)

---

**Need more help?** Check `CSS_FILES_GUIDE.md` for detailed documentation!