/* =====================================================================
   Tema Azul & Branco  (inspirado no dashboard ControlTextil)
   ===================================================================== */
:root {
  --brand:        #2541d8;   /* azul real */
  --brand-dark:   #1b30a8;
  --brand-light:  #eaf0ff;
  --brand-rgb:    37,65,216;
  /* sobrepoe o "primary" do Bootstrap */
  --bs-primary:     #2541d8;
  --bs-primary-rgb: 37,65,216;
  --bs-link-color:  #2541d8;
  --bs-link-hover-color: #1b30a8;
}

body { background:#f4f6fb; }

/* ---- Botoes / cores primarias ---- */
.btn-primary {
  --bs-btn-bg: var(--brand);        --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand);   --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand);
}
.bg-primary   { background-color: var(--brand) !important; }
.text-primary { color: var(--brand) !important; }
.btn-link, a  { color: var(--brand); }
.spinner-border.text-primary { color: var(--brand) !important; }
.form-control:focus, .form-select:focus {
  border-color: #9aabf2; box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .2);
}

/* ---- Topbar ---- */
#topbar {
  height:56px; background:var(--brand); color:#fff; position:sticky; top:0; z-index:1030;
  display:flex; align-items:center; gap:.5rem; padding:0 1rem;
  box-shadow:0 2px 6px rgba(var(--brand-rgb), .25);
}
#topbar .brand { font-weight:700; letter-spacing:.5px; display:flex; align-items:center; gap:.5rem; }
#topbar .brand i { font-size:1.25rem; }
#topbar .user-box { display:flex; align-items:center; gap:.5rem; }
#topbar .avatar {
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-weight:600;
}
#topbar .dropdown-menu { --bs-dropdown-link-active-bg: var(--brand); }

/* ---- Sidebar branca ---- */
#sidebar {
  width:240px; flex:0 0 240px; min-height: calc(100vh - 56px); position:sticky; top:56px;
  background:#fff !important; border-right:1px solid #e6e8ef; color:#3b4253;
}
#sidebar .nav-link { color:#4b5468; border-radius:.5rem; padding:.55rem .8rem; font-weight:500; }
#sidebar .nav-link i { width:1.25rem; }
#sidebar .nav-link:hover { background:var(--brand-light); color:var(--brand); }
#sidebar .nav-link.active { background:var(--brand); color:#fff; box-shadow:0 2px 6px rgba(var(--brand-rgb), .35); }
#sidebar .sidebar-section { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  color:#9aa1b2; font-weight:700; padding:.4rem .8rem 0; margin-top:.5rem; }
#sidebar .sidebar-foot { color:#9aa1b2 !important; }

/* min-width:0 deixa o conteudo largo (Gantt, tabelas) fazer scroll interno
   em vez de empurrar/encolher a sidebar — todas as paginas ficam com a mesma largura */
main { min-height: calc(100vh - 56px); min-width:0; }
.card { border:none; box-shadow:0 1px 3px rgba(16,24,64,.08); }
.kpi { border-radius:.75rem; }
.kpi .num { font-size:2rem; font-weight:700; line-height:1; }

/* ---- Pagina de login ---- */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background: var(--brand-dark);
}
.login-card { width:100%; max-width:420px; border-radius:1rem; overflow:hidden; background:#fff; }
.login-brand { background:var(--brand); color:#fff; padding:1.75rem 1rem 1.5rem; }
.login-brand i { font-size:2.2rem; }
.login-brand-name { font-size:1.3rem; font-weight:700; letter-spacing:.5px; margin-top:.25rem; }
.login-brand-sub { font-size:.8rem; opacity:.85; }
.login-card .input-group-text { background:#fff; color:var(--brand); }

/* ---- Timeline ---- */
.timeline { list-style:none; padding-left:0; margin:0; }
.timeline li { position:relative; padding:.5rem 0 .5rem 1.75rem; border-left:2px solid #dee2e6; margin-left:.5rem; }
.timeline li:last-child { border-left-color:transparent; }
.timeline li .dot { position:absolute; left:-7px; top:.8rem; width:12px; height:12px; border-radius:50%; background:#adb5bd; }
.timeline li.concluido .dot { background:#198754; }
.timeline li.em_curso .dot { background:var(--brand); animation:pulse 1.5s infinite; }
.timeline li.bloqueado .dot { background:#dc3545; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),.5);} 70%{box-shadow:0 0 0 6px rgba(var(--brand-rgb),0);} }
.step-clickable { cursor:pointer; }
.alert-persist { border-left:4px solid #dc3545; }
.progress { height:8px; }
.badge-cat { background:var(--brand-light); color:var(--brand); }
.foto-thumb { max-height:60px; border-radius:.4rem; cursor:pointer; }

/* Select2 alinhado com Bootstrap 5 e por cima do modal */
.select2-container .select2-selection--single { height:38px; border-color:#dee2e6; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:36px; }
.select2-dropdown { z-index:1057; }
.create-box { background:#f8f9fa; }

/* seletor de estado das etapas: cor conforme estado */
.estado-sel { font-size:.8rem; }
.estado-sel.estado-pendente  { border-left:4px solid #adb5bd; }
.estado-sel.estado-em_curso  { border-left:4px solid var(--brand); }
.estado-sel.estado-concluido { border-left:4px solid #198754; }
.estado-sel.estado-bloqueado { border-left:4px solid #dc3545; }

/* ---- Gantt ---- */
.gantt-wrap { overflow-x:auto; border:1px solid #dee2e6; border-radius:.5rem; background:#fff; }
.g-row { display:flex; border-bottom:1px solid #f0f0f0; min-height:34px; align-items:center; }
.g-row.g-enc { background:var(--brand-light); font-weight:600; }
.g-label { position:sticky; left:0; background:#fff; z-index:2; min-width:240px; max-width:240px;
           padding:.25rem .5rem; border-right:1px solid #dee2e6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-row.g-enc .g-label { background:var(--brand-light); }
.g-track { position:relative; height:34px; flex:0 0 auto; }
.g-bar { position:absolute; top:5px; height:16px; border-radius:4px; color:#fff; font-size:11px;
         line-height:16px; padding:0 5px; overflow:hidden; white-space:nowrap; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.g-real { position:absolute; top:24px; height:5px; border-radius:3px; background:#212529; opacity:.65; }
.g-today { position:absolute; top:0; width:2px; height:100%; background:#dc3545; z-index:1; }
.g-prazo { position:absolute; top:3px; font-size:13px; color:#dc3545; z-index:1; }
.g-head .g-day { flex:0 0 auto; text-align:center; font-size:10px; color:#888; border-right:1px solid #f0f0f0; padding-top:3px; line-height:1.1; }
.g-head .g-day.we { background:#f6f6f6; }
.bar-pendente{background:#adb5bd;} .bar-em_curso{background:var(--brand);}
.bar-concluido{background:#198754;} .bar-bloqueado{background:#dc3545;}

/* =====================================================================
   Botao hamburguer (topbar) + backdrop do menu
   ===================================================================== */
#topbar .btn-sidebar {
  background:transparent; border:0; color:#fff; font-size:1.5rem; line-height:1;
  padding:.15rem .5rem; margin-left:-.25rem; border-radius:.5rem; cursor:pointer;
}
#topbar .btn-sidebar:hover { background:rgba(255,255,255,.15); }
#sidebar-backdrop {
  display:none; position:fixed; inset:56px 0 0 0; background:rgba(16,24,64,.45);
  z-index:1035; opacity:0; transition:opacity .2s ease;
}

/* =====================================================================
   RESPONSIVO  — tablet / telemovel  (sidebar vira gaveta deslizante)
   ===================================================================== */
@media (max-width: 991.98px) {
  #sidebar {
    position:fixed; top:56px; left:0; bottom:0; height:auto; width:260px; max-width:82vw;
    transform:translateX(-100%); transition:transform .25s ease; z-index:1040;
    box-shadow:0 8px 24px rgba(16,24,64,.18); overflow-y:auto;
  }
  body.sidebar-open #sidebar { transform:translateX(0); }
  body.sidebar-open #sidebar-backdrop { display:block; opacity:1; }

  /* nav-links com alvos de toque maiores */
  #sidebar .nav-link { padding:.7rem .9rem; font-size:1.05rem; }
  #sidebar .sidebar-section { font-size:.75rem; padding:.6rem .9rem .2rem; }

  /* menos padding no conteudo para aproveitar a largura */
  #app { padding:1rem !important; }
  .page-header h3 { font-size:1.4rem; }

  /* cabecalhos de pagina: botoes ocupam a largura toda e ficam faceis de tocar */
  .page-header-actions { width:100%; }
  .page-header-actions .btn { flex:1 1 auto; }

  /* tabelas mais compactas e com scroll horizontal suave */
  .table-responsive { -webkit-overflow-scrolling:touch; }
  .table > :not(caption) > * > * { padding:.5rem .5rem; }

  /* KPIs e numeros ligeiramente menores */
  .kpi .num { font-size:1.6rem; }
  .kpi .card-body { padding:.85rem; gap:.65rem !important; }
  .kpi .card-body i.fs-1 { font-size:1.75rem !important; }

  /* gantt: rotulo das linhas mais estreito */
  .g-label { min-width:150px; max-width:150px; }

  /* select2 ocupa a largura toda dentro dos modais */
  .select2-container { max-width:100%; }
}

/* Telemoveis pequenos */
@media (max-width: 575.98px) {
  #topbar .brand span, #topbar .brand { font-size:1rem; }
  #app { padding:.75rem !important; }
  .page-header { margin-bottom:.75rem !important; }
  .page-header h3 { font-size:1.25rem; }
  .card-body { padding:.85rem; }
  /* botoes de accao em tabelas/listas com area de toque confortavel */
  .btn-sm { padding:.35rem .6rem; }
  /* evita que os modais colem nas margens */
  .modal-body { padding:1rem; }

  /* ---- Tabelas viram cartoes empilhados (data-label vem do app.js) ---- */
  .table-stack thead { display:none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display:block; width:100%; }
  .table-stack tbody tr {
    border:1px solid #e6e8ef; border-radius:.6rem; margin:.6rem;
    width:auto; padding:.3rem 0; background:#fff; box-shadow:0 1px 2px rgba(16,24,64,.06);
  }
  .table-stack tbody tr.table-danger { border-color:#f1aeb5; }
  .table-stack td {
    display:flex; justify-content:space-between; align-items:center; gap:.75rem;
    border:0 !important; padding:.3rem .8rem !important; min-width:0 !important; text-align:left !important;
  }
  .table-stack td::before {
    content:attr(data-label); font-weight:600; color:#8a91a3;
    font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; flex:0 0 auto;
  }
  /* celulas sem titulo (accoes) alinham a direita e sem rotulo */
  .table-stack td[data-label=""]::before, .table-stack td[colspan]::before { display:none; }
  .table-stack td[data-label=""] { justify-content:flex-end; }
  .table-stack td:empty { display:none; }
  /* barras de progresso esticam no espaco disponivel */
  .table-stack td .progress { flex:1 1 auto; min-width:70px; }
  .table-stack td img.foto-thumb { max-height:48px; }
}

/* Garante que a gaveta nunca fica visivel em desktop */
@media (min-width: 992px) {
  body.sidebar-open #sidebar-backdrop { display:none; }
}