:root{
  --sb-bg:#ffffff; --sb-text:#111827; --sb-muted:#6b7280;
  --sb-border:#e5e7eb; --sb-hover:#f9fafb; --sb-active:#111827;
  --sb-shadow:0 10px 30px rgba(0,0,0,.06);
  --sb-width:260px; --sb-radius:12px; --sb-gap:12px;
  --topbar-h:72px;

  --card-bg: rgba(255,255,255,.90);
  --card-tint: rgba(0,0,0,.035);
  --card-border: rgba(229,231,235,.85);
  --card-blur: saturate(130%) blur(4px);
}
@media (max-width:640px){ :root{ --topbar-h:64px; } }

/* TOPBAR */
header.topbar-full{
  position:fixed;
  z-index:35;
  background:
    linear-gradient(var(--card-tint), var(--card-tint)),
    var(--card-bg);
  backdrop-filter:var(--card-blur);
  -webkit-backdrop-filter:var(--card-blur);
  top:var(--sb-gap);
  left:var(--sb-gap);
  right:var(--sb-gap);
  border:1px solid var(--card-border);
  border-radius:var(--sb-radius);
  box-shadow:var(--sb-shadow);
}
@media (min-width:1025px){
  header.topbar-full{
    left:calc(var(--sb-width) + var(--sb-gap)*2);
    right:var(--sb-gap);
  }
}
.topbar-inner{ padding:12px 16px; }
@media (min-width:640px){ .topbar-inner{ padding:16px 24px; } }
@media (min-width:1025px){ .topbar-inner{ padding-left:16px; padding-right:16px; } }
.topbar-spacer{ height:calc(var(--topbar-h) + var(--sb-gap)); }
.topbar-shadow{ box-shadow:0 8px 24px rgba(0,0,0,.06); }

/* SIDEBAR */
.ss-sidebar{
  display:flex; flex-direction:column;
  position:sticky; top:var(--sb-gap);
  width:var(--sb-width);
  background:
    linear-gradient(var(--card-tint), var(--card-tint)),
    var(--card-bg);
  backdrop-filter:var(--card-blur);
  -webkit-backdrop-filter:var(--card-blur);
  color:var(--sb-text);
  border:1px solid var(--card-border);
  border-radius:var(--sb-radius);
  box-shadow:var(--sb-shadow);
  padding:12px;
}
.ss-brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 10px; border-bottom:1px dashed var(--sb-border); margin-bottom:8px; }
.ss-logo{ width:38px; height:38px; border:1px solid var(--sb-border); border-radius:10px; display:flex; align-items:center; justify-content:center; background:#fff; overflow:hidden; }
.ss-logo img{ width:100%; height:100%; object-fit:cover; display:block }
.ss-brandname{ font-weight:800; font-size:15px; line-height:1.1 }
.ss-brandsub{ color:var(--sb-muted); font-size:12px; margin-top:2px }

.ss-nav{ list-style:none; margin:8px 0 0; padding:0 }
.ss-item{ margin:3px 0 }
.ss-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:12px; text-decoration:none;
  color:var(--sb-text);
  /* fără contur/încercuire */
  border:1px solid transparent;
  transition:background .16s ease, border-color .16s ease, transform .06s ease;
}
.ss-link:hover{ background:var(--sb-hover); border-color:transparent; transform:translateY(-0.5px); }
.ss-link.active,.ss-link:active{
  /* evidențiere discretă, fără border vizibil */
  border-color:transparent;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  color:var(--sb-active); font-weight:700;
}
.ss-ico{ width:17px; height:17px; flex:0 0 17px; opacity:.85 }
.ss-label{ flex:1 1 auto; font-size:13.5px; color:var(--sb-text); }

/* Drawer mobil (cu spațiu mărit sub topbar) */
.ss-toggle{ display:none }
.ss-fab{
  display:none; position:fixed; left:14px; bottom:14px; z-index:80;
  width:46px; height:46px; border-radius:12px; border:1px solid var(--sb-border);
  background:#fff; box-shadow:var(--sb-shadow); align-items:center; justify-content:center; cursor:pointer;
}
.ss-fab svg{ width:22px; height:22px }

@media (max-width:1024px){
  .ss-sidebar{
    display:flex; flex-direction:column;
    position:fixed; z-index:100;
    top:calc(var(--topbar-h) + var(--sb-gap) * 2);
    left:var(--sb-gap);
    /* puțin mai îngust */
    width:min(82vw, 320px);
    /* mult mai lung – lăsăm ~70px jos pentru buton/gesturi */
    height:calc(100vh - var(--topbar-h) - var(--sb-gap) * 3 - 70px);
    border-radius:var(--sb-radius);
    border:1px solid var(--card-border);
    background:
      linear-gradient(var(--card-tint), var(--card-tint)),
      var(--card-bg);
    backdrop-filter:var(--card-blur);
    -webkit-backdrop-filter:var(--card-blur);
    box-shadow:var(--sb-shadow);
    padding:12px;
    transform:translateX(-115%);
    transition:transform .2s ease;
    overflow:auto; -webkit-overflow-scrolling:touch;
  }

  .ss-overlay{
    content:""; position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.25);
    z-index:34;
    display:none;
  }

  .ss-fab{ display:flex }
  .ss-toggle:checked ~ .ss-sidebar{ transform:translateX(0); }
  .ss-toggle:checked ~ .ss-overlay{ display:block; }
}

/* Desktop */
@media (min-width:1025px){
  .ss-sidebar{
    display:flex; flex-direction:column;
    position:fixed; z-index:36;
    top:var(--sb-gap);
    bottom:var(--sb-gap);
    left:var(--sb-gap);
    height:auto; overflow:auto; -webkit-overflow-scrolling:touch;
    /* meniu puțin diferit ca nuanță față de pagină */
    background:
      linear-gradient(var(--card-tint), var(--card-tint)),
      rgba(255,255,255,.98);
    border-color:rgba(229,231,235,.95);
  }
  body{
    padding-left:calc(var(--sb-width) + var(--sb-gap)*2);
    padding-right:var(--sb-gap);
  }
}

.ss-flex-spacer{ flex:1 1 auto }
.ss-bottom{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--sb-border) }

/* Mobile fine-tune */
@media (max-width:640px){
  .ss-brand{ padding:4px 6px; margin-bottom:4px; }
  .ss-logo{ width:28px; height:28px; }
  .ss-brandname{ display:none; }
  .ss-brandsub{ display:none; }
  .ss-item{ margin:2px 0; }
  .ss-link{ padding:7px 9px; }
  .ss-ico{ width:16px; height:16px; flex:0 0 16px; }
}

/* =========================
   PATCH: full-width content
   ========================= */
@media (min-width:1025px){
  /* Forțează conținutul principal să NU fie centrat / limitat */
  body > .flex > :not(.ss-sidebar) main{
    max-width:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:var(--sb-gap) !important;
    padding-right:var(--sb-gap) !important;
  }
  /* Întinde grila din pagini ca profil.php pe toată lățimea */
  body > .flex > :not(.ss-sidebar) main > .grid{
    justify-items:stretch !important;
  }
}