/* svg.css — Icon classes using CSS mask with embedded SVG data URIs.
   No external file references; all path data is inlined so the fill
   color is fully controlled by background-color via CSS variables. */

/* Shared base — each icon is a transparent square with a masked
   silhouette that takes its color from background-color. */
.icon-help,
.icon-user,
.icon-users,
.icon-lock,
.icon-exclamation,
.icon-theme-sun,
.icon-theme-moon,
.icon-theme-gs-light,
.icon-theme-gs-dark,
.icon-theme-neutral,
.icon-x-mark,
.icon-check,
.icon-cursor-cross,
.icon-hand-grab,
.icon-arrow-left,
.icon-arrow-right,
.icon-arrow-down,
.icon-arrow-double,
.icon-arrow-double-left,
.icon-save,
.icon-news,
.icon-client,
.icon-search,
.icon-manager,
.icon-expand,
.icon-monitor-screen,
.icon-refresh,
.icon-copy {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Help icon — outlined circle with stroke-only path. Circle + question-mark
   curve use a thinner 1.5 stroke than the dot (kept at 2) so the glyph
   doesn't look bottom-heavy. */
.icon-help {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Single user silhouette — outlined head + shoulders */
.icon-user {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='924 578 200 200'%3E%3Cg%3E%3Cg%3E%3Cpath d='M1082.475,725.451c-4.198-14.654-13.72-27.045-26.326-34.992c-2.487-1.566-5.715-1.313-7.921,0.631c-6.766,5.959-15.138,9.506-24.228,9.506c-9.269,0-17.791-3.686-24.626-9.855c-2.182-1.971-5.393-2.268-7.902-0.734c-12.977,7.924-22.799,20.504-27.082,35.445c-1.151,4.008-0.344,8.328,2.166,11.662c2.516,3.33,6.443,5.291,10.615,5.291h92.523c4.173,0,8.103-1.955,10.618-5.291C1082.823,733.779,1083.626,729.463,1082.475,725.451z' fill='%23000'/%3E%3Cpath d='M1056.981,652.547c0,21.513-14.766,38.955-32.981,38.955c-18.214,0-32.979-17.442-32.979-38.955c0-21.515,14.765-38.951,32.979-38.951C1042.216,613.596,1056.981,631.033,1056.981,652.547z' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='924 578 200 200'%3E%3Cg%3E%3Cg%3E%3Cpath d='M1082.475,725.451c-4.198-14.654-13.72-27.045-26.326-34.992c-2.487-1.566-5.715-1.313-7.921,0.631c-6.766,5.959-15.138,9.506-24.228,9.506c-9.269,0-17.791-3.686-24.626-9.855c-2.182-1.971-5.393-2.268-7.902-0.734c-12.977,7.924-22.799,20.504-27.082,35.445c-1.151,4.008-0.344,8.328,2.166,11.662c2.516,3.33,6.443,5.291,10.615,5.291h92.523c4.173,0,8.103-1.955,10.618-5.291C1082.823,733.779,1083.626,729.463,1082.475,725.451z' fill='%23000'/%3E%3Cpath d='M1056.981,652.547c0,21.513-14.766,38.955-32.981,38.955c-18.214,0-32.979-17.442-32.979-38.955c0-21.515,14.765-38.951,32.979-38.951C1042.216,613.596,1056.981,631.033,1056.981,652.547z' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Multiple users silhouette */
.icon-users {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='928 608 192 136'%3E%3Cg%3E%3Cg%3E%3Cpath d='M984.585,638.942c0,13.999-9.609,25.348-21.462,25.348c-11.852,0-21.459-11.349-21.459-25.348c0-13.998,9.607-25.346,21.459-25.346C974.976,613.596,984.585,624.944,984.585,638.942z' fill='%23000'/%3E%3Cpath d='M987.585,683.641c1.55-0.945,3.265-1.561,5.041-1.855c-3.606-5.088-6.161-10.546-7.637-17.078c-0.404-2.387-3.672-2.667-6.102-0.687c-4.546,3.706-9.849,6.186-15.765,6.186c-6.03,0-11.577-2.399-16.024-6.414c-1.419-1.282-3.51-1.476-5.143-0.479c-8.443,5.158-14.834,13.344-17.622,23.067c-0.749,2.605-0.223,5.42,1.411,7.588c1.636,2.166,4.192,3.443,6.906,3.443h38.668C975.947,692.072,981.41,687.41,987.585,683.641z' fill='%23000'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M1063.416,638.942c0,13.999,9.608,25.348,21.461,25.348c11.854,0,21.46-11.349,21.46-25.348c0-13.998-9.606-25.346-21.46-25.346C1073.024,613.596,1063.416,624.944,1063.416,638.942z' fill='%23000'/%3E%3Cpath d='M1060.415,683.641c-1.55-0.945-3.266-1.561-5.041-1.855c3.606-5.088,6.161-10.546,7.637-17.078c0.405-2.387,3.673-2.667,6.103-0.687c4.546,3.706,9.848,6.186,15.764,6.186c6.029,0,11.577-2.399,16.025-6.414c1.419-1.282,3.51-1.476,5.143-0.479c8.443,5.158,14.834,13.344,17.622,23.067c0.749,2.605,0.223,5.42-1.411,7.588c-1.636,2.166-4.192,3.443-6.906,3.443H1024C1052.053,692.072,1046.59,687.41,1060.415,683.641z' fill='%23000'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M1082.475,725.451c-4.198-14.654-13.72-27.045-26.326-34.992c-2.487-1.566-5.715-1.313-7.921,0.631c-6.766,5.959-15.138,9.506-24.228,9.506c-9.269,0-17.791-3.686-24.626-9.855c-2.182-1.971-5.393-2.268-7.902-0.734c-12.977,7.924-22.799,20.504-27.082,35.445c-1.151,4.008-0.344,8.328,2.166,11.662c2.516,3.33,6.443,5.291,10.615,5.291h92.523c4.173,0,8.103-1.955,10.618-5.291C1082.823,733.779,1083.626,729.463,1082.475,725.451z' fill='%23000'/%3E%3Cpath d='M1056.981,652.547c0,21.513-14.766,38.955-32.981,38.955c-18.214,0-32.979-17.442-32.979-38.955c0-21.515,14.765-38.951,32.979-38.951C1042.216,613.596,1056.981,631.033,1056.981,652.547z' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='928 608 192 136'%3E%3Cg%3E%3Cg%3E%3Cpath d='M984.585,638.942c0,13.999-9.609,25.348-21.462,25.348c-11.852,0-21.459-11.349-21.459-25.348c0-13.998,9.607-25.346,21.459-25.346C974.976,613.596,984.585,624.944,984.585,638.942z' fill='%23000'/%3E%3Cpath d='M987.585,683.641c1.55-0.945,3.265-1.561,5.041-1.855c-3.606-5.088-6.161-10.546-7.637-17.078c-0.404-2.387-3.672-2.667-6.102-0.687c-4.546,3.706-9.849,6.186-15.765,6.186c-6.03,0-11.577-2.399-16.024-6.414c-1.419-1.282-3.51-1.476-5.143-0.479c-8.443,5.158-14.834,13.344-17.622,23.067c-0.749,2.605-0.223,5.42,1.411,7.588c1.636,2.166,4.192,3.443,6.906,3.443h38.668C975.947,692.072,981.41,687.41,987.585,683.641z' fill='%23000'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M1063.416,638.942c0,13.999,9.608,25.348,21.461,25.348c11.854,0,21.46-11.349,21.46-25.348c0-13.998-9.606-25.346-21.46-25.346C1073.024,613.596,1063.416,624.944,1063.416,638.942z' fill='%23000'/%3E%3Cpath d='M1060.415,683.641c-1.55-0.945-3.266-1.561-5.041-1.855c3.606-5.088,6.161-10.546,7.637-17.078c0.405-2.387,3.673-2.667,6.103-0.687c4.546,3.706,9.848,6.186,15.764,6.186c6.029,0,11.577-2.399,16.025-6.414c1.419-1.282,3.51-1.476,5.143-0.479c8.443,5.158,14.834,13.344,17.622,23.067c0.749,2.605,0.223,5.42-1.411,7.588c-1.636,2.166-4.192,3.443-6.906,3.443H1024C1052.053,692.072,1046.59,687.41,1060.415,683.641z' fill='%23000'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M1082.475,725.451c-4.198-14.654-13.72-27.045-26.326-34.992c-2.487-1.566-5.715-1.313-7.921,0.631c-6.766,5.959-15.138,9.506-24.228,9.506c-9.269,0-17.791-3.686-24.626-9.855c-2.182-1.971-5.393-2.268-7.902-0.734c-12.977,7.924-22.799,20.504-27.082,35.445c-1.151,4.008-0.344,8.328,2.166,11.662c2.516,3.33,6.443,5.291,10.615,5.291h92.523c4.173,0,8.103-1.955,10.618-5.291C1082.823,733.779,1083.626,729.463,1082.475,725.451z' fill='%23000'/%3E%3Cpath d='M1056.981,652.547c0,21.513-14.766,38.955-32.981,38.955c-18.214,0-32.979-17.442-32.979-38.955c0-21.515,14.765-38.951,32.979-38.951C1042.216,613.596,1056.981,631.033,1056.981,652.547z' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Newspaper icon — News Manager (Super Admin) nav button. Outlined page
   with a folded corner + text lines, same 24x24 stroke language as the
   help/lock/theme glyphs so it reads as part of the same set. */
.icon-news {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v13a2 2 0 0 0 2 2H6a2 2 0 0 1-2-2z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M17 8h2a1 1 0 0 1 1 1v9a2 2 0 0 1-2 2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cline x1='7' y1='8' x2='14' y2='8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='7' y1='11' x2='14' y2='11' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='7' y1='14' x2='11' y2='14' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v13a2 2 0 0 0 2 2H6a2 2 0 0 1-2-2z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M17 8h2a1 1 0 0 1 1 1v9a2 2 0 0 1-2 2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cline x1='7' y1='8' x2='14' y2='8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='7' y1='11' x2='14' y2='11' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='7' y1='14' x2='11' y2='14' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Client icon — office building (a client is an organization/account, not a
   person). Deliberately distinct from icon-user/icon-users so Client Manager
   and User Manager don't share a glyph. Outlined building with filled windows
   + an arched door, same 24x24 stroke language as the other glyphs. */
.icon-client {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='14' height='18' rx='1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Crect x='8' y='6.5' width='2.6' height='2.6' fill='%23000'/%3E%3Crect x='13.4' y='6.5' width='2.6' height='2.6' fill='%23000'/%3E%3Crect x='8' y='11' width='2.6' height='2.6' fill='%23000'/%3E%3Crect x='13.4' y='11' width='2.6' height='2.6' fill='%23000'/%3E%3Cpath d='M10 21v-3a2 2 0 0 1 4 0v3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='14' height='18' rx='1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Crect x='8' y='6.5' width='2.6' height='2.6' fill='%23000'/%3E%3Crect x='13.4' y='6.5' width='2.6' height='2.6' fill='%23000'/%3E%3Crect x='8' y='11' width='2.6' height='2.6' fill='%23000'/%3E%3Crect x='13.4' y='11' width='2.6' height='2.6' fill='%23000'/%3E%3Cpath d='M10 21v-3a2 2 0 0 1 4 0v3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* Lock icon — padlock outline (password inputs / secured content) */
.icon-lock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='11' width='16' height='10' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='16' r='1.5' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='11' width='16' height='10' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='16' r='1.5' fill='%23000'/%3E%3C/svg%3E");
}

/* Theme icon — sun (light theme) */
.icon-theme-sun {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='1' x2='12' y2='3' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='21' x2='12' y2='23' stroke='%23000' stroke-width='2'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64' stroke='%23000' stroke-width='2'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78' stroke='%23000' stroke-width='2'/%3E%3Cline x1='1' y1='12' x2='3' y2='12' stroke='%23000' stroke-width='2'/%3E%3Cline x1='21' y1='12' x2='23' y2='12' stroke='%23000' stroke-width='2'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36' stroke='%23000' stroke-width='2'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='1' x2='12' y2='3' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='21' x2='12' y2='23' stroke='%23000' stroke-width='2'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64' stroke='%23000' stroke-width='2'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78' stroke='%23000' stroke-width='2'/%3E%3Cline x1='1' y1='12' x2='3' y2='12' stroke='%23000' stroke-width='2'/%3E%3Cline x1='21' y1='12' x2='23' y2='12' stroke='%23000' stroke-width='2'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36' stroke='%23000' stroke-width='2'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

/* Theme icon — moon (dark theme) */
.icon-theme-moon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='%23000'/%3E%3C/svg%3E");
}

/* Theme icon — grayscale-light (right half filled) */
.icon-theme-gs-light {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='%23000'/%3E%3C/svg%3E");
}

/* Theme icon — grayscale-dark (left half filled) */
.icon-theme-gs-dark {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 3a9 9 0 0 0 0 18z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 3a9 9 0 0 0 0 18z' fill='%23000'/%3E%3C/svg%3E");
}

/* Theme icon — neutral (peace sign) */
.icon-theme-neutral {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpolyline points='12,3 12,12 5.64,18.36' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='12' x2='18.36' y2='18.36' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpolyline points='12,3 12,12 5.64,18.36' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='12' x2='18.36' y2='18.36' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* X mark — crossing lines (form validation error) */
.icon-x-mark {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Checkmark — polyline (form validation success / menu selection) */
.icon-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Exclamation — circled warning mark */
.icon-exclamation {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cline x1='12' y1='8' x2='12' y2='13' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cline x1='12' y1='8' x2='12' y2='13' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Left arrow (mirror of .icon-arrow-right: vertex on the left so it points
   left). Was previously drawn with a right-pointing vertex, so it rendered as
   a right arrow. */
.icon-arrow-left {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='12 4 4 12 12 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='12 4 4 12 12 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Right arrow */
.icon-arrow-right {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='12 4 20 12 12 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='12 4 20 12 12 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Crosshair (Monitor > QR Code Lookup's "draw a box" cursor mode toggle,
   see .monitor-qr-mode-btn in home.html) — small center circle with four
   tick marks, same stroke language as the other outline icons. */
.icon-cursor-cross {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cline x1='12' y1='2' x2='12' y2='8' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='16' x2='12' y2='22' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='2' y1='12' x2='8' y2='12' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='16' y1='12' x2='22' y2='12' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cline x1='12' y1='2' x2='12' y2='8' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='16' x2='12' y2='22' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='2' y1='12' x2='8' y2='12' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='16' y1='12' x2='22' y2='12' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Hand/grab (same toggle group's "pan/scroll" mode) — open palm with
   four fingers and an angled thumb, matching the button's own cursor:
   grab. Filled, like most icons in the "shape only needs to be opaque
   for mask-image" category, rather than stroke-outlined — simpler to
   build correctly out of plain rects than as a hand outline path. */
.icon-hand-grab {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='13' width='12' height='8' rx='4' fill='%23000'/%3E%3Crect x='7' y='4' width='2.4' height='11' rx='1.2' fill='%23000'/%3E%3Crect x='10.2' y='2' width='2.4' height='13' rx='1.2' fill='%23000'/%3E%3Crect x='13.4' y='2' width='2.4' height='13' rx='1.2' fill='%23000'/%3E%3Crect x='16.6' y='5' width='2.4' height='10' rx='1.2' fill='%23000'/%3E%3Crect x='2.5' y='14' width='7' height='3' rx='1.5' fill='%23000' transform='rotate(-25 6 15.5)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='13' width='12' height='8' rx='4' fill='%23000'/%3E%3Crect x='7' y='4' width='2.4' height='11' rx='1.2' fill='%23000'/%3E%3Crect x='10.2' y='2' width='2.4' height='13' rx='1.2' fill='%23000'/%3E%3Crect x='13.4' y='2' width='2.4' height='13' rx='1.2' fill='%23000'/%3E%3Crect x='16.6' y='5' width='2.4' height='10' rx='1.2' fill='%23000'/%3E%3Crect x='2.5' y='14' width='7' height='3' rx='1.5' fill='%23000' transform='rotate(-25 6 15.5)'/%3E%3C/svg%3E");
}

/* Down arrow (Monitor > QR Code Lookup's "Scan is ready" cue, see
   .monitor-qr-scan-arrow in home.html) — same vertex/stroke language as
   .icon-arrow-right, rotated a quarter turn. */
.icon-arrow-down {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='4 12 12 20 20 12' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='4 12 12 20 20 12' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Double arrow (two right arrows, report generating / pagination Last) */
.icon-arrow-double {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 4 14 12 6 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='12 4 20 12 12 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 4 14 12 6 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='12 4 20 12 12 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Double-left arrow (mirror of .icon-arrow-double) — pagination First
   control. */
.icon-arrow-double-left {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='18 4 10 12 18 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='12 4 4 12 12 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='18 4 10 12 18 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='12 4 4 12 12 20' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Save/download icon (document with down arrow) */
.icon-save {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 21v-8H7v8' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 3v5h8' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 21v-8H7v8' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 3v5h8' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Manager icon ("sliders"/settings glyph) — small manager icon-buttons
   beside Notice Board's Notices / News & Updates rows (Notices Manager /
   News Manager). Same 24x24 stroke language as the other outline icons. */
.icon-manager {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='4' y1='21' x2='4' y2='14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='4' y1='10' x2='4' y2='3' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='12' y1='21' x2='12' y2='12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='12' y1='8' x2='12' y2='3' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='20' y1='21' x2='20' y2='16' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='20' y1='12' x2='20' y2='3' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='1' y1='14' x2='7' y2='14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='9' y1='8' x2='15' y2='8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='17' y1='16' x2='23' y2='16' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='4' y1='21' x2='4' y2='14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='4' y1='10' x2='4' y2='3' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='12' y1='21' x2='12' y2='12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='12' y1='8' x2='12' y2='3' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='20' y1='21' x2='20' y2='16' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='20' y1='12' x2='20' y2='3' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='1' y1='14' x2='7' y2='14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='9' y1='8' x2='15' y2='8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='17' y1='16' x2='23' y2='16' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Copy icon — two overlapping rounded rectangles (standard "copy to
   clipboard" glyph). Used by the Search sub-nav's copy-Name/Address
   buttons (js/search-copy.js) — same 24x24 outline stroke language as
   .icon-manager/.icon-save/etc. */
.icon-copy {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='9' width='12' height='12' rx='2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M6 15H4.8a1.8 1.8 0 0 1-1.8-1.8V4.8A1.8 1.8 0 0 1 4.8 3h8.4A1.8 1.8 0 0 1 15 4.8V6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='9' width='12' height='12' rx='2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M6 15H4.8a1.8 1.8 0 0 1-1.8-1.8V4.8A1.8 1.8 0 0 1 4.8 3h8.4A1.8 1.8 0 0 1 15 4.8V6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Search magnifying glass */
.icon-search {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Expand — diagonal arrow, used as the click-to-expand affordance beside
   truncated notification text (js/notification-panel.js). Deliberately
   distinct from .icon-arrow-double (report generating) and
   .icon-arrow-right (pagination) — this specifically signals "open a
   popover with the full content," not navigation. */
.icon-expand {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='7' y1='17' x2='17' y2='7' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpolyline points='10 7 17 7 17 14' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='7' y1='17' x2='17' y2='7' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpolyline points='10 7 17 7 17 14' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Monitor screen — desktop display outline (screen + stand), used by the
   "coming to Desktop app" feature-preview placeholder (see
   .feature-preview-* in styles.css). Same 24x24 stroke language as the
   other outline icons. */
.icon-monitor-screen {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='4' width='20' height='13' rx='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cline x1='8' y1='20' x2='16' y2='20' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='12' y1='17' x2='12' y2='20' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='4' width='20' height='13' rx='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cline x1='8' y1='20' x2='16' y2='20' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='12' y1='17' x2='12' y2='20' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Refresh — circular arrow (Users > Activity's manual reload button,
   js/user-manager.js's refreshActivityArea()). Same 24x24 stroke
   language as the other outline icons; the open arc + arrowhead is the
   standard "refresh/reload" glyph. */
.icon-refresh {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpolyline points='21 3 21 9 15 9' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpolyline points='21 3 21 9 15 9' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Progress / loading indicator */
.icon-progress-bars {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("bars.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}