/* 
 * Centralized Badge Styles
 * 
 * This file defines all badge styles for the application.
 * ALWAYS use the Badge helper class - NEVER create badges manually!
 * 
 * IMPORTANT: All badges use SOLID backgrounds with white text for consistency.
 * 
 * Usage in PHP (REQUIRED):
 *   use App\Helpers\Badge;
 *   
 *   // Priority badges
 *   <?= Badge::render('priority', 'urgent') ?>
 *   <?= Badge::render('priority', 'high') ?>
 *   <?= Badge::render('priority', 'normal') ?>
 *   
 *   // Status badges (icons are automatically assigned)
 *   <?= Badge::render('status', 'in_progress') ?>
 *   <?= Badge::render('status', 'completed') ?>
 *   <?= Badge::render('status', 'open') ?>
 *   <?= Badge::render('status', 'sent_to_graphics') ?>
 *   
 *   // Custom label and icon
 *   <?= Badge::render('status', 'in_progress', 'Custom Label', 'work') ?>
 *   
 *   // General badges (info, warning, success, danger, secondary, primary)
 *   <?= Badge::render('general', 'info', 'Information') ?>
 *   <?= Badge::render('general', 'success', 'Success') ?>
 *   
 *   // Role badges
 *   <?= Badge::render('role', 'webadmin') ?>
 * 
 * Available Badge Types:
 *   - 'priority': normal, high, urgent
 *   - 'status': open, in_progress, completed, sent_to_graphics, graphics_claimed, etc.
 *   - 'general': info, warning, success, danger, secondary, primary
 *   - 'role': webadmin, webmaster, photographer, graphic, purchase, shop_manager
 * 
 * CSS Classes Generated:
 *   - Priority: .priority-normal, .priority-high, .priority-urgent
 *   - Status: .badge-{status_name} (e.g., .badge-in_progress, .badge-completed)
 *   - General: .badge-{name} (e.g., .badge-info, .badge-success)
 *   - Role: .role-{role_name} (e.g., .role-webadmin)
 * 
 * DO NOT:
 *   - Create badges with hardcoded HTML: <span class="badge badge-warning">...</span>
 *   - Use inline styles for badges
 *   - Create custom badge CSS classes - add new statuses to Badge.php instead
 * 
 * For AI Assistants:
 *   - Always use Badge::render() when creating badges
 *   - Check app/Helpers/Badge.php for available status values
 *   - Icons are automatically assigned to status badges (see $statusIcons in Badge.php)
 *   - All badges have solid backgrounds with white text (except warning/new which use black text on yellow)
 */

/* Base Badge Styles - All badges inherit from this */
.badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    text-transform: capitalize;
    border: 1px solid transparent;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Ensure all badge variants use the base badge class */
.priority-normal,
.priority-high,
.priority-urgent,
[class^="badge-"],
[class*=" badge-"] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    text-transform: capitalize;
    border: 1px solid transparent;
    white-space: nowrap;
    box-sizing: border-box;
}

/* ============================================
   PRIORITY BADGES
   ============================================ */

.priority-normal {
    background: #9e9e9e;
    color: white;
    border-color: #9e9e9e;
}

.priority-high {
    background: #ff9800;
    color: white;
    border-color: #ff9800;
}

.priority-urgent {
    background: #f44336;
    color: white;
    border-color: #f44336;
    font-weight: 600;
}

/* ============================================
   STATUS BADGES
   ============================================ */

/* Industry Standard: Gray for Open/Not Started */
.badge-open {
    background: #757575;
    color: white;
    border-color: #757575;
}

/* Industry Standard: Green for Completed/Done */
.badge-completed {
    background: #4caf50;
    color: white;
    border-color: #4caf50;
}

/* Industry Standard: Orange/Yellow for Assigned/Waiting */
.badge-assigned {
    background: #ff9800;
    color: white;
    border-color: #ff9800;
}

/* Industry Standard: Blue for In Progress/Active */
.badge-in_progress {
    background: #2196f3;
    color: white;
    border-color: #2196f3;
}

/* Orange for In Progress when it's a shooting (photo_camera icon) */
.badge-in_progress.badge-shooting {
    background: #ff9800;
    color: white;
    border-color: #ff9800;
}

/* Industry Standard: Yellow/Orange for Review/Pending Review */
.badge-review {
    background: #ffc107;
    color: #000;
    border-color: #ffc107;
}

/* Industry Standard: Green for Completed Steps */
.badge-shooting_done {
    background: #4caf50;
    color: white;
    border-color: #4caf50;
}

/* Industry Standard: Orange for Transition States */
.badge-sent_to_graphics {
    background: #ff9800;
    color: white;
    border-color: #ff9800;
}

/* Industry Standard: Blue for Active Work */
.badge-graphics_claimed {
    background: #2196f3;
    color: white;
    border-color: #2196f3;
}

/* Industry Standard: Green for Completed */
.badge-graphics_finished {
    background: #4caf50;
    color: white;
    border-color: #4caf50;
}

/* Industry Standard: Teal/Green for Completed Transitions */
.badge-sent_to_shop {
    background: #009688;
    color: white;
    border-color: #009688;
}

/* Industry Standard: Red for Cancelled/Error */
.badge-cancelled {
    background: #f44336;
    color: white;
    border-color: #f44336;
}

/* Industry Standard: Green for Approved/Success */
.badge-approved {
    background: #4caf50;
    color: white;
    border-color: #4caf50;
}

/* Industry Standard: Red for Rejected/Error */
.badge-rejected {
    background: #f44336;
    color: white;
    border-color: #f44336;
}

/* Industry Standard: Yellow for Pending/Waiting */
.badge-pending {
    background: #ffc107;
    color: #000;
    border-color: #ffc107;
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

[data-theme="dark"] .priority-normal {
    background: #616161;
    color: white;
    border-color: #616161;
}

[data-theme="dark"] .priority-high {
    background: #f57c00;
    color: white;
    border-color: #f57c00;
}

[data-theme="dark"] .priority-urgent {
    background: #c62828;
    color: white;
    border-color: #c62828;
}

[data-theme="dark"] .badge-open {
    background: #616161;
    color: white;
    border-color: #616161;
}

[data-theme="dark"] .badge-completed {
    background: #388e3c;
    color: white;
    border-color: #388e3c;
}

[data-theme="dark"] .badge-assigned {
    background: #f57c00;
    color: white;
    border-color: #f57c00;
}

[data-theme="dark"] .badge-in_progress {
    background: #1976d2;
    color: white;
    border-color: #1976d2;
}

[data-theme="dark"] .badge-in_progress.badge-shooting {
    background: #f57c00;
    color: white;
    border-color: #f57c00;
}

[data-theme="dark"] .badge-review {
    background: #f57c00;
    color: white;
    border-color: #f57c00;
}

[data-theme="dark"] .badge-shooting_done {
    background: #388e3c;
    color: white;
    border-color: #388e3c;
}

[data-theme="dark"] .badge-sent_to_graphics {
    background: #f57c00;
    color: white;
    border-color: #f57c00;
}

[data-theme="dark"] .badge-graphics_claimed {
    background: #1976d2;
    color: white;
    border-color: #1976d2;
}

[data-theme="dark"] .badge-graphics_finished {
    background: #388e3c;
    color: white;
    border-color: #388e3c;
}

[data-theme="dark"] .badge-sent_to_shop {
    background: #00796b;
    color: white;
    border-color: #00796b;
}

[data-theme="dark"] .badge-cancelled {
    background: #c62828;
    color: white;
    border-color: #c62828;
}

[data-theme="dark"] .badge-approved {
    background: #388e3c;
    color: white;
    border-color: #388e3c;
}

[data-theme="dark"] .badge-rejected {
    background: #c62828;
    color: white;
    border-color: #c62828;
}

[data-theme="dark"] .badge-pending {
    background: #f57c00;
    color: white;
    border-color: #f57c00;
}

/* ============================================
   GENERAL PURPOSE BADGES
   ============================================ */

.badge-info {
    background: #17a2b8;
    color: white;
    border-color: #17a2b8;
}

.badge-warning {
    background: #ffc107;
    color: #000;
    border-color: #ffc107;
}

.badge-success {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.badge-danger {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.badge-primary {
    background: #2196f3;
    color: white;
    border-color: #2196f3;
}

.badge-secondary {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
}

/* Shooting Status Badges */
/* Industry Standard: Teal/Cyan for Planned/Scheduled */
.badge-planned {
    background: #00acc1;
    color: white;
    border-color: #00acc1;
}

/* badge-in_progress, badge-completed, badge-cancelled are defined above in STATUS BADGES section */

/* Dark mode for general badges */
[data-theme="dark"] .badge-info {
    background: #117a8b;
    border-color: #117a8b;
}

[data-theme="dark"] .badge-warning {
    background: #f57c00;
    color: white;
    border-color: #f57c00;
}

[data-theme="dark"] .badge-success {
    background: #1e7e34;
    border-color: #1e7e34;
}

[data-theme="dark"] .badge-primary {
    background: #1976d2;
    color: white;
    border-color: #1976d2;
}

[data-theme="dark"] .badge-danger {
    background: #bd2130;
    border-color: #bd2130;
}

[data-theme="dark"] .badge-secondary {
    background: #545b62;
    border-color: #545b62;
}

[data-theme="dark"] .badge-planned {
    background: #00838f;
    color: white;
    border-color: #00838f;
}

/* ============================================
   ROLE BADGES
   ============================================ */

.role-webadmin,
.role-webmaster {
    background: #2196f3;
    color: white;
    border-color: #2196f3;
}

.role-photographer {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.role-graphic {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
}

.role-purchase {
    background: #ffc107;
    color: #000;
    border-color: #ffc107;
}

.role-shop_manager {
    background: #17a2b8;
    color: #000;
    border-color: #17a2b8;
}

/* Dark mode for role badges */
[data-theme="dark"] .role-webadmin,
[data-theme="dark"] .role-webmaster {
    background: #1976d2;
    color: white;
    border-color: #1976d2;
}

[data-theme="dark"] .role-photographer {
    background: #1e7e34;
    color: white;
    border-color: #1e7e34;
}

[data-theme="dark"] .role-graphic {
    background: #545b62;
    color: white;
    border-color: #545b62;
}

[data-theme="dark"] .role-purchase {
    background: #d39e00;
    color: #000;
    border-color: #d39e00;
}

[data-theme="dark"] .role-shop_manager {
    background: #117a8b;
    color: white;
    border-color: #117a8b;
}

/* ============================================
   SHOP MANAGER STATUS BADGES
   ============================================ */

.badge-new {
    background: #ffc107;
    color: #000;
    border-color: #ffc107;
}

.badge-finished {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

[data-theme="dark"] .badge-new {
    background: #f57c00;
    color: white;
    border-color: #f57c00;
}

[data-theme="dark"] .badge-finished {
    background: #388e3c;
    color: white;
    border-color: #388e3c;
}

/* ============================================
   GRAPHIC STATUS BADGES (with icons)
   ============================================ */

.badge-available {
    background: #ffc107;
    color: #000;
    border-color: #ffc107;
}

.badge-claimed {
    background: #2196f3;
    color: white;
    border-color: #2196f3;
}

/* badge-finished already defined above */

[data-theme="dark"] .badge-available {
    background: #d39e00;
    color: #000;
    border-color: #d39e00;
}

[data-theme="dark"] .badge-claimed {
    background: #1976d2;
    color: white;
    border-color: #1976d2;
}

/* ============================================
   BADGES WITH ICONS
   ============================================ */

.badge .material-icons-outlined {
    font-size: 1rem;
    line-height: 1;
    margin-right: 0.25rem;
    display: inline-flex;
    align-items: center;
}

/* ============================================
   IMAGE FORMAT BADGES
   Industry-standard color associations
   ============================================ */

/* JPEG/JPG - Photography format, warm orange/amber */
.badge-format-jpg,
.badge-format-jpeg {
    background: #ff6b35; /* Warm orange/amber - photography association */
    color: white;
    border-color: #ff6b35;
}

/* PNG - Graphics/web format, blue (transparency, web graphics) */
.badge-format-png {
    background: #2196f3; /* Blue - web/graphics association */
    color: white;
    border-color: #2196f3;
}

/* WebP - Modern Google format, vibrant teal/cyan */
.badge-format-webp {
    background: #00bcd4; /* Teal/cyan - modern web format */
    color: white;
    border-color: #00bcd4;
}

/* TIFF - Professional/archival format, deep purple */
.badge-format-tiff,
.badge-format-tif {
    background: #7b1fa2; /* Deep purple - professional/archival */
    color: white;
    border-color: #7b1fa2;
}

/* AVIF - Next-generation format, vibrant violet/purple */
.badge-format-avif {
    background: #9c27b0; /* Violet/purple - modern/next-gen */
    color: white;
    border-color: #9c27b0;
}

/* RAW Formats - Professional photography formats, dark teal/green */
.badge-format-arw {
    background: #00695c; /* Dark teal - Sony RAW */
    color: white;
    border-color: #00695c;
}

.badge-format-nef {
    background: #004d40; /* Darker teal - Nikon RAW */
    color: white;
    border-color: #004d40;
}

.badge-format-cr2 {
    background: #00796b; /* Medium teal - Canon RAW */
    color: white;
    border-color: #00796b;
}

.badge-format-dng {
    background: #00897b; /* Lighter teal - Adobe DNG */
    color: white;
    border-color: #00897b;
}

.badge-format-raf {
    background: #005a4c; /* Dark teal - Fujifilm RAW */
    color: white;
    border-color: #005a4c;
}

.badge-format-orf {
    background: #006b5c; /* Dark teal - Olympus RAW */
    color: white;
    border-color: #006b5c;
}

/* Unknown format - neutral gray */
.badge-format-unknown {
    background: #757575;
    color: white;
    border-color: #757575;
}

/* TIFF conversion badge - indicates TIFF is converted to AVIF for browser */
.badge-tiff-converted {
    background: #9B59B6; /* Purple - indicates conversion */
    color: white;
    border-color: #9B59B6;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

[data-theme="dark"] .badge-tiff-converted {
    background: #7B1FA2;
    border-color: #7B1FA2;
}

/* Dark mode adjustments for format badges */
[data-theme="dark"] .badge-format-jpg,
[data-theme="dark"] .badge-format-jpeg {
    background: #e64a19;
    border-color: #e64a19;
}

[data-theme="dark"] .badge-format-png {
    background: #1976d2;
    border-color: #1976d2;
}

[data-theme="dark"] .badge-format-webp {
    background: #00838f;
    border-color: #00838f;
}

[data-theme="dark"] .badge-format-tiff,
[data-theme="dark"] .badge-format-tif {
    background: #6a1b9a;
    border-color: #6a1b9a;
}

[data-theme="dark"] .badge-format-avif {
    background: #7b1fa2;
    border-color: #7b1fa2;
}

[data-theme="dark"] .badge-format-arw {
    background: #00897b;
    border-color: #00897b;
}

[data-theme="dark"] .badge-format-nef {
    background: #00796b;
    border-color: #00796b;
}

[data-theme="dark"] .badge-format-cr2 {
    background: #009688;
    border-color: #009688;
}

[data-theme="dark"] .badge-format-dng {
    background: #00acc1;
    border-color: #00acc1;
}

[data-theme="dark"] .badge-format-raf {
    background: #00796b;
    border-color: #00796b;
}

[data-theme="dark"] .badge-format-orf {
    background: #00897b;
    border-color: #00897b;
}

[data-theme="dark"] .badge-format-unknown {
    background: #616161;
    border-color: #616161;
}

/* Source format badge */
.badge-source-format {
    background: #607D8B; /* Blue-gray - indicates source/original */
    color: white;
    border-color: #607D8B;
}

[data-theme="dark"] .badge-source-format {
    background: #455A64;
    border-color: #455A64;
}

/* ICC Profile badge */
.badge-icc-profile {
    background: #00bcd4; /* Cyan/Teal - indicates color profile */
    color: white;
    border-color: #00bcd4;
}

[data-theme="dark"] .badge-icc-profile {
    background: #00838f;
    border-color: #00838f;
}