/* ======================================================================
   Grupo Sandstormgam �� Sistema de Activos v1.0
   Hoja de estilos global. Variables de marca + componentes reutilizados
   en todos los modulos (sidebar, topbar, tablas, chips, panel lateral).
   ====================================================================== */

:root{
  --brand-primary:#B2292F;
  --brand-primary-dark:#8f2126;
  --brand-primary-tint:#f7e6e7;
  --brand-secondary:#575656;
  --brand-text:#000000;
  --brand-heading:#2b2a29;
  --brand-muted:#928f89;
  --brand-neutral:#F5F5F5;
  --brand-border:#e2dede;
  --sidebar-w:240px;
  --topbar-h:64px;
  --panel-w:380px;
}

*{box-sizing:border-box;}

body{
  font-family:'Inter',sans-serif;
  background:var(--brand-neutral);
  color:var(--brand-text);
}

body.app-shell{overflow:hidden;}

.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  display:inline-block;
  vertical-align:middle;
  font-size:20px;
  line-height:1;
}

.mono{font-family:'JetBrains Mono',monospace;}

::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--brand-border);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:#cfcaca;}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;
  background:#ffffff;border-right:1px solid var(--brand-border);
  display:flex;flex-direction:column;padding:20px 0;z-index:1050;
  transition:transform .25s ease;
}
.sidebar-brand{padding:0 16px 24px;}
.sidebar-brand h1{font-size:20px;font-weight:700;color:var(--brand-primary);margin:0;letter-spacing:-.01em;}
.sidebar-brand p{font-size:11px;font-weight:600;color:var(--brand-secondary);text-transform:uppercase;letter-spacing:.06em;margin:2px 0 0;}
.nav-link-custom{
  display:flex;align-items:center;gap:12px;padding:10px 16px;color:var(--brand-secondary);
  font-size:13px;font-weight:600;text-decoration:none;border-right:4px solid transparent;
  transition:background-color .15s ease,color .15s ease;
}
.nav-link-custom:hover{background:var(--brand-neutral);color:var(--brand-text);}
.nav-link-custom.active{color:var(--brand-primary);background:var(--brand-neutral);border-right-color:var(--brand-primary);}
.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--brand-border);margin-left:16px;margin-right:16px;}
.sidebar-user{padding:12px 16px 0;font-size:12px;color:var(--brand-secondary);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1040;}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;top:0;right:0;left:var(--sidebar-w);height:var(--topbar-h);
  background:#ffffff;border-bottom:1px solid var(--brand-border);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:1030;
  transition:left .25s ease;
}
.sidebar-toggle-btn{display:none;}
.search-wrap{position:relative;max-width:640px;width:100%;}
.search-wrap .material-symbols-outlined{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--brand-secondary);font-size:20px;}
.search-input{
  width:100%;background:var(--brand-neutral);border:1px solid var(--brand-border);border-radius:8px;
  padding:8px 12px 8px 40px;font-size:14px;transition:border-color .15s ease, box-shadow .15s ease;
}
.search-input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-tint);}
.icon-btn{
  border:none;background:transparent;color:var(--brand-secondary);width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;position:relative;transition:background-color .15s ease;
}
.icon-btn:hover{background:var(--brand-neutral);}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--brand-primary);}
.user-chip{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px;border-radius:8px;transition:background-color .15s ease;text-decoration:none;color:inherit;}
.user-chip:hover{background:var(--brand-neutral);}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-primary-tint);color:var(--brand-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;}
.user-chip .name{font-size:13px;font-weight:600;line-height:1.2;margin:0;}
.user-chip .role{font-size:10px;color:var(--brand-secondary);margin:0;}

/* ---------- Layout principal ---------- */
.main-wrap{margin-left:var(--sidebar-w);padding-top:var(--topbar-h);min-height:100vh;display:flex;transition:margin-left .25s ease;}
.content{flex:1;overflow-y:auto;padding:20px;max-height:calc(100vh - var(--topbar-h));}

/* ---------- Filtros ---------- */
.filter-pill-group{background:var(--brand-neutral);border:1px solid var(--brand-border);border-radius:8px;padding:4px;display:inline-flex;gap:2px;flex-wrap:wrap;}
.filter-pill{border:none;background:transparent;padding:6px 14px;font-size:12px;font-weight:600;color:var(--brand-secondary);border-radius:6px;transition:all .15s ease;text-decoration:none;}
.filter-pill.active{background:#ffffff;color:var(--brand-primary);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.filter-pill:hover:not(.active){color:var(--brand-text);}

.status-chip{font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:filter .15s ease;text-decoration:none;display:inline-block;}
.status-chip:hover{filter:brightness(0.95);}
.chip-stock{background:#e5f6ec;color:#1a7a43;border-color:#c8ecd7;}
.chip-asignado{background:#e7f0fb;color:#1f5aa6;border-color:#cfe1f7;}
.chip-reparacion{background:var(--brand-primary-tint);color:var(--brand-primary);border-color:#f0c9cb;}
.chip-baja{background:#ececec;color:#575656;border-color:#dedede;}
.chip-generic{background:#ececec;color:#575656;border-color:#dedede;}

/* ---------- Tabla ---------- */
.asset-card{background:#ffffff;border:1px solid var(--brand-border);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);}
table.assets-table{width:100%;border-collapse:collapse;margin:0;}
.assets-table thead th{background:var(--brand-neutral);border-bottom:1px solid var(--brand-border);font-size:11px;font-weight:700;color:var(--brand-secondary);text-transform:uppercase;letter-spacing:.06em;padding:12px 16px;text-align:left;white-space:nowrap;}
.assets-table thead th.text-end{text-align:right;}
.assets-table tbody td{padding:12px 16px;border-bottom:1px solid var(--brand-border);vertical-align:middle;font-size:13px;}
.assets-table tbody tr:last-child td{border-bottom:none;}
.assets-table tbody tr{cursor:pointer;transition:background-color .12s ease;}
.assets-table tbody tr:hover{background:#fbfafa;}
.assets-table tbody tr.selected{background:var(--brand-primary-tint);}
.folio-cell{font-weight:700;color:var(--brand-primary);}
.cat-cell{display:flex;align-items:center;gap:8px;color:var(--brand-secondary);}
.model-main{font-weight:600;font-size:13px;}
.model-sub{font-size:11px;color:var(--brand-secondary);}
.resp-cell{display:flex;align-items:center;gap:8px;}
.resp-avatar{width:20px;height:20px;border-radius:50%;background:#e5e2e2;color:var(--brand-secondary);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.no-asignado{font-style:italic;color:var(--brand-secondary);}
.row-actions{display:flex;justify-content:flex-end;gap:4px;}
.row-actions button, .row-actions a{border:none;background:transparent;color:var(--brand-secondary);width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .15s ease;text-decoration:none;}
.row-actions button:hover, .row-actions a:hover{background:var(--brand-neutral);color:var(--brand-primary);}

.table-footer{background:var(--brand-neutral);padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;border-top:1px solid var(--brand-border);}
.table-footer p{font-size:11px;color:var(--brand-secondary);margin:0;}
.page-btn{border:1px solid var(--brand-border);background:#fff;color:var(--brand-secondary);min-width:26px;height:26px;font-size:11px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .15s ease;text-decoration:none;padding:0 6px;}
.page-btn:hover:not(.disabled){background:var(--brand-neutral);}
.page-btn.disabled{opacity:.4;pointer-events:none;}
.page-btn.active{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;}

/* ---------- Panel de detalle ---------- */
.detail-panel{width:0;height:calc(100vh - var(--topbar-h));overflow:hidden;background:var(--brand-neutral);border-left:1px solid var(--brand-border);display:flex;flex-direction:column;transition:width .3s ease;box-shadow:-4px 0 12px rgba(0,0,0,.05);flex-shrink:0;}
.detail-header{padding:16px;border-bottom:1px solid var(--brand-border);display:flex;justify-content:space-between;align-items:center;background:#fff;}
.detail-header h3{font-size:16px;font-weight:700;color:var(--brand-primary);margin:0;}
.detail-header p{font-size:11px;color:var(--brand-secondary);margin:2px 0 0;}
.detail-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:20px;}
.detail-card{background:var(--brand-neutral);border:1px solid var(--brand-border);border-radius:10px;padding:16px;}
.detail-photo{width:100%;height:160px;background:var(--brand-neutral);border-radius:8px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.detail-photo img{width:100%;height:100%;object-fit:contain;}
.detail-title{text-align:center;}
.detail-title h4{font-size:16px;font-weight:700;margin:0;}
.detail-title p{font-size:12px;color:var(--brand-secondary);font-style:italic;margin:4px 0 0;}
.section-label{
  font-size:13px;font-weight:700;color:var(--brand-primary);
  text-transform:uppercase;letter-spacing:.07em;
  border-bottom:2px solid var(--brand-primary-tint);
  padding-bottom:7px;margin-bottom:14px;
}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.spec-box{background:#fff;border:1px solid var(--brand-border);border-radius:6px;padding:8px;}
.spec-box p{margin:0;}
.spec-box .spec-label{font-size:9px;color:var(--brand-secondary);text-transform:uppercase;}
.spec-box .spec-value{font-size:13px;font-weight:600;}

.timeline{position:relative;padding-left:24px;}
.timeline::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--brand-border);}
.timeline-item{position:relative;margin-bottom:16px;}
.timeline-item:last-child{margin-bottom:0;}
.timeline-dot{position:absolute;left:-24px;top:4px;width:14px;height:14px;border-radius:50%;border:3px solid var(--brand-neutral);background:var(--brand-primary);}
.timeline-item p{margin:0;}
.timeline-title{font-size:13px;font-weight:700;}
.timeline-sub{font-size:11px;color:var(--brand-secondary);}

.detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.btn-outline-brand{border:1px solid var(--brand-border);background:#fff;color:var(--brand-text);display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:8px;font-size:13px;font-weight:600;transition:all .15s ease;text-decoration:none;}
.btn-outline-brand:hover{background:var(--brand-neutral);color:var(--brand-text);}
.btn-brand{background:var(--brand-primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:8px;font-size:13px;font-weight:600;transition:background-color .15s ease;text-decoration:none;}
.btn-brand:hover{background:var(--brand-primary-dark);color:#fff;}
.btn-danger-outline{border:1px solid #f0c9cb;background:#fff;color:var(--brand-primary);display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:8px;font-size:13px;font-weight:600;transition:all .15s ease;}
.btn-danger-outline:hover{background:var(--brand-primary-tint);}

.btn-add-asset{background:var(--brand-primary);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;box-shadow:0 1px 2px rgba(0,0,0,.08);transition:background-color .15s ease;text-decoration:none;}
.btn-add-asset:hover{background:var(--brand-primary-dark);color:#fff;}

/* ---------- Mensaje del escaner de codigo de barras (Inventario) ---------- */
.escaner-mensaje{
  border-radius:8px; padding:10px 14px; font-size:13px; font-weight:600;
  margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  animation:escaner-aparecer .15s ease;
}
.escaner-mensaje-info{ background:#e7f0fb; color:#1f5aa6; border:1px solid #cfe1f7; }
.escaner-mensaje-exito{ background:#e5f6ec; color:#1a7a43; border:1px solid #c8ecd7; }
.escaner-mensaje-error{ background:var(--brand-primary-tint); color:var(--brand-primary); border:1px solid #f0c9cb; }
.escaner-mensaje a{ font-weight:700; text-decoration:underline; color:inherit; white-space:nowrap; }
@keyframes escaner-aparecer{ from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:translateY(0);} }

/* ---------- Mensajes flash (notificaciones tipo "toast") ---------- */
/* Fijas en la esquina superior derecha, angostas, no interfieren con
   el contenido de la pagina. Se apilan verticalmente si hay mas de una. */
.flash-container{
  position:fixed;
  top:calc(var(--topbar-h) + 16px);
  right:16px;
  z-index:2000;
  width:340px;
  max-width:calc(100vw - 32px);
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none; /* el contenedor no bloquea clics; los mensajes si (ver abajo) */
}
.flash-alert{
  pointer-events:auto;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  transition:opacity .35s ease, transform .35s ease, margin .35s ease, padding .35s ease, max-height .35s ease;
  opacity:1;
  transform:translateX(0);
  overflow:hidden;
  animation:flash-entrar .25s ease;
}
@keyframes flash-entrar{
  from{opacity:0;transform:translateX(24px);}
  to{opacity:1;transform:translateX(0);}
}
.flash-alert.flash-alert-hide{
  opacity:0;
  transform:translateX(24px);
  max-height:0;
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  border-width:0;
}
.flash-alert-close{
  border:none;background:transparent;color:inherit;opacity:.6;
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  transition:opacity .15s ease, background-color .15s ease;
}
.flash-alert-close:hover{opacity:1;background:rgba(0,0,0,.06);}

@media (max-width: 575.98px){
  .flash-container{
    top:calc(var(--topbar-h) + 8px);
    right:8px;
    left:8px;
    width:auto;
    max-width:none;
  }
}

/* ---------- Panel de detalle: oculta el sidebar para dar mas espacio ---------- */
/* Cuando el panel lateral de detalle esta abierto (ver app.js), el
   sidebar se desliza fuera de vista y la tabla/topbar recuperan ese
   espacio horizontal. Al cerrar el panel, todo vuelve a su lugar.
   Reutiliza las mismas transiciones ya definidas en .sidebar/.topbar/
   .main-wrap, por eso no hace falta declarar duration/easing de nuevo. */
body.panel-detalle-abierto .sidebar{ transform:translateX(-100%); }
body.panel-detalle-abierto .topbar{ left:0; }
body.panel-detalle-abierto .main-wrap{ margin-left:0; }

/* ---------- Formularios ---------- */
/* ---------- Buscador de empleados con autocompletado ---------- */
.empleado-buscador{position:relative;}
.empleado-buscador-resultados{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;right:0;
  background:#fff;
  border:1px solid var(--brand-border);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  max-height:260px;
  overflow-y:auto;
  z-index:50;
}
.empleado-buscador-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  width:100%;text-align:left;
  border:none;background:transparent;
  padding:9px 12px;font-size:13px;cursor:pointer;
  border-bottom:1px solid var(--brand-border);
  transition:background-color .1s ease;
}
.empleado-buscador-item:last-child{border-bottom:none;}
.empleado-buscador-item:hover, .empleado-buscador-item:focus{background:var(--brand-neutral);}
.empleado-buscador-nombre{font-weight:600;color:var(--brand-text);}
.empleado-buscador-puesto{font-size:11px;color:var(--brand-secondary);}
.empleado-buscador-vacio{padding:12px;font-size:12px;color:var(--brand-secondary);text-align:center;}

.form-card{background:#fff;border:1px solid var(--brand-border);border-radius:12px;padding:24px;max-width:760px;}
/* Variante de ancho completo, usada solo en el formulario de Activos
   (crear/editar) porque tiene muchos campos y aprovecha mejor una
   pantalla ancha. Los demas formularios (Proveedores, Marcas, Facturas)
   siguen usando el .form-card angosto de arriba. */
.form-card-wide{max-width:none;width:100%;}
.form-label-custom{font-size:12px;font-weight:700;color:var(--brand-heading);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px;}
.form-control:focus, .form-select:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-tint);}

/* ---------- Cards de Dashboard ---------- */
.kpi-card{background:#fff;border:1px solid var(--brand-border);border-radius:12px;padding:18px;}
.kpi-card .kpi-value{font-size:28px;font-weight:700;color:var(--brand-text);}
.kpi-card .kpi-label{font-size:12px;color:var(--brand-secondary);text-transform:uppercase;letter-spacing:.04em;}

/* ---------- Login ---------- */
/* ---------- Login: dividido en dos mitades (imagen + formulario) ---------- */
.login-split{
  min-height:100vh;
  display:flex;
}
.login-visual{
  flex:1 1 50%;
  position:relative;
  min-height:100vh;
  /* background-color es el respaldo: si la imagen de abajo no existe
     o no ha sido subida todavia, esta mitad se ve con un degradado de
     marca en vez de quedar en blanco/rota. */
  background-color:var(--brand-primary-dark);
  background-image:
    linear-gradient(160deg, rgba(178,41,47,.55), rgba(43,42,41,.65)),
    url('../img/login-hero.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:flex-end;
  padding:48px;
}
.login-visual-overlay h1{
  color:#fff;font-weight:700;font-size:32px;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.login-visual-overlay p{
  color:rgba(255,255,255,.85);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-top:4px;
}
.login-form-side{
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:var(--brand-neutral);
}
.login-card{background:#fff;border:1px solid var(--brand-border);border-radius:16px;padding:40px;max-width:400px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,.06);}
.login-brand h1{color:var(--brand-primary);font-weight:700;font-size:24px;margin:0;}
.login-brand p{color:var(--brand-secondary);font-size:12px;text-transform:uppercase;letter-spacing:.06em;}

@media (max-width: 991.98px){
  .login-visual{display:none;}
  .login-form-side{flex:1 1 100%;}
}

/* ---------- Responsivo ---------- */
@media (max-width: 991.98px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .sidebar-overlay.open{display:block;}
  .topbar{left:0;}
  .main-wrap{margin-left:0;}
  .sidebar-toggle-btn{display:flex;}
  .detail-panel.open{
    position:fixed;top:var(--topbar-h);right:0;bottom:0;width:100% !important;max-width:420px;z-index:1045;
  }
}

@media (max-width: 575.98px){
  .content{padding:12px;}
  .assets-table thead{display:none;}
  .assets-table, .assets-table tbody, .assets-table tr, .assets-table td{display:block;width:100%;}
  .assets-table tbody tr{border-bottom:1px solid var(--brand-border);padding:12px;}
  .assets-table tbody td{border:none;padding:4px 0;}
  .assets-table tbody td::before{content:attr(data-label);display:block;font-size:10px;font-weight:700;color:var(--brand-secondary);text-transform:uppercase;}
  .row-actions{justify-content:flex-start;margin-top:6px;}
  .spec-grid{grid-template-columns:1fr;}
  .detail-panel.open{max-width:100%;}
}

/* ======================================================================
   Centro de notificaciones (campanita del topbar)
   ====================================================================== */
.notif-wrap{position:relative;}
.notif-panel{
  position:absolute;top:44px;right:0;width:340px;max-width:90vw;background:#fff;
  border:1px solid var(--brand-border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:1060;overflow:hidden;
}
.notif-panel-header{
  display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  border-bottom:1px solid var(--brand-border);font-size:13px;font-weight:700;color:var(--brand-heading);
}
.notif-marcar-todas{
  background:none;border:none;color:var(--brand-primary);font-size:11px;font-weight:600;cursor:pointer;padding:0;
}
.notif-marcar-todas:hover{text-decoration:underline;}
.notif-panel-body{max-height:360px;overflow-y:auto;}
.notif-empty{padding:24px 14px;text-align:center;color:var(--brand-secondary);font-size:12px;margin:0;}
.notif-item{
  display:block;padding:12px 14px;border-bottom:1px solid var(--brand-border);text-decoration:none;color:inherit;
  transition:background-color .15s ease;
}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--brand-neutral);}
.notif-item.no-leida{background:var(--brand-primary-tint);}
.notif-item .notif-titulo{font-size:12.5px;font-weight:700;margin:0 0 2px;color:var(--brand-heading);}
.notif-item .notif-mensaje{font-size:12px;color:var(--brand-secondary);margin:0 0 4px;line-height:1.4;}
.notif-item .notif-tiempo{font-size:10px;color:var(--brand-secondary);opacity:.8;}
.notif-ver-todas{
  display:block;text-align:center;padding:10px;font-size:12px;font-weight:600;
  color:var(--brand-primary);text-decoration:none;border-top:1px solid var(--brand-border);
}
.notif-ver-todas:hover{background:var(--brand-neutral);}

.icon-whatsapp{color:#25D366;}
.icon-whatsapp.disabled{color:var(--brand-secondary);}

/* ======================================================================
   Menu desplegable del usuario (topbar)
   ====================================================================== */
.user-menu{
  border:1px solid var(--brand-border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:6px;min-width:200px;
}
.user-menu .dropdown-item{
  display:flex;align-items:center;gap:10px;font-size:13px;color:var(--brand-heading);
  border-radius:6px;padding:8px 10px;
}
.user-menu .dropdown-item .material-symbols-outlined{font-size:18px;color:var(--brand-secondary);}
.user-menu .dropdown-item:hover{background:var(--brand-neutral);}
.user-menu .dropdown-item:active{background:var(--brand-primary-tint);color:var(--brand-primary);}
.user-menu .dropdown-divider{margin:4px 0;}

@media (max-width: 575.98px){
  .notif-panel{position:fixed;top:var(--topbar-h);left:8px;right:8px;width:auto;max-width:none;}
}