/* =========================================================
   THEME (LIMPO) — Studio Bellven
   - Topbar fixa + Sidebar fixa (desktop)
   - Scroll normal no BODY (mobile OK)
   ========================================================= */

/* ============ Variáveis ============ */
:root{
  --cor-1:#C35C67;   /* primária */
  --cor-2:#D58597;   /* secundária */
  --cor-3:#F7B7B7;   /* acento */
  --cor-4:#FFFFFF;   /* fundo */
  --tx-1:#5a1b25;    /* texto */

  --ink:#6b1f2a;
  --shadow: 0 14px 40px rgba(195,92,103,.08);

  --topbar-h: 72px;      /* fallback (JS pode sobrescrever) */
  --sidebar-w: 260px;
}

/* ============ Base ============ */
html, body{
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

body{
  background: var(--cor-4);
  color:#333;
}

a{ color: var(--cor-1); }
a:hover{ color: var(--cor-2); }

/* Corrige amarelo do autofill no Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:#333;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 0 50px #fff !important;
}

/* ============ Layout geral ============ */
/* Você pode usar .app-main OU .app-content — os dois funcionam iguais */
.app-main,
.app-content{
  padding-top: calc(var(--topbar-h) + 12px);
  min-height: calc(100vh - var(--topbar-h));
}

@media (min-width: 992px){
  .app-main,
  .app-content{
    margin-left: var(--sidebar-w);
  }
}

@media (max-width: 991.98px){
  .app-main,
  .app-content{
    margin-left: 0 !important;
  }
}

/* ============ Topbar (fixa) ============ */
.topbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  background: linear-gradient(135deg, var(--cor-1), var(--cor-2));
  color:#fff;
  border:0;
  box-shadow: 0 6px 18px rgba(195,92,103,.18);
}

.topbar.navbar{
  padding: 8px 0;
}

.topbar .navbar-brand{
  color:#fff;
  font-weight:800;
  letter-spacing:.3px;
  display:flex;
  align-items:center;
  gap:10px;
}

.topbar .navbar-brand img{
  height: 52px; /* sua topbar usa 52px no PHP */
  width:auto;
  object-fit:contain;
}

.topbar .nav-link,
.topbar .btn,
.topbar .dropdown-toggle{
  color:#fff;
}

.topbar .btn-outline{
  border-color:#fff;
  color:#fff;
}
.topbar .btn-outline:hover{
  background: rgba(255,255,255,.15);
  border-color: transparent;
}

/* =========================
   btn-icon (BASE NEUTRA)
   - Não força branco
   - Ícone herda a cor via currentColor
   ========================= */
.btn-icon{
  width:36px;height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--bs-border-color);
  border-radius:.7rem;
  background:transparent;
  padding:0;
  line-height:1;
  color:#111; /* ✅ padrão preto */
}

.btn-icon svg{
  width:18px;
  height:18px;
  stroke: currentColor;   /* ✅ NÃO usa branco global */
}

/* =========================
   Topbar: ícones BRANCOS
   ========================= */
.topbar .btn-icon{
  border:0;
  background:transparent;
  color:#fff;
  width:42px;height:42px;
  border-radius:10px;
}
.topbar .btn-icon:hover{ background: rgba(255,255,255,.12); }
.topbar .btn-icon svg{ width:22px; height:22px; stroke: currentColor; }

/* =========================
   Ações nas tabelas (igual Formulários)
   ========================= */
.actions .btn-icon{
  border-radius:999px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  margin-left:.25rem;
  color:#111; /* ✅ ícone preto visível */
}
.actions .btn-icon:first-child{ margin-left:0; }

.actions .btn-icon[data-color="primary"]{ border-color:#0d6efd33; background:#0d6efd0d; }
.actions .btn-icon[data-color="info"]{    border-color:#0dcaf033; background:#0dcaf00d; }
.actions .btn-icon[data-color="warning"]{ border-color:#ffc10744; background:#ffc10711; }
.actions .btn-icon[data-color="danger"]{  border-color:#dc354544; background:#dc354511; }

/* Mobile: botão um pouco menor */
@media (max-width: 767.98px){
  .actions .btn-icon{ width:30px; height:30px; }
}


/* Avatar chip */
.user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
}

.user-chip .avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(255,255,255,.8);
  background:#fff1f3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:var(--cor-1);
}
.user-chip .avatar img{ width:100%; height:100%; object-fit:cover; }

/* ============ Sidebar (fixa só desktop) ============ */
@media (min-width: 992px){
  .app-sidebar{
    width: var(--sidebar-w);
    position: fixed !important;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 16px 14px;
    z-index: 1040;

    background: linear-gradient(180deg, var(--cor-1), var(--cor-2));
    color:#fff;
    box-shadow: 6px 0 18px rgba(195,92,103,.14);
    border-right: 1px solid rgba(255,255,255,.12);
  }
}

.sidebar-section-title{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.8;
  margin: 10px 10px 6px;
}

.sidebar-nav .nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  border-radius: 12px;
  padding: 10px 12px;
  opacity:.95;
  transition: background .15s, transform .15s;
}
.sidebar-nav .nav-link:hover{
  background: rgba(255,255,255,.15);
  transform: translateX(2px);
}
.sidebar-nav .nav-link.active{
  background:#fff;
  color:var(--cor-1);
  font-weight:700;
  box-shadow: 0 6px 16px rgba(255,255,255,.18);
}

/* Ícones lucide no menu */
.sidebar-nav i{
  width: 22px;
  height: 22px;
  margin-right: 8px;
  stroke-width: 2.2px;
}

/* ============ Offcanvas (sidebar mobile) ============ */
@media (max-width: 991.98px){
  #offcanvasSidebar{
    z-index: 1060;
  }

  #offcanvasSidebar.app-sidebar{
    width: var(--sidebar-w);
    max-width: 80vw;
    background: linear-gradient(180deg, var(--cor-1), var(--cor-2));
    color:#fff;
  }

  #offcanvasSidebar .offcanvas-header{
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: .85rem 1.25rem;
  }

  #offcanvasSidebar .sidebar-nav .nav-link{
    border-radius: 999px;
    margin-bottom: .25rem;
    padding-inline: .9rem;
  }
}

/* ============ Tipografia / Cards / Tabelas ============ */
.page-title{
  font-weight:800;
  color: var(--ink);
  letter-spacing:.3px;
}

.card-soft,
.kpi-card,
.panel{
  border:0;
  border-radius:14px;
  box-shadow: var(--shadow);
}

.table thead th{
  background:#fff7f8;
  border-bottom-color:#f1d4d9;
}

.table th{
  color: var(--tx-1);
  font-weight: 700;
  border-bottom: 2px solid #f4d2d7 !important;
}

.table td{
  border-color: #f8e4e6 !important;
}

.table-hover tbody tr:hover{
  background: #fff7f8;
}

.table-responsive{ width:100%; overflow-x:auto; }
.table td, .table th{ white-space:nowrap; }

/* ============ Botões ============ */
.btn{ border-radius:12px; }

.btn-primary{
  background: var(--cor-1);
  border-color: var(--cor-1);
}
.btn-primary:hover{
  background:#9b3743;
  border-color:#9b3743;
}

.btn-outline{
  border-color:#d8b1b9;
  color:#6b1f2a;
}
.btn-outline:hover{
  background:#f9e5e8;
}

.form-control:focus{
  border-color: var(--cor-1);
  box-shadow: 0 0 0 .2rem rgba(195,92,103,.15);
}

/* Ícones Lucide dentro de botões */
.btn svg{ width: 18px; height: 18px; stroke-width: 2.2; }
.btn-sm svg{ width: 16px; height: 16px; }

/* ============ Badges / Pills ============ */
.badge-soft{ background: var(--cor-3); color: var(--tx-1); }

.badge-soft-success{ background:#e9f9ee; color:#1f8f3a; }
.badge-soft-danger{  background:#ffe9ec; color:#b12231; }
.badge-soft-warning{ background:#fff6df; color:#a87700; }
.badge-soft-secondary{ background:#f1eef1; color:#6b6570; }

/* ============ Ações minimalistas na tabela ============ */
td.text-center{
  text-align:center !important;
  vertical-align:middle;
  white-space:nowrap;
}

td.text-center a.btn-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin: 0 4px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--cor-1);
  transition: transform .15s ease, color .15s ease;
}
td.text-center a.btn-action:hover{
  color:#9b3743;
  transform: scale(1.15);
}
td.text-center .btn-action svg{
  width: 20px;
  height: 20px;
  stroke-width: 2.3;
}

/* ============ Before/After ============ */
.ba-container{
  position: relative;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 16/9;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(195,92,103,.12);
  background:#f9f9f9;
}
.ba-container img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ba-overlay{
  position:absolute;
  inset:0;
  width:50%;
  overflow:hidden;
  border-right:2px solid #fff;
}
.ba-slider{
  position:absolute;
  left:0; right:0;
  bottom:10px;
  margin:0 auto;
  width:60%;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  background:#F7B7B7;
  border-radius:4px;
  outline:none;
}
.ba-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#C35C67;
  cursor:pointer;
  border:2px solid #fff;
}
.ba-handle{
  position:absolute;
  top:0; bottom:0;
  width:2px;
  background:#fff;
  left:50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

/* Botão excluir na galeria */
.g-del{ position:absolute; top:8px; right:8px; }
.g-del .btn-action{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:#fff;
  border-radius:10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  border:1px solid #f0d9dd;
  color:#dc3545;
}
.g-del .btn-action:hover{ transform: scale(1.06); }
.g-del .btn-action svg{ width:18px; height:18px; stroke-width:2.2; }

/* ============ Notificações (dropdown) ============ */
.notif-badge{
  position:absolute;
  top:-6px;
  right:-4px;
  font-size:.70rem;
}

.notif-menu{
  --b:#f4d2d7;
  --acc:#C35C67;
  width: 360px;
  padding:0;
  border:1px solid var(--b);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.notif-head{
  padding:12px 14px;
  background:#fff5f7;
  border-bottom:1px solid var(--b);
}
.notif-head .title{ font-weight:700; color:#7a2430; }
.notif-head .btn-link{ color:var(--acc); text-decoration:none; }
.notif-head .btn-link:hover{ text-decoration:underline; }

.notif-list{
  max-height: 360px;
  overflow:auto;
  background:#fff;
}
.notif-empty{ padding:16px; text-align:center; }

.notif-item{
  display:flex;
  gap:10px;
  padding:12px 14px;
  align-items:flex-start;
  text-decoration:none;
  color:#333;
  border-bottom:1px solid #f8e4e7;
}
.notif-item:last-child{ border-bottom:0; }
.notif-item:hover{ background:#fff7f8; }

.notif-item .ico{
  width:34px;
  height:34px;
  border-radius:9px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  background:#fff0f2;
  color:var(--acc);
  border:1px solid #f3c5cc;
}
.notif-item .ico svg{ width:18px; height:18px; stroke: currentColor; }

.notif-item .text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.notif-item .msg{ font-weight:600; color:#5b1a23; }
.notif-item .time{ font-size:.80rem; color:#9c6e77; }

.notif-foot{
  padding:10px 14px;
  background:#fff;
  border-top:1px solid var(--b);
  text-align:center;
}
.notif-foot .view-all{
  color:var(--acc);
  text-decoration:none;
  font-weight:600;
}
.notif-foot .view-all:hover{ text-decoration:underline; }

/* No mobile limita dropdown das notificações */
@media (max-width: 575.98px){
  .topbar-notif{ position: static; }
  .topbar-notif .dropdown-menu.notif-menu{
    left:auto !important;
    right: .75rem !important;
    transform: translate3d(0, .5rem, 0) !important;
    max-width: calc(100vw - 1.5rem);
    min-width: 260px;
  }
}

/* ============ Login ============ */
.login-wrap{
  min-height: 100vh;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 992px){
  .login-wrap{ grid-template-columns: 1fr; }
}

.login-hero{
  background: linear-gradient(135deg, var(--cor-1), var(--cor-2));
  color:#fff;
  padding: clamp(24px, 5vw, 56px);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.login-hero::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(60% 60% at 10% 10%, rgba(255,255,255,0.15), transparent 60%),
    radial-gradient(50% 50% at 90% 30%, rgba(255,255,255,0.10), transparent 60%);
  pointer-events:none;
}
.login-hero .brand{ max-width:520px; }
.login-hero .brand h1{ font-weight:800; letter-spacing:.5px; margin:0 0 8px; }
.login-hero .brand p{ margin:0; opacity:.95; }

.login-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(24px, 5vw, 56px);
}
.login-card .card{
  width:100%;
  max-width:460px;
  border:0;
  border-radius:16px;
  box-shadow: 0 12px 30px rgba(195,92,103,.18);
}
.login-card .card-header{ background:#fff; border:0; padding:24px 24px 0; }
.login-card .card-body{ padding:24px; }
.login-card .card h5{ color: var(--cor-1); font-weight:700; }

/* ============ Ajustes responsivos gerais ============ */
@media (max-width: 767.98px){
  .container-fluid{ padding-left:.75rem; padding-right:.75rem; }
  .page-title{ font-size:1.35rem; }
  .container-fluid .row.g-3>[class^="col-"]{ flex:0 0 100%; max-width:100%; }
}

@media (max-width: 575.98px){
  .modal-dialog{ margin:.75rem; }
  .modal-content{ border-radius:14px; }
  .table td, .table th{ padding:.5rem .65rem; }
}

@media (max-width: 420px){
  .actions{ gap:.25rem; }
}