:root {
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-950: #020617;
    --blue-800: #1e40af;
    --blue-400: #60a5fa;
}

/* ===================== BASE ===================== */
body {
    margin: 0;
    font-family: sans-serif;
    overflow: hidden;
    background-color: var(--slate-900);
    color: white;
}

.hidden { display: none !important; }

/* ===================== LAYOUT PRINCIPAL ===================== */
/* Container raiz do app: ocupa a tela inteira em coluna */
.app-main {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===================== HEADER ===================== */
.app-header {
    background-color: var(--slate-800);
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
    position: relative;
    flex-shrink: 0; /* impede que o header encolha com o flex da main */
}

/* Lado esquerdo: ícone + nome do agrupamento */
.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* permite que o título seja truncado com ellipsis */
}

/* Título do agrupamento — trunca se for longo demais */
.header-title {
    color: white;
    font-size: 1.5rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lado direito: botão fullscreen + total em atraso */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Bloco "Total em Atraso" */
.header-total { text-align: right; }

.total-label {
    color: #cbd5e1;
    font-size: 0.75rem;
    margin: 0;
}

.total-value {
    font-weight: bold;
    line-height: 1;
    margin: 0;
}

/* Número grande de unidades atrasadas */
.total-number { font-size: 2.25rem; }

/* "un." ao lado do número */
.total-unit { font-size: 1.125rem; }

/* Bolinhas de paginação */
.pagination-dots-bar {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    justify-content: flex-end;
}

/* ===================== TICKER ===================== */
.ticker-container {
    overflow: hidden;
    white-space: nowrap;
    padding: 10px 0;
    background-color: var(--slate-950);
    border-top: 1px solid var(--slate-700);
    border-bottom: 1px solid var(--slate-700);
    flex-shrink: 0;
}

/* Grid Dinâmico — ocupa todo o espaço restante abaixo do header e ticker */
.grid-layout {
    display: grid;
    gap: 8px;
    flex: 1;          /* equivalente ao Tailwind flex-1 */
    min-height: 0;    /* necessário para o flex-1 funcionar corretamente em column */
    will-change: opacity, transform;
}

/* Card Kanban — padding 0 no topo para o bloco de código colar na borda */
.kanban-card {
    background-color: var(--blue-800);
    border-radius: 16px;
    padding: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    overflow: hidden; /* garante que o código branco não vaze para fora do border-radius */
}

.kanban-code {
    background: white;
    color: #111;
    width: 100%;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 6px 0;
    border-radius: 8px 8px 0 0; /* topo arredondado, base reta — cola com o azul do card */
    box-sizing: border-box;
}

.kanban-qty {
    color: #ef4444;
    font-size: 3rem;
    font-weight: 900;
}

.kanban-line {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

/* Ticker Animation */
.ticker-container { overflow: hidden; white-space: nowrap; padding: 10px 0; }
.ticker-wrapper {
    display: block;
    overflow: hidden;
    width: 100%;
}
.ticker-content {
    display: inline-flex;
    white-space: nowrap;
    animation: scroll 25s linear infinite;
}
.ticker-item {
    display: inline-flex;
    align-items: center;
    margin: 0 40px;
    font-size: 1.5rem;
}
.ticker-line  { color: #93c5fd; text-transform: uppercase; letter-spacing: 0.05em; }
.ticker-sep   { color: #64748b; margin: 0 12px; }
.ticker-count { color: white; letter-spacing: 0.03em; }

@keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.333%); }
}

.overlay {
    position: fixed; inset: 0; background: var(--slate-900);
    color: white; display: flex; align-items: center; justify-content: center; font-size: 2rem;
}

/* Fullscreen button */
#fullscreen-btn {
    padding: 8px;
    cursor: pointer;
    background: #334155;
    color: white;
    border: 1px solid #475569;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
#fullscreen-btn:hover { background: #475569; }

/* Timer circular centralizado no header */
.timer-svg {
    width: 44px;
    height: 44px;
    display: block;
}
#timer-arc {
    transition: stroke-dashoffset 0.9s linear;
}

/* Header icon — responsive */
.header-icon {
    height: 48px;
    width: auto;
    object-fit: contain;
}
@media (min-width: 768px) {
    .app-header   { padding: 8px 32px; }
    .header-left  { gap: 16px; }
    .header-right { gap: 24px; }
    .header-title { font-size: 2.25rem; }
    .total-label  { font-size: 1rem; }
    .total-number { font-size: 3.75rem; }
    .total-unit   { font-size: 1.5rem; }
    .header-icon  { height: 80px; }
    #fullscreen-btn { padding: 10px; }
    .ticker-item  { font-size: 1.5rem; }
    .kanban-card  { border-radius: 16px; }
    .timer-svg    { width: 56px; height: 56px; }
}

/* Mobile overrides */
@media (max-width: 767px) {
    .grid-layout { gap: 6px; margin: 4px !important; }
    .ticker-item { font-size: 1rem; margin: 0 20px; }
    .ticker-container { padding: 6px 0; }
    .kanban-card { border-radius: 10px; }
    .kanban-code { font-size: 1rem !important; border-radius: 8px 8px 0 0; padding: 4px 0; }
    .kanban-qty  { font-size: 2rem !important; }
    .kanban-line { font-size: 0.75rem !important; padding-bottom: 6px; }
}

/* Pagination dots */
.pagination-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #475569;
}
.pagination-dot.active { background: #60a5fa; }