/* ==========================================================================
   Ritoo — Shared app shell (dashboard.html + whm.html)
   App chrome: sidebar, topbar, views. Builds on themed Bootstrap.
   ========================================================================== */
:root { --rit-sidebar-w: 256px; --rit-topbar-h: 66px; }

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

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

/* Sidebar */
.app-sidebar {
  background: var(--rit-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(--rit-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(--rit-gold); }
.app-brand .name { font-family: var(--rit-font-serif); font-size:1.3rem; font-weight:600; }
.app-brand .ctx { font-size:.62rem; color: var(--rit-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(--rit-gold-bright); opacity:1; }
.app-nav a .pill { margin-left:auto; font-size:.66rem; font-weight:700; background: var(--rit-gold); color:var(--rit-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(--rit-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(--rit-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(--rit-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(--rit-topbar-h);
  background: rgba(251,250,247,.85);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rit-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(--rit-line); background:var(--rit-surface); border-radius:10px; padding:.4rem .7rem; cursor:pointer; }
.tenant-switch .av { width:28px;height:28px;border-radius:7px; background:var(--rit-navy); color:var(--rit-gold-bright); display:flex;align-items:center;justify-content:center; font-family:var(--rit-font-serif); font-weight:700; font-size:.82rem; }
.tenant-switch .nm { font-weight:700; font-size:.85rem; color:var(--rit-navy); line-height:1; }
.tenant-switch .dm { font-size:.68rem; color: var(--rit-muted); }

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

/* Page header */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.page-head h1 { font-size: 1.9rem; margin:0; }
.page-head .sub { color: var(--rit-muted); font-size:.92rem; margin-top:.3rem; }

/* Views */
.view { display:none; }
.view.active { display:block; animation: viewIn .4s var(--rit-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(--rit-surface); border:1px solid var(--rit-line); border-radius:14px; padding:1.3rem 1.4rem; box-shadow:var(--rit-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(--rit-bg-2); color:var(--rit-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(--rit-font-serif); font-size:2rem; font-weight:600; color:var(--rit-navy); margin-top:.8rem; line-height:1; }
.kpi .lbl { font-size:.82rem; color: var(--rit-muted); margin-top:.3rem; }

/* Generic panel */
.panel { background:var(--rit-surface); border:1px solid var(--rit-line); border-radius:14px; box-shadow:var(--rit-shadow-sm); }
.panel-head { padding:1.1rem 1.4rem; border-bottom:1px solid var(--rit-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 */
.rit-table { width:100%; border-collapse:collapse; }
.rit-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--rit-muted); font-weight:700; padding:.7rem 1rem; border-bottom:1px solid var(--rit-line); }
.rit-table td { padding:.85rem 1rem; border-bottom:1px solid var(--rit-line); font-size:.9rem; color:var(--rit-ink-soft); vertical-align:middle; }
.rit-table tbody tr { transition: background-color .15s; }
.rit-table tbody tr:hover { background: var(--rit-bg-2); }
.rit-table .av { width:32px;height:32px;border-radius:50%; background:var(--rit-navy); color:var(--rit-gold-bright); display:inline-flex;align-items:center;justify-content:center; font-size:.74rem; font-weight:700; }
.cell-strong { font-weight:700; color: var(--rit-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(--rit-gold-soft); color: var(--rit-gold-ink); }
.status.won { background: rgba(15,34,51,.08); color: var(--rit-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(--rit-muted); }

/* Kanban */
.kanban { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; align-items:start; }
.kanban-col { background:var(--rit-bg-2); border:1px solid var(--rit-line); border-radius:14px; padding:.9rem; }
.kanban-col h4 { font-family:var(--rit-font-sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--rit-ink-soft); font-weight:700; display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.kanban-col h4 .count { background:var(--rit-surface); border:1px solid var(--rit-line); border-radius:50rem; padding:.04rem .5rem; font-size:.72rem; color:var(--rit-muted); }
.kard { background:var(--rit-surface); border:1px solid var(--rit-line); border-radius:11px; padding:.85rem; margin-bottom:.65rem; box-shadow:var(--rit-shadow-sm); cursor:grab; transition: box-shadow .2s, transform .2s; }
.kard:hover { box-shadow:var(--rit-shadow); transform: translateY(-2px); }
.kard.dragging { opacity:.4; }
.kanban-col.drop-on { background: var(--rit-gold-soft); }
.kard-del { background:none; border:0; color:var(--rit-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(--rit-line-strong); color:var(--rit-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(--rit-gold); color:var(--rit-gold-ink); background:var(--rit-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(--rit-font-sans); font-size:.74rem; font-weight:600; color:var(--rit-ink-soft); border:1px solid var(--rit-line-strong); border-radius:7px; padding:.25rem .5rem; background:var(--rit-surface); cursor:pointer; }
.mini-select:focus { outline:none; border-color:var(--rit-gold); }
.kard .kt { font-weight:700; color:var(--rit-navy); font-size:.9rem; }
.kard .ka { font-size:.78rem; color:var(--rit-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(--rit-gold-ink); }

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

/* Switch */
.form-switch .form-check-input { width:2.6em; height:1.4em; cursor:pointer; }
.form-check-input:checked { background-color: var(--rit-green); border-color: var(--rit-green); }

/* 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(--rit-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(--rit-gold); border:2px solid var(--rit-surface); }
.timeline .t { font-size:.88rem; color:var(--rit-ink); font-weight:600; }
.timeline .m { font-size:.78rem; color:var(--rit-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(--rit-navy), var(--rit-navy-700)); border-radius:6px 6px 0 0; position:relative; min-height:6px; transition: height .6s var(--rit-ease); }
.barchart .bar.accent { background: linear-gradient(180deg, var(--rit-gold), var(--rit-gold-ink)); }
.barchart .bar span { position:absolute; bottom:-1.5rem; left:0; right:0; text-align:center; font-size:.68rem; color:var(--rit-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(--rit-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(--rit-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(--rit-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(--rit-sidebar-w); transform:translateX(-100%); transition:transform .3s var(--rit-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(--rit-line); border-radius:12px; padding:.6rem; background:var(--rit-surface); transition:border-color .2s, box-shadow .2s, transform .2s; width:120px; }
.theme-preset:hover { border-color:var(--rit-line-strong); box-shadow:var(--rit-shadow-sm); transform:translateY(-2px); }
.theme-preset.sel { border-color:var(--rit-ink); box-shadow:0 0 0 2px var(--rit-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(--rit-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(--rit-ink-soft); }
.color-field .picker { display:flex; align-items:center; gap:.6rem; border:1px solid var(--rit-line-strong); border-radius:9px; padding:.35rem .5rem .35rem .4rem; background:var(--rit-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(--rit-line); border-radius:7px; }
.color-field .hex { font-family:ui-monospace,monospace; font-size:.82rem; font-weight:600; color:var(--rit-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(--rit-line); border-radius:12px; overflow:hidden; box-shadow:var(--rit-shadow-sm); background:var(--rit-surface); }
.tp-urlbar { display:flex; align-items:center; gap:.4rem; padding:.5rem .7rem; background:var(--rit-bg-2); border-bottom:1px solid var(--rit-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(--rit-muted); font-family:ui-monospace,monospace; }
.tp-hero { background:var(--rit-navy); color:#fff; padding:1rem 1.1rem 1.2rem; }
.tp-hero .brand { font-family:var(--rit-font-serif); font-size:1rem; font-weight:600; display:flex; align-items:center; gap:.4rem; }
.tp-hero .brand .seg { color:var(--rit-gold-bright); }
.tp-hero h6 { color:#fff; font-family:var(--rit-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(--rit-gold); color:var(--rit-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(--rit-gold-ink); border:1px solid var(--rit-gold-soft); background:var(--rit-gold-soft); border-radius:50rem; padding:.18rem .5rem; }
.tp-body .line { height:7px; border-radius:50rem; background:var(--rit-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(--rit-line); border-radius:12px; overflow:hidden; display:flex; box-shadow:var(--rit-shadow-sm); background:var(--rit-surface); }
.tp-app .side { width:58px; background:var(--rit-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(--rit-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(--rit-gold-bright); width:80%; }
.tp-app .main { flex:1; padding:.7rem; }
.tp-app .main .h { height:9px; width:60%; border-radius:50rem; background:var(--rit-navy); }
.tp-app .main .kpi { margin-top:.6rem; border:1px solid var(--rit-line); border-radius:7px; padding:.5rem; }
.tp-app .main .kpi .v { font-family:var(--rit-font-serif); font-weight:700; color:var(--rit-navy); font-size:1rem; line-height:1; }
.tp-app .main .kpi .l { height:5px; width:70%; border-radius:50rem; background:var(--rit-bg-2); margin-top:.35rem; }
.tp-app .main .btnp { margin-top:.6rem; height:14px; border-radius:5px; background:var(--rit-navy); }

/* Minimal firm-page preview styles (used by the "Página premium" view) */
.rit-window { background:var(--rit-surface); border:1px solid var(--rit-line); border-radius:14px; box-shadow:var(--rit-shadow); overflow:hidden; }
.firm-page { background:linear-gradient(180deg,#fff,var(--rit-bg-2)); }
.firm-topbar { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.2rem; border-bottom:1px solid var(--rit-line); }
.firm-logo { font-family:var(--rit-font-serif); font-weight:600; color:var(--rit-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(--rit-surface); border:1px solid var(--rit-line); border-radius:14px; padding:1.4rem; box-shadow:var(--rit-shadow-sm); height:100%; display:flex; flex-direction:column; transition:box-shadow .25s var(--rit-ease), transform .25s var(--rit-ease); }
.profile-card:hover { box-shadow:var(--rit-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(--rit-navy); color:var(--rit-gold-bright); display:flex;align-items:center;justify-content:center; font-family:var(--rit-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(--rit-line); }
.area-chips { display:flex; gap:.35rem; flex-wrap:wrap; }
.area-chip-sm { font-size:.7rem; font-weight:600; color:var(--rit-gold-ink); background:var(--rit-gold-soft); border-radius:50rem; padding:.2rem .6rem; }
.area-ico { width:46px;height:46px;border-radius:12px; background:var(--rit-navy); color:var(--rit-gold-bright); display:flex;align-items:center;justify-content:center; font-size:1.2rem; }
.profile-card.is-muted .area-ico { background:var(--rit-bg-2); color:var(--rit-muted); }