/*
 * app.css — Estilos globais do sistema de OS Isoaço
 *
 * Complementa o Tailwind CSS CDN com regras que precisam
 * de media queries ou seletores que o Tailwind não cobre facilmente.
 */

/* ══════════════════════════════════════════════════════════════════════════
   FIX GLOBAL DE MODAIS — telas com resolução vertical baixa
   ══════════════════════════════════════════════════════════════════════════
   Problema: modais com `flex items-center justify-center` travam em telas
   baixas porque o conteúdo excede a viewport e não há scroll.

   Solução: força overflow-y:auto no backdrop e alinha no topo em telas
   com menos de 700px de altura. Em telas maiores mantém centralizado.

   Funciona para TODOS os modais do sistema sem tocar em cada HTML,
   pois todos seguem o padrão id="modal-*".
*/

/* Qualquer div modal visível (sem .hidden) */
div[id^="modal"]:not(.hidden) {
  overflow-y: auto !important;
}

/* Em telas baixas (< 700px de altura): alinha no topo com padding */
@media (max-height: 699px) {
  div[id^="modal"]:not(.hidden) {
    align-items: flex-start !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* Em telas muito baixas (< 500px): reduz padding interno dos modais */
@media (max-height: 499px) {
  div[id^="modal"]:not(.hidden) > div {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODO PERIGO — máscara visual para exclusão direta pelo master
══════════════════════════════════════════════════════════════════════════ */

/* Borda pulsante vermelha ao redor da viewport */
body.modo-perigo-ativo {
  outline: 3px solid #dc2626;
  outline-offset: -3px;
  animation: pulso-perigo 2s ease-in-out infinite;
}

@keyframes pulso-perigo {
  0%, 100% { outline-color: #dc2626; }
  50%       { outline-color: #7f1d1d; }
}

/* Botões de exclusão — ocultos por padrão, visíveis só no modo perigo */
.btn-excluir-admin {
  display: none !important;
}
body.modo-perigo-ativo .btn-excluir-admin {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
}

/* Cards ficam com cores invertidas (negativo fotográfico) no modo perigo */
body.modo-perigo-ativo .card-os {
  filter: invert(1);
}

/* O botão de excluir é double-invertido para voltar ao vermelho original */
body.modo-perigo-ativo .card-os .btn-excluir-admin {
  filter: invert(1);
}

/* ══════════════════════════════════════════════════════════════════════════
   UTILITÁRIOS GLOBAIS
══════════════════════════════════════════════════════════════════════════ */

/* Truncamento de texto em múltiplas linhas (Tailwind line-clamp) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Toast de notificação (usado pelo app.js) */
#toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

/* Animação suave de entrada dos toasts */
@keyframes slideInRight {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.toast-item {
  animation: slideInRight 0.25s ease-out;
  pointer-events: auto;
}


/* ══════════════════════════════════════════════════════════════════════════
   IDENTIDADE FUNDIÇÃO SANTANA — camada de tema (novembro/2026)
   ══════════════════════════════════════════════════════════════════════════
   As telas foram escritas com as cores "blue-*" do Tailwind. Em vez de
   reescrever 30 arquivos, esta camada REMAPEIA essas classes para a escala
   da marca e aplica a tipografia Poppins. "html ." na frente é só para vencer
   a especificidade do Tailwind (que é injetado depois deste arquivo).
   Cores do manual da Santana: Cinza Ferroso #3C3C3B · Laranja Prosperity
   #E95229 · Vermelho Malagueta #AD1922.
   - O azul do NexOS virou a escala do Cinza Ferroso (chumbo).
   - O vermelho da MARCA (avatar, item ativo do menu) virou o laranja.
   - O vermelho que AVISA (alta prioridade, atraso, excluir) continua
     vermelho, no Vermelho Malagueta da Santana: em laranja ele se
     confundiria com o laranja de "Aguardando compra".
   - Laranja com texto branco por cima usa #C43F1A (5,2:1); o #E95229 puro
     só entra como marca/ícone sobre o chumbo (3,9:1).
   Os nomes "--isoaco-*" ficaram para não mexer no resto do arquivo. */
:root {
  --isoaco-azul: #3C3C3B; --isoaco-azul-profundo: #1F1F1E;
  --isoaco-vermelho: #AD1922; --isoaco-vermelho-bandeira: #AD1922; --isoaco-vermelho-escuro: #8E141C;
  --santana-laranja: #E95229; --santana-laranja-texto: #C43F1A;
  --brand-50:#F4F4F3; --brand-100:#E6E6E4; --brand-200:#CDCDCA; --brand-300:#A9A9A6; --brand-400:#7B7B78;
  --brand-500:#575756; --brand-600:#3C3C3B; --brand-700:#323231; --brand-800:#2A2A29; --brand-900:#1F1F1E; --brand-950:#141413;
}
html, body, button, input, select, textarea { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; }
h1, h2, h3 { letter-spacing: -0.01em; }

/* Azul do Tailwind → azul da marca */
html .bg-blue-50   { background-color: var(--brand-50); }
html .bg-blue-100  { background-color: var(--brand-100); }
html .bg-blue-500  { background-color: var(--brand-500); }
html .bg-blue-600  { background-color: var(--brand-600); }
html .bg-blue-700  { background-color: var(--brand-700); }
html .hover\:bg-blue-500:hover { background-color: var(--brand-500); }
html .hover\:bg-blue-600:hover { background-color: var(--brand-600); }
html .hover\:bg-blue-700:hover { background-color: var(--brand-700); }
html .hover\:bg-blue-50:hover  { background-color: var(--brand-50); }
html .text-blue-500, html .text-blue-600 { color: var(--brand-600); }
html .text-blue-700, html .text-blue-800 { color: var(--brand-700); }
html .hover\:text-blue-700:hover, html .hover\:text-blue-800:hover { color: var(--brand-800); }
html .border-blue-200 { border-color: var(--brand-200); }
html .border-blue-300, html .hover\:border-blue-300:hover { border-color: var(--brand-300); }
html .border-blue-500 { border-color: var(--brand-600); }
html .border-l-blue-500 { border-left-color: var(--brand-600); }
html .ring-blue-500, html .focus\:ring-blue-500:focus { --tw-ring-color: var(--brand-500); }
html .focus\:border-blue-500:focus { border-color: var(--brand-500); }
/* Vermelho de ação/erro: um só vermelho na tela, o da marca */
html .bg-red-600 { background-color: var(--isoaco-vermelho-bandeira); }
html .hover\:bg-red-700:hover { background-color: var(--isoaco-vermelho-escuro); }
html .text-red-600 { color: var(--isoaco-vermelho-bandeira); }
html .bg-red-500 { background-color: var(--isoaco-vermelho); }

/* ── Cobertura completa do azul e do índigo (06/11/2026) ──────────────────
   O bloco acima remapeava só os tons de azul mais usados; outros (caixas de
   marcar, foco, bordas, textos claros, degradês) e o índigo (painéis de
   componente, 5W+1H, fabricação, programar e botões secundários) ficavam com o
   azul do NexOS para sempre. Aqui vai todo tom que as telas usam, para a
   escala da marca: o índigo vira painel neutro e o botão secundário fica um
   tom mais claro que o principal. As cores de DADO (gráficos, tipo elétrica/mecânica,
   o "azul-céu" da Compras) ficam como no NexOS. */
html .bg-blue-200, html .hover\:bg-blue-200:hover, html .bg-indigo-200 { background-color: var(--brand-200); }
html .bg-blue-300, html .bg-indigo-300 { background-color: var(--brand-300); }
html .hover\:bg-blue-100:hover { background-color: var(--brand-100); }
html .has-\[\:checked\]\:bg-blue-50:has(:checked) { background-color: var(--brand-50); }
html .has-\[\:checked\]\:border-blue-400:has(:checked) { border-color: var(--brand-400); }
html .has-\[\:checked\]\:border-blue-500:has(:checked) { border-color: var(--brand-600); }
html .peer:focus-visible ~ .peer-focus-visible\:ring-blue-400 { --tw-ring-color: var(--brand-400); }
html .focus\:bg-blue-50:focus, html .peer:checked ~ .peer-checked\:bg-blue-50 { background-color: var(--brand-50); }
html .bg-blue-50\/40, html .hover\:bg-blue-50\/40:hover, html .bg-indigo-50\/40 { background-color: color-mix(in srgb, var(--brand-50) 40%, transparent); }
html .bg-indigo-50, html .hover\:bg-indigo-50:hover { background-color: var(--brand-50); }
html .bg-indigo-100, html .hover\:bg-indigo-100:hover { background-color: var(--brand-100); }
html .bg-indigo-100\/70 { background-color: color-mix(in srgb, var(--brand-100) 70%, transparent); }
html .bg-indigo-200\/60, html .hover\:bg-indigo-200:hover { background-color: color-mix(in srgb, var(--brand-200) 60%, transparent); }
html .bg-indigo-500, html .hover\:bg-indigo-500:hover { background-color: var(--brand-500); }
html .bg-indigo-600 { background-color: var(--brand-500); }
html .hover\:bg-indigo-700:hover { background-color: var(--brand-600); }
html .text-blue-100 { color: var(--brand-100); }
html .text-blue-200 { color: var(--brand-200); }
html .text-blue-300, html .text-indigo-300 { color: var(--brand-300); }
html .text-blue-400, html .text-indigo-400 { color: var(--brand-400); }
html .text-indigo-500 { color: var(--brand-500); }
html .text-indigo-600, html .hover\:text-blue-600:hover, html .peer:checked ~ .peer-checked\:text-blue-700 { color: var(--brand-600); }
html .text-indigo-700, html .text-indigo-800, html .hover\:text-indigo-800:hover { color: var(--brand-700); }
html .text-blue-800\/70 { color: color-mix(in srgb, var(--brand-700) 70%, transparent); }
html .text-blue-900 { color: var(--brand-900); }
html .border-blue-100, html .border-indigo-100 { border-color: var(--brand-100); }
html .border-indigo-200 { border-color: var(--brand-200); }
html .border-indigo-300, html .hover\:border-blue-300:hover { border-color: var(--brand-300); }
html .border-blue-400, html .hover\:border-blue-400:hover { border-color: var(--brand-400); }
html .border-blue-600, html .border-indigo-500, html .border-indigo-600, html .peer:checked ~ .peer-checked\:border-blue-500 { border-color: var(--brand-600); }
html .border-blue-700 { border-color: var(--brand-700); }
html .ring-blue-300 { --tw-ring-color: var(--brand-300); }
html .ring-blue-400, html .focus\:ring-blue-400:focus, html .focus\:ring-indigo-400:focus { --tw-ring-color: var(--brand-400); }
html .focus\:ring-indigo-500:focus, html .peer:checked ~ .peer-checked\:ring-blue-500 { --tw-ring-color: var(--brand-500); }
html .outline-blue-400 { outline-color: var(--brand-400); }
html .accent-blue-600, html .accent-indigo-600 { accent-color: var(--brand-600); }
html .from-blue-50 { --tw-gradient-from: var(--brand-50); }
html .from-blue-500, html .from-indigo-500 { --tw-gradient-from: var(--brand-500); }
html .from-blue-700 { --tw-gradient-from: var(--brand-700); }
html .to-blue-700, html .to-indigo-700 { --tw-gradient-to: var(--brand-700); }
html .to-blue-900 { --tw-gradient-to: var(--brand-900); }

/* Sidebar: chumbo da marca; o item ativo ganha a marca laranja à esquerda */
html #sidebar, html .topo-mobile { background-color: var(--brand-800); }
html #sidebar .border-slate-700 { border-color: rgba(255,255,255,.10); }
html #sidebar .nav-item { color: #D9D9D6; }
html #sidebar .nav-item:hover, html #sidebar .hover\:bg-slate-800:hover { background-color: rgba(255,255,255,.08); color: #fff; }
html #sidebar .nav-item.ativo { background-color: rgba(255,255,255,.12); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--santana-laranja); }
html #sidebar .nav-item.ativo .ic { color: var(--santana-laranja); }
html #sidebar #avatar-usuario { background-color: var(--santana-laranja-texto); }
/* Botão "Pedido de OS": laranja da marca. Chumbo sobre o menu chumbo, ele
   quase sumia (escolha do dono em 06/11/2026, mesmo sabendo que o texto branco
   fica em 3,7:1). O hover escurece para o laranja de texto. */
html #sidebar .bg-blue-600 { background-color: var(--santana-laranja); color: #fff; }
html #sidebar .hover\:bg-blue-500:hover, html #sidebar .hover\:bg-blue-700:hover { background-color: var(--santana-laranja-texto); }
html #sidebar .text-slate-300 { color: #D9D9D6; }
html #sidebar .text-slate-400 { color: #A9A9A6; }
#sidebar .logo-sidebar { height: 26px; width: auto; }
#sidebar.colapsada .logo-sidebar { display: none; }
#sidebar #sidebar-titulo { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #A9A9A6; margin-left: .25rem; }
#sidebar.colapsada .ic { margin: 0 auto; }

/* Acabamento geral */
html .shadow-2xl { box-shadow: 0 20px 40px -12px rgba(31, 31, 30, .25); }
button, a { transition: background-color .12s, color .12s, border-color .12s, box-shadow .12s; }
*:focus-visible { outline: 2px solid var(--santana-laranja-texto); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #CACAC6; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   ÍCONES — <i class="ic ic-nome"></i>
   Silhuetas SVG (traço 2px) aplicadas como máscara: herdam a cor do texto,
   escalam sem serrilhar e substituem os emoji, que variavam de aparelho
   para aparelho e davam ar de improviso à interface. */
.ic { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; flex-shrink: 0;
      background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-lg { width: 1.35em; height: 1.35em; }
.ic-menu      { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 6h16M4 12h16M4 18h16'/></svg>"); }
.ic-dashboard { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1'/><rect x='14' y='3' width='7' height='5' rx='1'/><rect x='14' y='12' width='7' height='9' rx='1'/><rect x='3' y='16' width='7' height='5' rx='1'/></svg>"); }
.ic-board     { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M9 3v18M15 3v18'/></svg>"); }
.ic-link      { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>"); }
.ic-lightbulb { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 14c.2-1 .7-1.7 1.5-2.5A5 5 0 1 0 8.5 11.5c.8.8 1.3 1.5 1.5 2.5'/><path d='M9 18h6M10 22h4'/></svg>"); }
.ic-gantt     { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M3 5h8M7 12h10M11 19h8'/><path d='M3 3v18'/></svg>"); }
.ic-calendar  { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>"); }
.ic-wrench    { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>"); }
.ic-settings  { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>"); }
.ic-users     { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.ic-user      { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.ic-building  { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><path d='M9 22v-4h6v4M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01'/></svg>"); }
.ic-traffic   { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='2' width='10' height='20' rx='3'/><circle cx='12' cy='7' r='1.6'/><circle cx='12' cy='12' r='1.6'/><circle cx='12' cy='17' r='1.6'/></svg>"); }
.ic-search    { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>"); }
.ic-history   { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7L3 8'/><path d='M3 3v5h5M12 7v5l3 2'/></svg>"); }
.ic-bell      { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>"); }
.ic-help      { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01'/></svg>"); }
.ic-chat      { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>"); }
.ic-tour      { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m16.2 7.8-2.2 6.4-6.4 2.2 2.2-6.4z'/></svg>"); }
.ic-alert     { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4M12 17h.01'/></svg>"); }
.ic-key       { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7.5' cy='15.5' r='5.5'/><path d='m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3'/></svg>"); }
.ic-card      { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><path d='M2 10h20'/></svg>"); }
.ic-lock      { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); }
.ic-doc       { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/></svg>"); }
.ic-logout    { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='m16 17 5-5-5-5M21 12H9'/></svg>"); }
.ic-plus      { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>"); }
.ic-tag       { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.6 2.9 21 11.3a2 2 0 0 1 0 2.8l-6.9 6.9a2 2 0 0 1-2.8 0L2.9 12.6A2 2 0 0 1 2.3 11V4a2 2 0 0 1 2-2h7a2 2 0 0 1 1.3.9z'/><circle cx='7.5' cy='7.5' r='1.5'/></svg>"); }
.ic-clock     { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>"); }