/* =========================
   DANFER PRO — THEME GLOBAL
   ========================= */
:root{
  --accent:#ee4d2d;            /* laranja principal */
  --ink-1:#0f172a;             /* títulos */
  --ink-2:#475569;             /* labels */
  --ink-3:#6b7280;             /* subtítulos/rodapé */
  --line:#e5e7eb;              /* bordas */
  --bg:#fafafa;                /* fundo app */
  --card:#ffffff;              /* fundo card */
  --glow:0 8px 20px rgba(15,23,42,.06);
}

body{
    background:var(--bg);
    font-size: 1.2em; /* Aumenta o tamanho da fonte da página em 20% */
}
.js-zoomable{ cursor:zoom-in; }
img.thumb{ width:100%; height:100%; object-fit:contain; display:block; }

/* =========================
   COLUNAS / LISTAS
   ========================= */
.kanban-col{ background:var(--card); border:1px solid #eee; border-radius:14px; padding:12px; }
.kanban-title{ font-weight:800; color:var(--accent); margin-bottom:10px; display:flex; align-items:center; gap:.5rem; }

/* =========================
   CARD DE PEDIDO (Order)
   ========================= */
.kanban-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  padding:12px; /* Aumentado o padding interno do cartão */
  margin-bottom:15px; /* Aumentado o espaçamento entre os cartões */
  box-shadow:var(--glow);
  font-size: 1.1rem; /* Aumenta o tamanho da fonte geral do cartão */
  color: var(--ink-2);
}

.kanban-card .order-header{
  display:flex; align-items:center; gap:8px; /* Aumentado o espaçamento */
  font-weight:700;
  margin-bottom:8px; /* Aumentado o espaço abaixo do cabeçalho */
}
.kanban-card .order-header .order-id{ color:var(--accent); }
.kanban-card .order-header .order-customer{ color:var(--ink-1); }

.kanban-card .card-content{
  display:flex;
  flex-direction:column;
  gap:12px; /* Aumenta o espaço entre a imagem e o texto */
}

.kanban-card .card-image-container{
  flex-shrink:0;
  border-radius:8px;
  overflow:hidden;
  position:relative;
  width:100%;
  height:180px; /* Aumenta a altura fixa para a imagem */
}

.kanban-card .order-image{
  width:100%;
  height:100%;
  object-fit:cover; /* A imagem cobre todo o container */
}
.kanban-card .placeholder-image{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  background:#f0f2f5; color:#aaa;
  border-radius:8px;
  font-size: 1.1rem; /* Aumenta a fonte do placeholder */
}

.kanban-card .card-details{
  display:flex; flex-direction:column;
  min-width:0;
}
.kanban-card .metadata-list{
  display:flex; flex-direction:column;
  gap:4px;
}
.kanban-card .metadata-item{
  display:flex;
  gap:6px;
  overflow:hidden;
  font-size: 1.1rem; /* Aumenta o tamanho da fonte das informações de metadados */
}
.kanban-card .metadata-label{
  font-weight:700;
  color:var(--ink-2);
  flex-shrink:0;
}
.kanban-card .metadata-value{
  color:var(--ink-1);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.kanban-card .order-actions{
  margin-top:auto;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top: 15px;
}
.kanban-card .order-actions .btn{ padding:8px 18px; font-size:1rem; border-radius:10px; } /* Aumenta o tamanho do botão */
.kanban-card .order-actions select{ height:42px; padding:6px 12px; font-size:1rem; border-radius:10px; } /* Aumenta o tamanho do select */

.kanban-card .order-footer{
  color:var(--ink-3) !important;
  margin-top:8px !important;
  font-size:1rem; /* Aumenta o tamanho do rodapé */
}

/* =========================
   Atrasados (chips)
   ========================= */
.atrasados-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.atras-chip{ border:1px solid var(--line); border-radius:12px; padding:8px 10px; background:#fff; min-width:180px; max-width:220px; box-shadow:0 4px 10px rgba(15,23,42,.05); }
.atras-chip .id{ font-weight:700; color:var(--accent); }
.atras-chip .name{ color:var(--ink-1); font-weight:700; font-size:1rem; } /* Aumenta a fonte */

/* Estilos para o card compacto da coluna "Pronto" e "Atrasados" */
.pronto-card {
  text-align: center;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: calc(33.333% - 6px);
}

.pronto-card .pronto-image-container {
  position: relative;
  width: 65px;
  height: 65px;
  cursor: pointer;
}

.pronto-card .pronto-order-id {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 0.8rem; /* Aumenta a fonte */
  font-weight: bold;
  padding: 1px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.pronto-card .pronto-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.pronto-card .pronto-customer {
  font-size: 0.9rem; /* Aumenta a fonte */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Estilos para o título flutuante (sticky) */
.kanban-title {
  position: -webkit-sticky;
  position: sticky;
  top: 58px;
  background: #fafafa;
  z-index: 10;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: -12px;
}

/* Estilos para o indicador de múltiplos itens */
.multi-item-indicator {
  font-size: 0.9rem; /* Aumenta a fonte */
  font-weight: bold;
  color: var(--shopee);
  margin-top: 8px;
  text-align: right;
}

/* Muda o cursor para indicar que o card é clicável */
.kanban-card.is-clickable {
  cursor: pointer;
}

/* NOVO: Botão customizado com a cor da Shopee */
.btn-shopee {
  background-color: var(--shopee);
  border-color: var(--shopee);
  color: #fff;
}

.btn-shopee:hover {
  background-color: var(--shopee-dark);
  border-color: var(--shopee-dark);
  color: #fff;
}
/* --- Estilos para o Painel TV --- */

/* Estilos gerais do painel */
.tv-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  height: 100%;
}

/* Container que organiza os cards verticalmente */
.tv-cards-container {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Espaço vertical entre os cards */
}

/* O card individual com layout horizontal */
.tv-card {
  display: flex;
  align-items: center; /* Alinha imagens e texto verticalmente */
  gap: 10px; /* Espaço entre a área de imagens e a de texto */
  padding: 8px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  overflow: hidden; /* Garante que nada saia dos cantos arredondados */
}

/* Container para as imagens, para que fiquem lado a lado */
.tv-card-images {
  display: flex;
  gap: 4px; /* Espaço pequeno entre múltiplas imagens */
  flex-shrink: 0; /* Impede que o container das imagens encolha */
}

/* A miniatura da imagem (thumbnail) */
.tv-card-thumb {
  height: 60px;
  width: 60px;
  object-fit: contain;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  background-color: #fff;
}

/* A área de texto */
.tv-card-info {
  display: flex;
  flex-direction: column; /* Coloca os elementos em uma coluna */
  font-weight: 500;
  white-space: normal; /* Permite a quebra de linha */
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-card-order-id {
  font-weight: 700;
  color: var(--shopee); /* Cor da Shopee para o ID do pedido */
  font-size: 1rem;
  line-height: 1.2;
}

.tv-card-customer-name {
  font-weight: 500;
  color: var(--ink-1);
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap; /* Impede que o nome do cliente quebre em duas linhas */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   DANFER PRO — THEME GLOBAL
   ========================= */
:root{
  --accent:#ee4d2d;            /* laranja principal */
  --ink-1:#0f172a;             /* títulos */
  --ink-2:#475569;             /* labels */
  --ink-3:#6b7280;             /* subtítulos/rodapé */
  --line:#e5e7eb;              /* bordas */
  --bg:#fafafa;                /* fundo app */
  --card:#ffffff;              /* fundo card */
  --glow:0 8px 20px rgba(15,23,42,.06);
}

body{
    background:var(--bg);
    font-size: 1em; /* Tamanho da fonte padrão */
}
.js-zoomable{ cursor:zoom-in; }
img.thumb{ width:100%; height:100%; object-fit:contain; display:block; }

/* =========================
   COLUNAS / LISTAS
   ========================= */
.kanban-col{ background:var(--card); border:1px solid #eee; border-radius:14px; padding:12px; }
.kanban-title{ font-weight:800; color:var(--accent); margin-bottom:10px; display:flex; align-items:center; gap:.5rem; }

/* =========================
   CARD DE PEDIDO (Order)
   ========================= */
.kanban-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  padding:12px;
  margin-bottom:15px;
  box-shadow:var(--glow);
  font-size: 0.9rem;
  color: var(--ink-2);
}

.kanban-card .order-header{
  display:flex; align-items:center; gap:8px;
  font-weight:700;
  margin-bottom:8px;
}
.kanban-card .order-header .order-id{ color:var(--accent); }
.kanban-card .order-header .order-customer{ color:var(--ink-1); }
.kanban-card .card-content{ display:flex; flex-direction:column; gap:12px; }
.kanban-card .card-image-container{ flex-shrink:0; border-radius:8px; overflow:hidden; position:relative; width:100%; height:180px; }
.kanban-card .order-image{ width:100%; height:100%; object-fit:cover; }
.kanban-card .placeholder-image{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:#f0f2f5; color:#aaa; border-radius:8px; font-size: 0.9rem; }
.kanban-card .card-details{ display:flex; flex-direction:column; min-width:0; }
.kanban-card .metadata-list{ display:flex; flex-direction:column; gap:4px; }
.kanban-card .metadata-item{ display:flex; gap:6px; overflow:hidden; font-size: 0.9rem; }
.kanban-card .metadata-label{ font-weight:700; color:var(--ink-2); flex-shrink:0; }
.kanban-card .metadata-value{ color:var(--ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-card .order-actions{ margin-top:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top: 15px; }
.kanban-card .order-actions .btn{ padding: 6px 14px; font-size:0.9rem; border-radius:10px; }
.kanban-card .order-actions select{ height:38px; padding:6px 12px; font-size:0.9rem; border-radius:10px; }
.kanban-card .order-footer{ color:var(--ink-3) !important; margin-top:8px !important; font-size:0.9rem; }

/* PRONTO & ATRASADOS CARDS */
.pronto-card { text-align: center; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; width: calc(33.333% - 6px); }
.pronto-card .pronto-image-container { position: relative; width: 65px; height: 65px; cursor: pointer; }
.pronto-card .pronto-order-id { position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 0.8rem; font-weight: bold; padding: 1px; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.pronto-card .pronto-image { width: 100%; height: 100%; object-fit: contain; border: 1px solid #e9ecef; border-radius: 8px; }
.pronto-card .pronto-customer { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* PAINEL TV */
.tv-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px; height: 100%; }
.tv-cards-container { display: flex; flex-direction: column; gap: 8px; }
.tv-card { display: flex; align-items: center; gap: 10px; padding: 8px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; }
.tv-card-images { display: flex; gap: 4px; flex-shrink: 0; }
.tv-card-thumb { height: 60px; width: 60px; object-fit: contain; border: 1px solid #e9ecef; border-radius: 4px; background-color: #fff; }
.tv-card-info { display: flex; flex-direction: column; font-weight: 500; white-space: normal; overflow: hidden; text-overflow: ellipsis; }
.tv-card-order-id { font-weight: 700; color: var(--accent); font-size: 1rem; line-height: 1.2; }
.tv-card-customer-name { font-weight: 500; color: var(--ink-1); font-size: 0.9rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* BOTÃO CUSTOMIZADO */
.btn-shopee { background-color: var(--accent); border-color: var(--accent); color: #fff; }
.btn-shopee:hover { background-color: var(--shopee-dark); border-color: var(--shopee-dark); color: #fff; }


/* =========================
   NOVO ESTILO DA TELA DE LOGIN
   ========================= */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh; /* Centraliza verticalmente na tela */
  background-color: var(--bg);
}

.login-card {
  width: 100%;
  max-width: 420px;
  border: none;
  border-radius: 1rem;
  padding: 1rem;
}

.login-title {
  font-weight: 800;
  color: var(--ink-1);
}

.login-container .form-control-lg {
  padding: 0.8rem 1rem;
  font-size: 1rem;
}

.login-container .btn-lg {
  padding: 0.8rem 1rem;
  font-size: 1.1rem;
  font-weight: 700;
}