/* ============================================================================
   soma-right-drawer.css — SomaRightDrawer (base unificada dos drawers laterais)
   ----------------------------------------------------------------------------
   ANATOMIA e COMPORTAMENTO padronizados para TODOS os drawers da topbar.
   A diferença de cor é INTENCIONAL e semântica (não acidental):
     .srd--dark   = System Drawer   → Notificações (alertas do sistema/shell)
     .srd--light  = Workspace Drawer → Central de Tarefas (área de trabalho)
   As regras estruturais são as MESMAS; só os tokens de cor mudam por variante.
   Carregar DEPOIS de notif-panel.css (o shell .srd vence o shell legado .np/.tc).
   ============================================================================ */

/* ---- backdrop ---- */
.srd-backdrop{position:fixed;inset:0;z-index:1200;background:rgba(5,11,23,.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease}
.srd-backdrop.is-open{opacity:1;visibility:visible}

/* ---- container ---- */
.srd{position:fixed;top:0;right:0;height:100vh;height:100svh;
  width:clamp(420px,92vw,460px);max-width:100vw;z-index:1201;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1),width .24s ease;
  box-shadow:-16px 0 48px rgba(5,11,23,.42)}
.srd.is-open{transform:translateX(0)}
.srd.srd--expanded{width:clamp(720px,94vw,860px)}

/* ---- variantes (tokens de cor) ---- */
.srd--dark{
  --srd-bg:#0b1f35;--srd-bg2:#0f2740;--srd-card:#0f2740;--srd-line:rgba(127,231,235,.14);
  --srd-ink:#f5f9fc;--srd-ink2:rgba(245,249,252,.66);--srd-ink3:rgba(245,249,252,.40);
  --srd-acc:#02B8BF;--srd-acc2:#7FE7EB;--srd-accbg:rgba(2,184,191,.15);
  background:#0b1f35;border-left:1px solid rgba(127,231,235,.14)}
.srd--light{
  --srd-bg:#fff;--srd-bg2:#f4f8fa;--srd-card:#fff;--srd-line:#e6eef2;
  --srd-ink:#10242c;--srd-ink2:#5b6b73;--srd-ink3:#8aa0a8;
  --srd-acc:#02888f;--srd-acc2:#02B8BF;--srd-accbg:rgba(2,184,191,.12);
  background:#fff;border-left:1px solid #e6eef2}

/* ---- header ---- */
.srd-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px 13px;border-bottom:1px solid var(--srd-line)}
.srd-head-l{min-width:0;display:flex;flex-direction:column;gap:3px}
.srd-title{display:flex;align-items:center;gap:9px;font:800 17px Inter,system-ui,sans-serif;color:var(--srd-ink);margin:0;letter-spacing:-.01em}
.srd-badge{font:800 12px Inter;color:#fff;background:var(--srd-acc);border-radius:999px;padding:1px 8px;min-width:22px;text-align:center;line-height:18px}
.srd-sub{font:500 11.5px Inter;color:var(--srd-ink3);line-height:1.35}
.srd-actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.srd-textbtn{font:600 11.5px Inter;color:var(--srd-ink2);background:transparent;border:0;cursor:pointer;padding:6px 9px;border-radius:7px;white-space:nowrap;transition:color .15s,background .15s}
.srd-textbtn:hover{color:var(--srd-acc2);background:var(--srd-accbg)}
.srd-ico{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;cursor:pointer;
  border:1px solid var(--srd-line);background:transparent;color:var(--srd-ink2);transition:border-color .15s,color .15s,background .15s}
.srd-ico:hover{border-color:var(--srd-acc);color:var(--srd-acc2);background:var(--srd-accbg)}
.srd-ico svg{width:15px;height:15px}

/* ---- tabs ---- */
.srd-tabs{flex:0 0 auto;display:flex;gap:2px;padding:8px 18px 0;overflow-x:auto;overflow-y:hidden;
  border-bottom:1px solid var(--srd-line);scrollbar-width:none}
.srd-tabs::-webkit-scrollbar{display:none}
.srd-tab{flex:0 0 auto;border:0;background:transparent;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:8px 11px;font:700 12px Inter;color:var(--srd-ink3);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.srd-tab:hover{color:var(--srd-ink2)}
.srd-tab.on{color:var(--srd-acc2);border-bottom-color:var(--srd-acc)}
.srd-tabn{background:var(--srd-acc);color:#fff;border-radius:999px;padding:0 6px;font:700 9.5px Inter;min-width:16px;text-align:center;line-height:15px}
.srd--dark .srd-tabn{background:#ef4444}
.srd--dark .srd-tab.on .srd-tabn{background:var(--srd-acc)}

/* ---- linha de ações em massa (ex.: Marcar todas como lidas / Limpar) ---- */
.srd-bulk{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;padding:8px 18px 0}

/* ---- filtros ---- */
.srd-filters{flex:0 0 auto;display:flex;gap:8px;padding:11px 18px;flex-wrap:wrap}
.srd-filters select,.srd-filters input{flex:1 1 0;min-width:0;border:1px solid var(--srd-line);border-radius:9px;
  padding:8px 10px;font:600 12px Inter;background:var(--srd-bg2);color:var(--srd-ink)}

/* ---- KPIs (resumo) ---- */
.srd-kpis{flex:0 0 auto;display:flex;gap:8px;padding:12px 18px 4px;flex-wrap:wrap}
.srd-kpi{flex:1;min-width:64px;border:1px solid var(--srd-line);border-radius:11px;padding:8px 10px;text-align:center;background:var(--srd-bg2)}
.srd-kpi b{display:block;font:800 16px Inter;color:var(--srd-ink)}
.srd-kpi span{font:600 10px Inter;color:var(--srd-ink3)}
.srd-kpi.red{border-color:rgba(220,38,38,.42);background:rgba(220,38,38,.08)}.srd-kpi.red b{color:#e05858}
.srd-kpi.amber{border-color:rgba(217,119,6,.45);background:rgba(217,119,6,.10)}.srd-kpi.amber b{color:#e0a23d}
.srd--light .srd-kpi.red b{color:#c01818}.srd--light .srd-kpi.amber b{color:#a06a00}

/* ---- corpo (scroll interno) ---- */
.srd-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 0 16px;display:flex;flex-direction:column}
.srd-body.is-cards{gap:8px;padding:10px 14px 16px}
.srd--expanded .srd-body.is-cards{display:grid;grid-template-columns:1fr 1fr;align-content:start}
.srd-body::-webkit-scrollbar{width:5px}
.srd-body::-webkit-scrollbar-thumb{background:var(--srd-line);border-radius:3px}

/* ---- empty / loading / error ---- */
.srd-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:48px 24px;color:var(--srd-ink3)}
.srd-empty b{font:800 14px Inter;color:var(--srd-ink2)}
.srd-empty span{font:500 12.5px Inter}
.srd-skeleton{height:74px;margin:0 16px;border-radius:12px;background:linear-gradient(90deg,var(--srd-bg2) 25%,var(--srd-line) 50%,var(--srd-bg2) 75%);background-size:200% 100%;animation:srdShimmer 1.2s linear infinite}
@keyframes srdShimmer{to{background-position:-200% 0}}

/* ---- footer (opcional) ---- */
.srd-foot{flex:0 0 auto;border-top:1px solid var(--srd-line);padding:12px 18px;display:flex;gap:8px;justify-content:flex-end}

/* ---- responsivo ---- */
@media(max-width:900px){.srd{width:90vw}.srd.srd--expanded{width:94vw}}
@media(max-width:560px){
  .srd,.srd.srd--expanded{width:100vw}
  .srd-head{position:sticky;top:0;background:var(--srd-bg);z-index:2}
  .srd-textbtn{padding:8px 10px}
  .srd-ico{width:38px;height:38px}
  .srd-tab{padding:11px 12px}
}
@media(prefers-reduced-motion:reduce){.srd,.srd-backdrop{transition-duration:.001ms}}