/* ══════════════════════════════════════════════════════════════
   layout.css — Estrutura: sidebar, topbar, main, grids, mobile
   Edite aqui: largura do sidebar, padding da content-area,
               breakpoints, grids de layout principal
   ══════════════════════════════════════════════════════════════ */

/* ── App shell ───────────────────────────────────────────────── */
[data-sb="collapsed"]{--sidebar-w:52px}
.main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .3s cubic-bezier(.4,0,.2,1)}
.content-area{padding:24px 28px 80px;flex:1}
.content-area>*{animation:fadeUp .28s cubic-bezier(.16,1,.3,1) both}

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar{padding:16px 28px 16px;flex-shrink:0;border-bottom:1px solid var(--border)}
.topbar-row{display:flex;align-items:center;justify-content:space-between}
.topbar-title{font-size:18px;font-weight:700;font-family:'MosvitaX','Mosvita',sans-serif;letter-spacing:.01em;color:var(--text1);line-height:1.2}
.topbar-greeting{font-size:11px;font-weight:500;color:var(--text3);margin:0;line-height:1;margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:8px}
.credits-chip{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;background:var(--accent-bg);border:1px solid var(--accent-bd);color:var(--accent2);cursor:default;user-select:none;flex-shrink:0}
.credits-chip.credits-low{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:#ef4444}
.topbar-menu-btn{display:none;width:32px;height:32px;border:none;background:transparent;color:var(--text2);cursor:pointer;align-items:center;justify-content:center;border-radius:7px;flex-shrink:0;transition:background .12s,color .12s}
.topbar-menu-btn:hover{background:var(--card2);color:var(--text1)}
.topbar-back-btn{display:flex;width:34px;height:34px;border:1px solid var(--border2);background:var(--card);color:var(--text2);cursor:pointer;align-items:center;justify-content:center;border-radius:9px;flex-shrink:0;transition:background .12s,color .12s,border-color .12s}
.topbar-back-btn:hover{background:var(--card2);color:var(--text1);border-color:var(--accent-bd)}
.topbar-theme-btn{width:32px;height:32px;border:none;background:#ededed;color:var(--text1);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .2s,color .16s}
.topbar-theme-btn:hover{background:#e0e0e0;color:var(--text1)}
[data-theme="dark"] .topbar-theme-btn{background:rgba(255,255,255,.12);color:#fff}
[data-theme="dark"] .topbar-theme-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.topbar-avatar{width:32px;height:32px;background:#ededed;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .14s;color:var(--text1)}
.topbar-avatar:hover{background:#e0e0e0}
[data-theme="dark"] .topbar-avatar{background:rgba(255,255,255,.12);color:#fff}
[data-theme="dark"] .topbar-avatar:hover{background:rgba(255,255,255,.2);color:#fff}
.topbar-actions{display:none}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:220px;background:var(--sb-bg);border-right:1px solid var(--sb-border);display:flex;flex-direction:column;z-index:100;transition:width .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);overflow:visible}
.sidebar.sb-collapsed{width:52px}

/* Logo area */
.sb-logo{padding:14px 16px 13px;border-bottom:1px solid var(--sb-div);flex-shrink:0;display:flex;align-items:center;justify-content:flex-start;position:relative;gap:10px;min-height:66px;overflow:hidden}
.sb-logo-full{display:inline-flex;align-items:center;height:52px;width:auto;max-width:168px;flex-shrink:0;min-width:0}
.sb-logo-full svg{height:100%;width:auto;max-width:168px;display:block}
.sidebar.sb-collapsed .sb-logo-full{display:none}
.sidebar.sb-collapsed .sb-logo{justify-content:center;padding:12px 0;overflow:visible}

/* Collapse arrow */
.sb-arrow-collapse{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;position:absolute;right:10px;background:transparent;border:1px solid var(--sb-border);color:var(--sb-text2);border-radius:6px;cursor:pointer;transition:background .14s,color .14s}
.sb-arrow-collapse:hover{background:var(--sb-hover);color:var(--sb-text)}
.sidebar.sb-collapsed .sb-arrow-collapse{display:none}

/* Mobile close button */
.sb-close-mobile{display:none;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;position:absolute;right:10px;background:transparent;border:1px solid var(--sb-border);color:var(--sb-text2);border-radius:6px;cursor:pointer;transition:background .14s,color .14s}
.sb-close-mobile:hover{background:var(--sb-hover);color:var(--sb-text)}

/* Symbol button (collapsed mode) */
.sb-symbol-btn{display:none;position:relative;background:transparent;border:none;cursor:pointer;padding:0;width:36px;height:36px;border-radius:10px;overflow:hidden;flex-shrink:0}
.sidebar.sb-collapsed .sb-symbol-btn{display:flex;align-items:center;justify-content:center}
.sb-logo-symbol{width:36px;height:36px;display:block;transition:opacity .2s}
.sb-logo-symbol svg{width:100%;height:100%;display:block}
.sb-symbol-btn:hover .sb-logo-symbol{opacity:0}
.sb-expand-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--sb-hover);backdrop-filter:blur(2px);color:var(--sb-text);border-radius:10px;border:1px solid var(--sb-border);opacity:0;transition:opacity .2s}
.sb-symbol-btn:hover .sb-expand-hint{opacity:1}

/* Nav items */
.sb-nav{flex:1;padding:8px 6px;overflow-y:auto;overflow-x:clip;display:flex;flex-direction:column;gap:1px}
.sidebar.sb-collapsed .sb-nav{overflow:visible;padding:8px 0}
.sb-nav svg,.sb-bottom .sb-item svg{shape-rendering:geometricPrecision}
.sb-group-label{padding:14px 10px 4px;font-size:10px;font-weight:600;color:var(--sb-text3);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;margin-top:2px}
.sb-group-label:not(:first-child){padding-top:12px;margin-top:6px}
.sidebar.sb-collapsed .sb-group-label{opacity:0;height:0;padding:0;margin:0;border:none;overflow:hidden}
.sb-item{display:flex;align-items:center;gap:9px;padding:9px 10px 9px 12px;cursor:pointer;border:none;background:transparent;color:var(--sb-text2);font-size:13px;font-weight:400;width:100%;text-align:left;border-radius:8px;transition:background .12s,color .12s;font-family:inherit;position:relative;white-space:nowrap}
.sb-item:hover{background:var(--sb-hover);color:var(--sb-text)}
.sb-item.active{background:var(--sb-active-bg);color:var(--sb-active-c);font-weight:600}
.sb-item.sb-soon{opacity:.38;cursor:default}
.sb-item>span:first-of-type{overflow:hidden;text-overflow:ellipsis;flex:1}
.sb-item-badge{margin-left:auto;font-size:10px;font-weight:700;padding:2px 7px;background:var(--accent-bg);border:1px solid var(--accent-bd);color:var(--accent2);border-radius:10px;flex-shrink:0}
.sb-soon-tag{margin-left:auto;font-size:9px;font-weight:600;padding:2px 7px;background:var(--gold-bg);border:1px solid var(--gold-bd);color:var(--gold);border-radius:10px;flex-shrink:0}
.sidebar.sb-collapsed .sb-item{width:36px;height:36px;padding:0;justify-content:center;align-items:center;border-left:none;border-right:none;border-radius:9px;margin:1px auto;display:flex}
.sidebar.sb-collapsed .sb-item.active{background:rgba(255,255,255,.07)}
.sidebar.sb-collapsed .sb-item>span:first-of-type,
.sidebar.sb-collapsed .sb-item-badge,
.sidebar.sb-collapsed .sb-item-new,
.sidebar.sb-collapsed .sb-soon-tag{display:none}
.sidebar.sb-collapsed .sb-item::after{content:attr(data-label);position:fixed;left:60px;background:var(--card3);color:var(--text1);font-size:12px;font-weight:500;padding:5px 10px;border-radius:7px;border:1px solid var(--border2);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .14s;z-index:9999;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.sidebar.sb-collapsed .sb-item:hover::after{opacity:1}
.sb-div{display:none}

/* Bottom section */
.sb-bottom{border-top:1px solid var(--sb-div);padding:8px 6px 10px;flex-shrink:0;display:flex;flex-direction:column;gap:1px}
.sb-user{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;margin-top:2px;transition:background .12s}
.sb-user:hover{background:var(--sb-hover)}
.sidebar.sb-collapsed .sb-user{display:none!important}
.sb-avatar{width:28px;height:28px;flex-shrink:0;background:var(--card3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;border-radius:50%}
.sb-uname{font-size:12px;font-weight:600;color:var(--sb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-uemail{font-size:10px;color:var(--sb-text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-profile-btn{display:none!important}
.sidebar.sb-collapsed .sb-profile-btn{display:flex!important;width:36px;height:36px;padding:0;justify-content:center;align-items:center;border-radius:9px;margin:1px auto}
/* Sair button */
.sb-logout-btn{color:#f87171!important}
.sb-logout-btn:hover{background:rgba(248,113,113,.10)!important;color:#f87171!important}
.sidebar.sb-collapsed .sb-logout-btn{width:36px;height:36px;padding:0;justify-content:center;align-items:center;border-radius:9px;margin:1px auto;display:flex}
.sidebar.sb-collapsed .sb-logout-btn span{display:none}

/* ── Ferramentas submenu ─────────────────────────────────────── */
.sb-item-expand{justify-content:flex-start}
.sb-chevron{margin-left:auto;flex-shrink:0;opacity:.5;transition:transform .2s,opacity .2s}
.sb-chevron.open{transform:rotate(180deg);opacity:.8}
.sb-item-expand:hover .sb-chevron,.sb-item-expand.active .sb-chevron{opacity:.9}
.sidebar.sb-collapsed .sb-chevron{display:none}
.sb-sub{overflow:hidden;max-height:0;transition:max-height .22s ease;flex-shrink:0}
.sb-sub.sb-sub-open{max-height:400px}
.sidebar.sb-collapsed .sb-sub{display:none}
.sb-sub-item{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 36px;cursor:pointer;border:none;background:transparent;color:var(--sb-text3);font-size:12px;font-weight:400;width:100%;text-align:left;border-radius:7px;transition:background .12s,color .12s;font-family:inherit;white-space:nowrap}
.sb-sub-item:hover{background:var(--sb-hover);color:var(--sb-text)}
.sb-sub-item.active{color:var(--accent2);font-weight:600;background:var(--accent-bg)}

/* ── Grids ───────────────────────────────────────────────────── */
.gg{display:grid;gap:14px}
.gg-col4{grid-template-columns:repeat(4,1fr)}
.gg-col3{grid-template-columns:repeat(3,1fr)}
.gg-col2{grid-template-columns:1fr 1fr}
.offers-grid{padding:8px;margin:-8px}
.dash-layout{display:grid;grid-template-columns:1fr 220px;gap:20px;align-items:start}
.dash-main{display:flex;flex-direction:column;gap:18px}
.dash-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:80px}
.panel-grid{margin-bottom:0}
.vp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* ── Mobile overlay ──────────────────────────────────────────── */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;opacity:0;transition:opacity .3s ease}
.sb-overlay.visible{opacity:1}
.mob-btn{display:none}

/* ── Responsive breakpoints ──────────────────────────────────── */
@media(max-width:1200px){
  .gg-col4{grid-template-columns:repeat(3,1fr)}
  .tool-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1024px){
  .dash-layout{grid-template-columns:1fr}
  .dash-side{display:grid;grid-template-columns:repeat(3,1fr);position:static}
}
@media(max-width:900px){
  .gg-col4{grid-template-columns:repeat(2,1fr)}
  .gg-col3{grid-template-columns:repeat(2,1fr)}
  .vp-grid{grid-template-columns:repeat(2,1fr)}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
  .dash-side{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .topbar{padding:12px 16px 12px}
  .content-area{padding:16px 16px 80px}
  .gg-col4,.gg-col3,.gg-col2{grid-template-columns:1fr}
  .vp-grid{grid-template-columns:1fr}
  .tool-grid{grid-template-columns:1fr 1fr}
  .dash-side{grid-template-columns:1fr 1fr}
  .topbar-title{display:none}
  .topbar-menu-btn{display:flex}
  .sidebar{transform:translateX(-220px);width:220px!important;box-shadow:none}
  .sidebar.sb-open{transform:translateX(0);box-shadow:4px 0 32px rgba(0,0,0,.25)}
  .sidebar.sb-collapsed{transform:translateX(-220px);width:220px!important}
  .sidebar.sb-open.sb-collapsed{transform:translateX(0)}
  .main{margin-left:0!important}
  .sb-overlay{display:block}
  .mob-btn{display:none}
  .sb-arrow-collapse{display:none!important}
  .sb-close-mobile{display:flex}
  .profile-drop.drop-topbar{top:56px;right:12px;left:12px;width:auto}
  .profile-drop.drop-sidebar{bottom:72px;left:8px;right:8px;width:auto}
  .notif-banner{margin:12px 16px 0;padding:12px 14px;gap:10px;flex-wrap:wrap}
  .notif-body{display:none}
  .dash-layout{gap:14px}
  .credits-chip{font-size:10px;padding:3px 8px}
}
@media(max-width:480px){
  .topbar{padding:10px 12px}
  .content-area{padding:12px 12px 80px}
  .tool-grid{grid-template-columns:1fr}
  .dash-side{grid-template-columns:1fr}
  .f-row{gap:4px}
  .f-btn{font-size:11px;padding:4px 10px}
}

/* ── Sidebar bottom: credits bar ─────────────────────────────── */
.sb-credits{padding:6px 10px 4px;flex-shrink:0}
.sb-credits-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.sb-credits-label{font-size:10px;font-weight:600;color:var(--sb-text3);text-transform:uppercase;letter-spacing:.06em}
.sb-credits-val{font-size:11px;font-weight:700;color:var(--sb-text2)}
.sb-credits-val.low{color:#f87171}
.sb-credits-track{height:4px;background:var(--sb-hover);border-radius:3px;overflow:hidden}
.sb-credits-fill{height:100%;border-radius:3px;transition:width .3s ease}
.sidebar.sb-collapsed .sb-credits{display:none}