/* ============================================================
   OnCable — estilo proprio por cima do Bootstrap 5.
   Aproxima o aspeto AdminKit: aspeto claro, cartoes limpos,
   barra lateral, e os "soft badges" das 6 cores de estado.
   ============================================================ */

:root {
    --brand:      #003399;   /* azul do logotipo OnCable */
    --brand-soft: rgba(0, 51, 153, .10);
    --bg:         #f5f7fb;   /* fundo da area de conteudo */
    --line:       #e7eaf3;   /* bordas suaves */
    --muted:      #8a93a6;
    --sidebar-w:  240px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: #2b2f38;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ----- estrutura: barra lateral + area principal ----- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: #fff;
    border-right: 1px solid var(--line);
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar .brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--line);
}
.sidebar .brand .name { font-size: 20px; font-weight: 700; color: var(--brand); letter-spacing: .3px; }
.sidebar .brand .sub  { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.sidebar .brand .brand-logo { max-width: 180px; width: 100%; height: auto; display: block; }

.sidebar nav { padding: 12px 10px; }
.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: 8px;
    color: #4a5163;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.sidebar nav a i { font-size: 16px; width: 18px; text-align: center; }
.sidebar nav a:hover  { background: #f0f3fa; color: var(--brand); }
.sidebar nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* utilizador autenticado, no fundo da barra lateral */
.sidebar .sidebar-user { padding: 14px 20px; border-top: 1px solid var(--line); }
.sidebar .sidebar-user a { color: var(--brand); text-decoration: none; }

/* ----- area principal ----- */
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar { background: #fff; border-bottom: 1px solid var(--line); padding: 16px 28px; }
.topbar h1 { margin: 0; font-size: 20px; font-weight: 600; }

.content { padding: 28px; }

/* cartoes (.card do Bootstrap, so afinamos borda e sombra) */
.card { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card .card-title { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

/* hover subtil nas linhas de todas as tabelas (overlay por box-shadow, para
   somar sobre o fundo das linhas "puras" sem o apagar e manter o texto legivel) */
.table > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(0, 51, 153, .04);
}

/* linha "pura" (em falta 0 e um so estado): fundo tingido com a cor do estado */
tr.pura-em-stock    > * { background-color: rgba(108, 117, 125, .07); }
tr.pura-enc-empresa > * { background-color: rgba(255, 193,   7, .10); }
tr.pura-enc-obra    > * { background-color: rgba( 25, 135,  84, .08); }
tr.pura-separado    > * { background-color: rgba(253, 126,  20, .08); }
tr.pura-a-caminho   > * { background-color: rgba(111,  66, 193, .08); }
tr.pura-em-obra     > * { background-color: rgba(  0,  51, 153, .06); }

/* botoes primarios na cor da marca */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: #002b80;
    --bs-btn-hover-border-color: #002b80;
    --bs-btn-active-bg: #002266;
    --bs-btn-active-border-color: #002266;
}

/* ----- soft badges dos 6 estados ----- */
.badge-estado {
    display: inline-block;
    padding: .28em .6em;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.badge-estado.em-stock     { color: #5a6268; background: rgba(108, 117, 125, .15); }
.badge-estado.enc-empresa  { color: #8a6d00; background: rgba(255, 193,   7, .20); }
.badge-estado.enc-obra     { color: #1b7e3c; background: rgba( 25, 135,  84, .15); }
.badge-estado.separado     { color: #b5540a; background: rgba(253, 126,  20, .16); }
.badge-estado.a-caminho    { color: #6f42c1; background: rgba(111,  66, 193, .15); }
.badge-estado.em-obra      { color: #003399; background: rgba(  0,  51, 153, .12); }
.badge-estado.desconhecido { color: #5a6268; background: rgba(108, 117, 125, .12); }

/* filtro de movimentos: pilulas clicaveis (reaproveitam os soft badges) */
.badge-estado.todos { color: #4a5163; background: #eef1f7; }
.mov-filtros button { cursor: pointer; border: 0; opacity: .45; }
.mov-filtros button.filtro-ativo { opacity: 1; }

/* responsivo simples: em ecras estreitos a barra passa para o topo */
@media (max-width: 768px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--line); }
    .sidebar nav { display: flex; flex-wrap: wrap; }
}