/* ============================================================
   ExiZap — tokens de identidade (direção Ciano Refinado)
   Reutilizável em Login, Site, Painel e no app (CRM).
   ============================================================ */
:root{
  /* Marca — Ciano / Teal */
  --c-50:#ECFBFD; --c-100:#D0F5F8; --c-200:#A6ECF2; --c-300:#6FE0EA;
  --c-400:#35D0DE; --c-500:#15B5C6; --c-600:#0C96A6; --c-700:#0C8695;
  --c-800:#10646E; --c-900:#123E45; --c-ink:#0F2830;
  --brand:var(--c-500); --brand-strong:var(--c-700); --brand-bright:var(--c-400);
  /* aliases --ez-* (nomes do handoff) = mesmos valores da escala --c-* */
  --ez-50:var(--c-50); --ez-100:var(--c-100); --ez-200:var(--c-200); --ez-300:var(--c-300);
  --ez-400:var(--c-400); --ez-500:var(--c-500); --ez-600:var(--c-600); --ez-700:var(--c-700);
  --ez-800:var(--c-800); --ez-900:var(--c-900); --ez-ink:var(--c-ink);
  /* Neutros (slate levemente teal) */
  --n-0:#FFFFFF; --n-50:#F6FAFB; --n-100:#EDF2F4; --n-200:#E1E9EC; --n-300:#CDD8DC;
  --n-400:#9FB0B6; --n-500:#7B8E95; --n-600:#586A71; --n-700:#3F4E54; --n-800:#28353A; --n-900:#16211F;
  /* Semânticos */
  --ok:#17B26A; --warn:#F79009; --danger:#F04438; --info:#15B5C6;
  --ok-soft:#E7F7EF; --warn-soft:#FEF0D8; --danger-soft:#FDE7E5; --info-soft:#E3F7FA;
  /* Superfícies (claro) */
  --bg:var(--n-50); --surface:#fff; --border:var(--n-200); --ink:var(--n-900); --muted:var(--n-500);
  --radius:12px; --shadow:0 2px 20px rgba(18,62,69,.08); --shadow-lg:0 24px 60px rgba(18,62,69,.16);
  --font:"Poppins", system-ui, sans-serif;
}
[data-theme=dark]{
  --bg:#0d1a1e; --surface:#122329; --border:#1e353c; --ink:#e6eef0; --muted:#8aa3aa;
  --info-soft:rgba(53,208,222,.14); --ok-soft:rgba(23,178,106,.16); --warn-soft:rgba(247,144,9,.16); --danger-soft:rgba(240,68,56,.16);
  --shadow:0 2px 20px rgba(0,0,0,.3); --shadow-lg:0 24px 60px rgba(0,0,0,.45);
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--font); background:var(--bg); color:var(--ink); }

/* marca */
.ez-brand{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:22px; letter-spacing:-.4px; color:var(--ink); text-decoration:none; }
.ez-brand b{ color:var(--brand); }
.ez-mark{ width:40px; height:40px; flex-shrink:0; background:url("/assets/images/brand/exizap-mark.svg") center/contain no-repeat; }

/* botões */
.ezbtn{ font-family:inherit; font-size:14px; font-weight:600; padding:11px 20px; border-radius:10px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:transform .06s, box-shadow .2s, background .2s; }
.ezbtn:active{ transform:translateY(1px); }
.ezbtn-primary{ background:var(--brand); color:#fff; box-shadow:0 8px 20px -8px var(--brand); }
.ezbtn-primary:hover{ background:var(--c-600); }
.ezbtn-bright{ background:var(--brand-bright); color:var(--c-900); }
.ezbtn-ghost{ background:transparent; border:1px solid var(--border); color:var(--ink); }
.ezbtn-ghost:hover{ border-color:var(--brand); color:var(--brand-strong); }
.ezbtn-lg{ padding:14px 26px; font-size:15px; }

/* cartão / input / badge */
.ezcard{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.ezinput{ width:100%; font-family:inherit; font-size:14px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--ink); }
.ezinput:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--info-soft); }
.ezlabel{ font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px; display:block; }
.ezbadge{ font-size:11px; font-weight:600; padding:3px 10px; border-radius:6px; background:var(--info-soft); color:var(--brand-strong); }

a{ color:var(--brand-strong); } a:hover{ color:var(--brand); }

/* ============================================================
   Shell reutilizável — app (rail + topbar + content)
   Usado por todas as telas do app ExiZap.
   ============================================================ */
.ez-app{ display:flex; height:100vh; overflow:hidden; }
.ez-rail{ width:240px; flex-shrink:0; background:var(--c-ink); color:#a7c2c8; display:flex; flex-direction:column; overflow-y:auto; }
[data-theme=dark] .ez-rail{ background:#0a1417; }
.ez-rail .brand{ height:66px; display:flex; align-items:center; gap:9px; padding:0 20px; color:#fff; font-weight:700; font-size:19px; flex-shrink:0; }
.ez-rail .brand .lg{ width:32px; height:32px; flex-shrink:0; background:url("/assets/images/brand/exizap-mark.svg") center/contain no-repeat; text-indent:-9999px; overflow:hidden; }
.ez-rail .cap{ font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#5b757c; padding:16px 20px 6px; }
.ez-rail a{ display:flex; align-items:center; gap:11px; padding:9px 20px; color:#9fbac1; text-decoration:none; font-size:13.5px; border-left:3px solid transparent; }
.ez-rail a i{ font-size:18px; }
.ez-rail a:hover{ color:#e6f4f6; }
.ez-rail a.on{ color:#fff; background:rgba(255,255,255,.05); border-left-color:var(--brand-bright); font-weight:500; }
.ez-rail a .b{ margin-left:auto; background:var(--brand); color:#fff; font-size:10px; border-radius:9px; padding:0 6px; font-weight:600; }
.ez-rail .grp .parent{ cursor:pointer; }
.ez-rail .grp .parent .chev{ margin-left:auto; font-size:16px; transition:transform .2s; }
.ez-rail .grp.open .parent .chev{ transform:rotate(90deg); }
.ez-rail .grp.open .parent{ color:#e6f4f6; }
.ez-rail .sub{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.ez-rail .grp.open .sub{ max-height:560px; }
.ez-rail .sub a{ padding:7px 20px 7px 48px; font-size:12.5px; color:#8ba7ae; }
.ez-rail .sub a.on{ color:#fff; background:rgba(255,255,255,.05); border-left-color:var(--brand-bright); }
.ez-rail .sub a::before{ content:""; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; }
.ez-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.ez-top{ height:66px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 24px; gap:14px; flex-shrink:0; }
.ez-top .h{ font-weight:700; font-size:17px; }
.ez-top .search{ position:relative; margin-left:6px; }
.ez-top .search i{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); }
.ez-top .search input{ padding-left:34px; width:260px; }
.ez-top .right{ margin-left:auto; display:flex; align-items:center; gap:14px; color:var(--muted); }
.ez-top .right i{ font-size:20px; cursor:pointer; }
.ez-top .ava{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.ez-top .h{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* botão de menu (mobile) no topbar */
.ez-railtoggle{ display:inline-flex; align-items:center; background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; padding:0 2px; line-height:1; }
.ez-railtoggle:hover{ color:var(--brand-strong); }

/* dropdown do usuário no topbar (usa Bootstrap dropdown) */
.ez-top .ez-user{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); cursor:pointer; }
.ez-top .ez-user .nm{ font-size:13px; font-weight:600; line-height:1.15; }
.ez-top .ez-user .rl{ font-size:11px; color:var(--muted); text-transform:capitalize; }
.ez-top .ez-user .mdi-chevron-down{ font-size:16px; color:var(--muted); }
.ez-top .dropdown-menu{ font-family:var(--font); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); background:var(--surface); padding:6px; }
.ez-top .dropdown-item{ border-radius:8px; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:9px; padding:8px 12px; }
.ez-top .dropdown-item:hover{ background:var(--info-soft); color:var(--brand-strong); }
.ez-top .dropdown-item i{ font-size:17px; }

/* ── Topbar: atalhos (ponto / chat / lembretes / tela cheia) ── */
.ez-top .ez-tico{ position:relative; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer; text-decoration:none; font-size:20px; line-height:1; }
.ez-top .ez-tico:hover{ color:var(--brand-strong); }
.ez-top .ez-tico i{ font-size:20px; }
.ez-tbadge{ position:absolute; top:-6px; right:-7px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--brand); color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--surface); }
.ez-pop{ min-width:288px; padding:0 !important; overflow:hidden; }
.ez-pop-h{ font-weight:700; font-size:13.5px; color:var(--ink); padding:12px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.ez-pop-h i{ color:var(--brand); font-size:18px; }
.ez-pop-b{ padding:14px; }
.ez-pop-b.p-0{ padding:0; }
.ez-pop-f{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:10px 14px; border-top:1px solid var(--border); font-size:12.5px; color:var(--brand-strong) !important; text-decoration:none; font-weight:600; }
.ez-pop-f:hover{ background:var(--info-soft); }
.ez-ponto-status{ font-size:13px; color:var(--muted); margin-bottom:10px; }
.ez-pop-empty{ padding:18px 14px; text-align:center; color:var(--muted); font-size:12.5px; }
.ez-lemb-list{ max-height:340px; overflow-y:auto; }
.ez-lemb-item{ display:flex; align-items:flex-start; gap:9px; padding:10px 14px; border-bottom:1px solid var(--border); text-decoration:none; color:var(--ink); }
.ez-lemb-item:last-child{ border-bottom:0; }
.ez-lemb-item:hover{ background:var(--info-soft); }
.ez-lemb-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); margin-top:5px; flex:none; }
.ez-lemb-item.late .ez-lemb-dot{ background:var(--danger, #e5484d); }
.ez-lemb-body{ display:flex; flex-direction:column; min-width:0; gap:2px; }
.ez-lemb-desc{ font-size:13px; line-height:1.3; }
.ez-lemb-when{ font-size:11.5px; color:var(--muted); }
.ez-lemb-item.late .ez-lemb-when{ color:var(--danger, #e5484d); font-weight:600; }

/* ── Notificações (o sino) ── */
.ez-pop-h-act{ margin-left:auto; font-size:11.5px; font-weight:600; color:var(--brand-strong); text-decoration:none; }
.ez-pop-h-act:hover{ text-decoration:underline; }
.ez-notif-list{ max-height:380px; overflow-y:auto; }
.ez-notif-item{ display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); text-decoration:none; color:var(--ink); cursor:pointer; }
.ez-notif-item:last-child{ border-bottom:0; }
.ez-notif-item:hover{ background:var(--info-soft); }
.ez-notif-item.unread{ background:var(--info-soft); }
.ez-notif-item.unread .ez-notif-t{ font-weight:700; }
.ez-notif-ic{ width:32px; height:32px; flex:none; border-radius:8px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--brand-strong); }
.ez-notif-ic i{ font-size:17px; }
.ez-notif-bd{ display:flex; flex-direction:column; min-width:0; gap:2px; flex:1 1 auto; }
.ez-notif-t{ font-size:13px; line-height:1.3; }
.ez-notif-m{ font-size:12px; color:var(--muted); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ez-notif-w{ font-size:11px; color:var(--muted); }
.ez-notif-x{ flex:none; background:none; border:0; color:var(--muted); cursor:pointer; padding:2px; line-height:1; border-radius:6px; opacity:.5; }
.ez-notif-x:hover{ opacity:1; background:var(--border); color:var(--ink); }
.ez-notif-x i{ font-size:15px; }
@keyframes ez-bell-ring{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(16deg); } 40%{ transform:rotate(-14deg); } 60%{ transform:rotate(10deg); } 80%{ transform:rotate(-6deg); } }
.ez-tico.ez-bell-ring i{ animation:ez-bell-ring .9s ease; transform-origin:top center; }
.ez-notif-ic.ez-prio-importante{ color:#c98a1e; }
.ez-notif-ic.ez-prio-urgente{ color:var(--danger, #e5484d); }

/* área de conteúdo (rola) + rodapé */
.ez-content{ flex:1; overflow-y:auto; padding:24px; min-height:0; }
.ez-foot{ padding:14px 24px; border-top:1px solid var(--border); color:var(--muted); font-size:12.5px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--surface); }
.ez-foot a{ color:var(--brand-strong); }

/* rail responsivo (mobile off-canvas) */
.ez-scrim{ display:none; }
@media (max-width: 991.98px){
  .ez-rail{ position:fixed; z-index:1050; top:0; left:0; height:100vh; transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow-lg); }
  .ez-app.rail-open .ez-rail{ transform:none; }
  .ez-railtoggle{ display:inline-flex; align-items:center; }
  .ez-app.rail-open .ez-scrim{ display:block; position:fixed; inset:0; z-index:1040; background:rgba(15,40,48,.45); }
  .ez-content{ padding:16px; }
}

/* rail recolhível no desktop (hambúrguer) — vira RAIL DE ÍCONES (não some) */
@media (min-width: 992px){
  .ez-rail{ transition:width .2s ease; }
  html.ez-rail-collapsed .ez-rail{ width:66px; }
  html.ez-rail-collapsed .ez-rail .brand{ justify-content:center; padding:0; font-size:0; }
  html.ez-rail-collapsed .ez-rail .cap{ font-size:0; padding:12px 0 4px; }
  html.ez-rail-collapsed .ez-rail a{ justify-content:center; padding:10px 0; gap:0; font-size:0; }
  html.ez-rail-collapsed .ez-rail a i{ font-size:20px; }
  html.ez-rail-collapsed .ez-rail a .b{ display:none; }
  html.ez-rail-collapsed .ez-rail .grp .parent .chev{ display:none; }
  html.ez-rail-collapsed .ez-rail .grp .sub{ display:none; }
}

/* topbar compacta no mobile — evita que os atalhos empurrem o menu do usuário pra fora */
@media (max-width: 767.98px){
  .ez-top{ padding:0 12px; gap:8px; }
  .ez-top .right{ gap:11px; }
  .ez-top .h{ min-width:0; font-size:15px; }
}

/* ============================================================
   Splash de autenticação (lado direito do login/guest)
   ============================================================ */
.ez-authsplash{ background:linear-gradient(150deg, var(--c-ink), var(--c-800) 45%, var(--c-600)) !important; color:#fff; position:relative; overflow:hidden; }
.ez-authsplash::after{ content:""; position:absolute; right:-120px; bottom:-120px; width:420px; height:420px; border-radius:50%; background:var(--c-400); opacity:.16; }
.ez-authsplash::before{ content:""; position:absolute; right:120px; top:-80px; width:200px; height:200px; border-radius:50%; background:var(--c-300); opacity:.12; }
.ez-authsplash h4{ color:#fff; font-weight:800; letter-spacing:-.5px; font-size:30px; }
.ez-authsplash p{ color:rgba(255,255,255,.9); max-width:440px; margin-left:auto; margin-right:auto; }
.ez-authfeats{ display:flex; gap:20px; justify-content:center; margin-top:28px; flex-wrap:wrap; position:relative; z-index:1; }
.ez-authfeats span{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#fff; }
.ez-authfeats i{ width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.14); display:inline-flex; align-items:center; justify-content:center; font-size:18px; }

/* campo com ícone (login/forms de auth) */
.ez-field{ margin-bottom:16px; }
.ez-inwrap{ position:relative; }
.ez-inwrap > i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:18px; pointer-events:none; }
.ez-inwrap .ezinput{ padding-left:40px; }
.ez-inwrap .eye{ left:auto; right:12px; cursor:pointer; pointer-events:auto; }
.ez-authrow{ display:flex; align-items:center; justify-content:space-between; margin:2px 0 20px; font-size:13px; }
.ez-check{ display:flex; align-items:center; gap:7px; color:var(--muted); cursor:pointer; }
.ez-check input{ accent-color:var(--brand); width:15px; height:15px; }

/* ── Tabela padrão do produto (telas de cadastro/listagem) ─────────────────── */
.ez-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.ez-table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:9px 12px; border-bottom:2px solid var(--border); white-space:nowrap; }
.ez-table td{ padding:10px 12px; border-bottom:1px solid var(--border); color:var(--ink); vertical-align:middle; }
.ez-table tbody tr:hover{ background:var(--info-soft, rgba(53,208,222,.06)); }
.ez-table .acts{ display:flex; gap:12px; justify-content:flex-end; }
.ez-table .acts i{ font-size:17px; cursor:pointer; color:var(--muted); }
.ez-table .acts i:hover{ color:var(--brand); }
.ez-table .off td{ opacity:.55; }
.ezbtn-sm{ padding:7px 12px; font-size:12.5px; }

/* Tabela de perfis: linha de grupo */
.ez-table tr.grp td{ background:var(--info-soft,rgba(53,208,222,.08)); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--brand-strong); padding:6px 12px; }
.ez-table input[type=checkbox]{ width:17px; height:17px; accent-color:var(--brand); cursor:pointer; }