/* public/assets/css/app.css
   CSS centralizado do Projeto Di Carnevalle (pizzadelivery)
   Baseline aprovado: Shell (sidebar + topbar) com colapso funcionando.
   Obs: tokens via CSS variables para permitir temas no futuro.
*/

/* =========================
   1) TOKENS (CORES / SOMBRAS)
   ========================= */
:root{
  /* Escala global de largura L1 a L10 */
  --dic-w-l1: 1880px;
  --dic-w-l2: 1760px;
  --dic-w-l3: 1640px;
  --dic-w-l4: 1520px;
  --dic-w-l5: 1400px;
  --dic-w-l6: 1280px;
  --dic-w-l7: 1160px;
  --dic-w-l8: 1040px;
  --dic-w-l9: 920px;
  --dic-w-l10: 800px;

  /* Base */
  --bg: #f4f6f9;
  --text: #111;
  --muted: #667085;

  /* Marca (verde/teal aprovado) */
  --brand: #003333;        /* verde escuro */
  --brand-2: #012b2b;      /* variação */

  /* Shell */
  --sidebar-bg: var(--brand);
  --sidebar-bg-2: var(--brand-2);
  --sidebar-text: #eaf2f2;
  --sidebar-muted: rgba(234,242,242,.75);
  --sidebar-sep: rgba(255,255,255,.10);
  --sidebar-active-bg: rgba(255,255,255,.10);
  --sidebar-hover-bg: rgba(255,255,255,.06);
  --topbar-bg: #ffffff;
  --topbar-border: rgba(17, 24, 39, .08);

  /* Botões */
  --btn-radius: 10px;
  --btn-font: 13px;
  --btn-pad-y: 10px;
  --btn-pad-x: 12px;

  /* Botão Azul (principal do app hoje) */
  --blue: #1f5eff;
  --blue-hover: #1a4fe0;
  --blue-text: #ffffff;

  /* Botão Branco (secundário) */
  --light-bg: #ffffff;
  --light-text: #111111;
  --light-border: #d7dde6;
  --light-hover: #f6f8fb;

  /* Botão Verde Claro (para "Voltar" e ações positivas) */
  --green-soft-bg: #99ffcc;
  --green-soft-text: #006600;
  --green-soft-hover: #8ff5bf;

  /* Botão Laranja (Sair) */
  --orange: #f59e0b;
  --orange-hover: #d97706;
  --orange-text: #111111;

  /* Botão Vermelho (ação perigosa: remover rascunho / item) */
  --danger-text: #b00020;
  --danger-border: #ffd0d6;
  --danger-hover: #fff5f6;

  /* Botão Vermelho Claro (Fechar/Cancelar em modais) */
  --red-soft-bg: #ffecec;
  --red-soft-text: #b00020;
  --red-soft-border: #ffbcbc;
  --red-soft-hover: #ffdede;

  /* Tag Vermelha (status INATIVO) */
  --tag-red-bg: #ffecec;
  --tag-red-text: #b00020;
  --tag-red-border: #ffbcbc;

  /* Componentes */
  --card-bg: #ffffff;
  --card-radius: 14px;
  --shadow: 0 12px 30px rgba(0,0,0,.10);
  --shadow-strong: 0 20px 50px rgba(0,0,0,.25);

  --table-border: #eef1f5;
  --thead-bg: #fafbfd;
  --thead-text: #444;

  --tag-bg: #eef3ff;
  --tag-text: #1f5eff;

  /* Alerts */
  --ok-bg: #ecfff1;
  --ok-border: #b8f2c7;
  --ok-text: #115a2c;

  --err-bg: #ffecec;
  --err-border: #ffbcbc;
  --err-text: #8a1f1f;

  /* Modal */
  --backdrop: rgba(0,0,0,.35);
  --input-border: #ccd;
}

/* =========================
   2) RESET / BASE
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a{ color:inherit; }
.muted{ color: var(--muted); font-size:12px; }

/* =========================
   3) SHELL (SIDEBAR + TOPBAR)
   ========================= */
.app-shell{
  min-height:100vh;
  display:flex;
}

/* Sidebar */
.app-sidebar{
  width: 290px;
  flex: 0 0 290px;
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  color: var(--sidebar-text);
  border-right: 1px solid rgba(255,255,255,.06);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.app-sidebar .sidebar-scroll{
  height: 100%;
  overflow-y: auto;
  padding: 10px 10px 18px;
}
.sidebar-logo{
  height: 56px;           /* faixa horizontal reservada para logo */
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  margin-bottom: 10px;
}
.sidebar-logo .logo-badge{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}
.sidebar-logo .logo-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.sidebar-logo .logo-text strong{ font-size: 15px; }
.sidebar-logo .logo-text span{ font-size: 12px; color: var(--sidebar-muted); }

/* Sidebar sections */
.nav-section-title{
  margin: 14px 8px 8px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  font-weight: 700;
}
.nav-group-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  user-select:none;
  background: transparent;
  border: 1px solid transparent;
  font-weight: 700; /* seção chave (ex: Estoque) */
}
.nav-group-btn:hover{
  background: var(--sidebar-hover-bg);
  border-color: rgba(255,255,255,.06);
}
.nav-group-btn .caret{
  transition: transform .18s ease;
  opacity: .9;
}
.nav-group[data-open="0"] .caret{
  transform: rotate(-90deg);
}
.nav-list{
  margin: 6px 0 10px;
  padding: 0 0 0 10px;
  border-left: 1px solid var(--sidebar-sep);
}
.nav-item{
  display:block;
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 400; /* links normais */
  color: var(--sidebar-text);
}
.nav-item:hover{
  background: var(--sidebar-hover-bg);
}
.nav-item.active{
  background: var(--sidebar-active-bg);
  font-weight: 700;
}

/* Topbar + Main */
.app-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.app-topbar{
  height: 58px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 16px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.topbar-left h1{
  font-size: 18px;
  margin: 0;
  font-weight: 800;
  white-space: nowrap;
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.topbar-actions .who{
  font-size: 13px;
  color: #111;
}
.topbar-actions .who b{
  font-weight: 800;
}
.app-content{
  padding: 22px;
}

/* Sidebar collapse (aprovado: só esconde sidebar, resto intacto) */
body.sidebar-collapsed .app-sidebar{
  width: 0 !important;
  flex: 0 0 0 !important;
  border-right: none !important;
}
body.sidebar-collapsed .app-sidebar .sidebar-scroll{
  overflow: hidden !important;
  padding: 0 !important;
}

/* Mobile drawer */
@media(max-width: 980px){
  .app-sidebar{
    position: fixed;
    left: -310px;
    top: 0;
    z-index: 1000;
    transition: left .18s ease;
    box-shadow: var(--shadow-strong);
  }
  body.sidebar-open .app-sidebar{
    left: 0;
  }
  .app-content{ padding: 16px; }
}

/* Toggle button */
.btn-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, .12);
  background: #fff;
  cursor:pointer;
}
.btn-icon:hover{ background: #f6f8fb; }

/* =========================
   4) UTILITÁRIOS MVP
   ========================= */
.dic-container{
  max-width: 1200px;
  margin: 0 auto;
}
.dic-card{
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: 18px;
  border: 1px solid rgba(17,24,39,.06);
}

/* =========================
   4.1) CARDS WIDE (LISTAGENS - padrão DiC)
   - Usar quando a tabela "corta" na horizontal
   ========================= */
.dic-card.dic-wide{
  width: calc(100% + 50px);
  margin-left: -25px;
  margin-right: -25px;
}
@media (max-width: 980px){
  .dic-card.dic-wide{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Cabeçalho de páginas (título + ações) */
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.page-head h2{
  margin:0 0 6px;
  font-size:18px;
  font-weight:900;
}
.page-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* =========================
   5) BOTÕES (AZUL, BRANCO, VERDE, VERMELHO, SAIR)
   ========================= */
.btn{
  display:inline-block;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  text-decoration:none;
  font-weight:800;
  font-size: var(--btn-font);
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  line-height:1;
}
.btn-primary{
  background: var(--blue);
  color: var(--blue-text);
}
.btn-primary:hover{ background: var(--blue-hover); }

.btn-light{
  background: var(--light-bg);
  color: var(--light-text);
  border-color: var(--light-border);
}
.btn-light:hover{ background: var(--light-hover); }

.btn-green-soft{
  background: var(--green-soft-bg);
  color: var(--green-soft-text);
}
.btn-green-soft:hover{ background: var(--green-soft-hover); }

.btn-logout{
  background: var(--orange) !important;
  color: var(--orange-text) !important;
  border-color: rgba(0,0,0,.10) !important;
}
.btn-logout:hover{ background: var(--orange-hover) !important; }

.btn-red-soft{
  background: var(--red-soft-bg);
  color: var(--red-soft-text);
  border-color: var(--red-soft-border);
}
.btn-red-soft:hover{ background: var(--red-soft-hover); }

.btn-danger{
  background: #fff;
  color: var(--danger-text);
  border-color: var(--danger-border);
}
.btn-danger:hover{ background: var(--danger-hover); }

/* =========================
   6) TABLES / TAGS
   ========================= */
table{ width:100%; border-collapse:collapse; }
th,td{
  padding:10px;
  border-bottom:1px solid var(--table-border);
  font-size:13px;
  vertical-align:top;
  white-space:nowrap;
}
th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color: var(--thead-text);
  background: var(--thead-bg);
}
.right{ text-align:right; }
.tag{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-weight:800;
  font-size:11px;
}
.tag-neutral{ background:#f1f1f1; color:#333; font-weight:900; }
.tag-red{
  background: var(--tag-red-bg);
  color: var(--tag-red-text);
  border: 1px solid var(--tag-red-border);
  font-weight: 900;
}

/* =========================
   7) FORM / INPUTS
   ========================= */
label{ display:block; font-weight:800; margin:8px 0 6px; }
input,select,textarea{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--input-border);
  font-size:13px;
}
textarea{ min-height:90px; resize:vertical; }
.hint{ font-size:12px; color: var(--muted); margin-top:6px; }
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.02em;
}

/* =========================
   8) GRID UTIL (12 colunas)
   ========================= */
.grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:12px; }
.col-12{grid-column:span 12}
.col-11{grid-column:span 11}
.col-10{grid-column:span 10}
.col-9{grid-column:span 9}
.col-8{grid-column:span 8}
.col-7{grid-column:span 7}
.col-6{grid-column:span 6}
.col-5{grid-column:span 5}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
.col-2{grid-column:span 2}
.col-1{grid-column:span 1}

@media(max-width:980px){
  .grid{grid-template-columns:repeat(6, 1fr)}
  .col-12,.col-11,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1{grid-column:span 6}
}

/* =========================
   9) MODAL (layers e confirmações)
   ========================= */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: var(--backdrop);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:9999;
}
.modal{
  background:#fff;
  border-radius:14px;
  box-shadow: var(--shadow-strong);
  max-width:560px;
  width:100%;
  padding:16px;
}
.modal h3{ margin:0 0 8px; font-size:16px; }
.modal p{ margin:0 0 12px; color:#333; font-size:13px; line-height:1.35; }
.modal .actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
  flex-wrap:wrap;
}


/* Estado vazio (listagens) */
.empty{
  padding: 14px;
  border: 1px dashed var(--light-border);
  border-radius: 12px;
  background: #fbfcff;
  color: #333;
  font-size: 13px;
}


/* =========================
   9.1) MODAL - refinamentos (observações e layers)
   ========================= */
.modal.modal-xl{ max-width: 980px; }
.modal.modal-lg{ max-width: 760px; }

.modal .menu{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.modal .modal-body{
  padding:12px;
  border:1px solid var(--light-border);
  border-radius:12px;
  background:#fbfcff;
  color:#111827;
  font-size:13px;
  line-height:1.35;
  white-space:pre-wrap;
}

.layer-frame-wrap{
  height:70vh;
  border:1px solid #eef1f5;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.layer-frame-wrap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#fff;
}

/* =========================
   DIC UTILITIES (font weight / text align)
   Added to avoid dependency on Bootstrap utility classes.
   ========================= */
.fw-bold{ font-weight:700 !important; }
.fw-semibold{ font-weight:600 !important; }
.text-center{ text-align:center !important; }
.text-end{ text-align:right !important; }
.text-start{ text-align:left !important; }


/* =========================
   ESCALA GLOBAL DE LARGURA L1 A L10
   ========================= */
.dic-w-l1{width:min(var(--dic-w-l1),99vw)!important;max-width:99vw!important}
.dic-w-l2{width:min(var(--dic-w-l2),99vw)!important;max-width:99vw!important}
.dic-w-l3{width:min(var(--dic-w-l3),98vw)!important;max-width:98vw!important}
.dic-w-l4{width:min(var(--dic-w-l4),98vw)!important;max-width:98vw!important}
.dic-w-l5{width:min(var(--dic-w-l5),97vw)!important;max-width:97vw!important}
.dic-w-l6{width:min(var(--dic-w-l6),97vw)!important;max-width:97vw!important}
.dic-w-l7{width:min(var(--dic-w-l7),96vw)!important;max-width:96vw!important}
.dic-w-l8{width:min(var(--dic-w-l8),95vw)!important;max-width:95vw!important}
.dic-w-l9{width:min(var(--dic-w-l9),94vw)!important;max-width:94vw!important}
.dic-w-l10{width:min(var(--dic-w-l10),92vw)!important;max-width:92vw!important}

.dic-list-shell,.dic-overlay-shell{margin-left:auto;margin-right:auto;box-sizing:border-box}
.dic-list-shell > *, .dic-overlay-shell > *{box-sizing:border-box}