/* ════════════════════════════════════════════════════════════════════════
   shell.css — Friolog OS / Flux OS
   Estilo compartilhado do menu lateral, barra superior e rodapé.
   Usado por TODAS as páginas do sistema (via <link rel="stylesheet">).
   Qualquer ajuste visual do menu/topbar/rodapé deve ser feito AQUI —
   não precisa mais editar página por página.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --tms-blue:#0176D3; --tms-blue-dark:#0B5CAB; --tms-blue-bg:#eaf4fd;
  --tms-bg:#f3f4f6; --tms-card:#ffffff; --tms-border:#dddbda;
  --tms-text:#181818; --tms-muted:#706e6b;
  --tms-sidebar-w:264px; --tms-sidebar-w-collapsed:72px;
}
/* trava o arrasto lateral da página inteira — sem isso, qualquer elemento
   que passe da borda da tela por só 1px (arredondamento, sombra, borda)
   deixa a página inteira arrastável de lado, mesmo sem "parecer" que tem
   conteúdo extra. Isso é global e vale pra qualquer página do sistema. */
html, body{ overflow-x:hidden; }
body.tms-body{ padding-top:0; background:var(--tms-bg); }
.tms-shell{ display:flex; min-height:100vh; }

/* ── sidebar ── */
.tms-sidebar{
  width:var(--tms-sidebar-w); flex-shrink:0; background:#fff;
  border-right:1px solid var(--tms-border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:500;
  overflow-x:hidden; overflow-y:auto;
  transition:width .2s ease, transform .22s cubic-bezier(.4,0,.2,1);
}
.tms-sidebar-top{ display:flex; align-items:center; gap:11px; padding:20px 18px; border-bottom:1px solid var(--tms-border); flex-shrink:0; }
.tms-sidebar-logo{ height:40px; width:auto; max-width:170px; flex-shrink:0; object-fit:contain; }
/* modo "só logo" — nome do sistema ocultado, logo cresce e ocupa o
   espaço todo do cabeçalho pra ficar bem visível */
.tms-sidebar-top.tms-so-logo{ justify-content:center; }
.tms-sidebar-top.tms-so-logo .tms-sidebar-logo{ height:52px; max-width:200px; }
.tms-sidebar-brandtext{ display:flex; flex-direction:column; line-height:1.25; white-space:nowrap; overflow:hidden }
.tms-sidebar-brandtext strong{ font-size:14.5px; font-weight:800; color:var(--tms-text); font-family:'Inter',sans-serif }
.tms-sidebar-brandtext span{ font-size:10px; color:var(--tms-muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px }
.tms-sidebar-collapse-btn{
  flex-shrink:0; width:28px; height:28px; border-radius:7px;
  background:var(--tms-bg); border:1px solid var(--tms-border); color:var(--tms-muted);
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px;
  transition:.15s;
}
.tms-sidebar-collapse-btn:hover{ background:var(--tms-blue-bg); color:var(--tms-blue-dark); border-color:rgba(1,118,211,.3) }
.tms-sidebar-pin-btn{
  margin-left:auto; flex-shrink:0; width:28px; height:28px; border-radius:7px;
  background:var(--tms-bg); border:1px solid var(--tms-border); color:var(--tms-muted);
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.tms-sidebar-pin-btn:hover{ background:#fff7e6; color:#c9a84c; border-color:rgba(201,168,76,.4); transform:rotate(-25deg) }
.tms-sidebar-pin-btn.pinned{ background:linear-gradient(135deg,#f3d9a8,#e8c67a); color:#7a5c14; border-color:transparent; transform:rotate(0deg) }
.tms-sidebar-pin-btn.pinned:hover{ transform:rotate(0deg) scale(1.08) }
.tms-sidebar.tms-collapsed .tms-sidebar-pin-btn{ margin-left:0 }
/* contraído: o cabeçalho não cabe logo+texto+botão em 72px — empilha e
   centraliza só o essencial (senão o botão ficava cortado pelo overflow
   e nunca mais dava pra clicar de novo pra expandir) */
.tms-sidebar.tms-collapsed .tms-sidebar-top{ flex-direction:column; gap:10px; padding:16px 8px; }
.tms-sidebar.tms-collapsed .tms-sidebar-logo{ display:none; }
.tms-sidebar.tms-collapsed .tms-sidebar-collapse-btn{ margin-left:0; }
.tms-nav{ padding:12px 10px 24px; flex:1 }
.tms-nav-section{ font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#9a9a97; padding:16px 12px 7px; white-space:nowrap; overflow:hidden }
.tms-nav-section:first-child{ padding-top:6px }
.tms-nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px;
  color:var(--tms-muted); text-decoration:none; font-size:13px; font-weight:600;
  cursor:pointer; transition:background .2s ease, color .2s ease, transform .18s ease, box-shadow .2s ease;
  border-left:3px solid transparent; white-space:nowrap; overflow:hidden; position:relative;
}
.tms-nav-item i{ width:18px; text-align:center; flex-shrink:0; font-size:14.5px; color:#9a9a97; transition:color .2s ease, transform .2s ease }
.tms-nav-item:hover i{ color:var(--tms-blue-dark); transform:scale(1.12) }
.tms-nav-item.active i{ color:var(--tms-blue-dark) }
.tms-nav-item:hover{
  background:linear-gradient(90deg, var(--tms-blue-bg) 0%, rgba(1,118,211,.05) 100%);
  color:var(--tms-blue-dark); transform:translateX(3px);
  box-shadow:inset 0 0 0 1px rgba(1,118,211,.08);
}
.tms-nav-item.active{
  background:linear-gradient(90deg, var(--tms-blue-bg) 0%, rgba(1,118,211,.04) 100%);
  color:var(--tms-blue-dark); border-left-color:var(--tms-blue);
  box-shadow:inset 0 0 0 1px rgba(1,118,211,.1);
}
.tms-nav-item.active:hover{ transform:translateX(3px) }
/* itens de acesso granular ("Ferramentas" antigo) — ficam de fora por
   padrão; só aparecem via JS depois de confirmar sessão + permissão.
   Sem isso, dava pra ver a lista inteira de módulos antes de logar. */
.tms-nav-item[data-mod], .tms-nav-item[data-mod-admin],
.tms-nav-section[data-cat-check="mods"]{ display:none; }

/* sidebar recolhida — só ícones, texto escondido, com tooltip nativo (title) */
.tms-sidebar.tms-collapsed{ width:var(--tms-sidebar-w-collapsed); }
.tms-sidebar.tms-collapsed .tms-sidebar-brandtext,
.tms-sidebar.tms-collapsed .tms-nav-section,
.tms-sidebar.tms-collapsed .tms-nav-item span.tms-nav-label{ display:none !important; }
.tms-sidebar.tms-collapsed .tms-nav-item{ justify-content:center; padding:10px 0; gap:0; position:relative; }
/* tooltip elegante ao passar o mouse com o menu contraído — reaproveita o
   atributo title (via attr()) em vez do balão feio nativo do navegador */
.tms-sidebar.tms-collapsed .tms-nav-item[title]::after{
  content:attr(title);
  position:absolute; left:calc(100% + 14px); top:50%;
  transform:translateY(-50%) translateX(-6px);
  background:linear-gradient(135deg,#181818,#2b2b2b);
  color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.2px;
  padding:8px 14px; border-radius:8px; white-space:nowrap;
  box-shadow:0 10px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:600;
}
.tms-sidebar.tms-collapsed .tms-nav-item[title]::before{
  content:''; position:absolute; left:calc(100% + 6px); top:50%;
  transform:translateY(-50%) translateX(-6px);
  border:6px solid transparent; border-right-color:#181818;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:600;
}
.tms-sidebar.tms-collapsed .tms-nav-item[title]:hover::after,
.tms-sidebar.tms-collapsed .tms-nav-item[title]:hover::before{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);
}
.tms-sidebar.tms-collapsed .tms-sidebar-collapse-btn{ transform:rotate(180deg) }
.tms-sidebar.tms-collapsed ~ .tms-main{ margin-left:var(--tms-sidebar-w-collapsed) }

/* ── auto-ocultar por inatividade — some sozinha depois de um tempo parado,
     volta ao encostar o mouse na borda esquerda (tipo dock do macOS / VS Code) ── */
.tms-sidebar.tms-autohidden{ transform:translateX(-100%); box-shadow:none; }
.tms-sidebar.tms-autohidden.tms-peek{ transform:translateX(0); box-shadow:14px 0 40px rgba(0,0,0,.18); }
.tms-main.tms-full-width{ margin-left:0 !important; }
.tms-edge-trigger{ position:fixed; top:0; left:0; bottom:0; width:14px; z-index:499; }
@media (max-width:1024px){ .tms-edge-trigger{ display:none } }


/* ── main / topbar ── */
.tms-main{ flex:1; display:flex; flex-direction:column; margin-left:var(--tms-sidebar-w); min-width:0; transition:margin-left .2s ease; }
.tms-topbar{
  height:64px; background:#fff; border-bottom:1px solid var(--tms-border);
  display:flex; align-items:center; gap:16px; padding:0 28px; flex-shrink:0;
  position:sticky; top:0; z-index:400;
}
.tms-hamburger{ display:none; background:none; border:none; font-size:20px; color:var(--tms-muted); cursor:pointer; padding:4px }
.tms-topbar-title{ display:flex; flex-direction:column; line-height:1.25 }
.tms-topbar-eyebrow{ font-size:10px; font-weight:700; color:var(--tms-muted); text-transform:uppercase; letter-spacing:.5px }
.tms-topbar-title strong{ font-size:15px; font-weight:700; color:var(--tms-text); font-family:'Inter',sans-serif }
.tms-topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px }

/* ── base do menu suspenso do usuário (login-module.js) — sem isso, o
   dropdown injetado pelo JS não tem nenhum estilo (sem fundo, sem posição,
   sem espaçamento) e fica quebrado na tela ── */
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-dropdown{display:none;position:fixed;top:62px;background:#fff;border:1px solid var(--tms-border,#dddbda);border-radius:10px;padding:6px;min-width:220px;box-shadow:0 16px 40px rgba(24,24,24,.16);z-index:9999;animation:ddFade .15s ease}
@keyframes ddFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.nav-dropdown.open{display:block}
.nav-dd-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--tms-muted,#706e6b);font-size:12.5px;font-weight:600;text-decoration:none;transition:.15s;cursor:pointer}
.nav-dd-item:hover{background:var(--tms-blue-bg,#eaf4fd);color:var(--tms-blue-dark,#0B5CAB)}
.nav-dd-icon{font-size:15px;width:22px;text-align:center;flex-shrink:0}
.nav-dd-sep{height:1px;background:var(--tms-border,#dddbda);margin:5px 8px}
.tms-topbar-search{
  display:flex; align-items:center; gap:9px;
  background:var(--tms-bg); border:1.5px solid var(--tms-border);
  border-radius:24px; padding:0 8px 0 16px; height:38px;
  width:min(340px, 32vw); flex-shrink:1; transition:.2s;
}
.tms-topbar-search:hover{ border-color:#c7cbd1 }
.tms-topbar-search:focus-within{ border-color:var(--tms-blue); background:#fff; box-shadow:0 0 0 3px rgba(1,118,211,.1) }
.tms-topbar-search-ico{ font-size:13px; color:var(--tms-muted); flex-shrink:0 }
.tms-topbar-search:focus-within .tms-topbar-search-ico{ color:var(--tms-blue) }
.tms-topbar-search input{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:'Inter',sans-serif; font-size:13px; color:var(--tms-text);
}
.tms-topbar-search input::placeholder{ color:#a6a9ad }
.tms-topbar-search button{
  width:26px; height:26px; border-radius:50%; border:none; background:transparent;
  color:var(--tms-muted); font-size:11px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.tms-topbar-search button:hover{ background:#e2e5ea; color:var(--tms-text) }
@media (max-width:900px){ .tms-topbar-search{ display:none } }
/* itens do menu lateral e cards do dashboard escondidos pela busca */
.tms-nav-item.tms-busca-oculto, .tms-nav-section.tms-busca-oculto,
.glass-card.tms-busca-oculto{ display:none !important }
.tms-busca-sem-resultado{ text-align:center; padding:28px 16px; color:var(--tms-muted); font-size:13px }
.tms-btn-install{ display:flex; align-items:center; gap:6px; background:var(--tms-blue-bg); border:1px solid rgba(1,118,211,.25); color:var(--tms-blue-dark); padding:8px 14px; border-radius:6px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif }
.tms-topbar .nav-btn-login{ background:var(--tms-blue) !important; color:#fff !important; border:none !important; border-radius:6px !important; padding:9px 18px !important; font-size:13px !important; font-weight:700 !important; cursor:pointer; box-shadow:none !important; }
.tms-topbar .nav-btn-login:hover{ background:var(--tms-blue-dark) !important; transform:none !important }
/* avatar do usuário logado (injetado por login-module.js já pronto pra
   navbar escura) — corrige o contraste pra funcionar num topbar claro.
   Estrutura real do botão: div(avatar) + div(nome/cargo) + span(seta) —
   por isso é nth-child(2), não last-child (o último filho é o <span>) */
.tms-topbar .nav-right .nav-item-user > button{ background:var(--tms-bg) !important; border:1px solid var(--tms-border) !important; }
.tms-topbar .nav-right .nav-item-user > button:hover{ background:#ececec !important; }
.tms-topbar .nav-right .nav-item-user > button > div:nth-child(2) > div:first-child{ color:var(--tms-text) !important; }
.tms-topbar .nav-right .nav-item-user > button > div:nth-child(2) > div:last-child{ color:var(--tms-muted) !important; }
.tms-topbar .nav-right .nav-item-user > button > span{ color:var(--tms-muted) !important; }

.tms-content{ padding:28px 32px 8px; flex:1 }
.tms-footer{ background:#fff; border-top:1px solid var(--tms-border); padding:20px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--tms-muted) }
.tms-footer .footer-brand{ justify-content:flex-start; text-align:left; margin-right:auto; flex-direction:row !important; align-items:center !important }

@media (max-width:1024px){
  .tms-sidebar{ transform:translateX(-100%); }
  .tms-sidebar.tms-mobile-aberto{ transform:translateX(0); box-shadow:16px 0 40px rgba(0,0,0,.25); }
  .tms-sidebar.tms-collapsed ~ .tms-main{ margin-left:0 }
  .tms-main{ margin-left:0 }
  .tms-hamburger{ display:flex; align-items:center; justify-content:center }
  .tms-content{ padding:20px 16px 8px }
  .tms-footer{ padding:16px }
}

/* ══════════════════════════════════════════════════════════════════════
   CELULAR DE VERDADE (não só "cabe na tela" — pensado pra parecer um
   app nativo): alvos de toque maiores, topbar compacta, gaveta de menu
   ocupando a maior parte da largura (não uma tirinha), área segura pra
   notch/barra de gestos, e a busca (que hoje simplesmente sumia) virando
   um ícone que abre em tela cheia.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:600px){
  html{ -webkit-text-size-adjust:100% }
  body.tms-body{ padding-bottom:env(safe-area-inset-bottom,0) }

  /* topbar mais baixa e compacta — sobra espaço de verdade pro conteúdo */
  .tms-topbar{ height:56px; padding:0 12px; gap:8px; padding-top:env(safe-area-inset-top,0) }
  .tms-topbar-eyebrow{ display:none } /* linha pequena em cima do título só ocupa espaço à toa aqui */
  .tms-topbar-title strong{ font-size:14px; max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block }
  .tms-topbar-brand-logo{ height:22px }
  .tms-hamburger{ width:40px; height:40px; font-size:19px } /* alvo de toque de verdade, não só um ícone pequeno */
  .tms-btn-home{ width:40px; height:40px }

  /* busca: some da topbar (não cabe mesmo) e vira um botão que abre em
     tela cheia por cima de tudo — padrão de app de celular */
  .tms-topbar-search{ display:none !important }
  .tms-mobile-search-btn{
    display:flex !important; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%; border:none; background:var(--tms-bg);
    color:var(--tms-muted); font-size:15px; flex-shrink:0; cursor:pointer;
  }
  .tms-mobile-search-ov{
    display:none; position:fixed; inset:0; z-index:9000; background:#fff;
    padding:calc(env(safe-area-inset-top,0) + 12px) 14px 14px;
  }
  .tms-mobile-search-ov.open{ display:flex; flex-direction:column; gap:14px }
  .tms-mobile-search-ov .tms-topbar-search{ display:flex !important; width:100%; height:46px }
  .tms-mobile-search-close{ align-self:flex-end; width:38px; height:38px; border-radius:50%; border:none; background:var(--tms-bg); color:var(--tms-text); font-size:16px }

  /* gaveta de menu — ocupa quase a tela toda (não uma tirinha de 264px
     apertada), com itens bem maiores pra tocar com o dedo sem errar */
  .tms-sidebar{ width:min(86vw,340px) !important; padding-top:env(safe-area-inset-top,0) }
  .tms-sidebar-top{ padding:16px 14px }
  .tms-nav-item{ padding:13px 14px; font-size:14.5px; gap:13px; border-radius:11px }
  .tms-nav-item i{ font-size:16px; width:20px }
  .tms-nav-section-label{ padding:14px 14px 6px }

  /* fechar a gaveta tocando fora dela já é tratado via JS (backdrop
     dinâmico em tmsAbrirMenuMobile/tmsFecharMenuMobile) */

  /* conteúdo — respiro menor mas ainda confortável, sem desperdiçar tela */
  .tms-content{ padding:14px 12px 8px }
  .tms-footer{ padding:14px 12px calc(14px + env(safe-area-inset-bottom,0)); flex-direction:column; align-items:flex-start; text-align:left; font-size:11px }
  .tms-footer .footer-brand{ margin-right:0 }

  /* qualquer tabela larga vira scroll horizontal em vez de esmagar/cortar
     colunas — rede de segurança geral pras telas de dados do sistema */
  .tms-content table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap }

  /* qualquer overlay/modal do sistema ocupa a tela cheia no celular, sem
     cantos arredondados nem margem sobrando ao redor — sensação de app,
     não de "site espremido" */
  .tms-modal-card, .kp-config-dialog, .chat-group-dialog, .chat-share-dialog{
    width:100% !important; max-width:100% !important; height:100% !important; max-height:100% !important;
    border-radius:0 !important; margin:0 !important;
  }
}
@media (max-width:380px){
  /* telas bem pequenas (iPhone SE e similares) — mais um aperto fino */
  .tms-topbar-title strong{ max-width:36vw; font-size:13px }
  .tms-nav-item{ font-size:14px; padding:12px 13px }
}



.tms-btn-home{ display:none; background:none; border:none; font-size:16px; color:var(--tms-muted); cursor:pointer; padding:6px 8px; border-radius:6px; transition:.15s; margin-right:2px }
.tms-btn-home:hover{ background:var(--tms-bg); color:var(--tms-blue) }
@media (max-width:1024px){ .tms-btn-home{ display:flex; align-items:center; justify-content:center } }
.tms-topbar-brand-logo{ display:none; height:26px; width:auto; object-fit:contain; margin-right:2px }
@media (min-width:1025px) { .tms-topbar-brand-logo{ display:block } .tms-topbar-title{ display:none } }

/* ══════════════════════════════════════════════════════════════════
   MENU MOBILE (drawer estilo SAP Fiori) — movido pra cá porque o
   shell-standard.js cria esse HTML dinamicamente em TODA página do
   sistema, mas o CSS que o esconde só existia na index.php. Em
   qualquer outra página, o menu aparecia solto e sem estilo no fim
   da tela. Agora, por estar em shell.css (carregado por todas as
   páginas), o drawer fica escondido corretamente em qualquer lugar.
   ══════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   MENU MOBILE NOVO — drawer isolado estilo SAP Fiori (Shell Bar + Side Nav)
   100% separado do sistema de dropdown de desktop, sem nenhuma regra
   compartilhada — evita qualquer conflito de especificidade/cascata.
   ════════════════════════════════════════════════════════════════════ */
#fioriBackdrop{display:none;position:fixed;inset:0;z-index:2147483000;background:rgba(3,8,20,.6);backdrop-filter:blur(2px)}
#fioriBackdrop.show{display:block}
#fioriDrawer{
  position:fixed;top:0;left:0;bottom:0;z-index:2147483001;
  width:300px;max-width:86vw;background:#0a1628;
  box-shadow:8px 0 40px rgba(0,0,0,.5);
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;
  font-family:'Inter',sans-serif;
}
#fioriDrawer.show{transform:translateX(0)}
.fiori-head{
  background:linear-gradient(135deg,#001e3c,#00335c);
  padding:18px 16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.fiori-head-brand{display:flex;align-items:center;gap:10px}
.fiori-head-brand img{height:24px}
.fiori-head-title{color:#fff;font-weight:800;font-size:14px;letter-spacing:.3px}
.fiori-close{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);border:none;color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.fiori-close:active{background:rgba(255,255,255,.18)}
.fiori-user{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
.fiori-user-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#00AEEF,#0057b8);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;flex-shrink:0}
.fiori-user-info{min-width:0}
.fiori-user-name{color:#fff;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fiori-user-role{color:rgba(255,255,255,.45);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}

.fiori-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0 24px}
.fiori-cat-header{display:flex;align-items:center;gap:8px;padding:13px 18px;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:rgba(0,174,239,.6);cursor:pointer;user-select:none;transition:background .2s ease, color .2s ease}
.fiori-cat-header:hover{background:rgba(0,174,239,.06);color:rgba(0,174,239,.85)}
.fiori-cat-header:active{background:rgba(255,255,255,.04)}
.fiori-cat-arrow{display:inline-block;font-size:9px;transition:transform .18s;flex-shrink:0}
.fiori-cat-header.open .fiori-cat-arrow{transform:rotate(90deg)}
.fiori-cat-content{display:none;padding-bottom:4px}
.fiori-cat-content.open{display:block}
.fiori-subcat .fiori-cat-header{padding-left:32px;font-size:9.5px;color:rgba(255,255,255,.55)}
.fiori-subcat .fiori-item{padding-left:38px}
.fiori-cat + .fiori-cat{border-top:1px solid rgba(255,255,255,.06)}
.fiori-item{
  display:flex;align-items:center;gap:13px;padding:12px 18px;
  color:rgba(255,255,255,.8);text-decoration:none;font-size:13.5px;font-weight:600;
  border-left:3px solid transparent;cursor:pointer;background:none;border-top:none;border-right:none;border-bottom:none;width:100%;text-align:left;
  transition:background .2s ease, color .2s ease, border-left-color .2s ease, padding-left .2s ease;
}
.fiori-item:hover{background:linear-gradient(90deg, rgba(0,174,239,.1) 0%, rgba(0,174,239,.02) 100%);border-left-color:rgba(0,174,239,.5);color:#a5e6ff}
.fiori-item:hover .fiori-item-icon{background:rgba(0,174,239,.18);transform:scale(1.08)}
.fiori-item:active{background:rgba(0,174,239,.16);border-left-color:#00AEEF;color:#7dd3fc}
.fiori-item-icon{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:background .2s ease, transform .2s ease}
.fiori-sep{height:1px;background:rgba(255,255,255,.07);margin:8px 18px}
.fiori-badge{margin-left:auto;background:rgba(0,174,239,.18);color:#7dd3fc;font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:20px;flex-shrink:0}

@media (min-width: 1025px) { #fioriBackdrop, #fioriDrawer { display:none !important; } }