/**
 * UPPY STYLE GUIDE - Arun Gas Portal
 * ===================================
 * Version: 3.0
 * Updated: December 2024
 *
 * Standard Uppy styling for consistent file upload components across the portal.
 * Now with CSS variable support for theming (Light/Dark mode, Staff/Public flows).
 *
 * USAGE:
 * 1. Include this CSS file in your template:
 *    <link rel="stylesheet" href="{% static 'portal/css/uppy-style-guide.css' %}">
 *
 * 2. Include Uppy JS libraries (v3.3.1):
 *    <script src="https://releases.transloadit.com/uppy/v3.3.1/uppy.min.js"></script>
 *
 * 3. Use the standard HTML structure (see sections below)
 *
 * FEATURES:
 * - Upload Wrapper with size variants (portrait, landscape, square)
 * - Centered Camera/Browse icons with hover highlight
 * - Upload Preview with Zoom/Change/Remove hover overlay
 * - Change Mode: Dimmed photo with Uppy overlay and Cancel button
 * - Zoom Modal/Lightbox for enlarged image view
 * - Zoomable Image component for display-only images
 * - Dark/Light theme support via CSS variables
 *
 * THEMING:
 * This Style Guide uses CSS variables that can be overridden by parent templates.
 * - Staff portal (staff_base.html): Orange accent (#F37022)
 * - Public portal (base_apply.html): Blue accent (#1976D2)
 *
 * REQUIRED CSS VARIABLES (with defaults):
 * - --uppy-accent: Accent color for hover/active states
 * - --uppy-accent-rgb: RGB values for rgba() usage
 * - --uppy-accent-hover: Hover state accent
 * - --uppy-accent-bg: Light background for selected states
 * - --bg-primary: Primary background (cards, inputs)
 * - --bg-secondary: Secondary background (containers)
 * - --border-color: Border color
 * - --text-primary: Primary text color
 * - --text-muted: Muted text color
 *
 * FIXED COLORS (not themed):
 * - Success: #28a745 (Green) - Upload complete indicator
 * - Danger: #dc3545 (Red) - Remove/cancel buttons
 * - Info: #1976d2 (Blue) - Zoom button
 */

/* =============================================================================
   CSS VARIABLES - Defaults (can be overridden by parent template)
   ============================================================================= */
:root {
    /* Uppy Accent - defaults to orange, override for different themes */
    --uppy-accent: var(--primary, #e65100);
    --uppy-accent-rgb: var(--primary-rgb, 230, 81, 0);
    --uppy-accent-hover: var(--primary-light, #ff6d00);
    --uppy-accent-bg: var(--primary-50, #fff3e0);

    /* Backgrounds - defaults for standalone usage */
    --bg-primary: var(--bg-primary, #ffffff);
    --bg-secondary: var(--bg-secondary, #f8f9fa);

    /* Borders */
    --border-color: var(--border-color, #dee2e6);

    /* Text */
    --text-primary: var(--text-primary, #212529);
    --text-muted: var(--text-muted, #6c757d);
}

/* ============================================
   UPLOAD WRAPPER - Main Container
   ============================================

   Fixed-size container that holds both Uppy and Preview.
   Prevents layout shift when switching between upload/preview modes.

   HTML Structure:
   <div class="upload-wrapper upload-wrapper--portrait">
       <div class="uppy-container" id="my-uppy"></div>
       <div class="upload-preview d-none" id="my-preview">
           <img src="" id="my-preview-img" alt="Preview">
           <div class="preview-actions">
               <button type="button" class="preview-btn zoom" onclick="zoom()"><i class="fa fa-search-plus"></i></button>
               <button type="button" class="preview-btn change" onclick="change()"><i class="fa fa-sync-alt"></i></button>
               <button type="button" class="preview-btn remove" onclick="remove()"><i class="fa fa-trash"></i></button>
           </div>
       </div>
       <div class="change-overlay d-none" id="my-change-overlay">
           <button type="button" class="cancel-change-btn" onclick="cancel()"><i class="fa fa-times"></i></button>
       </div>
   </div>
*/

.upload-wrapper {
    position: relative;
    margin: 0 auto;
    overflow: visible;
}

/* Size Variants */
.upload-wrapper--portrait {
    width: 150px;
    height: 180px;
}

.upload-wrapper--landscape {
    width: 200px;
    height: 150px;
}

.upload-wrapper--square {
    width: 150px;
    height: 150px;
}

.upload-wrapper--document {
    width: 220px;
    height: 160px;
}

.upload-wrapper--wide {
    width: 280px;
    height: 180px;
}

/* ============================================
   UPPY CONTAINER - Upload Area
   ============================================ */

.upload-wrapper .uppy-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.upload-wrapper .uppy-container:hover {
    border-color: var(--uppy-accent);
    box-shadow: 0 0 0 3px rgba(var(--uppy-accent-rgb), 0.1);
}

/* Uppy Dashboard - Fill container */
.upload-wrapper .uppy-container .uppy-Dashboard {
    width: 100% !important;
    height: 100% !important;
}

.upload-wrapper .uppy-container .uppy-Dashboard-inner {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
}

/* Hide status bar and lines */
.upload-wrapper .uppy-container .uppy-StatusBar,
.upload-wrapper .uppy-container .uppy-Dashboard-progressindicators,
.upload-wrapper .uppy-container .uppy-DashboardContent-bar {
    display: none !important;
    border: none !important;
    height: 0 !important;
}

.upload-wrapper .uppy-container .uppy-Dashboard-AddFiles,
.upload-wrapper .uppy-container .uppy-Dashboard-inner,
.upload-wrapper .uppy-container .uppy-Dashboard-innerWrap {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Center icons inside buttons */
.upload-wrapper .uppy-container .uppy-DashboardTab {
    margin: 0 !important;
    padding: 0 !important;
}

.upload-wrapper .uppy-container .uppy-DashboardTab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--bg-primary) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.upload-wrapper .uppy-container .uppy-DashboardTab-btn:hover {
    border-color: var(--uppy-accent) !important;
    box-shadow: 0 2px 6px rgba(var(--uppy-accent-rgb), 0.2) !important;
}

.upload-wrapper .uppy-container .uppy-DashboardTab-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.upload-wrapper .uppy-container .uppy-DashboardTab-btn svg {
    margin: 0 auto !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--uppy-accent) !important;
}

/* Hide all text elements */
.upload-wrapper .uppy-container .uppy-Dashboard-AddFiles-title,
.upload-wrapper .uppy-container .uppy-Dashboard-AddFiles-info,
.upload-wrapper .uppy-container .uppy-Dashboard-note,
.upload-wrapper .uppy-container .uppy-DashboardTab-name,
.upload-wrapper .uppy-container .uppy-Dashboard-dropFilesHereHint,
.upload-wrapper .uppy-container .uppy-Dashboard-browse,
.upload-wrapper .uppy-container .uppy-Dashboard-poweredBy,
.upload-wrapper .uppy-container .uppy-DashboardTabs-title {
    display: none !important;
}

/* ============================================
   UPLOAD PREVIEW - Hover Overlay Buttons
   ============================================ */

.upload-wrapper .upload-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    border: 2px solid #28a745;  /* Success green - fixed, not themed */
    border-radius: 8px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.upload-wrapper .upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    transition: transform 0.2s;
}

.upload-wrapper .upload-preview:hover img {
    transform: scale(1.03);
}

/* Overlay with buttons - appears on hover */
.upload-wrapper .upload-preview .preview-actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 6px;
}

.upload-wrapper .upload-preview:hover .preview-actions {
    opacity: 1;
}

/* Circular action buttons */
.preview-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #fff;
}

.preview-btn:hover {
    transform: scale(1.1);
}

.preview-btn.zoom {
    background: rgba(25, 118, 210, 0.8);
    border-color: #1976d2;
}

.preview-btn.zoom:hover {
    background: #1976d2;
}

.preview-btn.change {
    background: rgba(var(--uppy-accent-rgb), 0.8);
    border-color: var(--uppy-accent);
}

.preview-btn.change:hover {
    background: var(--uppy-accent);
}

.preview-btn.remove {
    background: rgba(220, 53, 69, 0.8);
    border-color: #dc3545;
}

.preview-btn.remove:hover {
    background: #dc3545;
}

/* Success checkmark badge */
.upload-wrapper .upload-preview::after {
    content: '\2713';
    position: absolute;
    top: 6px;
    right: 6px;
    background: #28a745;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 2;
}

/* Mobile - always show buttons */
@media (max-width: 768px) {
    .upload-wrapper .upload-preview .preview-actions {
        opacity: 1;
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
        align-items: flex-end;
        padding-bottom: 8px;
    }

    .preview-btn {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }
}

/* ============================================
   CHANGE MODE - Overlay Pattern
   ============================================

   When user clicks "Change", the current photo is dimmed
   and Uppy appears on top for selecting new photo.
   Cancel button allows reverting to original.
*/

.upload-wrapper.change-mode .upload-preview {
    z-index: 1;
    border-color: transparent !important;
}

.upload-wrapper.change-mode .upload-preview img {
    opacity: 0.3;
    filter: grayscale(50%);
}

.upload-wrapper.change-mode .upload-preview .preview-actions {
    display: none;
}

.upload-wrapper.change-mode .upload-preview::after {
    display: none;
}

.upload-wrapper.change-mode .uppy-container {
    z-index: 2;
    background: transparent !important;
    border-color: var(--uppy-accent) !important;
}

.upload-wrapper.change-mode .uppy-container .uppy-Dashboard-inner {
    background: transparent !important;
}

/* Change overlay with cancel button */
.change-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
}

.cancel-change-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #dc3545;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: all 0.2s;
    pointer-events: auto;
}

.cancel-change-btn:hover {
    background: #c82333;
    transform: scale(1.1);
}

/* ============================================
   ZOOM MODAL / LIGHTBOX
   ============================================

   Fullscreen image viewer with prominent close button.

   HTML Structure:
   <div class="zoom-modal" id="zoomModal">
       <span class="zoom-close" onclick="closeZoom()">&times;</span>
       <img src="" id="zoomImg">
   </div>

   JavaScript:
   function zoomImg(src) {
       if (src) {
           document.getElementById('zoomImg').src = src;
           document.getElementById('zoomModal').classList.add('active');
       }
   }
   function closeZoom() {
       document.getElementById('zoomModal').classList.remove('active');
   }
*/

.zoom-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.zoom-modal.active {
    display: flex;
}

.zoom-modal img {
    max-width: 90%;
    max-height: 85%;
    border: 4px solid #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.zoom-close {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #333;
    font-size: 28px;
    cursor: pointer;
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    transition: all 0.2s ease;
    border: none;
}

.zoom-close:hover {
    background: #dc3545;
    color: #fff;
    transform: scale(1.1);
}

/* ============================================
   IMAGE THUMBNAIL - Display Images with Zoom
   ============================================

   ⚠️  STANDARD FOR ALL DISPLAYED IMAGES IN PROJECT
   ================================================
   This is the MANDATORY standard for displaying any
   uploaded/existing images across the entire portal.

   MUST BE FOLLOWED STRICTLY in all templates.

   FEATURES:
   - Green border (#28a745) indicating uploaded/verified
   - Hover effect with zoom scale
   - Overlay with zoom button on hover
   - Mobile: overlay always visible
   - Proportional zoom button (doesn't cover image)

   SIZE VARIANTS:
   --small   : 80x60px   - Compact lists, tables
   --medium  : 130x95px  - Card displays, member info (RECOMMENDED)
   --large   : 160x120px - Detail views, prominent display

   HTML STRUCTURE (REQUIRED):
   ─────────────────────────────────────────────────
   <div class="image-thumbnail image-thumbnail--medium"
        onclick="zoomImg('photo-url.jpg')">
       <img src="photo-url.jpg" alt="Description">
       <div class="thumbnail-overlay">
           <button type="button" class="preview-btn zoom">
               <i class="fa fa-search-plus"></i>
           </button>
       </div>
   </div>
   ─────────────────────────────────────────────────

   CONTAINER FOR MULTIPLE THUMBNAILS:
   ─────────────────────────────────────────────────
   <div class="image-thumbnails">
       <div class="image-thumbnail image-thumbnail--medium">...</div>
       <div class="image-thumbnail image-thumbnail--medium">...</div>
   </div>
   ─────────────────────────────────────────────────

   ZOOM MODAL REQUIRED (add once per page):
   ─────────────────────────────────────────────────
   <div class="zoom-modal" id="zoomModal">
       <span class="zoom-close" onclick="closeZoom()">&times;</span>
       <img src="" id="zoomImg">
   </div>

   <script>
   function zoomImg(src) {
       if (src) {
           document.getElementById('zoomImg').src = src;
           document.getElementById('zoomModal').classList.add('active');
       }
   }
   function closeZoom() {
       document.getElementById('zoomModal').classList.remove('active');
   }
   // Close on click outside
   document.getElementById('zoomModal')?.addEventListener('click', function(e) {
       if (e.target === this) closeZoom();
   });
   </script>
   ─────────────────────────────────────────────────
*/

/* Container for multiple thumbnails */
.image-thumbnails {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Base thumbnail styles */
.image-thumbnail {
    position: relative;
    display: inline-block;
    border: 2px solid #28a745;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

.image-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.image-thumbnail:hover img {
    transform: scale(1.05);
}

/* Overlay - appears on hover */
.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.image-thumbnail:hover .thumbnail-overlay {
    opacity: 1;
}

/* Zoom button - proportional size */
.image-thumbnail .preview-btn.zoom {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

/* ── SIZE VARIANTS ────────────────────────────── */

/* Small: 80x60px - Compact lists, tables */
.image-thumbnail--small {
    width: 80px;
    height: 60px;
}

.image-thumbnail--small .preview-btn.zoom {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

/* Medium: 130x95px - Card displays (RECOMMENDED) */
.image-thumbnail--medium {
    width: 130px;
    height: 95px;
}

.image-thumbnail--medium .preview-btn.zoom {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

/* Large: 160x120px - Detail views */
.image-thumbnail--large {
    width: 160px;
    height: 120px;
}

.image-thumbnail--large .preview-btn.zoom {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

/* ── MOBILE RESPONSIVE ────────────────────────── */

@media (max-width: 768px) {
    /* Overlay always visible on touch devices */
    .image-thumbnail .thumbnail-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 70%);
        align-items: flex-end;
        padding-bottom: 6px;
    }

    /* Smaller buttons on mobile */
    .image-thumbnail .preview-btn.zoom {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }

    .image-thumbnail--small .preview-btn.zoom {
        width: 22px;
        height: 22px;
        font-size: 9px;
    }
}

@media (max-width: 400px) {
    /* Reduce thumbnail sizes on very small screens */
    .image-thumbnails {
        gap: 6px;
    }

    .image-thumbnail--medium {
        width: 100px;
        height: 75px;
    }

    .image-thumbnail--large {
        width: 130px;
        height: 95px;
    }
}

/* ============================================
   LEGACY SUPPORT - Original Styles
   ============================================

   These styles support the original Uppy structure
   where styling was applied directly to Uppy elements.
   Use upload-wrapper for new implementations.
*/

.uppy-Dashboard {
    width: 100% !important;
    font-family: inherit !important;
}

.uppy-Dashboard-inner {
    border-radius: 8px !important;
    border: 2px solid var(--border-color) !important;
    background: var(--bg-secondary) !important;
    min-height: 120px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    overflow: visible !important;
}

.uppy-Dashboard-inner:hover {
    border-color: var(--uppy-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--uppy-accent-rgb), 0.1) !important;
}

.uppy-Dashboard-innerWrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
}

/* Hide all text - icons only */
.uppy-Dashboard-AddFiles-title,
.uppy-Dashboard-AddFiles-info,
.uppy-Dashboard-note,
.uppy-DashboardTab-name,
.uppy-Dashboard-dropFilesHereHint,
.uppy-Dashboard-browse,
.uppy-StatusBar,
.uppy-StatusBar-status,
.uppy-StatusBar-statusPrimary,
.uppy-StatusBar-statusSecondary,
.uppy-StatusBar-content,
.uppy-DashboardContent-bar,
.uppy-DashboardContent-title,
.uppy-Dashboard-poweredBy {
    display: none !important;
}

/* AddFiles area - centered icons */
.uppy-Dashboard-AddFiles {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.uppy-Dashboard-AddFiles-list,
.uppy-DashboardTabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

.uppy-DashboardTabs-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* MOBILE: Force horizontal icons */
@media (max-width: 768px) {
    .uppy-Dashboard .uppy-Dashboard-AddFiles-list,
    .uppy-Dashboard .uppy-DashboardTabs,
    .uppy-Dashboard .uppy-DashboardTabs-list,
    .uppy-Dashboard-inner .uppy-DashboardTabs-list,
    [data-uppy-dashboard] .uppy-DashboardTabs-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .uppy-Dashboard .uppy-DashboardTab,
    .uppy-DashboardTabs-list .uppy-DashboardTab {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        width: auto !important;
    }

    .uppy-Dashboard .uppy-DashboardTab-btn,
    .uppy-DashboardTab .uppy-DashboardTab-btn {
        width: 48px !important;
        height: 48px !important;
        padding: 0.5rem !important;
        flex-direction: column !important;
    }

    .uppy-DashboardTab-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    .uppy-size--md .uppy-DashboardTabs-list,
    .uppy-size--sm .uppy-DashboardTabs-list,
    .uppy-Dashboard--modal .uppy-DashboardTabs-list {
        flex-direction: row !important;
    }
}

/* Icon buttons */
.uppy-DashboardTab {
    margin: 0 !important;
    width: auto !important;
}

.uppy-DashboardTab-btn {
    background: var(--bg-primary) !important;
    border: 2px solid var(--border-color) !important;
    padding: 0.75rem !important;
    border-radius: 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.uppy-DashboardTab-btn:hover {
    border-color: var(--uppy-accent) !important;
    box-shadow: 0 2px 6px rgba(var(--uppy-accent-rgb), 0.2) !important;
}

.uppy-DashboardTab-btn[aria-selected="true"] {
    border-color: var(--uppy-accent) !important;
    background: var(--uppy-accent-bg) !important;
}

.uppy-DashboardTab-btn svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--uppy-accent) !important;
}

.uppy-DashboardTab-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Webcam styles */
.uppy-Webcam-container {
    background: #1a1a1a !important;
}

.uppy-Webcam-buttonContainer {
    background: rgba(0,0,0,0.5) !important;
    padding: 12px !important;
}

.uppy-Webcam-button {
    background: var(--uppy-accent) !important;
    border: none !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
}

.uppy-Webcam-button:hover {
    background: var(--uppy-accent-hover) !important;
}

.uppy-Webcam-button svg {
    fill: white !important;
}

/* ============================================
   STANDALONE UPLOAD PREVIEW
   ============================================

   For use outside of upload-wrapper context.
*/

.upload-preview {
    border: 2px solid #28a745;  /* Success green - fixed, not themed */
    border-radius: 8px;
    background: var(--bg-secondary);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.upload-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s;
}

.upload-preview:hover img {
    transform: scale(1.03);
}

.upload-preview .preview-actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 6px;
}

.upload-preview:hover .preview-actions {
    opacity: 1;
}

.upload-preview::after {
    content: '\2713';
    position: absolute;
    top: 8px;
    right: 8px;
    background: #28a745;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 2;
}

@media (max-width: 768px) {
    .upload-preview .preview-actions {
        opacity: 1;
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
        align-items: flex-end;
        padding-bottom: 10px;
    }
}

/* ============================================
   ZOOMABLE IMAGE - Click to Zoom Component
   ============================================ */

.zoomable-image {
    position: relative;
    display: inline-block;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 8px;
}

.zoomable-image img {
    display: block;
    transition: transform 0.2s ease;
}

.zoomable-image:hover img {
    transform: scale(1.03);
}

.zoomable-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: inherit;
    pointer-events: none;
}

.zoomable-image::before {
    content: '\f00e';
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', FontAwesome;
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    color: #fff;
    font-size: 24px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.zoomable-image:hover::after {
    opacity: 1;
}

.zoomable-image:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.zoomable-image.badge-style::after {
    display: none;
}

.zoomable-image.badge-style::before {
    top: auto;
    left: auto;
    bottom: 6px;
    right: 6px;
    transform: none;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0.8;
}

.zoomable-image.badge-style:hover::before {
    opacity: 1;
    transform: none;
    background: #1976d2;
}

@media (max-width: 768px) {
    .zoomable-image.badge-style::before {
        opacity: 1;
    }
}