/**
 * UI Scale 80% Implementation
 * Date: August 17, 2025
 * 
 * Purpose: Reduce all UI elements to 80% of their original size
 * while preserving all functionality and interactions.
 * 
 * Strategy: Set root font-size to 80% (12.8px from 16px default)
 * This automatically scales all rem-based values.
 * Manual adjustments for critical px-based values.
 */

/* ============================================
   ROOT FONT SIZE SCALING
   ============================================ */

/**
 * Scale the root font size to 80% of browser default
 * Browser default: 16px
 * 80% scale: 12.8px
 * 
 * This affects all rem units throughout the application
 */
:root {
    font-size: 12.8px; /* 80% of 16px */
}

/* Ensure html doesn't override our root setting */
html {
    font-size: 12.8px;
}

/* ============================================
   FIXED HEADER ADJUSTMENTS
   ============================================ */

/**
 * The fixed header uses pixel values that need manual scaling
 * Original: 105px (70px header + 35px spacing)
 * Scaled: 84px (56px header + 28px spacing)
 */
.container.with-fixed-header {
    padding-top: 84px !important; /* 80% of 105px */
    transform-origin: center 84px !important; /* Match the padding */
}

/* Scroll padding adjustment for anchor links */
html {
    scroll-padding-top: 84px !important; /* 80% of 105px */
}

/* ============================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    /**
     * Mobile header adjustments
     * Original: 90px (60px header + 30px spacing)
     * Scaled: 72px (48px header + 24px spacing)
     */
    .container.with-fixed-header {
        padding-top: 72px !important; /* 80% of 90px */
        transform-origin: center 72px !important;
    }
    
    html {
        scroll-padding-top: 72px !important; /* 80% of 90px */
    }
}

/* ============================================
   BORDER AND SHADOW SCALING
   ============================================ */

/**
 * Borders are typically 1px and shouldn't go below that
 * Keep them at 1px for crispness
 */

/* Shadows can be scaled for proportional appearance */
:root {
    --shadow-sm: 0 0.8px 2.4px rgba(0,0,0,0.08) !important;
    --shadow-md: 0 3.2px 4.8px rgba(0,0,0,0.1) !important;
    --shadow-lg: 0 8px 12px rgba(0,0,0,0.1) !important;
}

[data-theme="dark"] {
    --shadow-sm: 0 0.8px 2.4px rgba(0,0,0,0.3) !important;
    --shadow-md: 0 3.2px 4.8px rgba(0,0,0,0.4) !important;
    --shadow-lg: 0 8px 12px rgba(0,0,0,0.5) !important;
}

/* ============================================
   SPECIFIC ELEMENT ADJUSTMENTS
   ============================================ */

/* Search input width in header - scale down */
.header-fixed .search-input {
    width: 160px !important; /* 80% of 200px */
}

@media (max-width: 768px) {
    .header-fixed .search-input {
        width: 96px !important; /* 80% of 120px */
    }
}

/* Theme toggle and profile button sizes */
.header-fixed .theme-toggle,
.header-fixed .profile-link {
    width: 28.8px !important; /* 80% of 36px */
    height: 28.8px !important;
    font-size: 14.4px !important; /* 80% of 18px */
}

/* ============================================
   ZOOM CONTROLS ADJUSTMENT
   ============================================ */

/* Zoom controls should remain easily clickable */
#zoomControls {
    /* Keep zoom controls at original size for usability */
    font-size: 16px !important;
}

#zoomControls button {
    /* Maintain touch target size */
    min-width: 44px !important;
    min-height: 44px !important;
}

/* ============================================
   DRAG & DROP PRESERVATION
   ============================================ */

/**
 * Drag & drop uses getBoundingClientRect() which automatically
 * accounts for any scaling. No adjustments needed.
 */

/* ============================================
   COLUMN AND CARD SIZING
   ============================================ */

/* Column minimum width - scale proportionally */
.column-wrapper {
    min-width: 224px !important; /* 80% of 280px */
    max-width: 224px !important;
}

/* ============================================
   MODAL ADJUSTMENTS
   ============================================ */

.modal-content {
    /* Scale modal max-width */
    max-width: 320px !important; /* 80% of 400px */
}

@media (max-width: 768px) {
    .modal-content {
        /* On mobile, use more screen width */
        max-width: 90% !important;
    }
}

/* ============================================
   RESIZE HANDLE ADJUSTMENTS
   ============================================ */

/* Keep resize handles visible and usable */
.resize-handle {
    width: 48px !important; /* 80% of 60px */
    height: 16px !important; /* Keep height for usability */
}

.resize-handle-corner {
    width: 16px !important; /* 80% of 20px */
    height: 16px !important;
}

/* ============================================
   BUTTON MINIMUM SIZES
   ============================================ */

/* Ensure buttons remain clickable on touch devices */
@media (hover: none) and (pointer: coarse) {
    button, .btn, .board-action-btn, .bulk-action-btn {
        min-height: 44px !important; /* Touch target minimum */
    }
}

/* ============================================
   TYPOGRAPHY FINE-TUNING
   ============================================ */

/* Ensure readability at smaller sizes */
.mini-card-description {
    font-size: 0.85rem !important; /* Slightly larger for readability */
}

.empty-column {
    font-size: 0.9rem !important; /* Keep readable */
}

/* ============================================
   ANIMATION TIMING
   ============================================ */

/* Animations remain the same - no scaling needed */

/* ============================================
   FEATURE PRESERVATION CHECKLIST
   ============================================ */

/**
 * ✅ Drag & Drop: Coordinates auto-adjust via getBoundingClientRect()
 * ✅ Fixed Header: Padding adjusted to 80% values
 * ✅ Dark Mode: Unaffected, colors remain the same
 * ✅ Zoom Functionality: Still works, scales from new base
 * ✅ Visual Containers: Layout unaffected
 * ✅ Nested Kanban: Structure preserved
 * ✅ Search: Functional with scaled input
 * ✅ Theme Toggle: Scaled but functional
 * ✅ Column Operations: Width adjusted proportionally
 * ✅ Resize Handles: Scaled but still usable
 * ✅ Touch Targets: Minimum sizes preserved for mobile
 * ✅ Modals: Scaled appropriately
 * ✅ Container Width: Still 95vw (unaffected by font scaling)
 */

/* ============================================
   DEBUGGING HELPERS
   ============================================ */

/* Uncomment to verify scaling is applied */
/* body::after {
    content: "UI Scale: 80%";
    position: fixed;
    top: 10px;
    right: 10px;
    background: yellow;
    color: black;
    padding: 5px;
    z-index: 10000;
    font-size: 16px;
} */