/* ==========================================================================
   Ritoo — Shared app shell (dashboard.html + whm.html)
   App chrome: sidebar, topbar, views. Builds on themed Bootstrap.
   ========================================================================== */
/* Carregado no HTML depois de: bootstrap.css — via project_css('dashboard.css') (app/Helpers/Project/project_css.php). */
:root { --xbyte-sidebar-w: 256px; --xbyte-topbar-h: 66px; }

body.app { background: var(--xbyte-bg); overflow-x: hidden; }

/* Layout */
.app-shell { display: grid; grid-template-columns: var(--xbyte-sidebar-w) 1fr; min-height: 100vh; }

/* Sidebar */
.app-sidebar {
  background: var(--xbyte-navy-deep);
  color: rgba(234,240,246,.7);
  padding: 1.2rem 0;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.05);
}
.app-brand { display:flex; align-items:center; gap:.6rem; padding: .3rem 1.4rem 1.4rem; color:#fff; text-decoration:none; }
.app-brand .mark { width: 30px; height:30px; border:1.5px solid rgba(255,255,255,.5); border-radius:7px; display:flex; align-items:center; justify-content:center; font-family: var(--xbyte-font-serif); font-weight:700; position:relative; }
.app-brand .mark::after { content:""; position:absolute; right:-3px; bottom:-3px; width:8px;height:8px;border-radius:2px;background:var(--xbyte-gold); }
.app-brand .name { font-family: var(--xbyte-font-serif); font-size:1.3rem; font-weight:600; }
.app-brand .ctx { font-size:.62rem; color: var(--xbyte-gold-bright); letter-spacing:.1em; text-transform:uppercase; }

.nav-section { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: rgba(234,240,246,.35); font-weight:700; padding: 1.1rem 1.4rem .4rem; }
.app-nav { list-style:none; padding:0 .8rem; margin:0; }
.app-nav a { display:flex; align-items:center; gap:.75rem; color: rgba(234,240,246,.68); text-decoration:none; font-size:.9rem; font-weight:500; padding:.62rem .7rem; border-radius:9px; margin-bottom:.1rem; transition: background-color .2s, color .2s; cursor:pointer; }
.app-nav a .bi { font-size:1.05rem; opacity:.85; }
.app-nav a:hover { background: rgba(255,255,255,.05); color:#fff; }
.app-nav a.active { background: rgba(255,255,255,.08); color:#fff; }
.app-nav a.active .bi { color: var(--xbyte-gold-bright); opacity:1; }
.app-nav a .pill { margin-left:auto; font-size:.66rem; font-weight:700; background: var(--xbyte-gold); color:var(--xbyte-navy-deep); border-radius:50rem; padding:.04rem .42rem; }

/* Collapsible nav group */
.nav-parent { user-select:none; }
.nav-parent .caret { margin-left:auto; font-size:.7rem; opacity:.65; transition: transform .25s var(--xbyte-ease); }
.nav-group.open > .nav-parent { background: rgba(255,255,255,.05); color:#fff; }
.nav-group.open > .nav-parent .caret { transform: rotate(180deg); }
.nav-sub { list-style:none; margin:.1rem 0 .25rem; padding:0; max-height:0; overflow:hidden; transition: max-height .32s var(--xbyte-ease); }
.nav-group.open .nav-sub { max-height:320px; }
.nav-sub a { font-size:.85rem; padding:.5rem .7rem .5rem 2.55rem; position:relative; }
.nav-sub a::before { content:""; position:absolute; left:1.55rem; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:rgba(234,240,246,.28); transition:background-color .2s; }
.nav-sub a:hover::before { background:rgba(234,240,246,.6); }
.nav-sub a.active::before { background:var(--xbyte-gold-bright); }
.nav-sub a .bi { font-size:.98rem; }

.sidebar-foot { margin-top:auto; padding: 1rem 1.4rem 0; }
.sidebar-foot .upgrade { background: rgba(191,162,105,.12); border:1px solid rgba(210,186,133,.3); border-radius:12px; padding:1rem; }
.sidebar-foot .upgrade p { font-size:.78rem; color: rgba(234,240,246,.8); margin:0 0 .6rem; line-height:1.45; }

/* Topbar */
.app-topbar {
  height: var(--xbyte-topbar-h);
  background: rgba(251,250,247,.85);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--xbyte-line);
  display:flex; align-items:center; gap:1rem;
  padding: 0 1.8rem; position: sticky; top:0; z-index: 20;
}
.app-main-col { display:flex; flex-direction:column; min-width:0; }
.app-content { padding: 2rem 1.8rem 3rem; }

.tenant-switch { display:flex; align-items:center; gap:.6rem; border:1px solid var(--xbyte-line); background:var(--xbyte-surface); border-radius:10px; padding:.4rem .7rem; cursor:pointer; }
.tenant-switch .av { width:28px;height:28px;border-radius:7px; background:var(--xbyte-navy); color:var(--xbyte-gold-bright); display:flex;align-items:center;justify-content:center; font-family:var(--xbyte-font-serif); font-weight:700; font-size:.82rem; }
.tenant-switch .nm { font-weight:700; font-size:.85rem; color:var(--xbyte-navy); line-height:1; }
.tenant-switch .dm { font-size:.68rem; color: var(--xbyte-muted); }

.topbar-search { flex:1; max-width:380px; position:relative; }
.topbar-search .bi { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--xbyte-muted); }
.topbar-search input { padding-left:2.2rem; height:40px; }
.icon-btn { width:40px;height:40px;border-radius:10px;border:1px solid var(--xbyte-line); background:var(--xbyte-surface); color:var(--xbyte-ink-soft); display:flex;align-items:center;justify-content:center; position:relative; cursor:pointer; transition: background-color .2s; }
.icon-btn:hover { background: var(--xbyte-bg); }
.icon-btn .dot { position:absolute; top:8px; right:9px; width:7px;height:7px;border-radius:50%; background:#d6453d; }
.topbar-avatar { width:40px;height:40px;border-radius:50%; background:var(--xbyte-navy); color:var(--xbyte-gold-bright); display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem; cursor:pointer; }

/* Page header */
.page-head h1 { font-size: 1.9rem; margin:0; }
.page-head .sub { color: var(--xbyte-muted); font-size:.92rem; margin-top:.3rem; }

/* Views */
.view { display:none; }
.view.active { display:block; animation: viewIn .4s var(--xbyte-ease); }
@keyframes viewIn { from{ transform: translateY(10px);} to{ transform:none;} }

/* KPI cards */
.kpi-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; }
.kpi { background:var(--xbyte-surface); border:1px solid var(--xbyte-line); border-radius:14px; box-shadow:var(--xbyte-shadow-sm); }
.kpi .top { display:flex; align-items:center; justify-content:space-between; }
.kpi .ico { width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center; background:var(--xbyte-bg-2); color:var(--xbyte-navy); font-size:1.1rem; }
.kpi .delta { font-size:.74rem; font-weight:700; }
.kpi .delta.up { color:#1f8f4e; } .kpi .delta.down { color:#d6453d; }
.kpi .val { font-family:var(--xbyte-font-serif); font-size:2rem; font-weight:600; color:var(--xbyte-navy); margin-top:.8rem; line-height:1; }
.kpi .lbl { font-size:.82rem; color: var(--xbyte-muted); margin-top:.3rem; }

/* Generic panel */
.panel { background:var(--xbyte-surface); border:1px solid var(--xbyte-line); border-radius:14px; box-shadow:var(--xbyte-shadow-sm); }
.panel-head { padding:1.1rem 1.4rem; border-bottom:1px solid var(--xbyte-line); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.panel-head h3 { font-size:1.1rem; margin:0; }
.panel-body { padding:1.4rem; }
.panel-head .panel-actions { display:flex; gap:.5rem; }

/* Tables */
.ritoo-table { width:100%; border-collapse:collapse; }
.ritoo-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--xbyte-muted); font-weight:700; padding:.7rem 1rem; border-bottom:1px solid var(--xbyte-line); }
.ritoo-table td { padding:.85rem 1rem; border-bottom:1px solid var(--xbyte-line); font-size:.9rem; color:var(--xbyte-ink-soft); vertical-align:middle; }
.ritoo-table tbody tr { transition: background-color .15s; }
.ritoo-table tbody tr:hover { background: var(--xbyte-bg-2); }
.ritoo-table .av { width:32px;height:32px;border-radius:50%; background:var(--xbyte-navy); color:var(--xbyte-gold-bright); display:inline-flex;align-items:center;justify-content:center; font-size:.74rem; font-weight:700; }
.cell-strong { font-weight:700; color: var(--xbyte-navy); }

.status { font-size:.72rem; font-weight:700; padding:.22rem .6rem; border-radius:50rem; display:inline-flex; align-items:center; gap:.35rem; }
.status::before { content:""; width:6px;height:6px;border-radius:50%; background:currentColor; }
.status.new { background: rgba(31,143,78,.12); color:#1f8f4e; }
.status.prog { background: var(--xbyte-gold-soft); color: var(--xbyte-gold-ink); }
.status.won { background: rgba(15,34,51,.08); color: var(--xbyte-navy); }
.status.lost { background: rgba(214,69,61,.1); color:#d6453d; }
.status.active { background: rgba(31,143,78,.12); color:#1f8f4e; }
.status.paused { background: rgba(107,113,120,.14); color:var(--xbyte-muted); }

/* Kanban */
.kanban { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; align-items:start; }
.kanban-col { background:var(--xbyte-bg-2); border:1px solid var(--xbyte-line); border-radius:14px; padding:.9rem; }
.kanban-col h4 { font-family:var(--xbyte-font-sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--xbyte-ink-soft); font-weight:700; display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.kanban-col h4 .count { background:var(--xbyte-surface); border:1px solid var(--xbyte-line); border-radius:50rem; padding:.04rem .5rem; font-size:.72rem; color:var(--xbyte-muted); }
.kard { background:var(--xbyte-surface); border:1px solid var(--xbyte-line); border-radius:11px; padding:.85rem; margin-bottom:.65rem; box-shadow:var(--xbyte-shadow-sm); cursor:grab; transition: box-shadow .2s, transform .2s; }
.kard:hover { box-shadow:var(--xbyte-shadow); transform: translateY(-2px); }
.kard.dragging { opacity:.4; }
.kanban-col.drop-on { background: var(--xbyte-gold-soft); }
.kard-del { background:none; border:0; color:var(--xbyte-muted); font-size:1.1rem; line-height:1; cursor:pointer; padding:0 .15rem; border-radius:5px; opacity:0; transition:opacity .15s, color .15s; }
.kard:hover .kard-del { opacity:1; }
.kard-del:hover { color:#d6453d; }
.kanban-add { width:100%; background:none; border:1px dashed var(--xbyte-line-strong); color:var(--xbyte-muted); font-size:.78rem; font-weight:600; border-radius:9px; padding:.5rem; cursor:pointer; transition:border-color .2s, color .2s, background-color .2s; display:flex; align-items:center; justify-content:center; gap:.35rem; }
.kanban-add:hover { border-color:var(--xbyte-gold); color:var(--xbyte-gold-ink); background:var(--xbyte-surface); }

/* Row actions (tables) */
.row-actions { display:inline-flex; align-items:center; gap:.4rem; justify-content:flex-end; }
.icon-btn.sm { width:32px; height:32px; font-size:.9rem; }
.mini-select { font-family:var(--xbyte-font-sans); font-size:.74rem; font-weight:600; color:var(--xbyte-ink-soft); border:1px solid var(--xbyte-line-strong); border-radius:7px; padding:.25rem .5rem; background:var(--xbyte-surface); cursor:pointer; }
.mini-select:focus { outline:none; border-color:var(--xbyte-gold); }
.kard .kt { font-weight:700; color:var(--xbyte-navy); font-size:.9rem; }
.kard .ka { font-size:.78rem; color:var(--xbyte-muted); margin:.2rem 0 .6rem; }
.kard .kf { display:flex; align-items:center; justify-content:space-between; font-size:.74rem; }
.kard .val { font-weight:700; color:var(--xbyte-gold-ink); }

/* Module management cards */
.mod-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:1rem; }
.mod-tile { background:var(--xbyte-surface); border:1px solid var(--xbyte-line); border-radius:14px; padding:1.3rem; display:flex; flex-direction:column; gap:.7rem; box-shadow:var(--xbyte-shadow-sm); }
.mod-tile .mt-ico { width:46px;height:46px;border-radius:12px; background:var(--xbyte-navy); color:var(--xbyte-gold-bright); display:flex;align-items:center;justify-content:center; font-size:1.2rem; }
.mod-tile.is-off { opacity:.72; }
.mod-tile.is-off .mt-ico { background: var(--xbyte-bg-2); color:var(--xbyte-muted); }
.mod-tile h4 { font-size:1.05rem; margin:0; }
.mod-tile p { font-size:.84rem; color:var(--xbyte-muted); margin:0; flex:1; }
.mod-foot { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--xbyte-line); padding-top:.8rem; }
.mod-foot .price { font-size:.8rem; font-weight:700; color:var(--xbyte-ink-soft); }

/* Site template picker */
.site-tpl-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:.8rem; }
.site-tpl { background:var(--xbyte-bg-2); border:1px solid var(--xbyte-line); border-radius:12px; padding:1rem; cursor:pointer; transition:border-color .15s, background .15s; }
.site-tpl:hover { border-color:var(--xbyte-gold); }
.site-tpl.selected { border-color:var(--xbyte-gold); background:var(--xbyte-gold-soft); }
.site-tpl i { font-size:1.3rem; color:var(--xbyte-gold-ink); }
.site-tpl .st-name { font-weight:700; font-size:.92rem; margin-top:.4rem; }
.site-tpl .st-desc { font-size:.78rem; color:var(--xbyte-muted); margin-top:.2rem; }

/* Switch */
.form-switch .form-check-input { width:2.6em; height:1.4em; cursor:pointer; }

/* Activity / timeline */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { position:relative; padding:0 0 1.1rem 1.5rem; border-left:2px solid var(--xbyte-line); }
.timeline li:last-child { border-left-color:transparent; padding-bottom:0; }
.timeline li::before { content:""; position:absolute; left:-6px; top:2px; width:10px;height:10px;border-radius:50%; background:var(--xbyte-gold); border:2px solid var(--xbyte-surface); }
.timeline .t { font-size:.88rem; color:var(--xbyte-ink); font-weight:600; }
.timeline .m { font-size:.78rem; color:var(--xbyte-muted); }

/* Mini bar chart */
.barchart { display:flex; align-items:flex-end; gap:.6rem; height:160px; padding-top:1rem; }
.barchart .bar { flex:1; background: linear-gradient(180deg, var(--xbyte-navy), var(--xbyte-navy-700)); border-radius:6px 6px 0 0; position:relative; min-height:6px; transition: height .6s var(--xbyte-ease); }
.barchart .bar.accent { background: linear-gradient(180deg, var(--xbyte-gold), var(--xbyte-gold-ink)); }
.barchart .bar span { position:absolute; bottom:-1.5rem; left:0; right:0; text-align:center; font-size:.68rem; color:var(--xbyte-muted); }

/* Settings form rows */
.setting-row { display:grid; grid-template-columns: 240px 1fr; gap:1.5rem; padding:1.3rem 0; border-bottom:1px solid var(--xbyte-line); }
.setting-row:last-child { border-bottom:0; }
.setting-row .label h5 { font-size:.95rem; margin:0 0 .2rem; }
.setting-row .label p { font-size:.8rem; color:var(--xbyte-muted); margin:0; }
.swatch-row { display:flex; gap:.6rem; }
.swatch { width:34px;height:34px;border-radius:8px; cursor:pointer; border:2px solid transparent; }
.swatch.sel { border-color: var(--xbyte-ink); box-shadow:0 0 0 2px #fff inset; }

/* Mobile */
.app-burger { display:none; }
@media (max-width: 991.98px){
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { position:fixed; left:0; top:0; z-index:1050; width:var(--xbyte-sidebar-w); transform:translateX(-100%); transition:transform .3s var(--xbyte-ease); }
  .app-sidebar.open { transform:none; }
  .app-burger { display:flex; }
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
  .kanban { grid-template-columns: 1fr; }
  .topbar-search { display:none; }
  .setting-row { grid-template-columns:1fr; gap:.6rem; }
}
@media (max-width: 575.98px){ .kpi-grid { grid-template-columns: 1fr; } }
.app-overlay { position:fixed; inset:0; background:rgba(10,24,37,.4); z-index:1040; display:none; }
.app-overlay.show { display:block; }

/* ==========================================================================
   Tenant theme customizer (Settings) + public-page preview
   ========================================================================== */
.theme-presets { display:flex; flex-wrap:wrap; gap:.7rem; }
.theme-preset { cursor:pointer; border:1px solid var(--xbyte-line); border-radius:12px; padding:.6rem; background:var(--xbyte-surface); transition:border-color .2s, box-shadow .2s, transform .2s; width:120px; }
.theme-preset:hover { border-color:var(--xbyte-line-strong); box-shadow:var(--xbyte-shadow-sm); transform:translateY(-2px); }
.theme-preset.sel { border-color:var(--xbyte-ink); box-shadow:0 0 0 2px var(--xbyte-gold-soft); }
.theme-preset .duo { display:flex; height:34px; border-radius:7px; overflow:hidden; }
.theme-preset .duo .p { flex:2; } .theme-preset .duo .a { flex:1; }
.theme-preset .pn { font-size:.74rem; font-weight:600; color:var(--xbyte-ink-soft); margin-top:.45rem; display:block; text-align:center; }

.theme-customs { display:flex; flex-wrap:wrap; align-items:flex-end; gap:1rem; }
.color-field { display:flex; flex-direction:column; gap:.4rem; }
.color-field > span { font-size:.78rem; font-weight:600; color:var(--xbyte-ink-soft); }
.color-field .picker { display:flex; align-items:center; gap:.6rem; border:1px solid var(--xbyte-line-strong); border-radius:9px; padding:.35rem .5rem .35rem .4rem; background:var(--xbyte-surface); }
.color-field input[type=color] { width:38px; height:38px; border:0; background:none; padding:0; border-radius:8px; cursor:pointer; }
.color-field input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.color-field input[type=color]::-webkit-color-swatch { border:1px solid var(--xbyte-line); border-radius:7px; }
.color-field .hex { font-family:ui-monospace,monospace; font-size:.82rem; font-weight:600; color:var(--xbyte-navy); text-transform:uppercase; min-width:64px; }

/* Live theme preview: mini public page */
.theme-preview { display:flex; gap:1rem; flex-wrap:wrap; }
.tp-site { width:300px; border:1px solid var(--xbyte-line); border-radius:12px; overflow:hidden; box-shadow:var(--xbyte-shadow-sm); background:var(--xbyte-surface); }
.tp-urlbar { display:flex; align-items:center; gap:.4rem; padding:.5rem .7rem; background:var(--xbyte-bg-2); border-bottom:1px solid var(--xbyte-line); }
.tp-urlbar .dot { width:7px;height:7px;border-radius:50%; background:rgba(15,34,51,.15); }
.tp-urlbar .u { margin-left:.4rem; font-size:.64rem; color:var(--xbyte-muted); font-family:ui-monospace,monospace; }
.tp-hero { background:var(--xbyte-navy); color:#fff; padding:1rem 1.1rem 1.2rem; }
.tp-hero .brand { font-family:var(--xbyte-font-serif); font-size:1rem; font-weight:600; display:flex; align-items:center; gap:.4rem; }
.tp-hero .brand .seg { color:var(--xbyte-gold-bright); }
.tp-hero h6 { color:#fff; font-family:var(--xbyte-font-serif); font-size:.92rem; margin:.7rem 0 .8rem; line-height:1.25; font-weight:500; }
.tp-hero .btn-mini { display:inline-block; background:var(--xbyte-gold); color:var(--xbyte-navy-deep); font-size:.7rem; font-weight:700; padding:.32rem .7rem; border-radius:50rem; }
.tp-body { padding:.9rem 1.1rem; }
.tp-body .chips { display:flex; gap:.35rem; flex-wrap:wrap; }
.tp-body .chip { font-size:.62rem; font-weight:600; color:var(--xbyte-gold-ink); border:1px solid var(--xbyte-gold-soft); background:var(--xbyte-gold-soft); border-radius:50rem; padding:.18rem .5rem; }
.tp-body .line { height:7px; border-radius:50rem; background:var(--xbyte-bg-2); margin-top:.6rem; }
.tp-body .line.s { width:70%; }

/* Live theme preview: mini dashboard sample */
.tp-app { width:230px; border:1px solid var(--xbyte-line); border-radius:12px; overflow:hidden; display:flex; box-shadow:var(--xbyte-shadow-sm); background:var(--xbyte-surface); }
.tp-app .side { width:58px; background:var(--xbyte-navy-deep); padding:.7rem .5rem; display:flex; flex-direction:column; gap:.45rem; }
.tp-app .side .b { width:18px;height:18px;border-radius:5px; background:var(--xbyte-gold); }
.tp-app .side .nav { width:100%; height:7px; border-radius:50rem; background:rgba(255,255,255,.12); }
.tp-app .side .nav.on { background:var(--xbyte-gold-bright); width:80%; }
.tp-app .main { flex:1; padding:.7rem; }
.tp-app .main .h { height:9px; width:60%; border-radius:50rem; background:var(--xbyte-navy); }
.tp-app .main .kpi { margin-top:.6rem; border:1px solid var(--xbyte-line); border-radius:7px; padding:.5rem; }
.tp-app .main .kpi .v { font-family:var(--xbyte-font-serif); font-weight:700; color:var(--xbyte-navy); font-size:1rem; line-height:1; }
.tp-app .main .kpi .l { height:5px; width:70%; border-radius:50rem; background:var(--xbyte-bg-2); margin-top:.35rem; }
.tp-app .main .btnp { margin-top:.6rem; height:14px; border-radius:5px; background:var(--xbyte-navy); }

/* Minimal firm-page preview styles (used by the "Página premium" view) */
.ritoo-window { background:var(--xbyte-surface); border:1px solid var(--xbyte-line); border-radius:14px; box-shadow:var(--xbyte-shadow); overflow:hidden; }
.firm-page { background:linear-gradient(180deg,#fff,var(--xbyte-bg-2)); }
.firm-topbar { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.2rem; border-bottom:1px solid var(--xbyte-line); }
.firm-logo { font-family:var(--xbyte-font-serif); font-weight:600; color:var(--xbyte-navy); font-size:.95rem; }
.firm-cta { display:inline-flex; align-items:center; gap:.4rem; background:#1f8f4e; color:#fff; font-size:.7rem; font-weight:700; padding:.4rem .8rem; border-radius:50rem; }

/* Lawyer / practice-area cards (Gestão do site) */
.profile-card { background:var(--xbyte-surface); border:1px solid var(--xbyte-line); border-radius:14px; padding:1.4rem; box-shadow:var(--xbyte-shadow-sm); height:100%; display:flex; flex-direction:column; transition:box-shadow .25s var(--xbyte-ease), transform .25s var(--xbyte-ease); }
.profile-card:hover { box-shadow:var(--xbyte-shadow); transform:translateY(-2px); }
.profile-card.is-muted { opacity:.72; }
.profile-card .pc-top { display:flex; gap:.9rem; align-items:center; }
.profile-card .pc-top > div { min-width:0; }
.profile-card .pc-top .cell-strong { display:block; line-height:1.22; }
.profile-card .pc-top .text-muted-2 { margin-top:.12rem; line-height:1.2; }
.profile-card .pc-top .text-gold { margin-top:.12rem; }
.profile-avatar { width:54px;height:54px;border-radius:50%; flex:0 0 auto; background:var(--xbyte-navy); color:var(--xbyte-gold-bright); display:flex;align-items:center;justify-content:center; font-family:var(--xbyte-font-serif); font-weight:700; font-size:1.15rem; }
.profile-card .pc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:1rem; border-top:1px solid var(--xbyte-line); }
.area-chips { display:flex; gap:.35rem; flex-wrap:wrap; }
.area-chip-sm { font-size:.7rem; font-weight:600; color:var(--xbyte-gold-ink); background:var(--xbyte-gold-soft); border-radius:50rem; padding:.2rem .6rem; }
.area-ico { width:46px;height:46px;border-radius:12px; background:var(--xbyte-navy); color:var(--xbyte-gold-bright); display:flex;align-items:center;justify-content:center; font-size:1.2rem; }
.profile-card.is-muted .area-ico { background:var(--xbyte-bg-2); color:var(--xbyte-muted); }

/* PIX (contratação avulsa de módulo) */
.pix-box { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.pix-qr {
  width: 168px; height:168px; flex:0 0 auto; border-radius:12px; padding:10px; background:#fff; border:1px solid var(--xbyte-line);
}
.pix-qr svg, .pix-qr img { width:100%; height:100%; display:block; }
.pix-info { flex:1; min-width: 220px; }
.pix-code {
  font-family: ui-monospace, monospace; font-size:.72rem; color: var(--xbyte-ink-soft);
  background: var(--xbyte-bg-2); border:1px solid var(--xbyte-line); border-radius:8px; padding:.7rem .8rem;
  word-break: break-all; line-height:1.4; max-height: 70px; overflow:hidden;
}
.copy-row { display:flex; gap:.5rem; align-items:center; margin-top:.7rem; }
.copied-toast { position:fixed; bottom:1.6rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--xbyte-navy-deep); color:#fff; padding:.7rem 1.2rem; border-radius:50rem; font-size:.85rem; font-weight:600; z-index:2000; opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; box-shadow:var(--xbyte-shadow-lg); }
.copied-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

[v-cloak]{display:none;}
.jx-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1040;display:none;}
@media(max-width:991px){.jx-overlay{display:block;}}
.jx-link.disabled{opacity:.45;cursor:not-allowed;}
.jx-link.disabled .badge{font-size:.58rem;}


/* ==========================================================================
   Componentes comuns a todos os dashboards (tenant, franchise, WHM…)
   ========================================================================== */
/* ---- Nav / sidebar ---- */
.jx-sidebar{width:264px;flex:none;background:linear-gradient(180deg,#101016,#0A0A0E);border-right:1px solid var(--jatix-line);min-height:100vh;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;}
.jx-brand{display:flex;align-items:center;gap:12px;padding:22px 22px 20px;border-bottom:1px solid var(--jatix-line-soft);}
.jx-brand img{width:36px;}
.jx-brand .bn{font-family:var(--serif);font-size:1.4rem;letter-spacing:.3em;font-weight:500;color:var(--jatix-ivory);}
.jx-nav{padding:14px 14px;flex:1;overflow-y:auto;}
.jx-nav .sec{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:#5A5A64;margin:18px 12px 8px;}
.jx-link{display:flex;align-items:center;gap:13px;padding:10px 14px;border-radius:4px;color:#B5B2AA;cursor:pointer;font-size:.9rem;font-weight:300;transition:.16s;border:1px solid transparent;position:relative;}
.jx-link i{font-size:1.04rem;width:20px;text-align:center;color:#86868F;transition:.16s;}
.jx-link:hover{background:rgba(255,255,255,.035);color:var(--jatix-ivory);}
.jx-link:hover i{color:var(--jatix-gold-soft);}
.jx-link.active{background:rgba(196,154,65,.1);border-color:var(--jatix-line);color:var(--jatix-ivory);}
.jx-link.active i{color:var(--jatix-gold);}
.jx-link.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--jatix-gold-grad);border-radius:2px;}
.jx-link .pill{margin-left:auto;font-size:.64rem;background:rgba(217,138,138,.18);color:#E2A0A0;padding:.1em .5em;border-radius:10px;}
.jx-side-foot{padding:14px;border-top:1px solid var(--jatix-line-soft);}
.jx-logout{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--jatix-line-soft);background:transparent;color:var(--jatix-smoke);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.16s;}
.jx-logout:hover{color:#E2A0A0;border-color:rgba(217,138,138,.4);background:rgba(217,138,138,.08);}


/* ---- Topbar ---- */
.jx-topbar{height:70px;display:flex;align-items:center;gap:18px;padding:0 28px;border-bottom:1px solid var(--jatix-line-soft);background:rgba(12,12,16,.82);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20;}
.jx-context{display:flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--jatix-line);border-radius:30px;background:rgba(196,154,65,.05);font-size:.82rem;cursor:pointer;}
.jx-avatar{width:38px;height:38px;border-radius:50%;background:var(--jatix-gold-grad);color:#1A1206;display:flex;align-items:center;justify-content:center;font-weight:600;font-family:var(--serif);font-size:1rem;flex:none;}
.jx-iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--jatix-line-soft);background:transparent;color:var(--jatix-smoke);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.16s;position:relative;}
.jx-iconbtn:hover{color:var(--jatix-ivory);border-color:var(--jatix-line);}
.jx-iconbtn .dotn{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--jatix-gold);}


/* ---- Action (kebab) dropdown menu ---- */
.jx-menu-wrap{position:relative;display:inline-block;}
.jx-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:50;min-width:184px;background:#1A1A22;border:1px solid var(--jatix-line);border-radius:8px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.55);}
.jx-menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:#CFCCC4;font-family:var(--sans);font-size:.86rem;font-weight:400;padding:9px 12px;border-radius:5px;cursor:pointer;transition:.14s;}
.jx-menu-item i{font-size:.98rem;width:18px;text-align:center;color:var(--jatix-smoke);}
.jx-menu-item:hover{background:rgba(255,255,255,.05);color:var(--jatix-ivory);}
.jx-menu-item:hover i{color:var(--jatix-gold-soft);}
.jx-menu-item.danger{color:#E2A0A0;}
.jx-menu-item.danger i{color:#D98A8A;}
.jx-menu-item.danger:hover{background:rgba(217,138,138,.12);color:#E9B6B6;}
.jx-menu-item.success{color:#8FCBA3;}
.jx-menu-item.success i{color:#73B98A;}
.jx-menu-sep{height:1px;background:var(--jatix-line-soft);margin:5px 4px;}


/* ---- Notifications dropdown ---- */
.jx-notif{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:340px;max-width:90vw;background:#15151C;border:1px solid var(--jatix-line);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden;}
.jx-notif-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--jatix-line-soft);}
.jx-notif-head h6{margin:0;font-family:var(--serif);font-size:1.05rem;color:var(--jatix-ivory);}
.jx-notif-head button{background:none;border:none;color:var(--jatix-gold-soft);font-size:.76rem;cursor:pointer;font-family:var(--sans);}
.jx-notif-list{max-height:330px;overflow-y:auto;}
.jx-notif-item{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.04);transition:.14s;cursor:pointer;}
.jx-notif-item:hover{background:rgba(255,255,255,.03);}
.jx-notif-item.unread{background:rgba(196,154,65,.05);}
.jx-notif-ic{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:1rem;background:rgba(196,154,65,.12);color:var(--jatix-gold);}
.jx-notif-ic.green{background:rgba(115,185,138,.14);color:#8FCBA3;}
.jx-notif-ic.red{background:rgba(217,138,138,.14);color:#E2A0A0;}
.jx-notif-ic.blue{background:rgba(127,169,201,.14);color:#9CBFDA;}
.jx-notif-txt{flex:1;min-width:0;}
.jx-notif-txt p{margin:0;font-size:.86rem;color:#D9D6CE;line-height:1.45;}
.jx-notif-txt .tm{font-size:.72rem;color:var(--jatix-smoke);margin-top:3px;}
.jx-notif-empty{padding:30px 16px;text-align:center;color:var(--jatix-smoke);font-size:.86rem;}
.jx-notif-foot{padding:11px 16px;text-align:center;border-top:1px solid var(--jatix-line-soft);}
.jx-notif-foot a{color:var(--jatix-gold-soft);font-size:.8rem;}


/* ---- Trash toggle / empty states ---- */
.jx-seg{display:inline-flex;border:1px solid var(--jatix-line-soft);border-radius:8px;overflow:hidden;}
.jx-seg button{background:none;border:none;color:var(--jatix-smoke);font-family:var(--sans);font-size:.82rem;padding:8px 15px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:.14s;}
.jx-seg button.on{background:rgba(196,154,65,.12);color:var(--jatix-gold-soft);}
.jx-seg button:hover:not(.on){color:var(--jatix-ivory);}
.jx-seg .cnt{font-size:.7rem;background:rgba(255,255,255,.08);border-radius:10px;padding:0 7px;line-height:1.5;}
.jx-empty{padding:60px 20px;text-align:center;color:var(--jatix-smoke);}
.jx-empty i{font-size:2.4rem;opacity:.5;display:block;margin-bottom:14px;color:var(--jatix-gold);}
.jx-logout{width:30px;height:30px;border-radius:7px;border:1px solid var(--jatix-line-soft);background:transparent;color:var(--jatix-smoke);cursor:pointer;flex:none;transition:.14s;}
.jx-logout:hover{color:#E2A0A0;border-color:rgba(217,138,138,.4);}

/* ---- Textos que o preset pintava de navy → marfim ---- */
.adopt-name,
.app-nav a .pill,
.benefit .b-ico,
.boleto-line,
.card-title,
.cell-strong,
.checkout-steps .cs.active,
.color-field .hex,
.commercial-card .cc-tier,
.compo-mods li,
.config-body .cm-name,
.config-module.is-selected .config-check,
.dash-kpi .k,
.deco-quote,
.diff-item span,
.firm-logo,
.form-control,
.form-select,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.hero-highlight,
.hero-stat .n,
.kard .kt,
.kpi .ico,
.kpi .val,
.module-pick .bi.modico,
.module-pick .nm,
.module-pick.sel .pc,
.pay-method .pm-ico,
.pay-method .pm-name,
.plan-badge.essential,
.ritoo-brand,
.ritoo-brand:hover,
.ritoo-display,
.ritoo-link,
.ritoo-nav .nav-link:hover,
.st-won,
.status.won,
.step-num,
.summary-list li .nm,
.summary-total .amt,
.tenant-card .tc-avatar,
.tenant-cell .nm,
.tenant-name,
.tenant-switch .nm,
.timeline .t,
.tp-app .main .kpi .v,
.tp-hero .btn-mini,
.wizard-steps .ws.active,
.wizard-steps .ws.active .n,
::selection,
h1,
h2,
h3,
h4,
h5,
h6{color:var(--jatix-ivory);}

/* ---- Componentes do preset no tema Jatix ---- */
body.app{background:var(--jatix-onyx);}
.panel,.kpi-card,.profile-card,.mod-tile{background:linear-gradient(165deg,#17171F,#121218);border:1px solid var(--jatix-line-soft);border-radius:6px;box-shadow:none;}
.panel-head{border-bottom:1px solid var(--jatix-line-soft);}
.page-head h1{font-family:var(--serif);font-size:2.1rem;font-weight:500;line-height:1.05;color:var(--jatix-ivory);}
.page-head .sub,.text-muted-2{color:var(--jatix-smoke)!important;}
.ritoo-table{width:100%;color:#D9D6CE;}
.ritoo-table thead th{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--jatix-smoke);border-bottom:1px solid var(--jatix-line)!important;background:transparent;padding:.85rem 1rem;}
.ritoo-table td{border-color:rgba(255,255,255,.05);padding:.9rem 1rem;}
.ritoo-table tbody tr:hover{background:rgba(196,154,65,.05);}
.cell-strong{color:var(--jatix-ivory);font-weight:500;}
.status{border-radius:3px;font-weight:500;letter-spacing:.06em;font-size:.7rem;}
.status.active,.status.new,.status.won{background:rgba(115,185,138,.15);color:#8FCBA3;}
.status.paused,.status.lost{background:rgba(217,138,138,.16);color:#E2A0A0;}
.icon-btn{border:1px solid var(--jatix-line-soft);background:transparent;color:var(--jatix-smoke);}
.icon-btn:hover{color:var(--jatix-ivory);border-color:var(--jatix-line);background:rgba(255,255,255,.03);}
.alert-danger{background:rgba(217,138,138,.1);border-color:rgba(217,138,138,.3);color:#E2A0A0;}
.alert-success{background:rgba(115,185,138,.1);border-color:rgba(115,185,138,.3);color:#8FCBA3;}
.ritoo-chip{background:rgba(255,255,255,.04);border-color:var(--jatix-line-soft);color:#CFCCC4;}
.ritoo-chip.is-active{background:rgba(196,154,65,.12);border-color:var(--jatix-gold);color:var(--jatix-gold-soft);}
.btn-gold{background-image:var(--jatix-gold-grad);color:#1A1206;border:none;}
.btn-close{filter:invert(1) grayscale(1) brightness(1.6);}
.firm-page{background:linear-gradient(180deg,#141419,#0F0F14);}
.toast-app{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:2000;background:#1C1C25;border:1px solid var(--jatix-line);border-radius:10px;padding:13px 20px;display:flex;align-items:center;gap:11px;box-shadow:0 18px 50px rgba(0,0,0,.5);font-size:.9rem;color:var(--jatix-ivory);}
.toast-app .toast-icon{display:flex;color:var(--jatix-gold);}
.toast-app.toast-success .toast-icon{color:#8FCBA3;}
.toast-app.toast-danger .toast-icon{color:#E2A0A0;}
.demo-banner{background:linear-gradient(90deg,#0A0A0E,#16161D);border-bottom:1px solid var(--jatix-line);}
.panel-head .form-control,.panel-head .form-select{width:auto;}
.table .btn-ghost.btn-sm{padding:.3rem .55rem;}

/* ---- Responsivo: menu lateral vira gaveta no celular/tablet (depois das regras do menu) ---- */
@media(max-width:991px){
  .jx-sidebar{position:fixed;left:0;top:0;z-index:1050;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 60px rgba(0,0,0,.6);}
  .jx-sidebar.open{transform:none;}
  .page{padding:22px 18px 50px;}
}

/* KPI dentro de card/surface do tema: cantos do card (6px), como antes. */
.card.kpi,.surface.kpi{border-radius:6px;}