/**
 * Navigation Icons - Tabler Icons System
 * Production-approved SVG icons for CityChallenge Forms
 * Clean, consistent icon implementation
 */

/* Base Navigation Icon Styling */
.sidebar-nav-icon {
    width: 20px;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sidebar-nav-icon::before {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s ease;
}

/* Dashboard Icon - Tabler Dashboard */
.sidebar-nav-link[href*="index.html"] .sidebar-nav-icon::before,
.sidebar-nav-link[data-page="dashboard"] .sidebar-nav-icon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%230066cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 4h6v8H4zM14 4h6v16h-6zM4 16h6v4H4z"/%3E%3C/svg%3E');
}

/* Information Icon - Tabler Info Circle */
.sidebar-nav-link[href*="info.html"] .sidebar-nav-icon::before,
.sidebar-nav-link[data-page="information"] .sidebar-nav-icon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%230066cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="9"/%3E%3Cpath d="M12 8v4"/%3E%3Cpath d="M12 16h.01"/%3E%3C/svg%3E');
}

/* Forms Icon - Tabler File Document */
.sidebar-nav-link[href*="forms.html"] .sidebar-nav-icon::before,
.sidebar-nav-link[data-page="forms"] .sidebar-nav-icon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%230066cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14 3v4a1 1 0 0 0 1 1h4"/%3E%3Cpath d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/%3E%3Cpath d="M9 9l1 0"/%3E%3Cpath d="M9 13l6 0"/%3E%3Cpath d="M9 17l6 0"/%3E%3C/svg%3E');
}

/* Form Builder Icon - Tabler Forms */
.sidebar-nav-link[href*="form-builder.html"] .sidebar-nav-icon::before,
.sidebar-nav-link[data-page="form-builder"] .sidebar-nav-icon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%230066cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"/%3E%3Cpath d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"/%3E%3Cpath d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"/%3E%3Cpath d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"/%3E%3Cpath d="M17 12h0.01"/%3E%3Cpath d="M13 12h0.01"/%3E%3C/svg%3E');
}

/* Editor Icon - Tabler Edit */
.sidebar-nav-link[href*="editor.html"] .sidebar-nav-icon::before,
.sidebar-nav-link[data-page="editor"] .sidebar-nav-icon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%230066cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/%3E%3Cpath d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"/%3E%3Cpath d="M16 5l3 3"/%3E%3C/svg%3E');
}

/* Admin Icon - Tabler Settings */
.sidebar-nav-link[href*="admin.html"] .sidebar-nav-icon::before,
.sidebar-nav-link[data-page="admin"] .sidebar-nav-icon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%230066cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/%3E%3Ccircle cx="12" cy="12" r="3"/%3E%3C/svg%3E');
}

/* Home Icon - Tabler Home */
.sidebar-nav-link[href*="home.html"] .sidebar-nav-icon::before,
.sidebar-nav-link[data-page="home"] .sidebar-nav-icon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%230066cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 12l-2 0l9 -9l9 9l-2 0"/%3E%3Cpath d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/%3E%3Cpath d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/%3E%3C/svg%3E');
}

/* Active and Hover States */
.sidebar-nav-link.active .sidebar-nav-icon::before,
.sidebar-nav-link:hover .sidebar-nav-icon::before {
    transform: scale(1.05);
    opacity: 0.8;
}

/* Responsive Icon Sizing */
.app-layout.sidebar-collapsed .sidebar-nav-icon::before {
    width: 22px;
    height: 22px;
}

@media (max-width: 767px) {
    .sidebar-nav-icon::before {
        width: 18px;
        height: 18px;
    }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .sidebar-nav-icon::before {
        filter: contrast(2);
    }
}