/* ============================================================
   Jeff Tech Hub - painel.css
   Layout dos paineis: cliente, tecnico e admin.
   ============================================================ */

/* Abas do painel. A exibicao e controlada 100% pela classe .active-view,
   aplicada pelo roteador em /public/js/app.js. Nao usar style="display:none"
   inline nas <section class="view-section">, senao a aba nao abre ao clicar. */
.view-section{display:none;animation:fadeUp .3s ease both}
.view-section.active-view{display:block}

/* panel layout */
.panel{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 64px)}
.sidebar{
  background:var(--bg-elev);border-right:1px solid var(--border);
  padding:20px 14px;
}
.side-user{display:flex;align-items:center;gap:10px;padding:6px 8px;margin-bottom:16px}
.side-user .avatar{width:34px;height:34px;border-radius:9px;background:var(--gradient)}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  color:var(--muted);font-size:14px;transition:all .2s;cursor:pointer;
  position:relative;
}
.side-nav a:hover{background:var(--bg-overlay);color:var(--text)}
.side-nav a.active{background:var(--bg-overlay);color:var(--text)}
.side-nav a.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;background:var(--gradient);border-radius:0 4px 4px 0;
}
.side-nav a .badge{
  margin-left:auto;background:var(--bg-base);border:1px solid var(--border);
  padding:1px 7px;border-radius:6px;font-size:11px;
}
.side-section{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);margin:16px 8px 6px}
.panel-main{padding:28px 32px;background:var(--bg-base)}
.panel-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.panel-title{font-size:22px;font-weight:600;letter-spacing:-.01em}
.panel-sub{color:var(--muted);font-size:13px}
@media (max-width:900px){
  .panel{grid-template-columns:1fr}
  .sidebar{border-right:none;border-bottom:1px solid var(--border);padding:14px;display:flex;flex-direction:column}
  #mobileMenuBtn{display:block !important}
  .sidebar .side-section, .sidebar .side-nav { display:none; }
  .sidebar.mobile-open .side-section { display:block; }
  .sidebar.mobile-open .side-nav { display:flex; flex-direction:column; }
  .panel-main{padding:16px; overflow-x:hidden}
  .table-responsive { display:block; width:100%; overflow-x:auto; white-space:nowrap; }
}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.kanban{grid-template-columns:1fr}}
.kcol{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:14px}
.kcol-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.kcard{background:var(--bg-base);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px;transition:border-color .2s}

/* kanban card */
.kcard:hover{border-color:var(--border-strong)}