/* =========================================================
   Sistema PDO — Modern Dark (IBM Plex Sans)
   Layout: Topbar + Sidebar (desktop) + Offcanvas (mobile)
   ========================================================= */

/* =========================
   1) TOKENS
   ========================= */
:root {
    --app-font: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    --app-bg: #0b1220;
    --app-surface: #0f1a2b;
    --app-surface-2: #111f33;

    --app-text: rgba(236, 242, 255, .88);
    --app-text-2: rgba(236, 242, 255, .72);
    --app-text-3: rgba(236, 242, 255, .56);
    --app-accent: rgba(0, 220, 254, .932);

    --app-border: rgba(255, 255, 255, .08);

    /* Topbar (azul) */
    --app-header-bg: #293654;
    --app-header-text: rgba(255, 255, 255, .92);
    --app-header-text-2: rgba(255, 255, 255, .70);

    --app-radius: 14px;
    --app-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    --app-shadow-sm: 0 6px 18px rgba(0, 0, 0, .22);

    /* Alphas utilitários (evita repetir RGBA toda hora) */
    --w-06: rgba(255, 255, 255, .06);
    --w-08: rgba(255, 255, 255, .08);
    --w-10: rgba(255, 255, 255, .10);
    --w-12: rgba(255, 255, 255, .12);
    --w-16: rgba(255, 255, 255, .16);
    --w-18: rgba(255, 255, 255, .18);
    --w-22: rgba(255, 255, 255, .22);
    --w-25: rgba(255, 255, 255, .25);
    --w-28: rgba(255, 255, 255, .28);

    /* Cores Tabela */
    --os-head-bg: var(--app-surface-2);
    --os-row-odd: rgba(255, 255, 255, .03);
    --os-row-even: rgba(255, 255, 255, .01);
    --os-row-hover: rgba(255, 255, 255, .06);
    
}

/* Integração com Bootstrap */
:root {
    --bs-body-font-family: var(--app-font);
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-link-color: rgba(236, 242, 255, .86);
    --bs-link-hover-color: rgba(236, 242, 255, .96);
}

html {
    font-size: 14px;
}
/* =========================
   2) BASE GLOBAL
   ========================= */
html,
body {
    height: 100%;
}

body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--app-font);
    letter-spacing: .15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 64px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

small,
.small,
.text-muted {
    color: var(--app-text-3) !important;
}

p {
    color: var(--app-text-2);
}

/* Tipografia */
h1,
.h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .6rem;
    color: var(--app-text);
}

h2,
.h2 {
    font-size: 1.15rem;
    font-weight: 650;
    margin-bottom: .55rem;
    color: var(--app-text);
}

h3,
.h3 {
    font-size: 1.00rem;
    font-weight: 600;
    margin-bottom: .5rem;
    color: var(--app-text);
}

/* =========================
   3) SUPERFÍCIES
   ========================= */
.surface,
.card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
}

.surface.padded {
    padding: 1.1rem;
}

/* hover “global” de superfícies */
.surface:hover,
.card:hover {
    background: var(--app-surface-2);
    border-color: rgba(255, 255, 255, .12);
}

/* =========================
   4) TOPBAR
   ========================= */
.app-topbar {
    background: var(--app-header-bg);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    padding: 1px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.app-topbar-title {
    color: var(--app-header-text);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: .25px;
    line-height: 1;
}

.app-topbar .container-fluid {
    padding-top: .4rem !important;
    padding-bottom: .4rem !important;
}

.app-user-name {
    color: var(--app-header-text);
    font-weight: 650;
    font-size: .95rem;
}

.app-user-handle {
    color: var(--app-header-text-2);
    font-size: .82rem;
}

.container {
    max-width: 1400px;

}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--w-16);
    border: 1px solid var(--w-18);
    color: var(--app-header-text);
    font-weight: 700;
}

/* Botões no header (ex.: ☰) */
.app-topbar .btn-outline-secondary {
    border-color: var(--w-25);
    color: rgba(255, 255, 255, .85);
}

.app-topbar .btn-outline-secondary:hover {
    background: var(--w-10);
    color: rgba(255, 255, 255, .95);
}

/* =========================
   5) COMPONENTES (dropdown / buttons)
   ========================= */
.dropdown-menu {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: var(--app-shadow);
}

.dropdown-item {
    color: var(--app-text-2);
}

.dropdown-item:hover {
    background: var(--w-06);
    color: var(--app-text);
}

/* Buttons */
.btn {
    border-radius: 12px;
    font-weight: 650;
    letter-spacing: .2px;
}

.btn-primary {
    background: rgba(25, 67, 151, .95);
    border-color: rgba(25, 67, 151, .95);
}

.btn-primary:hover {
    background: rgba(25, 67, 151, 1);
    border-color: rgba(25, 67, 151, 1);
}

.btn-outline-light {
    border-color: var(--w-22);
    color: rgba(255, 255, 255, .88);
}

.btn-outline-light:hover {
    background: var(--w-10);
    border-color: var(--w-28);
    color: rgba(255, 255, 255, .95);
}

.btn-check:checked+.btn.btn-outline-light {
    background: var(--w-12);
    border-color: var(--w-28);
}

/* Link específico */
.cadastro-link {
    color: var(--app-text-3);
    transition: color .15s ease, text-decoration .15s ease;
}

.cadastro-link:hover {
    color: var(--app-accent) !important;
    text-decoration: underline;
}

/* =========================
   6) LAYOUT: SIDEBAR + CONTENT
   ========================= */
.app-shell {
    display: flex;
    min-height: calc(100vh - 64px);
    align-items: stretch;
}

.app-sidebar {
    background: var(--app-surface);
    border-right: 1px solid var(--app-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
}

.app-content {
    flex: 1 1 auto;
    background: var(--app-bg);
    min-width: 0;
}

/* Nav */
.app-nav {
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.app-nav__link {
    color: var(--app-text-2);
    padding: .5rem .65rem;
    border-radius: 12px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
    text-decoration: none;
    /* evita underline local */
}

.app-nav__link:hover {
    background: var(--w-06);
    color: var(--app-text);
}

.app-nav__link.active {
    background: var(--w-08);
    color: var(--app-text);
}

.app-nav__divider {
    height: 1px;
    background: var(--app-border);
    margin: .5rem .25rem;
}

/* =========================
   7) OFFCANVAS (mobile)
   ========================= */
.app-offcanvas {
    background: var(--app-surface);
    color: var(--app-text);
}

.app-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--app-border);
}

.app-offcanvas .offcanvas-title {
    color: var(--app-text);
    font-weight: 650;
}

.app-offcanvas .btn-close {
    filter: invert(1);
    opacity: .9;
}

/* =========================
   8) Dashboard - Pendências
   ========================= */
.app-pendencia-item {
    padding: .6rem .75rem;
    border-radius: 10px;
    background: var(--app-surface-2);
    color: var(--app-text-2);
    text-decoration: none;
    font-size: .92rem;
}

.app-pendencia-value {
    font-weight: 600;
    color: var(--app-text-3);
}

/* Pendências: garantir que links NÃO fiquem azuis (todos os estados) */
a.app-pendencia-item.is-link,
a.app-pendencia-item.is-link:link,
a.app-pendencia-item.is-link:visited,
a.app-pendencia-item.is-link:hover,
a.app-pendencia-item.is-link:active {
    color: var(--app-text-2) !important;
}

a.app-pendencia-item.is-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =========================
   9) Badges (Kanban)
   ========================= */
.app-badge {
    background: var(--w-08);
    color: var(--app-text-2);
    font-weight: 600;
    padding: .38rem .55rem;
    border-radius: 999px;
}

.app-badge--muted {
    background: var(--w-06);
    color: var(--app-text-3);
}

.app-badge--soft {
    background: rgba(255, 255, 255, .07);
    color: var(--app-text-2);
}

/* =========================
   10) Prioridade
   ========================= */
.app-prio {
    border: 1px solid rgba(255, 255, 255, .10);
    font-weight: 700;
}

.app-prio--baixa {
    background: rgba(70, 140, 255, .18);
    color: rgba(236, 242, 255, .92);
}

.app-prio--media {
    background: rgba(255, 193, 7, .18);
    color: rgba(236, 242, 255, .92);
}

.app-prio--alta {
    background: rgba(220, 53, 69, .18);
    color: rgba(236, 242, 255, .92);
}

/* =========================
   Kanban (Produção)
   ========================= */

/* Board: colunas sempre na mesma linha */
.kanban-board {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
}

/* Colunas padrão */
.kanban-col {
    flex: 0 0 320px;
    /* largura padrão da coluna */
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 120px;
}

/* Header da coluna (com marcador) */
.kanban-col__header {
    position: relative;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    padding: .55rem .75rem;
    border-top-left-radius: var(--app-radius);
    border-top-right-radius: var(--app-radius);
    overflow: hidden;
}

.kanban-col__header::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .28;
    pointer-events: none;
}
.kanban-col__title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.kanban-col__body {
    padding: .65rem .75rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Cards dentro da coluna */
.kanban-card {
    background: var(--app-surface-2) !important;
    /* substitui inline style */
}

/* Concluídas colapsável (rail) */
.kanban-col--concluidas {
    flex-basis: 64px;
    /* largura quando colapsada */
    max-width: 64px;
    overflow: hidden;
    transition: flex-basis .22s ease, max-width .22s ease;
}

/* Corpo dos cards some quando colapsada */
.kanban-col--concluidas .kanban-col__body {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* Quando o toggle estiver ON, expande */


/* Header da coluna concluída: layout "rail" quando colapsada */
.kanban-col--concluidas .kanban-col__title {
    justify-content: center;
}

/* Esconde o título grande quando colapsada e deixa só contador (rail clean) */
.kanban-col--concluidas .kanban-col__title h2 {
    display: none;
}

/* Mantém apenas contador visível na rail */
.kanban-col--concluidas .kanban-count {
    transform: rotate(-90deg);
    transform-origin: center;
}


/* Botão do colapso (no header) */
.kanban-collapse-btn {
    padding: .2rem .45rem;
    line-height: 1;
}

/* Toggle UI */
.kanban-side-toggle {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .45rem .6rem;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
}

.kanban-accent--entrada .kanban-col__header::before {
    background: rgba(0, 153, 255, .75);
    /* Azul vivo */
}

.kanban-accent--analise .kanban-col__header::before {
    background: rgba(155, 89, 255, .75);
    /* Roxo elétrico */
}

.kanban-accent--pcp .kanban-col__header::before {
    background: rgba(255, 170, 0, .85);
    /* Laranja forte */
}

.kanban-accent--aguardmat .kanban-col__header::before {
    background: rgba(0, 220, 190, .75);
    /* Turquesa */
}

.kanban-accent--concluida .kanban-col__header::before {
    background: rgba(40, 200, 120, .85);
    /* Verde vivo */
}

.kanban-accent--entrada {
    border-top: 3px solid #0099ff;
}

.kanban-accent--analise {
    border-top: 3px solid #9b59ff;
}

.kanban-accent--pcp {
    border-top: 3px solid #ffaa00;
}

.kanban-accent--aguardmat {
    border-top: 3px solid #00dcbc;
}

.kanban-accent--concluida {
    border-top: 3px solid #28c878;
}

/* =========================
   Kanban Counter Badge
   ========================= */

.kanban-count {
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .3px;

    color: #fff;
    background: rgba(255, 255, 255, .10);
    /* fallback */
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}

/* Herda a cor da fase pela classe da COLUNA */
.kanban-accent--entrada .kanban-count {
    background: #0099ff;
}

.kanban-accent--analise .kanban-count {
    background: #9b59ff;
}

.kanban-accent--pcp .kanban-count {
    background: #ffaa00;
    color: #1a1a1a;
}

.kanban-accent--aguardmat .kanban-count {
    background: #00dcbc;
    color: #003d36;
}

.kanban-accent--concluida .kanban-count {
    background: #28c878;
}

.kanban-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1050;

    width: 62px;
    height: 62px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 2rem;
    line-height: 1;
    font-weight: 800;

    color: rgba(255, 255, 255, .95);
    background: rgba(25, 67, 151, .98);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);

    cursor: pointer;
    user-select: none;
}

.kanban-fab:hover {
    background: rgba(25, 67, 151, 1);
    transform: translateY(-1px);
}

.kanban-fab:active {
    transform: translateY(0);
}

.kanban-fab:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 220, 254, .18), 0 14px 30px rgba(0, 0, 0, .35);
}
/* =========================
   11) Sidebar compacta com hover (desktop)
   ========================= */

/* ====== Botão ghost minimalista do card ====== */
.kanban-card__menu {
    background: transparent;
    border: none;
    color: var(--app-text-3);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.kanban-card__menu:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--app-text);
}

.kanban-card__menu:active {
    background: rgba(255, 255, 255, .10);
}

.kanban-card__menu:focus {
    outline: none;
    box-shadow: none;
}

/* =========================
   O.S. — tabela (header + zebra + hover)
   Bootstrap pinta td/th, então estilizamos as células: tr > *
   ========================= */

/* Base: evita background padrão do bootstrap "vazar" */
.os-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
}

/* Header bem destacado */
.os-table thead th {
    background-color: var(--os-head-bg) !important;
    color: var(--app-text) !important;
    font-weight: 700;
    border-bottom: 1px solid var(--app-border) !important;
}

/* Zebra (aplica nas células) */
.os-table tbody tr:nth-child(odd)>* {
    background-color: var(--os-row-odd) !important;
}

.os-table tbody tr:nth-child(even)>* {
    background-color: var(--os-row-even) !important;
}

/* Hover (aplica nas células) */
.os-table tbody tr:hover>* {
    background-color: var(--os-row-hover) !important;
}

/* Opcional: bordas mais coerentes no dark */
.os-table td,
.os-table th {
    border-color: var(--app-border) !important;
}

/* =========================
   O.S. — destaques (linhas)
   ========================= */
.os-row--aberto>* {
    background-color: rgba(255, 193, 7, .28) !important;
}

.os-row--faturado>* {
    background-color: rgba(255, 140, 0, .28) !important;
}

/* Parcial: menos chamativo (borda só) */
.os-row--parcial {
    border-left: 6px solid rgba(0, 220, 254, .65);
}

/* Problema: destaque forte */
.os-row--problema {
    outline: 1px solid rgba(220, 53, 69, .75);
    outline-offset: -2px;
}

.os-table td {
    border-color: var(--app-border);
}

.os-sort {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .45rem;
    border-radius: 10px;
    color: var(--app-text) !important;
    border: 1px solid transparent;
    text-decoration: none !important;
}

.os-sort:hover {
    background: var(--w-06);
    border-color: var(--app-border);
}

.os-sort__icon {
    opacity: .75;
    font-size: .85em;
}

@media (min-width: 992px) {

    /* compacta por padrão */
    .app-sidebar {
        width: 76px;
        flex: 0 0 76px;
        transition: width .18s ease;
        overflow: hidden;
    }

    /* expande no hover */
    .app-sidebar:hover {
        width: 280px;
        flex: 0 0 280px;
    }

    .app-nav__link {
        display: flex;
        align-items: center;
        gap: .75rem;
        white-space: nowrap;
    }

    .app-nav__icon {
        width: 40px;
        min-width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: var(--w-06);
    }

  .app-nav__label {
      flex: 1 1 auto;
      /* permite encolher */
      min-width: 0;
      /* evita estourar o flex */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      opacity: 0;
      transform: translateX(-6px);
      transition: opacity .12s ease, transform .12s ease, width .12s ease;
  }

    .app-sidebar:hover .app-nav__label {
        opacity: 1;
        transform: translateX(0);
    }

    /* quando NÃO está em hover (compacta), zera a largura do label */
    .app-sidebar:not(:hover) .app-nav__label {
        width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        pointer-events: none;
    }

    /* 2) remove o “gap fantasma” quando compacta */
    .app-sidebar:not(:hover) .app-nav__link {
        gap: 0;
        justify-content: center;
        padding-left: .5rem;
        padding-right: .5rem;
    }
    .app-nav__link:hover .app-nav__icon {
        background: var(--w-08);
    }

    .app-nav__link.active .app-nav__icon {
        background: var(--w-10);
    }
}