/* base */
.bb-wide { display:grid; grid-template-columns: 260px 1fr; gap:0; }
.bb-side { position:sticky; top:0; align-self:start; height:100%; padding:20px 16px; border-right:1px solid rgba(0,0,0,.08); }
.bb-logo { display:flex; gap:10px; text-decoration:none; color:inherit; align-items:center; margin-bottom:16px; }
.bb-avatar { width:40px; height:40px; border-radius:50%; background:#ddd center/cover no-repeat; display:inline-block; }
.bb-meta small { display:block; opacity:.7; }
.bb-menu { display:flex; flex-direction:column; gap:6px; }
.bb-item { appearance:none; background:transparent; border:0; text-align:left; padding:10px 8px; border-radius:8px; cursor:pointer; width:100%; display:flex; align-items:center; gap:8px; }
.bb-item:hover { background:rgba(0,0,0,.05); }
.bb-item.is-active { background:rgba(0,0,0,.08); }
.bb-side-foot { margin-top:16px; }
.bb-primary { width:100%; border:0; background:#111; color:#fff; border-radius:10px; padding:10px 12px; cursor:pointer; }
.bb-primary:hover { opacity:.9; }

.bb-content { padding:24px; }
.bb-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.bb-topbar h1 { margin:0; font-size:clamp(18px,2.2vw,24px); }
.bb-top-actions { display:flex; gap:8px; }

.bb-panel { display:none; padding:12px 0; }
.bb-panel.is-active { display:block; }
.bb-row { display:flex; gap:12px; }
.bb-row.center { align-items:center; }
.bb-row.between { justify-content:space-between; }
.v-gap { margin-bottom:8px; }

.bb-btn { border:1px solid rgba(0,0,0,.12); background:#fff; padding:8px 10px; border-radius:8px; cursor:pointer; }
.bb-btn.ghost { background:transparent; }
.bb-input { padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,.12); background:#fff; }
.bb-inline-form { display:grid; gap:8px; margin-top:10px; margin-bottom:8px; max-width:980px; }
.bb-inline-form label { display:grid; gap:4px; }

.bb-table { width:100%; border-collapse: collapse; margin-top:8px; }
.bb-table th, .bb-table td { padding:10px 8px; border-bottom:1px solid rgba(0,0,0,.08); text-align:left; vertical-align: middle; }
.bb-actions-col { display:flex; gap:6px; flex-wrap:wrap; }
.bb-thumb { width:48px; height:48px; border-radius:8px; background:#f2f2f2 center/cover no-repeat; border:1px solid rgba(0,0,0,.06); }

.bb-pagination { display:flex; gap:6px; align-items:center; justify-content:flex-end; padding-top:8px; }
.bb-page-btn { border:1px solid rgba(0,0,0,.12); background:#fff; padding:6px 10px; border-radius:8px; cursor:pointer; }
.bb-page-btn.is-active { font-weight:700; }

/* Horários com múltiplos intervalos */
.bb-day { padding:8px 0; border-top:1px dashed rgba(0,0,0,.08); }
.bb-day .bb-intervals { display:grid; gap:6px; margin:8px 0 0 110px; }
.bb-interval { display:flex; gap:8px; align-items:center; }
.bb-interval .bb-remove { border-color:#f33; color:#f33; }

/* ===== Ajustes de layout para o painel Preferências ===== */
#bb-panel-configs { max-width: 980px; }
#bb-panel-configs h2 { margin: 8px 0 18px; }
#bb-panel-configs .bb-row { flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 10px; }
#bb-panel-configs label { display: flex; flex-direction: column; gap: 6px; min-width: 260px; flex: 1 1 300px; }
#bb-panel-configs .bb-input { max-width: 420px; }
#bb-panel-configs #bb-logo-wrap { flex-wrap: wrap; }
#bb-panel-configs #bb-logo-wrap .bb-btn { align-self: center; }
#bb-panel-configs #bb-prefs-msg { display:inline-block; margin-left:12px; }

/* Toggle switch */
.bb-switch{ position:relative; display:inline-block; width:44px; height:24px; }
.bb-switch input{ opacity:0; width:0; height:0; }
.bb-slider{ position:absolute; cursor:pointer; inset:0; background:#ddd; border-radius:999px; transition:.2s; }
.bb-slider:before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.bb-switch input:checked + .bb-slider{ background:#16a34a; }
.bb-switch input:checked + .bb-slider:before{ transform: translateX(20px); }


/* Modal */
.bb-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 9999; }
.bb-modal.is-open { display: flex !important; }
.bb-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.bb-modal-dialog { position: relative; background: #fff; border-radius: 12px; width: 100%; max-width: 560px; box-shadow: 0 10px 40px rgba(0,0,0,.2); padding: 14px; }
.bb-modal-header { display:flex; align-items:center; justify-content:space-between; padding: 4px 4px 10px 4px; border-bottom: 1px solid rgba(0,0,0,.06); }
.bb-modal-body { padding: 12px 4px; }
.bb-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding: 10px 4px 4px 4px; border-top: 1px solid rgba(0,0,0,.06); }
.bb-modal-close { border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; }


/* Simple alerts for messages */
.bb-alert{margin:8px 0;padding:8px 12px;border-radius:6px;border:1px solid transparent}
.bb-alert.success{background:#f0fff4;border-color:#b7f5c2}
.bb-alert.error{background:#fff5f5;border-color:#f5b7b7}

/* Danger link button */
.bb-link.danger{color:#b00020}
.bb-link.danger:hover{text-decoration:underline}

/* --- Responsive: stack menu on top for mobile --- */
@media (max-width: 768px) {
  .bb-wide { 
    display: grid;
    grid-template-columns: 1fr !important;
  }
  .bb-side {
    position: static !important;
    top: auto !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    padding: 12px 12px 8px 12px !important;
  }
  .bb-menu {
    flex-direction: column !important; /* one tab per line */
    gap: 8px !important;
    width: 100% !important;
  }
  .bb-item {
    width: 100% !important;   /* take full width */
    justify-content: flex-start !important;
    white-space: normal !important; /* allow wrapping of long labels */
  }
  .bb-content {
    padding: 12px !important;
  }
  .bb-topbar {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* --- Mobile tweaks for 'Clientes cadastrados' panel --- */
@media (max-width: 768px) {
  /* Stack inline form fields and make them fill width */
  .bb-inline-form {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  .bb-inline-form label,
  .bb-inline-form .bb-input,
  .bb-inline-form input,
  .bb-inline-form select,
  .bb-inline-form button {
    width: 100% !important;
    box-sizing: border-box;
  }
  .bb-inline-form .bb-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Table: fit within viewport and wrap long content */
  .bb-table {
    table-layout: fixed !important;
    width: 100% !important;
    overflow: hidden;
  }
  .bb-table th,
  .bb-table td {
    word-break: break-word !important;
    white-space: normal !important;
    padding: 8px 6px !important;
    font-size: 14px !important;
  }
  .bb-actions-col {
    justify-content: flex-start !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  /* Buttons inside actions: prevent overflow */
  .bb-actions-col .bb-btn {
    max-width: 100% !important;
  }

  /* Headings and paddings */
  .bb-content h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
}

/* --- Mobile tweaks for 'Serviços' panel --- */
@media (max-width: 768px) {
  /* Service table: keep all columns readable */
  .bb-table.servicos {
    table-layout: auto !important;
    width: 100% !important;
    border-collapse: collapse;
  }
  .bb-table.servicos th,
  .bb-table.servicos td {
    white-space: nowrap !important;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 120px;
    padding: 8px 6px !important;
    font-size: 14px !important;
    vertical-align: middle;
  }
  /* Allow wrapping if text is too long */
  .bb-table.servicos td:nth-child(2) {
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* Make image column fixed width */
  .bb-table.servicos td:first-child,
  .bb-table.servicos th:first-child {
    width: 48px !important;
  }
  /* Actions column adjust */
  .bb-table.servicos .bb-actions-col {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .bb-table.servicos .bb-btn {
    font-size: 13px !important;
    padding: 6px 8px !important;
  }
}

/* --- Mobile layout for Serviços table --- */
@media (max-width: 680px) {
  #bb-services-table thead { 
    display: none !important; 
  }
  #bb-services-table { 
    border-collapse: separate !important; 
    border-spacing: 0 !important; 
    width: 100% !important; 
    table-layout: auto !important;
  }
  #bb-services-table tr { 
    display: grid !important; 
    grid-template-columns: 56px 1fr !important; 
    gap: 8px !important; 
    padding: 8px 0 !important; 
  }
  #bb-services-table td { 
    display: block !important; 
    padding: 6px 6px !important; 
    white-space: normal !important; 
    word-break: break-word !important;
    border-bottom: 0 !important;
  }
  /* Img */
  #bb-services-table td:nth-child(1) { 
    grid-row: 1 / span 3; 
    grid-column: 1; 
    align-self: start; 
    padding-left: 0 !important;
  }
  /* Nome */
  #bb-services-table td:nth-child(2) { 
    grid-column: 2; 
    font-weight: 600; 
    padding-top: 2px !important;
  }
  /* Preço, Duração, Status as inline chips below the name */
  #bb-services-table td:nth-child(3),
  #bb-services-table td:nth-child(4),
  #bb-services-table td:nth-child(5) {
    grid-column: 2;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #bb-services-table td:nth-child(3) span,
  #bb-services-table td:nth-child(4) span,
  #bb-services-table td:nth-child(5) span {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 4px;
    padding: 2px 6px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    font-size: 12px;
  }
  /* Ações ocupa a linha inteira ao final */
  #bb-services-table td:nth-child(6) { 
    grid-column: 1 / -1; 
    padding-top: 4px !important;
  }
}

/* --- Refine Serviços table cards on mobile --- */
@media (max-width: 680px) {
  #bb-services-table tr {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
  }
  #bb-services-table td {
    padding: 4px 6px !important;
  }
  /* Center content block in grid */
  #bb-services-table tr {
    grid-template-columns: 70px 1fr !important;
    align-items: center !important;
  }
  #bb-services-table td:nth-child(1) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #bb-services-table td:nth-child(2) {
    font-size: 16px;
    font-weight: 600;
  }
  #bb-services-table td:nth-child(3),
  #bb-services-table td:nth-child(4),
  #bb-services-table td:nth-child(5) {
    color: #444;
    font-size: 14px;
  }
  #bb-services-table td:nth-child(6) {
    margin-top: 8px;
    display: flex !important;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end !important;
  }
}

/* --- Mobile refinement: Serviços card layout & balanced spacing --- */
@media (max-width: 680px) {
  /* Optional: constrain content width a bit on very wide mobiles to avoid "everything glued to left" feel */
  .bb-content {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  #bb-services-table {
    border-spacing: 0 !important;
  }
  #bb-services-table tr {
    display: grid !important;
    grid-template-columns: 48px 1fr !important; /* reduce left column to lessen left-heavy feel */
    gap: 12px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 12px !important;
    background: #fff !important;
  }
  #bb-services-table td {
    padding: 0 !important;
    border: 0 !important;
  }
  /* Img */
  #bb-services-table td:nth-child(1) {
    grid-row: 1 / span 4;
    align-self: start;
  }
  /* Nome */
  #bb-services-table td:nth-child(2) {
    font-weight: 600;
    margin-top: 2px;
  }
  /* Chips on one line when possible */
  #bb-services-table td:nth-child(3),
  #bb-services-table td:nth-child(4),
  #bb-services-table td:nth-child(5) {
    margin-top: 4px;
  }
  #bb-services-table td:nth-child(3) span,
  #bb-services-table td:nth-child(4) span,
  #bb-services-table td:nth-child(5) span {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 4px;
    padding: 2px 8px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    font-size: 12px;
  }
  /* Ações: botões alinhados à direita quando houver espaço; quebram no mobile estreito */
  #bb-services-table td:nth-child(6) {
    display: flex !important;
    justify-content: flex-start; /* could be flex-end if you prefer right alignment */
    gap: 8px;
    margin-top: 8px;
  }
}

/* Dashboard cards layout */
.bb-card strong { display:block; margin-bottom:6px; }
@media (max-width:768px){
  #bb-dashboard-panel .bb-row.between{ flex-direction:column; }
  #bb-dashboard-panel .bb-card{ width:100%; }
}