/* ===========================================
   LANDLORDPRO ICON SYSTEM
   ===========================================
   
   This file manages the icon system for navigation and UI elements.
   
   ICON TYPES:
   - SVG icons (default): Vector icons in ./icons/*.svg
   - Photo icons (future): Replace with ./icons/photo/*.png or .jpg
   
   TO SWITCH TO PHOTO ICONS:
   1. Add photo images to ./icons/photo/ folder (recommended: 128x128px)
   2. Uncomment the "PHOTO ICON OVERRIDES" section below
   3. Comment out or remove the SVG background-image lines
   
   =========================================== */

/* Base nav icon styling */
.nav-item .icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon image container */
.nav-item .icon-img {
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    transition: transform 0.2s ease, filter 0.2s ease;
    filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.25));
}

.nav-item:hover .icon-img {
    transform: scale(1.1);
}

.nav-item.active .icon-img {
    filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* ===========================================
   SVG ICON DEFINITIONS (Backup - commented out)
   ===========================================
.icon-dashboard {
    background-image: url('../icons/dashboard.svg');
}

.icon-assets {
    background-image: url('../icons/assets.svg');
}

.icon-rent-roll {
    background-image: url('../icons/rent-roll.svg');
}

.icon-receipts {
    background-image: url('../icons/receipts.svg');
}

.nav-item .icon-tenants {
    background-image: url('../icons/tenants.svg');
}

.icon-reports {
    background-image: url('../icons/reports.svg');
}
*/

/* ===========================================
   PHOTO ICON DEFINITIONS (Active)
   =========================================== */
.icon-dashboard {
    background-image: url('../icons/photo/dashboard.png');
}

.icon-assets {
    background-image: url('../icons/photo/assets.png');
}

.icon-rent-roll {
    background-image: url('../icons/photo/rent-roll.png');
}

.icon-receipts {
    background-image: url('../icons/photo/receipts.png');
}

.nav-item .icon-tenants {
    background-image: url('../icons/photo/tenants.png');
}

.icon-reports {
    background-image: url('../icons/photo/reports.png');
}

/* ===========================================
   PHOTO ICON OVERRIDES (Future)
   Uncomment this section and add your photo icons
   to ../icons/photo/ folder
   =========================================== 

.icon-dashboard {
    background-image: url('../icons/photo/dashboard.png');
}

.icon-assets {
    background-image: url('../icons/photo/assets.png');
}

.icon-rent-roll {
    background-image: url('../icons/photo/rent-roll.png');
}

.icon-receipts {
    background-image: url('../icons/photo/receipts.png');
}

.nav-item .icon-tenants {
    background-image: url('../icons/photo/tenants.png');
}

.icon-reports {
    background-image: url('../icons/photo/reports.png');
}

*/

/* ===========================================
   SECTION HEADER ICONS
   For use in page section headers
   =========================================== */
.section-icon {
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
}

.section-icon-sm {
    width: 32px;
    height: 32px;
}

.section-icon-lg {
    width: 64px;
    height: 64px;
}

/* ===========================================
   UTILITY ICON SIZES
   =========================================== */
.icon-xs { width: 16px; height: 16px; }
.icon-sm { width: 24px; height: 24px; }
.icon-md { width: 32px; height: 32px; }
.icon-lg { width: 48px; height: 48px; }
.icon-xl { width: 64px; height: 64px; }

/* ===========================================
   EMBEDDED PHOTO ICONS
   For use inline or in content areas
   =========================================== */
.photo-icon {
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.2));
}

.photo-icon-xs { width: 16px; height: 16px; }
.photo-icon-sm { width: 24px; height: 24px; }
.photo-icon-md { width: 32px; height: 32px; }
.photo-icon-lg { width: 48px; height: 48px; }
.photo-icon-xl { width: 64px; height: 64px; }
.photo-icon-2xl { width: 80px; height: 80px; }
.photo-icon-3xl { width: 96px; height: 96px; }

/* Photo icon types */
.photo-icon-assets { background-image: url('../icons/photo/assets.png'); }
.photo-icon-dashboard { background-image: url('../icons/photo/dashboard.png'); }
.photo-icon-rent-roll { background-image: url('../icons/photo/rent-roll.png'); }
.photo-icon-receipts { background-image: url('../icons/photo/receipts.png'); }
.photo-icon-tenants { background-image: url('../icons/photo/tenants.png'); }
.photo-icon-reports { background-image: url('../icons/photo/reports.png'); }

/* ===========================================
   NEW ICONS: Evictions, Communications, Repairs
   =========================================== */
.nav-item .icon-evictions {
    background-image: url('../icons/photo/evictions.png');
    background-size: 130%;
}

.nav-item .icon-communications {
    background-image: url('../icons/photo/communications.png');
    background-size: 110%;
}

.nav-item .icon-repairs {
    background-image: url('../icons/photo/repairs.png');
    background-size: 130%;
}

/* Tenants subject sits small in frame — bump to match peers */
.nav-item .icon-tenants {
    background-size: 130%;
}