/* =========================================================
   FIO BONITO — Styles (completo)
   Paleta: marrom/caramelo + laranja + neutros quentes
   ========================================================= */

/* Tokens */
:root{
  /* Brand */
  --primary:#7a4a12;   /* marrom caramelo */
  --accent:#f28c00;    /* laranja */
  --danger:#dc3545;
  --warning:#f2b705;

  /* Neutros (quentes) */
  --bg:#f7f5f2;
  --surface:#ffffff;
  --surface-2:#f3efe9;
  --text:#1b1b1b;
  --muted:#6b625a;
  --border:#e6ddd2;

  --radius:14px;
  --radius-sm:10px;

  --shadow:0 10px 26px rgba(36,24,12,.10);
  --shadow-sm:0 6px 16px rgba(36,24,12,.08);

  --ring:0 0 0 .20rem rgba(242,140,0,.22);

  --thead:#f1ebe2;
  --row-hover:rgba(242,140,0,.08);

  --nav-bg: rgba(255,255,255,.88);

  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Dark mode (marrom escuro, contraste forte) */
html.theme-dark{
  --bg:#1a1410;
  --surface:#231b15;
  --surface-2:#2b211a;
  --text:#f5f0ea;
  --muted:#d2c5b8;
  --border:#3a2d23;

  --shadow:0 14px 34px rgba(0,0,0,.35);
  --shadow-sm:0 10px 22px rgba(0,0,0,.28);

  --ring:0 0 0 .20rem rgba(242,140,0,.26);

  --thead:#2b211a;
  --row-hover:rgba(242,140,0,.10);

  --nav-bg: rgba(26,20,16,.78);
}

/* Layout base */
html,body{height:100%;}
body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height:1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-main{min-height: calc(100vh - 64px);}
.app-container{max-width: 1020px;} /* evita “tela inteira” */

a{color:inherit;}
a:hover{color:inherit;}
.text-muted{color: var(--muted) !important;}

/* =========================================================
   Navbar
   ========================================================= */
.navbar{
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}
.navbar-brand{font-weight:900; letter-spacing:.2px;}
.brand-dot{
  width:8px;height:8px;border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  display:inline-block;
}

/* Nav links */
.nav-link{
  color: var(--muted) !important;
  font-weight:800;
  border-radius:999px;
  padding:.40rem .70rem;
}
.nav-link:hover{
  color: var(--text) !important;
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
}
.nav-link.active{
  color: var(--text) !important;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
}

/* Dark toggle button */
.btn-ghost{
  background: color-mix(in oklab, var(--surface-2) 65%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  font-weight:900;
}
.btn-ghost:hover{box-shadow: var(--shadow-sm);}

/* =========================================================
   Cards
   ========================================================= */
.card{
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--border) 92%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header{
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--primary) 92%, black),
    color-mix(in oklab, var(--accent) 55%, var(--primary))
  );
  color:#fff;
  font-weight:950;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.card-body{padding:1rem;}

/* KPI cards */
.card-kpi{
  text-align:center;
  background:
    radial-gradient(900px 220px at 10% 0%,
      color-mix(in oklab, var(--accent) 14%, transparent),
      transparent),
    var(--surface);
}
html.theme-dark .card-kpi{
  background:
    radial-gradient(900px 220px at 10% 0%,
      rgba(242,140,0,.18),
      transparent),
    var(--surface);
}

.card-hover{transition: transform .10s ease, box-shadow .10s ease;}
.card-hover:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(36,24,12,.14);
}
html.theme-dark .card-hover:hover{
  box-shadow: 0 16px 34px rgba(0,0,0,.36);
}

.kpi-title{
  font-weight:950;
  color: var(--muted);
  font-size:.78rem;
  letter-spacing:.25px;
  text-transform: uppercase;
}
.kpi-value{
  font-weight:1000;
  font-size:1.95rem;
  line-height:1.05;
  color: var(--text);
}
.kpi-link{
  display:inline-block;
  margin-top:.2rem;
  font-size:.82rem;
  color: color-mix(in oklab, var(--accent) 78%, var(--muted));
  font-weight:900;
}

/* =========================================================
   Forms
   ========================================================= */
.form-label{font-weight:900;color:var(--muted);}
.form-control,.form-select{
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
html.theme-dark .form-control,
html.theme-dark .form-select{
  background: var(--surface-2);
}
.form-control:focus,.form-select:focus{
  border-color: var(--accent);
  box-shadow: var(--ring);
  outline:0;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{border-radius: var(--radius-sm); font-weight:900;}

/* Mantém compatibilidade com Bootstrap, mas “puxa” para Fio Bonito */
.btn-primary{
  background-color: var(--accent) !important;
  border-color: color-mix(in oklab, var(--accent) 82%, black) !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(242,140,0,.18);
}
.btn-primary:hover{
  background-color: color-mix(in oklab, var(--accent) 88%, black) !important;
  border-color: color-mix(in oklab, var(--accent) 70%, black) !important;
}
.btn-primary:focus{
  box-shadow: var(--ring) !important;
}

.btn-outline-primary{
  color: var(--primary) !important;
  border-color: color-mix(in oklab, var(--primary) 70%, var(--border)) !important;
}
.btn-outline-primary:hover{
  color: #fff !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-success{
  background-color: color-mix(in oklab, var(--primary) 55%, var(--accent)) !important;
  border-color: color-mix(in oklab, var(--primary) 70%, black) !important;
}
.btn-warning{
  background-color: var(--warning) !important;
  border-color: color-mix(in oklab, var(--warning) 70%, black) !important;
}
.btn-danger{
  background-color: var(--danger) !important;
  border-color: color-mix(in oklab, var(--danger) 70%, black) !important;
}

/* =========================================================
   Tables
   ========================================================= */
.table{font-size:.94rem; color:var(--text); margin-bottom:0;}
.table thead{background: var(--thead);}
.table thead th{
  font-weight:950;
  color: var(--muted);
  border-bottom:1px solid var(--border) !important;
}
.table td,.table th{
  vertical-align:middle;
  border-top:1px solid var(--border) !important;
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  background: color-mix(in oklab, var(--surface-2) 72%, var(--surface));
}
.table tbody tr:hover>*{background: var(--row-hover) !important;}

/* =========================================================
   Badges
   ========================================================= */
.badge{border-radius:999px; padding:.40em .70em; font-weight:950;}

/* =========================================================
   Helpers (opcionais) — úteis no sistema
   ========================================================= */
.text-primary{color: var(--primary) !important;}
.text-accent{color: var(--accent) !important;}

.bg-primary{background: var(--primary) !important;}
.bg-accent{background: var(--accent) !important;}

.border-primary{border-color: var(--primary) !important;}
.border-accent{border-color: var(--accent) !important;}

/* =========================================================
   Mobile tweaks
   ========================================================= */
@media (max-width:576px){
  .app-container{max-width: 100%;}
  .container{padding-left:10px; padding-right:10px;}
  .card-body{padding:.95rem;}
  .table{font-size:.90rem;}
  .nav-link{padding:.36rem .55rem;}
}