:root{
      --bg:#f3f4f6; /* light background #f3f4f6; */
      --sidebar:#ffffff;
      --header:#ffffff;
      --content: #ffffff;
      --panel:#f9fafb;
      --primary:#8bc53f;
      --accent:#4c4d66; /* primary accent */
      --muted:#6b7280;
      --card:#ffffff;
      --glass: rgba(0,0,0,0.04);
      --text:#111827;
      --radius:0px;
      --filter-icon-selected: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(118%) contrast(119%);

      --shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
      font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }

    html,body{height:100vh;margin:0;background:var(--bg);color:var(--text)}
    .avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,var(--accent),#535b68);display:flex;align-items:center;justify-content:center;font-weight:500;color:white; font-size: small;}
    .app-layout-page {
      
      display: flex;
      flex-direction: column;
      gap:1px;
      padding:0px;
      box-sizing:border-box;      
      height: 100vh;
      
    }

    .app-layout-header {
      background: var(--header);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      height: 50px;
      line-height: 50px;      
      font-size: 20px;
    }

    .app-layout-container {
      display: flex;
      flex: 1; 
      gap: 1px;
      box-sizing: border-box;*/
    }

    .app-layout-sidebar {
      background: var(--sidebar);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      height: 100%;
      display:flex;
    }

    .app-layout-content {
      background: var(--content);
      border-radius: var(--radius);
      flex: 1; 
      box-shadow: var(--shadow);
    }