/* =========================================================
   LAYOUT.CSS — CLEAN (sem duplicações / sem classes redundantes)
   ========================================================= */

/* =========================================================
   THEME TOKENS (por empresa)
   ========================================================= */
:root{
  /* base */
  --bg:#EDF2F7;
  --text:#1A202C;
  --muted:rgba(26,32,44,.70);
  --border:#CBD5E0;
  --card:rgba(255,255,255,.85);
  --shadow:0 .75rem 1.25rem rgba(0,0,0,.08);
  --radius:14px;

  /* primária */
  --primary:#0A58FF;
  --primary-hover:#0047FF;
  --primary-active:#0036D9;

  /* success (apoio) */
  --success:#095CF4;
  --success-hover:#0046BD;
  --success-active:#003A9C;

  /* texto em superfícies coloridas */
  --on-primary:rgba(255,255,255,.96);
  --on-success:rgba(255,255,255,.96);
  --on-danger:rgba(255,255,255,.96);

  /* tabelas */
  --table-head-bg:rgba(10,88,255,.10);
  --table-row-hover:rgba(10,88,255,.06);

  /* gradiente headers/hero */
  --hd-success-to:var(--primary-active);

  /* branco/preto utilitários */
  --white:#fff;
  --black:#000;

  --white-10:rgba(255,255,255,.10);
  --white-12:rgba(255,255,255,.12);
  --white-14:rgba(255,255,255,.14);
  --white-18:rgba(255,255,255,.18);
  --white-22:rgba(255,255,255,.22);
  --white-28:rgba(255,255,255,.28);
  --white-55:rgba(255,255,255,.55);
  --white-70:rgba(255,255,255,.70);
  --white-82:rgba(255,255,255,.82);
  --white-92:rgba(255,255,255,.92);
  --white-94:rgba(255,255,255,.94);

  --black-18:rgba(0,0,0,.18);
  --black-20:rgba(0,0,0,.20);
  --black-22:rgba(0,0,0,.22);
  --black-25:rgba(0,0,0,.25);
  --black-35:rgba(0,0,0,.35);
  --black-40:rgba(0,0,0,.40);
  --black-55:rgba(0,0,0,.55);
  --black-60:rgba(0,0,0,.60);

  /* soft colors p/ ícones/badges */
  --soft-primary:rgba(10,88,255,.92);
  --soft-success:rgba(34,197,94,.92);
  --soft-danger:rgba(239,68,68,.92);
  --soft-warning:rgba(245,158,11,.92);
  --soft-info:rgba(6,182,212,.92);
  --soft-secondary:rgba(71,85,105,.92);

  /* glass */
  --glass-bg:rgba(255,255,255,.10);
  --glass-brd:rgba(255,255,255,.35);
  --glass-blur:16px;

  --shadow-xl:0 18px 40px rgba(0,0,0,.25);
  --shadow-dropdown:0 22px 60px rgba(0,0,0,.22);

  --glass-panel:var(--white-94);
  --glass-border:rgba(203,213,224,.78);
  --glass-shadow:var(--shadow-dropdown);

  /* ring/empresa (usado no botão de usuário) */
  --company-accent:#78A0FF;
  --ring-gold:rgba(255,215,120,.92);

  /* premium hover */
  --lift:translateY(-2px);
  --ring:0 0 0 3px rgba(59,130,246,.18);
  --glow:0 18px 44px rgba(2,6,23,.12);
  --glow-dark:0 22px 60px rgba(0,0,0,.55);
}

html, body{ height:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Google Sans","Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =========================================================
   DARK MODE (por classe)
   ========================================================= */
body.dark-mode{
  --bg:#0b1220;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --border:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.06);
  --shadow:0 .85rem 1.35rem rgba(0,0,0,.35);

  --glass-bg:rgba(255,255,255,.06);
  --glass-brd:rgba(255,255,255,.18);
  --glass-panel:rgba(46,50,58,.92);
  --glass-border:var(--white-14);
  --glass-shadow:var(--shadow-dropdown);

  --table-head-bg:rgba(255,255,255,.06);
  --table-row-hover:rgba(255,255,255,.06);

  /* soft mais vivos no dark */
  --soft-primary:rgba(150,200,165,.95);
  --soft-success:rgba(120,210,155,.95);
  --soft-danger:rgba(255,130,150,.95);
  --soft-warning:rgba(255,210,120,.95);
  --soft-info:rgba(110,220,255,.95);
  --soft-secondary:rgba(220,230,255,.90);
}

body.dark-mode .text-muted,
body.dark-mode .text-muted-soft{ color:var(--muted)!important; }

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.14)!important;
  color:rgba(255,255,255,.92)!important;
}
body.dark-mode .form-control::placeholder{ color:rgba(255,255,255,.55)!important; }
body.dark-mode .btn-close{ filter:invert(1) grayscale(100%); opacity:.85; }

/* =========================================================
   UI MODE — COMPACT (ui-sm)
   ========================================================= */
body.ui-sm{ --radius:12px; font-size:.93rem; }
body.ui-sm h1{ font-size:1.55rem; }
body.ui-sm h2{ font-size:1.35rem; }
body.ui-sm h3{ font-size:1.15rem; }
body.ui-sm h4{ font-size:1rem; }

.main-wrap{ padding:16px 14px 22px; }
@media (min-width: 992px){ .main-wrap{ padding:18px 18px 24px; } }
body.ui-sm .main-wrap{ padding:14px 12px 20px; }

body.ui-sm .form-control,
body.ui-sm .form-select{
  padding:.4rem .65rem;
  font-size:.9rem;
  border-radius:10px;
}
body.ui-sm .btn{ padding:.38rem .7rem; font-size:.88rem; }
body.ui-sm .badge-soft{ font-size:.72rem; padding:.28rem .5rem; }

/* =========================================================
   NAVBAR
   ========================================================= */
.app-navbar{
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:sticky;
  top:0;
  z-index:1035;
}
body.dark-mode .app-navbar{
  background:rgba(44,48,58,.82);
  border-bottom-color:rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.app-navbar .navbar-collapse{ overflow:visible!important; }
.app-navbar .navbar-nav{ align-items:center; }

.app-brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  letter-spacing:.2px;
}
body.dark-mode .app-brand{ color:rgba(255,255,255,.92); }

.app-logo{
  width:34px; height:34px;
  object-fit:contain;
  border-radius:10px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(203,213,224,.7);
  box-shadow:0 .35rem .75rem rgba(0,0,0,.10);
}
body.dark-mode .app-logo{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 .6rem 1.1rem rgba(0,0,0,.35);
}

/* =========================================================
   BUTTONS (bootstrap vars) + padrão radius/focus
   ========================================================= */
.btn-primary{
  --bs-btn-bg:var(--primary);
  --bs-btn-border-color:var(--primary);
  --bs-btn-color:var(--on-primary);
  --bs-btn-hover-bg:var(--primary-hover);
  --bs-btn-hover-border-color:var(--primary-hover);
  --bs-btn-active-bg:var(--primary-active);
  --bs-btn-active-border-color:var(--primary-active);
}
.btn-success{
  --bs-btn-bg:var(--success);
  --bs-btn-border-color:var(--success);
  --bs-btn-color:var(--on-success);
  --bs-btn-hover-bg:var(--success-hover);
  --bs-btn-hover-border-color:var(--success-hover);
  --bs-btn-active-bg:var(--success-active);
  --bs-btn-active-border-color:var(--success-active);
}

.btn, .btn-sm, .btn-lg, .btn-group .btn, .input-group .btn{ border-radius:.65rem!important; }
.btn:focus, .btn:focus-visible{ box-shadow:none!important; outline:none!important; }

/* =========================================================
   CARDS / GLASS / HELPERS
   ========================================================= */
.card-soft{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
body.dark-mode .card-soft{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
}

.divider{ height:1px; background:var(--border); opacity:.85; }

.glass-card{
  background:var(--glass-bg);
  border:1px outset var(--glass-brd);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 18px 40px rgba(0, 0, 0, 0.227);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.glass-card:hover{
  transform:var(--lift);
  box-shadow:var(--glow);
  border-color:rgba(59,130,246,.22);
}
body.dark-mode .glass-card:hover{
  box-shadow:var(--glow-dark);
  border-color:rgba(255,255,255,.16);
}

/* =========================================================
   BADGES SOFT
   ========================================================= */
.badge-soft{
  font-weight:600;
  border:1px solid transparent;
  border-radius:999px;
  padding:.35rem .55rem;
  letter-spacing:.2px;
}
.badge-soft-primary{ background:rgba(41,75,147,.12); color:var(--primary); border-color:rgba(41,75,147,.22); }
.badge-soft-secondary{ background:rgba(26,32,44,.08); color:#2D3748; border-color:rgba(26,32,44,.16); }
body.dark-mode .badge-soft-secondary{ color:rgba(255,255,255,.86); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }
.badge-soft-success{ background:rgba(43,108,176,.12); color:var(--success); border-color:rgba(43,108,176,.22); }
.badge-soft-danger{ background:rgba(220,53,69,.12); color:#B02A37; border-color:rgba(220,53,69,.22); }
.badge-soft-warning{ background:rgba(255,193,7,.16); color:#856404; border-color:rgba(255,193,7,.28); }
.badge-soft-info{ background:rgba(13,202,240,.14); color:#087990; border-color:rgba(13,202,240,.25); }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  border-radius:14px;
  border:1px solid rgba(203,213,224,.75);
  box-shadow:0 .75rem 1.25rem rgba(0,0,0,.12);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.toast .toast-header{
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(203,213,224,.6);
}
body.dark-mode .toast{
  background:rgba(14,18,30,.85);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
}
body.dark-mode .toast .toast-header{
  background:rgba(14,18,30,.65);
  border-bottom-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}

/* =========================================================
   HEADER SUCCESS (módulos)
   ========================================================= */
.hd-success{
  background:linear-gradient(135deg, var(--success), var(--hd-success-to));
  border-radius:var(--radius);
  border:1px solid var(--white-22);
  box-shadow:var(--shadow-xl);
  color:var(--on-success);
}
.hd-ico{
  width:46px; height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:16px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
}
.hd-ico i{ font-size:1.2rem; line-height:1; }

body.ui-sm .hd-success{ padding:10px 12px!important; border-radius:12px; box-shadow:0 12px 26px rgba(0,0,0,.18); }
body.ui-sm .hd-success h3{ font-size:1.05rem; margin-bottom:0; }
body.ui-sm .hd-success .small{ font-size:.78rem; }
body.ui-sm .hd-success .hd-ico{ width:36px; height:36px; border-radius:12px; }
body.ui-sm .hd-success .btn{ padding:.32rem .6rem; font-size:.78rem; }

/* =========================================================
   TABLE FILTER BAR
   ========================================================= */
.table-filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  padding:10px 12px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 .5rem 1rem rgba(0,0,0,.05);
}
body.dark-mode .table-filters{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 .6rem 1.2rem rgba(0,0,0,.35);
}
body.ui-sm .table-filters{ padding:8px 10px; gap:8px; }

.table-filters .form-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--muted);
  margin-bottom:2px;
}
.table-filters .form-control,
.table-filters .form-select{ min-width:160px; }
.table-filters .btn{ height:36px; }

body.ui-sm .table-filters .form-control,
body.ui-sm .table-filters .form-select{
  height:34px; padding:.35rem .6rem; font-size:.85rem;
}
body.ui-sm .table-filters .btn{ height:34px; padding:.3rem .65rem; font-size:.8rem; }

/* =========================================================
   ICON BUTTONS (glass)
   ========================================================= */
.btn-ic{
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(203,213,224,.65);
  box-shadow:0 .6rem 1.2rem rgba(0,0,0,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration:none;
}
body.ui-sm .btn-ic{ width:34px; height:34px; }
body.dark-mode .btn-ic{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 .9rem 1.4rem rgba(0,0,0,.45);
}
.btn-ic:hover{
  transform:translateY(-1px);
  box-shadow:0 .9rem 1.5rem rgba(0,0,0,.12);
  background:rgba(255,255,255,.70);
}
body.dark-mode .btn-ic:hover{
  background:rgba(255,255,255,.10);
  box-shadow:0 1.1rem 1.7rem rgba(0,0,0,.55);
}
.btn-ic i{ font-size:1.05rem; line-height:1; }

.btn-ic--primary i{ color:var(--soft-primary); }
.btn-ic--success i{ color:var(--soft-success); }
.btn-ic--danger  i{ color:var(--soft-danger); }
.btn-ic--warning i{ color:var(--soft-warning); }
.btn-ic--info    i{ color:var(--soft-info); }
.btn-ic--secondary i{ color:var(--soft-secondary); }

.ic-group{ display:inline-flex; align-items:center; gap:8px; }
body.ui-sm .ic-group{ gap:6px; }

/* =========================================================
   TOOLTIP glass
   ========================================================= */
.tooltip{ z-index:9999; }
.tooltip .tooltip-inner{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(203,213,224,.75);
  color:#111827;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  border-radius:12px;
  padding:.45rem .6rem;
  font-weight:600;
  letter-spacing:.2px;
}
body.dark-mode .tooltip .tooltip-inner{
  background:rgba(46,50,58,.86);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.96);
  box-shadow:0 16px 34px rgba(0,0,0,.55);
}

/* =========================================================
   MODAL — GLASS + HEADER (modal-hd-success)
   ========================================================= */
.modal{ z-index:1060; }
.modal-backdrop{ z-index:1055; }

.modal .modal-content{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 40px rgba(0,0,0,.20);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden; /* deixa elegante (sem bloco duplicado) */
}
.modal .modal-header{ border-bottom:1px solid rgba(203,213,224,.55); }
.modal .modal-footer{ border-top:1px solid rgba(203,213,224,.55); }

body.dark-mode .modal .modal-content{
  background:rgba(46,50,58,.88);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 22px 50px rgba(0,0,0,.55);
}
body.dark-mode .modal .modal-header,
body.dark-mode .modal .modal-footer{ border-color:rgba(255,255,255,.10); }

/* Modal header estilo “Comunicados” */
.modal-hd-success{
  position:relative;
  background:linear-gradient(135deg, var(--success), var(--hd-success-to));
  border-bottom:none!important;
  padding:21px 20px!important;
  color:var(--on-success)!important;
}
.modal-hd-success *{ color:var(--on-success)!important; }

.modal-hd-success .mh{ display:flex; align-items:center; gap:14px; }
.modal-hd-success .mh-left{ display:flex; align-items:center; gap:12px; }

.modal-hd-success .mh-ico{
  width:44px; height:44px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
}
.modal-hd-success .mh-ico i{ font-size:1.25rem; }

.modal-hd-success .mh-title{ font-weight:700; font-size:1.05rem; margin:0; }
.modal-hd-success .mh-sub{ font-size:.82rem; opacity:.88; margin-top:2px; }

.modal-hd-success .btn-close{
  position:absolute;
  top:14px; right:16px;
  filter:invert(1) grayscale(100%);
  opacity:.95;
}
.modal-hd-success .btn-close:hover{ opacity:1; }

body.ui-sm .modal-hd-success{ padding:12px 12px!important; }
body.ui-sm .modal-hd-success .mh-ico{ width:36px; height:36px; border-radius:12px; }
body.ui-sm .modal-hd-success .mh-ico i{ font-size:1rem; }
body.ui-sm .modal-hd-success .mh-title{ font-size:1rem; }
body.ui-sm .modal-hd-success .mh-sub{ font-size:.78rem; }

/* =========================================================
   DROPDOWN GLASS (navbar user) — não expande navbar
   ========================================================= */
.app-navbar .dropdown{ position:relative; }

.nav-user-btn{
  width:38px; height:38px;
  border-radius:999px!important;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0!important;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(203,213,224,.65);
  box-shadow:0 .6rem 1.2rem rgba(0,0,0,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:relative;
  overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
body.ui-sm .nav-user-btn{ width:34px; height:34px; }
.nav-user-btn i{ font-size:1.15rem; color:var(--soft-secondary); }
.nav-user-btn.dropdown-toggle::after{ display:none!important; }
.nav-user-btn img{ display:block; }

body.dark-mode .nav-user-btn{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--company-accent) 30%, transparent),
    0 .9rem 1.4rem rgba(0,0,0,.45);
}
body.dark-mode .nav-user-btn::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--company-accent) 45%, transparent),
      transparent 62%);
  opacity:.60;
  pointer-events:none;
}
body.dark-mode .nav-user-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--company-accent) 40%, transparent),
    0 1.1rem 1.7rem rgba(0,0,0,.55);
}

/* online dot */
.nav-user-btn.is-online::before{
  content:"";
  position:absolute;
  right:3px; bottom:3px;
  width:10px; height:10px;
  border-radius:999px;
  background:#22c55e;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  z-index:2;
}
body.dark-mode .nav-user-btn.is-online::before{
  border-color:rgba(46,50,58,.92);
  box-shadow:0 10px 20px rgba(0,0,0,.55);
}

/* admin ring dourado no dark */
body.dark-mode.is-admin .nav-user-btn{
  box-shadow:
    0 0 0 2px rgba(255,215,120,.28),
    0 .9rem 1.4rem rgba(0,0,0,.45);
  border-color:rgba(255,215,120,.22);
}
body.dark-mode.is-admin .nav-user-btn::after{
  background:radial-gradient(circle at 30% 30%, rgba(255,215,120,.45), transparent 62%);
  opacity:.62;
}
body.dark-mode.is-admin .nav-user-btn:hover{
  box-shadow:
    0 0 0 3px rgba(255,215,120,.34),
    0 1.1rem 1.7rem rgba(0,0,0,.55);
}

/* menu */
.dropdown-glass{ min-width:260px; padding:.55rem; border-radius:14px; }

.app-navbar .dropdown-menu{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  right:0!important;
  left:auto!important;
  margin:0!important;
  z-index:9999!important;
  will-change:transform;
}

.dropdown-menu.dropdown-glass{
  overflow:hidden;
  background:var(--glass-panel)!important;
  border:1px solid var(--glass-border)!important;
  box-shadow:var(--glass-shadow)!important;
  backdrop-filter:blur(28px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(170%)!important;
}
.dropdown-menu.dropdown-glass::before{
  content:"";
  position:absolute;
  inset:-24px;
  background:
    radial-gradient(140px 90px at 20% 15%, rgba(255,255,255,.58), transparent 60%),
    radial-gradient(160px 110px at 85% 10%, rgba(41,75,147,.20), transparent 62%),
    radial-gradient(220px 150px at 40% 92%, rgba(255,255,255,.40), transparent 68%);
  opacity:.80;
  pointer-events:none;
}
.dropdown-menu.dropdown-glass > *{ position:relative; z-index:1; }

body.dark-mode .dropdown-menu.dropdown-glass{
  background:rgba(46,50,58,.92)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 28px 75px rgba(0,0,0,.60)!important;
  backdrop-filter:blur(30px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(170%)!important;
}
body.dark-mode .dropdown-menu.dropdown-glass::before{ opacity:.55; }

.dropdown-glass .dropdown-header{ padding:.55rem .6rem; margin:0; }
.dropdown-glass .user-name{ font-weight:700; color:var(--text); line-height:1.15; }
.dropdown-glass .user-email{ font-size:.82rem; color:var(--muted); }
body.dark-mode .dropdown-glass .user-name{ color:rgba(255,255,255,.92); }
body.dark-mode .dropdown-glass .user-email{ color:rgba(255,255,255,.65); }

.dropdown-glass .dropdown-item{
  border-radius:12px;
  padding:.55rem .6rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  color:var(--text)!important;
}
.dropdown-glass .dropdown-item:hover{ background:rgba(41,75,147,.08); }
body.dark-mode .dropdown-glass .dropdown-item{ color:rgba(255,255,255,.92)!important; }
body.dark-mode .dropdown-glass .dropdown-item:hover{ background:rgba(255,255,255,.08); }

.dropdown-glass .dropdown-divider{
  border-top-color:rgba(203,213,224,.65);
  margin:.5rem .2rem;
}
body.dark-mode .dropdown-glass .dropdown-divider{ border-top-color:rgba(255,255,255,.10); }

.dropdown-glass .theme-ico{
  width:28px; height:28px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(41,75,147,.10);
  border:1px solid rgba(41,75,147,.16);
}
body.dark-mode .dropdown-glass .theme-ico{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}

/* =========================================================
   TABLES — padrão + dark mode
   ========================================================= */
.table-responsive{ background:transparent; }
.table{ margin-bottom:0; }
.card-soft .table{ background:transparent!important; }

.card-soft .table thead{ background:var(--table-head-bg)!important; }
.card-soft .table thead th{ border-bottom-color:rgba(0,0,0,.06); }

.table-hover tbody tr:hover{ background:var(--table-row-hover); }

body.dark-mode .table{
  --bs-table-bg:transparent!important;
  --bs-table-color:rgba(255,255,255,.92)!important;
  --bs-table-striped-bg:rgba(255,255,255,.03)!important;
  --bs-table-striped-color:rgba(255,255,255,.92)!important;
  --bs-table-hover-bg:rgba(255,255,255,.06)!important;
  --bs-table-hover-color:rgba(255,255,255,.92)!important;
  --bs-table-border-color:rgba(255,255,255,.10)!important;
  background:transparent!important;
  color:rgba(255,255,255,.92)!important;
}
body.dark-mode .table-responsive,
body.dark-mode .card-soft .table{ background:transparent!important; }

body.dark-mode .table thead,
body.dark-mode .card-soft .table thead{ background:var(--table-head-bg)!important; }

body.dark-mode .table thead th,
body.dark-mode .card-soft .table thead th{
  color:rgba(255,255,255,.82)!important;
  border-bottom-color:rgba(255,255,255,.12)!important;
}
body.dark-mode .table td,
body.dark-mode .table th{ border-top-color:rgba(255,255,255,.10)!important; }
body.dark-mode .table-hover tbody tr:hover{ background:var(--table-row-hover)!important; }

/* =========================================================
   FILTER POP (dropdown no header) + OFFCANVAS (mobile)
   ========================================================= */
.filter-pop{ width:min(920px, 96vw); padding:0!important; }
.filter-pop .table-filters{
  border:0;
  box-shadow:none;
  background:transparent;
  padding:10px 10px;
}

.offcanvas-glass{
  width:min(420px, 92vw);
  background:var(--glass-panel);
  border-left:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(26px) saturate(170%);
  -webkit-backdrop-filter:blur(26px) saturate(170%);
}
.offcanvas-glass .offcanvas-header{ border-bottom:1px solid rgba(203,213,224,.55); }
body.dark-mode .offcanvas-glass .offcanvas-header{ border-bottom-color:rgba(255,255,255,.10); }

.offcanvas-glass .theme-ico{
  width:36px; height:36px;
  border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(41,75,147,.10);
  border:1px solid rgba(41,75,147,.16);
}
body.dark-mode .offcanvas-glass .theme-ico{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}
.offcanvas-glass .table-filters{ width:100%; margin:0; }
body.dark-mode .offcanvas-glass .btn-close{ filter:invert(1) grayscale(100%); opacity:.85; }

/* =========================================================
   MOBILE helpers
   ========================================================= */
@media (max-width: 576px){
  .dropdown-glass{ min-width:230px; }
  .hd-success{ border-radius:12px; }
}

/* cards (lista) */
.user-card{ animation:fadeIn .18s ease; }
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:none; }
}

/* =========================================================
   KPI cards (único padrão — removeu duplicação)
   - base + variações de cor
   ========================================================= */
.kpi-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(4, minmax(0,1fr));
  margin-bottom:12px;
}
@media (max-width: 992px){
  .kpi-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

.kpi-card{
  position:relative;
  border-radius:16px;
  padding:16px 16px;
  color:#fff;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 .9rem 1.8rem rgba(0,0,0,.10);
  transform:translateZ(0);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
  min-height:92px;
}
.kpi-card::after{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.22), transparent 42%),
    radial-gradient(circle at 85% 0%, rgba(255,255,255,.14), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 60%);
  transform:rotate(-8deg);
  pointer-events:none;
}
.kpi-card:hover{
  transform:translateY(-2px);
  box-shadow:0 1.25rem 2.4rem rgba(0,0,0,.16);
  filter:saturate(1.02);
}

.kpi-card .kpi-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.kpi-card .kpi-label{
  font-weight:700;
  font-size:.95rem;
  opacity:.95;
  letter-spacing:.2px;
}
.kpi-card .kpi-val{
  font-weight:700;
  font-size:1.7rem;
  letter-spacing:.2px;
  line-height:1.05;
  margin-top:4px;
}
.kpi-card .kpi-sub{
  margin-top:6px;
  font-size:.85rem;
  opacity:.92;
}
.kpi-card .kpi-ico{
  width:56px; height:56px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  flex:0 0 auto;
  box-shadow:0 .65rem 1.25rem rgba(0,0,0,.14);
}
.kpi-card .kpi-ico i{
  font-size:1.65rem;
  line-height:1;
  color:#fff;
  opacity:.98;
}

.kpi-card.is-blue{ background:linear-gradient(135deg, #0b5cff, #0046bd); }
.kpi-card.is-orange{ background:linear-gradient(135deg, #f59e0b, #d97706); }
.kpi-card.is-cyan{ background:linear-gradient(135deg, #06b6d4, #0284c7); }
.kpi-card.is-indigo{ background:linear-gradient(135deg, #6366f1, #4338ca); }
.kpi-card.is-green{ background:linear-gradient(135deg, #22c55e, #16a34a); }
.kpi-card.is-red{ background:linear-gradient(135deg, #ef4444, #b91c1c); }

body.dark-mode .kpi-card{
  box-shadow:0 1.2rem 2.6rem rgba(0,0,0,.45);
  border-color:rgba(255,255,255,.10);
}
body.dark-mode .kpi-card .kpi-ico{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.16);
}

@media (prefers-reduced-motion: reduce){
  .kpi-card{ transition:none!important; }
  .kpi-card:hover{ transform:none!important; }
}

/* =========================================================
   Tabs wrap (genérico)
   ========================================================= */
.tabs-3col{ display:grid; gap:12px; }
@media (min-width: 992px){
  .tabs-3col{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* =========================================================
   Ticket cards (genérico)
   ========================================================= */
.ticket-list{ display:flex; flex-direction:column; gap:10px; padding:10px; }
.ticket-card{
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .12s ease;
}
.ticket-card:hover{ transform:translateY(-1px); }
.ticket-title{ font-weight:700; }
.ticket-sub{ color:var(--muted); font-size:.86rem; }
.ticket-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

/* =========================================================
   Conversation bubbles + timeline (genérico)
   ========================================================= */
.conv{ display:flex; flex-direction:column; gap:10px; }

.bubble{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.55);
}
body.dark-mode .bubble{ background:rgba(255,255,255,.06); }
.bubble.me{
  border-color:rgba(41,75,147,.22);
  background:rgba(41,75,147,.08);
}
body.dark-mode .bubble.me{ background:rgba(120,160,255,.10); }

.bubble .b-meta{
  font-size:.78rem;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.bubble .b-text{ margin-top:6px; white-space:pre-wrap; }

.timeline{ display:flex; flex-direction:column; gap:10px; }
.tl-item{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.40);
}
body.dark-mode .tl-item{ background:rgba(255,255,255,.05); }
.tl-top{ display:flex; justify-content:space-between; gap:10px; font-size:.8rem; color:var(--muted); }
.tl-acao{ font-weight:700; color:var(--text); margin-top:4px; }
.tl-diff{ font-size:.85rem; color:var(--muted); margin-top:4px; }

/* =========================================================
   Truncate (único)
   ========================================================= */
.truncate-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =========================================================
   PREMIUM UI (reutilizável)
   ========================================================= */
.r-card{ padding:0; overflow:hidden; }

.r-hd{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px;
  background:linear-gradient(135deg, var(--success), var(--success-hover));
  color:var(--on-success);
  overflow:hidden;
}
.r-hd .t{ font-weight:600; letter-spacing:.1px; }
.r-hd .s{ font-size:.82rem; opacity:.92; }
.r-hd .hd-left{ display:flex; align-items:center; gap:10px; min-width:0; }

.r-hd .hd-ico{
  width:44px; height:44px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 .75rem 1.25rem rgba(0,0,0,.10);
  flex:0 0 auto;
}
.r-hd .hd-ico i{ font-size:1.25rem; color:rgba(255,255,255,.98); }

.r-body{ padding:12px; }

/* shine no header */
.r-hd::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent 65%);
  transform:rotate(12deg);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.glass-card:hover .r-hd::after{ opacity:.9; }

/* Mini item */
.mini-item{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.45);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
body.dark-mode .mini-item{ background:rgba(255,255,255,.05); }

.mini-item:hover{
  transform:var(--lift);
  box-shadow:0 16px 34px rgba(2,6,23,.10);
  border-color:rgba(59,130,246,.22);
  background:rgba(255,255,255,.60);
}
body.dark-mode .mini-item:hover{
  background:rgba(255,255,255,.08);
  box-shadow:0 18px 42px rgba(0,0,0,.55);
  border-color:rgba(255,255,255,.16);
}
.mini-item:focus,
.mini-item:focus-within{
  outline:none;
  box-shadow:var(--ring);
}

/* ícone mini-item */
.mi-ico{
  width:44px; height:44px;
  border-radius:14px;
  flex:0 0 44px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,88,255,.10);
  border:1px solid rgba(10,88,255,.18);
  box-shadow:0 .65rem 1.2rem rgba(2,6,23,.10);
}
body.dark-mode .mi-ico{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 1.0rem 1.8rem rgba(0,0,0,.45);
}
.mi-ico i{ font-size:1.2rem; color:var(--soft-primary); }

/* Pills */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.18);
  background:rgba(59,130,246,.06);
  font-weight:700;
  font-size:.78rem;
  white-space:nowrap;
}
body.dark-mode .pill{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.pill i{ color:var(--soft-primary); }

.pill--date{ background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.20); }
.pill--date i{ color:rgba(59,130,246,.92); }
.pill--user{ background:rgba(71,85,105,.10); border-color:rgba(71,85,105,.20); }
.pill--user i{ color:rgba(71,85,105,.92); }
.pill--tel{ background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.22); }
.pill--tel i{ color:rgba(37,99,235,.95); }
.pill--wa{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.24); }
.pill--wa i{ color:rgba(16,185,129,.95); }
.pill--status{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.25); }
.pill--status i{ color:rgba(245,158,11,.95); }

/* Avatares/thumbs */
.p-ava, .menu-thumb, .anv-ava{
  border:1px solid var(--border);
  background:rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
}
body.dark-mode .p-ava,
body.dark-mode .menu-thumb,
body.dark-mode .anv-ava{ background:rgba(255,255,255,.06); }

.p-ava{
  width:56px; height:56px;
  border-radius:14px;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow:0 .65rem 1.2rem rgba(2,6,23,.10);
}
.p-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.p-ava i{ font-size:1.8rem; opacity:.65; }

.menu-thumb{
  width:92px; height:92px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow:0 .65rem 1.2rem rgba(2,6,23,.10);
}
.menu-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.anv-ava{
  width:44px; height:44px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 44px;
  box-shadow:0 .65rem 1.2rem rgba(2,6,23,.10);
}
.anv-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.anv-ava i{ font-size:1.25rem; opacity:.65; }