/* ============================================================
AAC ICON LIBRARY v1
Replaces every emoji icon in V104 with brand-compliant SVGs.
Visual identity LOCKED: navy (#19195F) stroke/fill on light
surfaces, gold (#C9A84C) accent only. NO heavy navy washes.
============================================================
Usage: include this CSS file once in index.html .
Then replace emoji spans/buttons with:
See EMOJI_REPLACEMENT_MAP.md for line-by-line replacements.
============================================================ */
.aac-ic {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
flex-shrink: 0;
}
.aac-ic-sm { width: 14px; height: 14px; }
.aac-ic-md { width: 18px; height: 18px; }
.aac-ic-lg { width: 22px; height: 22px; }
/* Floppy / Save — replaces 💾 */
.aac-ic-save {
background-image: url("data:image/svg+xml;utf8,");
}
/* Pushpin / Site photo — replaces 📌 */
.aac-ic-pin {
background-image: url("data:image/svg+xml;utf8,");
}
/* Microphone / Voice — replaces 🎤 */
.aac-ic-mic {
background-image: url("data:image/svg+xml;utf8,");
}
/* Folder / Load — replaces 📁 */
.aac-ic-folder {
background-image: url("data:image/svg+xml;utf8,");
}
/* Trash / Delete — replaces 🗑️ */
.aac-ic-trash {
background-image: url("data:image/svg+xml;utf8,");
}
/* Paperclip / Attach — replaces 📎 */
.aac-ic-clip {
background-image: url("data:image/svg+xml;utf8,");
}
/* Sparkle / AI — replaces ✨ (gold accent for AI features) */
.aac-ic-ai {
background-image: url("data:image/svg+xml;utf8,");
}
/* Plus / Add — for + verbs */
.aac-ic-plus {
background-image: url("data:image/svg+xml;utf8,");
}
/* Camera / Photo capture */
.aac-ic-camera {
background-image: url("data:image/svg+xml;utf8,");
}
/* Help / Question circle */
.aac-ic-help {
background-image: url("data:image/svg+xml;utf8,");
}
/* Users / Team */
.aac-ic-team {
background-image: url("data:image/svg+xml;utf8,");
}
/* Bell / Notifications */
.aac-ic-bell {
background-image: url("data:image/svg+xml;utf8,");
}
/* Check circle — positive / saved */
.aac-ic-check {
background-image: url("data:image/svg+xml;utf8,");
}
/* Document / Estimate */
.aac-ic-doc {
background-image: url("data:image/svg+xml;utf8,");
}
/* User-plus / Lead */
.aac-ic-userplus {
background-image: url("data:image/svg+xml;utf8,");
}
/* Phone — Log call */
.aac-ic-phone {
background-image: url("data:image/svg+xml;utf8,");
}
/* Hardhat / Job */
.aac-ic-hardhat {
background-image: url("data:image/svg+xml;utf8,");
}
/* Calculator / Estimate */
.aac-ic-calc {
background-image: url("data:image/svg+xml;utf8,");
}
/* Dollar / Invoice */
.aac-ic-dollar {
background-image: url("data:image/svg+xml;utf8,");
}
/* Clock / Time entry */
.aac-ic-clock {
background-image: url("data:image/svg+xml;utf8,");
}
/* Edit / Change Order */
.aac-ic-edit {
background-image: url("data:image/svg+xml;utf8,");
}
/* Layers / Assembly */
.aac-ic-layers {
background-image: url("data:image/svg+xml;utf8,");
}
/* Settings gear */
.aac-ic-gear {
background-image: url("data:image/svg+xml;utf8,");
}
/* QR / Mobile */
.aac-ic-mobile {
background-image: url("data:image/svg+xml;utf8,");
}
/* Search / Magnifying glass — replaces 🔍 */
.aac-ic-search {
background-image: url("data:image/svg+xml;utf8,");
}
/* Ruler / Measure — replaces 📐 and 📏 */
.aac-ic-ruler {
background-image: url("data:image/svg+xml;utf8,");
}
/* Warning triangle — gold accent for non-error warnings — replaces ⚠️ */
.aac-ic-warn {
background-image: url("data:image/svg+xml;utf8,");
}
/* Warning triangle — red, for explicit error states only */
.aac-ic-warn-red {
background-image: url("data:image/svg+xml;utf8,");
}
/* Speech bubble / Chat — replaces 💬 */
.aac-ic-chat {
background-image: url("data:image/svg+xml;utf8,");
}
/* Bar chart — replaces 📊 */
.aac-ic-chart {
background-image: url("data:image/svg+xml;utf8,");
}
/* Export / Arrow up from tray — replaces 📂 in export contexts */
.aac-ic-export {
background-image: url("data:image/svg+xml;utf8,");
}
/* Receipt / Invoice — replaces 📂 in saved-estimates contexts */
.aac-ic-receipt {
background-image: url("data:image/svg+xml;utf8,");
}
/* Video camera — replaces 🎥 */
.aac-ic-video {
background-image: url("data:image/svg+xml;utf8,");
}
/* Refresh / cyclical arrows — replaces 🔄 */
.aac-ic-refresh {
background-image: url("data:image/svg+xml;utf8,");
}
/* Link / chain — replaces 🔗 */
.aac-ic-link {
background-image: url("data:image/svg+xml;utf8,");
}
/* Mail / envelope — replaces ✉ ✉️ */
.aac-ic-mail {
background-image: url("data:image/svg+xml;utf8,");
}
/* Send / paper plane — replaces 📤 */
.aac-ic-send {
background-image: url("data:image/svg+xml;utf8,");
}
/* Package / box — replaces 📦 */
.aac-ic-package {
background-image: url("data:image/svg+xml;utf8,");
}
/* Button helper — apply to existing buttons that wrapped emoji */
.aac-btn-icon { display: inline-flex; align-items: center; gap: 8px; }
/* When SVG icon used inside a navy-filled button, override stroke to white */
.aac-btn-primary .aac-ic { filter: brightness(0) invert(1); }
/* Small AI badge with sparkle (used in Photo Capture, Voice Input, Blueprint Takeoff) */
.aac-ai-badge {
background: #C9A84C;
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 2px 8px 2px 6px;
border-radius: 10px;
vertical-align: middle;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.aac-ai-badge .aac-ic-ai { width: 10px; height: 10px; }
/* Bolt — replaces 🔩 (tariff/screw indicator) */
.aac-ic-bolt {
background-image: url("data:image/svg+xml;utf8,");
}
/* Download — replaces 📥 */
.aac-ic-download {
background-image: url("data:image/svg+xml;utf8,");
}
/* Status dots (CSS-only, no SVG) — replaces 🟢🟡🔴 */
.aac-status-dot { display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-right:6px; }
.aac-status-dot--ok { background:#16a34a; }
.aac-status-dot--warn { background:#C9A84C; }
.aac-status-dot--err { background:#dc2626; }